I spent today tweaking the website to improve its mobile device PageSpeed score, which is a measure of how good the browsing experience will be on a low-powered smartphone. The tool analyzes your site by measuring how long it takes to load and then draw everything. A passing grade is 90%; previously dsriseah.com received a rather poor grade of 65%, and took 3-4 seconds to draw the home page.
The PageSpeed tool makes suggestions on how to improve the score, so I dug in and made the following key fixes:
- Enabled GZIP compression on the web server by asking Opalstack support to turn it on. This makes the critical CSS file 40% smaller.
- Removed Adobe TypeKit and replacing the fonts I was using with open source alternatives, so I could "preload" the fonts files using an optimized method. This makes the time to "first draw" much faster.
- Added width and height attributes to
<img>tags, and tweaking the CSS so it would still resize proportionally. This helps the browser calculate the layout of every element without having to load things twice.
My mobile score is now 99% and 100% on desktop, which is a huge improvement! GZIP compression now seems to have also stopped working, so I've sent another support request in.
Next up, I'd like to fix the recently updated index that lives at recent updates. It does list the files that have changed, but I'd like it to generate clickable links. This is a little easier said than done because of the way I'm brute-force extracting this data, but that will be tomorrow morning's goal.