loading...
Cover image for 5 Techniques To Increase Page Load Speed

5 Techniques To Increase Page Load Speed

gauravadhikari1997 profile image Gaurav Adhikari ・3 min read

The following are the five techniques that I used to achieve lesser page load time.

  1. Minimize Use Of jQuery And JS
  2. Minify Resources
  3. Compress Assets Like Images, Videos, Gifs
  4. Customize Your Font Icon Library
  5. Use Lazy Loading

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:
bootstrap CDN links

Bootstrap uses jQuery and Popper.js for JavaScript components but if you just use the CSS part of Bootstrap, you don't need to import them. That’s what I did to reduce a lot of load time.

But the navbar stopped functioning, nothing happened on clicking it. This is because some components of bootstrap require JavaScript, like Buttons for toggling states, Alerts dismissing, Modals for displaying, positioning, and scroll behavior, Tooltips, and popovers, etc.

My main navigation menu was relying on bootstrap javascript, to handle that I alternatively created a custom nav bar using CSS only.
Here is code if you want to try:
https://codepen.io/gauravadhikari/pen/BajGPYd

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:

  • To minify HTML, try HTMLMinifier
  • To minify CSS, try csso
  • To minify JavaScript, try UglifyJS

Check how I achieved 43.85% saving by using HTML minifier and 37.79% saving using CSS minifier

HTML Minifier
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)
compress picture online

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/app
  • 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:

Note: The preview and full-size images must have the same aspect ratio, e.g. 40x30 and 800x600.
Check the load time before and after optimization using lazyloading

page load time without lazyload
page load time with lazyload

Thanks for reading! I hope you learned something useful.
Resource Link For more such related articles

Discussion

markdown guide