We recently encountered an issue with Google AdWords being rejected on an existing site. After A LOT of digging and troubleshooting, we found that speed was the issue. The site was loading at an average of 12.5 seconds, with Uptrends, and Google PageSpeed Insights ranked it at an abysmal 20/42 mobile/desktop optimization rating. We knew what we had to do, but in the process, I thought it would be awesome to get some statistics along the way:
Style sheets and javascript minification
Definition: The process of removing all unnecessary characters from source code without changing its functionality (Formatting, Whitespaces, etc.)
The first step was to make sure all files were minified and any unnecessary references were removed or relocated. Smaller, minified files result in faster response times and a better UX. After a few tweaks my speed tests were the following:
Uptrends.com
Base Test: 12.5s
After Minification: 12.2s
PageSpeed Insights
Base Test: 20/42
After Minification: 31/55
Not a bad improvement…
Image compression
Definition: Type of data compression applied to digital images, to reduce their cost for storage or transmission.
Sliders are the enemy. Your typical slider has about 4-6 slides and probably has a CSS and JavaScript library. This really cool feature on almost EVERY SITE can introduce a host of problems. Each one of our images was about 290 KB. After using some of my mad Photoshop skills, I was able to get each of the files down to about 70 KB with almost no noticeable difference in image quality.
Uptrends.com
Base Test: 12.5s
After Minification: 12.2s
After Compression: 11.5s
PageSpeed Insights
Base Test: 20/42
After Minification: 31/55
After Compression: 36/58
Still not very fast…
Lazy loading
Definition: The process of not instantiating an object until the point of request
I could’ve focused more on the front end, but I knew we weren’t proceeding by leaps and bounds. My personal philosophy is to have an interesting landing page that doesn’t do much except take you to other pages that do the work. The homepage of this site required numerous database queries and a lot of other logic. The only thing I could think to do was incorporate some lazy loading (think about Pinterest or Facebook not loading new posts/images until you scroll to the bottom). The results were astounding:
Uptrends.com
Base Test: 12.5s
After Minification: 12.2s
After Compression: 11.5s
Lazy Loading: 0.9s
PageSpeed Insights
Base Test: 20/42
After Minification: 31/55
After Compression: 36/58
Lazy Loading: 80/72
The takeaway: Incorporating one or two of these things in your site may help, but to get the best results, we need to focus on all or even more. Google announced that mobile page speeds are now a ranking factor for mobile searches so page responsiveness is more important than ever.