How I acheived a pretty good Google PageSpeed Insights score

mattbailey.io

How I achieved a pretty good Google PageSpeed Insights Score

98/100* on both Mobile and Desktop *On the home page
at least…

The background

Built using Jekyll, a static site generator No PHP, no
database, just HTML, CSS and a tiny bit of JavaScript

First of all, why bother when the site already seemed
pretty quick?

• It was a learning exercise for me • I
wanted to see how good a score I could get • Plus, a certain amount of professional pride was at stake

• Even if your site feels fast, it’s important to
resolve any underlying issues • They are likely to become more and more pronounced as a project scales up • Google PageSpeed Insights highlighted a number of problems • And scored the site 68/100 for mobile, and 75/100 for desktop

My Approach

Inline Critical CSS

CSS is a render-blocking resource Inline critical CSS in the
<head> to reduce network request latency The fewer HTTP requests the better The goal - render ‘above-the-fold’ content in one roundtrip to the server (~14kb)

Asynchronously loaded assets are not render- blocking Defer the remaining
CSS using an async loader, such as this one by Filament Group https://github.com/filamentgroup/loadCSS

However, that means introducing a dependency on some render-blocking JavaScript
If you load CSS asynchronously you will need to deal with FOUC (Flash of Unstyled Content)

IMO keeping it simple is often best Unless your CSS
is rather large, just load it normally - the browser will cache it

In my case my miniﬁed CSS was under 10KB*, so
I inlined the whole lot! *10KB is the recommended maximum size for inlined CSS

Use an async font loader

My site uses fonts from Typekit

Originally I had rather lazily used the standard font loading
script <script src="https://use.typekit.net/vbu2ffi.js"></script>  <script>try{Typekit.load({ async: true });}catch(e){}</script>

However, Google does not like this “Eliminate render-blocking Javascript and
CSS in above-the-fold content”

The solution? Use an async font loading script This means
the browser can carry on rendering the page without waiting for the fonts to load

What about FOUT (Flash of Unstyled Text)? Typekit adds helper
classes to the <html> tag You can hook into them to initially hide, and then show text once the fonts have loaded .wf-loading  .wf-active

Remove render-blocking JavaScript

Google recommends: If the script is small you can inline
it to reduce network request latency Larger, external scripts should be loaded asynchronously so as not to block DOM construction

In my case the scripts used were small and non-
critical So I inlined them at the bottom of the page

Minify HTML

You’ll have minimal gains in terms of bytes saved, but
it’s one more thing ticked oﬀ the list It can be tricky to do, especially on dynamic sites, but on simple, static sites it shouldn’t be a problem On my site I used a Ruby gem, called minify- html - job done!

Enable Gzip compression on the server

Modern browsers can manage GZipped ﬁles on- the-ﬂy Fewer bytes
means faster downloads

Implementation Configure mod_deflate in your .htaccess file The h5bp project
.htaccess file has a ‘Web Performance’ section you can copy and paste

In summary

• Inline critical CSS, defer the rest (or not) •
Use an async font loader • Remove render-blocking JavaScript • Minify HTML • Enable Gzip compression on the server

The result…

Having done all that I managed a score of 98/100
on both mobile and desktop!

Why not 100/100? “Leverage browser caching” Unfortunately I have no
control over external resources and their cache headers: http://use.typekit.net/vbu2ffi.js  http://www.google-analytics.com/ga.js

But I can live with that

What are your own experiences with web performance and SilverStripe?

How I acheived a pretty good Google PageSpeed I...

How I acheived a pretty good Google PageSpeed Insights score

More Decks by Matt Bailey

Other Decks in Technology

Featured

Transcript