Date post: | 15-Feb-2017 |
Category: |
Internet |
Upload: | matt-bailey |
View: | 391 times |
Download: | 2 times |
Built using Jekyll, a static site generator
No PHP, no database, just HTML, CSS and a tiny bit of JavaScript
• 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
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 minified CSS was under 10KB*, so I inlined the whole lot!
*10KB is the recommended maximum size for inlined CSS
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
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
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!
Implementation
Configure mod_deflate in your .htaccess file
The h5bp project .htaccess file has a ‘Web Performance’ section you can copy and paste
• 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
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