Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How I acheived a pretty good Google PageSpeed Insights score

Matt Bailey
February 11, 2016

How I acheived a pretty good Google PageSpeed Insights score

Last year I decided to check out my own personal site in Google PageSpeed Insights. Even though it’s only a simple static flat-file site, Google didn’t give it a very good score. I decided to see if things could be improved. This presentation covers what I discovered, and what I was able to do about it.

Matt Bailey

February 11, 2016
Tweet

More Decks by Matt Bailey

Other Decks in Technology

Transcript

  1. Built using Jekyll, a static site generator No PHP, no

    database, just HTML, CSS and a tiny bit of JavaScript
  2. • 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
  3. • 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
  4. :(

  5. 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)
  6. 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
  7. 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)
  8. IMO keeping it simple is often best Unless your CSS

    is rather large, just load it normally - the browser will cache it
  9. In my case my minified CSS was under 10KB*, so

    I inlined the whole lot! *10KB is the recommended maximum size for inlined CSS
  10. 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>
  11. 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
  12. 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
  13. 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
  14. In my case the scripts used were small and non-

    critical So I inlined them at the bottom of the page
  15. You’ll have minimal gains in terms of bytes saved, but

    it’s one more thing ticked off 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!
  16. Implementation Configure mod_deflate in your .htaccess file The h5bp project

    .htaccess file has a ‘Web Performance’ section you can copy and paste
  17. • 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
  18. :)

  19. 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