Indtroduction

PageSpeed Insights is an online tool by Google to measure the performance of an web page for mobile and desktop devices. It has a set of heuristic rules considering the network-independent aspects of page performance. Each rule has a weight and the total score ranges from 0 to 100 points. The desktop and mobile tests have the same set of rules for performance and mobile test has some extra rules about user experience.

Though it might be too rigorous to require ¹⁰⁰⁄₁₀₀ score for a web site, it is a good way to learn those rules to actually achieve it, and it does have a significant improvement to the load time of my site (load time reduces from more than 1 sec to about 500 ms in the Pingdom Website Speed Test). In the following section, I would like to share what I have learned by optimizing this website to achieve a perfect score, rule by rule.

Speed rules

Avoid landing page redirects

The redirection to mobile version can be avoided by responsive design (CSS media queries).

You cannot avoid redirections completely, e.g. I have a 301 redirection from www subdomain to the naked domain, but the naked domain does not have any further redirection.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This might be the hardest rule to fully comply with.

Firstly, you need to minimize and fully inline your CSS into HTML, and your CSS cannot be too large. (My CSS is 22kB after minimization). If you use web fonts, you should directly write the @font-face in your inlined CSS, rather than importing an external CSS.

Secondly, you need to inline or asynchronously load all your scripts. The “async” attribute is not very useful because it cannot control the order of the execution of multiple scripts. I have found HeadJS to solve the problem. HeadJS is inlined into the HTML (3.7kB), and other scripts are loaded asychronously but executed in order.

Finally, you have to make sure the delayed scripts will not affect the layout of above-the-fold content. You might have to make some trade off and cut off some functionality.

Enable compression, Leverage browser caching & Reduce server response time

Since I uses Google App Engine, the gzip compression should already been enabled by default, the expiration time for static resources are configurable via config.yaml and GAE responses fast enough.

Minify Resources (HTML, CSS, and JavaScript)

The CSS is minified by Compass, and scripts imported are already minified. The HTML file is not minified but it seems not serious enough to trigger a test warning by PageSpeed.

Optimize images

I use font icons in my site. When there has to be an image, use PNG compressed with OptiPNG.

Reduce the size of the above-the-fold content

It basically depends on your design and just remember the YAGNI principle.

User experience rules

These rule only applies to mobile platforms.

Avoid plugins

None of them on my site.

Configure the viewport

This is part of the responsive design.

Size content to viewport

An important lesson: never write a URL directly in an article because URL does not wrap well and could overflow out of the viewport width. instead, give the URL a name composed of words.

Size tap targets appropriately & Use legible font sizes

I have written some lists of links in my notes, which makes those links close to each other. To make them separate enough to pass this rule, the line height cannot be too small, here is the minimal requirement from my tests (font-size/line-height):

• 16px/28px
• 17px/28px
• 18px/29px
• 19px/30px
• 20px/30px

Conclusion

It is not rocket science to build a website with good performance. You just needs to tune and optimize every detail of your site patiently. In this process, PageSpeed Insights can help a lot.