Page Load Time Optimization
Introduction
It is a human behavior that people don’t like wait for anything. They can irritate and bounce from your website if you have high page load time so optimize your page load time to increase conversions and User Experience. Some awesome tips are given below…
1. Reduce http requests
Every element of website take time to download and responsible for page load time. Check some techniques to reduce page load time.
– Use CSS for Icon and Vector Images (ex.-email, phone icons)
– Reduce number of elements from website
2. Minify CSS, JS & HTML Code
There are many tools available to minify CSS, JS and HTML Code. Actually concept behind this technique is remove spacing between codes and reduces the file size.
https://developers.google.com/speed/docs/insights/MinifyResources
3. Enable GZip Compression
It can reduce download time and study says it can reduce page load time upto 70%. You need to add gzip compression code in .htaccess file for both site desktop and mobile site both (if you have separate mobile site).
4. Enable Browser Cache
in this technique cookies are stored in user’s system and when user open the page second time it is opened quickly because most of the request will not be sent again on server. You have to mention expire time for all elements and files (cacheable resources). You can take 7 week to 1 year expiry depend on page content and elements changes.
5. Put JS files in Bottom (Defer loading JavaScript)
JS provide functionality for the website and People want to see your content first then they use functionality so fix all JS files in bottom. We use “onload” event to call external javascript and The external JavaScript will not load before page content is loaded.
6. Put CSS files on top
CSS file should be placed on above of the fold because people want to see your content first so load above of the fold content first.
7. Reduce Server Response Time
Time taken to send first request to server is called server request time. Better hosting can reduce your server response time. Google Page Speed Tool Provide server response time report.
8. Asynchronous Scripts
Synchronous scripts load one by one and responsible for high page load time.
Asynchronous scripts load simultaneously and help to decrease page load time.
9. Avoid Inline CSS
Big amount of inline css can make your page heavy so avoid inline css.
10. Combine CSS files and JS files
– Combine multiple JS into Single JS File
– Combine Multiple CSS into Single CSS file
This technique reduce the http requests.
11. CSS Sprite
In this technique we combine images and reduce http requests. Use small images, vector images or icons and combine them and then call every image by using css.
SEO Note: Do not add
12. Images Optimization
– Use small images as possible, small images take less time to load
– Compress all big images by using online image compression tool.
– Use only JPG, PNG and GIF file formats in Images
– Image (Media files) load after content
– Use CSS image (Ex.-email, phone icons are predefined in css)
– Remove Empty sources from images
13. Remove Broken Links
If you have broken links in the web page then page will take more time to load so find broken links or 404 error pages by using broken link checker tools and webmaster reports and fix them.
14. Use CSS images
Today, CSS technology has reached their higher level and now CSS is playing big role in the page load time. You can use css code for many small icons and vectors like email and phone icons. So you can reduce http request by using css images.
15. Remove render blocking completely
Check render blocking status in Google Page Speed tool and fix it – https://developers.google.com/speed/pagespeed/insights/
16. Optimize third party code (Reduce DNS Lookups)
Generally we use many third party scripts and CSS example – Social Media scripts, live chat, tracking code, embedded video code, Google map etc. they are also responsible for higher page load time because they increase DNS lookups.
So avoid third party tools if possible and improve website performance. The main reason behind the high load time due to third party files is that these files are called from the third party server. You can put all files in your server and reduce load time but update these files time to time.
17. Use Light Weight Font
Use light weight font style and family. Google fonts are best for this.
18. Optimize pages coming from Database
Optimize your database by indexing technique (some platforms have in-build facility like WordPress)
Don’t load DB data on page runtime, use publish technique to load db data.
19. Optimize Embedded video
Use YouTube Video in popup instead embedded video – Show an image same as YouTube video and when user click, run video in popup.
Second option is use image for embedded video and run video after user click – here is guide – http://techbrij.com/embed-youtube-video-fast-load-responsive
20. Delete unused plugins, apps, extensions
Shopify apps, Magento extensions and WordPress plugins are responsible for page load time, they are also called when page loading and increase time. If you have installed apps/extensions/plugins and they are not in use then remove them.
21. Clean Your Database
Remove all spam comments permanently even from trash and stop auto save functionality from your wordpress website.
22. Specify Image Dimensions
Specify image height and width with image for faster rendering. You can see details of without dimension images from Gtmetrix tool. Here is screen shot.
23. Avoid CSS @import
If you import second css file in your first css file then it increase page load time due to one by one loading instead parallel loading. You can check how many css import you are using from this tool.- https://gtmetrix.com/avoid-css-import.html
24. Server Response Time
A study says First byte time (also call TTFB) matters for SEO and CRO. First Byte Time (also call it server response time) should be less than 500 ms. You can check it in Google page speed tool.
There are three more tools to check this.
http://webpagetest.org
https://tools.keycdn.com/performance
http://www.bytecheck.com/
25. HTTP/2.0 Protocol
Http/2.0 protocol helps in page loading and faster than old http/1.1 protocol. HTTP/2.0 especially handle all JS files speedily.
Test your site on this tool to know your protocol type – https://tools.keycdn.com/http2-test
Conclusion
Optimize all the above points in all browsers (chrome, Firefox, IE, Safari and all mobile browser) and all devices (like mobile, tablet, desktop) Best tools to optimize page load time…
1. https://gtmetrix.com/
2. http://tools.pingdom.com/fpt/
3. http://www.webpagetest.org/
4. https://developers.google.com/speed/pagespeed/insights/
5. http://www.zoompf.com/
