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.
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.
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.
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.
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.
- To minify HTML, try HTMLMinifier
- To minify CSS, try CSSNano and csso.
- To minify JavaScript, try UglifyJS, Closure Compiler
Hope This Helps!!
Cheers!!
Sangwin Gawande
About me : https://sangw.in
