Landing Page Performance Optimisation: Developers Perspective
1) Banners displayed need to have ‘async’ tag so that they all do not load when the page loads. Asynchronous tag is a way to load banners asynchronously from the other page elements in order to avoid page-freeze until the banner is fully charged.
2) Images from 75–80% of the static page requests. We cannot lay all these images in one sprite. Here is what I think you should do:
a) All generic images across a site can be one or multiple sprites. Also, leverage “font awesome” library as its very modest size, but has tons of icons built in. Font awesome icons load 10 times quicker than regular icons.
b) Different pages apart from the landing pages also have images which can have dedicated sprites which gets loaded, but when that page is requested/loaded.
3) ‘Move CSS to head’ seeks to bring down the number of times the browser must re-flow the document by ensuring that the CSS styles are all parsed in the head, before any body elements are introduced.
4) Leverage PNGs than GIFs – As a more modern image format, pngs can generally achieve higher compression than GIFs. Note – Animated GIFs won’t be converted because pigs can’t animate.
5) Image sizing – Resize any image that is larger than the size called for by the width= and height= attributes on the. tag or an inline style= attribute.
6) Make the landing pages responsive and mobile friendly going forward as google ranking has reduced for those sites that are not mobile friendly. Google released a significant new mobile-friendly ranking algorithm that’s designed to give a boost to mobile-friendly pages in Google’s mobile search results in May 2015.
7) Move CSS Above Scripts seeks to make sure scripts do not block the loading of CSS resources.
8) Lazy load Images – Lazy Load is delayed loading of images on long web pages. Images outside of viewport are not loaded until the user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
In apps from Flipkart, Amazon and SnapDeal you would discover that the item images are lazy loaded. With this concept you can optimize browser rendering by reducing the number of HTTP round-trips by putting off the loading of images which are not in the client’s viewport or above the fold. This may require some place holders initially.
9) Avoid any 404, resource not found requests – This not only causes a round trip, but it’s also not good for page ranking.
For more tips to optimise your landing page for superior performance Google Page Speed Module is a good place to start off with.