Optimize website for PageSpeed

Posted on May 3, 2017 and updated on Aug 31, 2021

Fast and lean websites are cool. Response time is very important, because everyone knows that the longer it takes to load a page, the worse world becomes. Thats why we have to prevent it.

Things to consider:

  • optimized server configuration (response time under 200ms) with gzip and cache enabled

  • inline css for immediately visible things

  • getting rid of unecessary css/js

  • minify css/js and optimizing images (I use Gulp.js)

  • getting rid of google web fonts and using system ones

  • replacing icons with SVG counterparts

  • if we use Google Analytics (which has pretty short cache time😞) we can cheat PageSpeed with following magic trick:

1
2
3
4
5
<script>
if (navigator.userAgent.indexOf("Speed Insights") == -1) {
//analytics code
}
</script>

Or you could ignore some of the above, especially ones about inlining css - HTTP/2 mostly takes care of those cases.

PageSpeed should be treated as a guideline, not the one true way of doing things.