Optimizing page load times on landing pages

In one of our recent projects, we had a need to optimize one of the PPC landing pages for page load time and maximize its performance. The initial page was loaded through the CMS that already had many optimizations, but there was still some room for improvement.

What we ended up doing was creating a full clone of the page, but eliminating all unnecessary markup, styles, and scripts loaded by the CMS and fully optimizing the rest of the resources. Our hope was that after some time we’d be able to compare the conversion rates and organic ranking and see if improved load time had any impact on them, I’m going to share the finding in one of the future posts.

Here’s what we started with:

Note that the page already had some optimizations done in CMS including CSS/scripts minification, images compression and lazy loading, CDN for static resources, responsive images.

Page speed inside rankings

Mobile – 97

Desktop – 100

WebPageTest data

Here’s the full list of optimizations that we did to optimize the page load time and get 100 from Google:

1. Make sure you use the right format and quality for images (don’t use high resolution and very high quality, use JPEG for photos and PNG/SVG/GIF for graphics )
2. Compress images (here’s a list of useful online tools compressor.io, https://tinypng.com/, https://kraken.io/, there’re also different automated solutions for different CMSs and platforms),
3. Responsive images. If the image is large – load different sizes for different devices (use features like srcset and the <picture>) to make sure you don’t load images larger than they appear on the device screen.
4. Remove non-critical images from the mobile version
5. Lazy load images below the fold (you can use libraries like https://github.com/dinbror/blazy written in vanilla js or https://github.com/eisbehr-/jquery.lazy/ written in jQuery or search for other solutions available for your CMS/platform)
6. Use CDN (CloudFront, CloudFlare or other) for static resources such as CSS, scripts, and images or, if possible, for the entire site.
7. Minify CSS, JS, HTML. You can use online tools like https://www.willpeavy.com/minifier/ or https://www.minifier.org/ or see if your CMS/platform has an automated solution for this.
8. Enable Gzip compression on server
9. Create and include critical CSS. You can create it manually or use https://www.sitelocity.com/critical-path-css-generator or search for an automated tool for your platform.
10. Asynchronously load styles (remove render-blocking CSS) – check if your CMS has existing solutions for this, e.g. some WordPress plugins have this functionality. I will make an additional post on how to do it manually.
11. Asynchronously load scripts (remove render-blocking js) – check if your CMS has existing solutions for this, e.g. some WordPress plugins have this functionality. I will make an additional post on how to do it manually.
12. Asynchronously load Google fonts – check if your CMS has existing solutions for this, e.g. some WordPress plugins have this functionality. I will make an additional post on how to do it manually.
13. Remove/optimize redirect chains
14. Enable browser caching for static resources e.g. images, styles, scripts. This needs to be done on the server side (cache-control or expires headers). Set longer caching times for resources that rarely change.
15. Enable caching on the server in order to reduce response times by reducing the time needed for execution of the backend scripts and database queries. Check if your CMS provides any caching functionality or if there are any plugins/modules available.
16. Remove as many 3^rd party scripts as possible (especially ads and tracking services e.g. doubleclick). Even Google Analytics takes away 3% from a fully optimized 100% ranked page!!!
17. Enable http2 on the server OR aggregate files (scripts, styles) and combine images/icons in sprites or use icon fonts

These changes allowed us to get following numbers:

Page speed inside rankings:

Mobile – 97 (3% taken by Google Analytics)

Desktop – 100

WebPageTest

This is roughly 2 times better comparing to where we were with a CMS based page, even though it was already pretty well optimized. Excited to see if this change has any positive effect on conversions and organic ranking of the page.

Useful links:

Further reading on page speed optimization