7 Things to keep in mind to Reduce Page Size and Loading Time of Website

In these days, Loading time is crucial part of web development. We need to keep in mind that if user does not see anything in say 5 seconds he will move on to the competitor’s site.

There are few things you could do to make your website load faster.

Few of things you might know already.

Following are the few things I make sure to do before publishing a website.

1. Enable gzip compression

You can learn more about it here.

Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource and improve the loading time of the pages.

2. Use .webp/.svg images rather than .png

Essentially WebP offers the following benefits over PNG. .webp offers 26% smaller file sizes than .png, while still providing transparency and the same quality. WebP loads faster (due to file size) than PNG images.

.svg offers lossless compression, which means they’re compressible to smaller file sizes at no cost to their definition, detail or quality. .png also benefit from lossless compression of 5–20%, but likely to be larger than an .svg.

3. Use images with specific resolutions

If you have a icon which requires size of say 16x16 pixels, Not it won’t make sense to use icon of 64x64 pixels there. You can resize it down and compress file to save as much size as possible. You can reduce size upto 90%.

4. Compress images keeping good quality

There are plenty of image compressing tools available online, My personal favourite is tinypng. It really does it’s job very nicely. It supports all image types such as Webp, PNG and JPEG.

Source : TinyPNG

On the other hand you can use vecta.io for compressing SVGs.

5. Use Critical CSS for Above the Fold

Above-the-fold is top section of the website a viewer will see on page load without scrolling.

Source : web.dev

As user is likely to see Above-the-fold section, In this conditions we can use concept called Critical CSS.

Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.

Inlining extracted Above-the-fold section styles in the <head> of the HTML document eliminates the need to make an additional request to fetch these styles. Remaining CSS files can be loaded asynchronously.

Source : web.dev

6. Use as minimum file resources as possible

I believe it doesn’t make sense to use multiple CSS files and JS files to push on to production. yes, it helps during code development, but if affects page speed while downloading in the client/browsers.

If there are multiple CSS files then browser needs to make multiple round trips to get them, mind you it will need to go through a process to get each CSS/JS file to client.

For each CSS/JS file browser needs to

  • Establish TCP connection
  • Establish SSL connection
  • Make the actual HTTP request
  • Close the connection

Imagine that happening for multiple files.

Source : debugbear

To prevent this you can use gulpjs , Check it out.

7. Minify CSS, JavaScript and HTML files

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser — e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

7 Things to keep in mind to Reduce Page Size and Loading Time of Website

Hope This Helps!!
Cheers!!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store