Reduce Page Load Time (5 Techniques)
Posted on: November 4th, 2020
How I reduced page load time from 20 sec to 4.5 sec
Following are the five techniques that I used to achieve lesser page load time.
1. Minimize Use Of jQuery And JS
I am using the bootstrap framework to leverage the mobile-first front-end development of my website. The easiest & recommended way to use bootstrap in your project is to use its CDN, following are the CDN links:
2. Minify Resources
Always minify your resources ie. HTML, CSS, & JS before using them in the production version of your website. As recommended by https://developers.google.com/ following are good tools to minify your resources for free:
Check how I achieved 43.85% saving by using HTML minifier and 37.79% saving using CSS minifier.
3. Compress Assets Like Images, Videos, GIFs
Large images, videos, gifs take up a lot of space and decrease the page load time disastrously. You should always compress your assets without compromising with quality. I personally use kraken.io for image compression.
Check the screenshot before compression and after compression (savings 60.81 %, loss negligible)
4. Customize Your Font Icon Library
If you’re using just 5-6 font icons from font awesome library then why import full library of thousands of icons. Make your custom font library with just a handful of needed icons using IcoMoon.
- — Head over to icomoon.io
- — Select icons you require
- — Click Generate font and download
How to use:
- — Extract the zipped folder
- — Check demo.html file for your icon class
- — Upload style.css and font folder to your hosting
5. Use Lazy Loading
Lazy loading is a technique commonly used in websites, to not load an object until the point at which it is needed. It contributes to the efficiency of the website.
I use Craig Buckler’s progressive-image.js lazyloading as it gives a nice CSS blur effect when the image is loading (like Medium). Check documentation here: https://codepen.io/craigbuckler/full/yPqLXW
How to use:
- — Add the CSS in <head> tag and JS just above ending <body> tag
- — Add an 'img' tag for the small image with a class of preview, surround it with 'a' link to the large image and add progressive replace as classes
Note: The preview and full-size images must have the same aspect ratio, e.g 40x30 and 800x600.
Thanks for reading? I hope you learned something useful.