8 Essentials Tips for Landing Page Performance Optimization to make sure that your site delivers faster and more seamless user experience.
#1 Async Tag
Banners displayed need to have an ‘async’ tag so that they all do not load when the page loads. The 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 Image Load Time
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 get loaded, but when that page is requested/loaded.
#3 Move CSS to Head
‘Move CSS to head’ seeks to bring down the number of times the browser must reflow the document by ensuring that the CSS styles are all parsed in the head before any body elements are introduced.
#4 Use PNGs instead of GIFs
Leverage PNGs than GIFs – As a more modern image format, png can generally achieve higher compression than GIFs. Note – Animated GIFs won’t be converted because pigs can’t animate. 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.
#5 Be mobile friendly
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.
#6 Move CSS Above Scripts
Move CSS Above Scripts seeks to make sure scripts do not block the loading of CSS resources.
#7 Use Lazy load images
Lazy Load is delays loading of images on long web pages and helps in landing page performance optimization. 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.
#8 Avoid 404
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 on landing page performance optimization check Google Page Speed Module.