Improving ‘time to first load’ and generating critical CSS for Drupal and WordPress sites

This document is a work in progress….

One thing that we want to fix is ‘time to first load’. As you probably know, people are recommending to put as little in the way of initial loading as possible, and zero external requests. This means no blocking JS in head, and as little CSS as possible, placed inline instead of in an external file – the so-called ‘critical.css’

Our situation was very much the opposite. Most of our sites are on Drupal or WordPress, with quite a few plugins, which generate a lot of CSS and JS. For wordpress, we often use a theme called Divi, which is quite powerful, but it generates a LOT of css and js, and a lot of it we don’t need.

We started by working on CSS, and then moving onto JS.


  • Using a web inspector, like Firebug or Safari’s developer tools, take a look at your <head> element. Copy all of the internal CSS files and inline CSS you see there into a single stylesheet (External css, like webfont importing, leave for the moment). If a css file has an @import statement from another file, you have to replace the @import statement with the contents of that file. For example – our WordPress main theme style.css has an import statement from Divi style.css. You will now have a VERY big single css file – lets call it style1.css
  • There are some tools you can use to make the CSS file a bit more manageable. I would recommend first to use a tool like CSS Compressor with Moderate settings so that the file is still readable.
    Then, as much as you can, you can set about removing unused css and combining ‘duplicate’ and overriding css statements that were formerly in different files. You dont need to aim for absolute precision here; if you are not sure about some css, you can just leave for later. This applies especially if you are not familiar with the theme. There are some command line tools and paid online tools that can help you with removing unused and duplicate CSS.
  • Now that you have a single file, you can use a free critical css generator, which will generate some critical css. You should save this into a seperate file called critical.css
  • Then you remove all of the css out of style1.css that is already inside critical.css. Diffmerge for Mac helped with this: you can export a ‘diff’ which unfortunately contains some extra characters but you can remove with search/replace. This file is now your new style1.css.

Now we want to put the contents of critical.css inline in the header, and place style1.css in the footer just before all the footer js, and remove all of the other CSS.

  • In WordPress, you can disable all theme CSS in your function.php file: See this solution on stack overflow (Note: we may need to modify this for logged-in users). You can then override the header.php file in your theme, and add a php include statement for the critical.css file just above wp_head() to load the contents directly
    <style type="text/css"><?php include get_stylesheet_directory() . '/.critical.css'; ?></style>
    Note that if you have an external CSS like webfont, for now it is good to just place there manually.
    Then you should place the style css file manually in your footer.php file just above wp_footer. It is probably best to rename this to style.css and make it your theme style file, complete with theme info on top.
    <link rel="stylesheet" href="<?php include get_stylesheet_directory() ?>./style.css" type="text/css" media="all">
  • In Drupal 7 you can also disable css in your theme template.php file, and load certain css for admins

/* Unset all the base drupal stylesheets */
function themename_css_alter(&$css) {
global $user;
$admincss = array(
drupal_get_path('module', 'user') . '/user.css',
drupal_get_path('module', 'contextual') . '/contextual.css',
drupal_get_path('module', 'ckeditor') . '/css/ckeditor.css',
drupal_get_path('module', 'admin_menu') . '/admin_menu.css',
drupal_get_path('module', 'admin_menu') . '/admin_menu.uid1.css',
drupal_get_path('module', 'domain_admin') . '/domain_admin.css'
$temp = $css;
foreach($temp as $key => $data) {
if(!$user->uid || !in_array($key, $admincss)) {
Then you can override html.tpl.php and paste the critical css file above the $styles variable.

<style><?php include drupal_get_path('theme', 'yourtheme') . '/critical.css'; ?></style>

and the style css file at the bottom above the $page_bottom variable

<link rel="stylesheet" href="<?php include drupal_get_path('theme', 'yourtheme') ./style.css" type="text/css" media="all">

Cleaning up icon fonts

Some themes (eg wordpress Divi) has its own icon font or import a common font, which is pretty big! We should use fontello to create our own much smaller font based on the icons you actually use and import this one instead.


more to come…

Evaluation of Blogger Software

If you are looking for a blog for your website, or just want a blog, the 2 most popular choices are:
Wordpress and Blogger.

Advantages of Blogger

  • Owned by Google; the biggest blog software, and it is Free
  • Easy to install and add to your exiting website. At Blog set up choose – "Advanced Set UP". You will need your FTP password e.t.c.
  • Can also be used as a standalone and hosted on Blogger’s servers, e.g.
  • Easy to use and customise template.
  • Indexed very quickly by Google (not too surprising, since it is owned by Google. This is good for SEO
  • New features of www2.blogger include: blog labels. There are also hacks available, such as, teaser blog pages.
  • Google support group

Disadvantages of Blogger

  • With new blogger software hosted on external sites, I have frequently had blog publishing problems. (Sometimes takes a long time to publish, and then with errors – can be avoided by not having lables) Hopefully, these are problems which will be overcome soon, but it makes me reluctant to start more blogger blogs.

Other Blog Software to Consider:

WordPress – Good reviews, more features and plugins than blogger. Reliable software.

  • Example of WordPress Blog by Vasudevaservice CSS expert – John-Paul Gillespie
  • Free but does need installation, make sure your web host supports it. Not all do, some make it easy.

Type pad – Premier blog software, does cost though.

Programs to help you build your website from scratch

This is actually an email response I sent to a friend who was asking about this sort of thing. It kind of complements Richard’s blog post below.

There are a number of programs out there to make the life of people designing websites much easier. Choosing the right one depends on what kind of website you want – so you need to ak yourself the following questions:

1. Are you designing a completely new site, or are you putting a new
design to an already existing site?

2. Is your site big (greater than 30 pages) or small (less than 30

3. Do you see the site as a project that will take a finite amount of
time (15-20 pages and then stop) or will it be an ongoing project and
pages will be added as time goes on?

For small, finite sites we recommend using a very easy to use design program called Dreamweaver, which is expensive. There are also free equivalents of Dreamweaver which Richard mentioned in his blog post.

However, these programs can be a little inefficient if you want to add
lots and lots of content very quickly – there are specialised programs called Content Management Systems that handle this much better – for
example the Plone program used to manage content on this very site (there are also other programs like WordPress (used primarily for personal sites and blogs), Alfresco and Drupal. The only problem is sites using Content Management Systems often start out looking not quite the way you envisioned them (and perhaps even a little ugly). With some technical expertise you can also make these sites as beautiful as Dreamwaever sites, but it will take longer to learn, especially if the people you have in mind to work on the project have no computer experience.

HTML Editors

If you are building a website from scratch you will want a HTML editor to help create webpages.

Some of the best HTML editors.

  1. Dreamweaver – The market Leader but quite expensive. Dreamweaver at Adobe
  2. Microsoft Front Page – One of the most popular editors, it is now being superceded by Microsoft Expression Available for trial download.

Free HTML Editors

  1. NVu – OPen source html editor How to build a website using NVu
  2. Mozilla Composer

These HTML editors will enable you to upload your webpages using FTP transfer. However for optimal FTP transfer you may wish to make use of a dedicated FTP programme.

Cute FTP

Cheap Hosting and Site wizard – cheap webhosting with editor built in.