No Jargon, No Techno Babble. Just Plain English Web Sites That Work!

PageSpeed

1. Optimize Images

google pagespeed insights optimize images

Google PageSpeed Insights is telling us we need to optimize our images. To fix this warning, we simply install and run the Optimus Image Optimizer plugin which is developed and maintained by KeyCDN. This plugin focuses on smart compression, which means it uses a combination of both lossless and lossy compression techniques. It has a bulk-optimization feature so after you first install it you can compress your entire media library with one click. And from there on out it will auto-compress your images upon upload. We are also using the plugin because it converts our images to .webp. This allows for even faster download times!

pagespeed insights optimize images

2. Minify Javascript and CSS

minify javascript css html

Google PageSpeed Insights is now telling us we need to minify our JavaScript, CSS, and HTML. To fix this problem we install the free Autoptimize plugin. In the plugin’s settings you will want to check the following:

  1. Optimize HTML Code
  2. Optimize JavaScript Code
  3. Optimize CSS Code

We also are using KeyCDN’s free WordPress Cache Enabler plugin to deliver the .webp images we converted earlier to visitors in Chrome browsers for faster download times. In the settings make sure to check “Create an additional cached version for WebP image support.”

google pagespeed insights minification

3. Render-Blocking Resources Above the Fold

pagespeed insights render blocking resources

Now Google PageSpeed Insights is telling us that we have JavaScript and CSS above the fold. There are three commons scenarios most people run into here, and that is your JavaScript/CSS files, Font Awesome, and Google Fonts. Fonts are render-blocking as we discussed in our case study on web font performance.

Files

The first issue we have to deal with is all of our Javascript and CSS files that are above the fold, making them render-blocking. To fix this we actually go back into the Autoptimize plugin we installed earlier and save the following settings.

  1. Under JavaScript Options uncheck “Force JavaScript in <head>?”
  2. Under CSS Options check “Inline all CSS?”

Font Awesome

KeyCDN sponsors the free Font Awesome CDN project where you can grab the latest version and integrate it into your site. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. So we take the following code and we move it down to our footer, right before the </body> tag.

<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">

Note: Doing this will result in FOUT, which is a flash of unstyled text.

Google Fonts

pagespeed insights google fonts

The third issue is with our Google Fonts. In the WP Twenty Fifteen theme they include the Noto Serif font. By default WordPress uses a hook called wp_enqueue_scripts which loads the font in your header. This automatically results in it becoming render-blocking. To fix this we install a free plugin called Disable Google Fonts. If you are using a custom theme this might vary slightly, or you can ask your theme developer how to disable Google fonts.

We then include our Google font with the following code in our footer, right before the </body> tag.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Note: Doing this will result in FOIT, which is a flash of invisible text.

You could also load your Google fonts asynchronously by using Google’s Web Font Loader. Simply place the following code below in your footer.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
pagespeed insights no render-blocking

4. Leverage Browser Caching

pagespeed insights leverage browser caching

Files

Now we are receiving a warning about leveraging browser caching. We are using KeyCDN, deployed with our free WordPress CDN Enabler plugin, and this means that any assets delivered from the CDN already have cache-control headers. However with the Twenty Fifteen theme there was one file which wasn’t getting delivered with the CDN. To fix this we simply add cache-control headers to our origin server by adding the following code to our .htaccess file.

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

And here is the code if you are on a Nginx server.

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics

pagespeed insights google analytics

Another issue we run into is with Google Analytics. Funny thing is that this is a warning from their own script. http://www.google-analytics.com/analytics.js. The problem occurs because their script has a cache lifetime of only 2 hours. Google has already said that they won’t fix this. Which leaves almost everyone running analytics with a warning that they cannot fix. The most frustrating part of this is probably for people that deal with clients asking for Google PageSpeed Insights improvements. Telling a client you can’t fix something because Google won’t let you in their own tool sounds a little crazy.

A solution would be to host a local version of analytics.js. Google doesn’t recommend this but if you setup a script to grab the latest version it probably wouldn’t be an issue. There is free WordPress plugin called Host Analytics.js Locally which sets up a cron job to sync across periodically the latest version of analytics.js. This then also allows you to serve it from your own CDN, such as KeyCDN. This will get rid of the “leverage browser caching” warning with Google Analytics.

pagespeed insights cache-control

Read our in-depth post on how to host Google Analytics locally.

5. Enable Compression

We already had Gzip enabled on our origin server and by default Gzip is enabled on all KeyCDN edge servers from where assets are being delivered. Below are instructions if you need to enable it on your origin server.

Apache

You can enable compression by adding the following to your .htaccess file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Nginx

You can enable compression by adding the following to your nginx.conf file.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
pagespeed insights gzip compression

6. Reduce server response time

And finally, the reduce server response time warning. The best recommendations for this is to use a fast web host and also implement a CDN, such as KeyCDN.

2017-06-15T18:54:32+00:00

About the Author:

A web designer since 1996, I am based in Harrogate North Yorkshire, UK and work with clients locally, nationally and internationally.