How to speed up your website in 2021.
In our daily lives on an average we visit dozens of websites everyday. Personally me being a developer, I have to visit many websites for my research purposes and the time I have for each task is very limited. keeping my laptop’s performance apart I want the websites I am trying to visit to be blazing fast and responsive. A site that loads quickly gives off a good and reliable representation and is the most vital user experience for a user.
You might have the best website in the world, but according to Google, if its more than 3 seconds then you have already lost more than 32% of visitors.
How fast is your website?
First of all, if you want to know how fast your website is and what is the load time.
There are online tools like GTmetrix and Pingdom. But what I would recommend is:
PageSpeed Insights
Page speed is crucial to ranking on Google and UX. This tool is easy to use, gives detailed feedback on your website with color-coded scales on the speed and also provides you with possible suggestions to improve performance.
Now, coming to the main point of this article. How?
How do I speed up my website?
Here are a few web optimization tips that you should follow in order to make your site fast. I have personally tested them!
1. Minify JS and CSS
Optimize your source code by removing useless spaces, commas, new lines and other unrequired characters, You can drastically reduce bandwidth and load times on webpages and improve site accessibility.
Page minification has become a standard practice for developers for load optimization. It can reduce file size by around 58%. All the major JavaScript frameworks and libraries like (Bootstrap, AngularJS, jQuery) use and provide a minified version of their files for build/production deployment. You must have seen a file with a min.js extension, that is it.
It is a major component for FEO (Front end Optimization).
When your code is production ready, you can use the following tools
- To minify CSS:
- To minify JavaScript:
- UglifyJS (14,000,000 downloads weekly)
- JavaScript-minifier
2. Image and media management
Images take up on average 25% of a total webpage’s weight. Its delivery contributes to around 73% of all internet traffic today, Careful and optimized management of media is crucial to making pages load faster.
Majority of the E-commerce pages have a massive amount of graphic elements and unoptimized gifs, videos and images with varying resolutions.
Do yourself a favor and the ones visiting your website, don’t make the browser download more than it needs to. Code in a way that not all images get downloaded the moment the homepage renders. Instead, they get loaded only before they appear in the viewport. This is called Lazy Loading.
Firstly, try downloading and saving your images in the .jpg or .jpeg format instead of .png. As .jpg uses lossy compression algorithm, the quality reduces and becomes simpler to process whereas .png uses lossless compression algorithm, in this case no image data is lost, hence the processing power need increases.
If you want to use .png, compress them.
Try to keep the compression percentage to around 65% — 75%.
Use these tools:
3. Use a CDN
If you have a site that is big and very complex in structure, you will need proper organization and deployment of your files. This is where CDN (Content Delivery Network) comes in.
There are two ways how CDN can help
Firstly, when you host a site on a single server, all the server and user requests are being sent to the same server, which inevitably leads to a queue being formed which in turn leads to increased loading times. Also, you would not want the server to be very far away from the user.
A user in India would not want to send a HTTP request to a server in USA. This is where CDN helps with a load balancer. CDN has a geographically distributed network of proxy servers and their data centers. A CDN duplicates your site files in these data centers and redirects the user to go to the server closest to them with equal distribution of traffic. Hence, resulting in a faster handshake and persistent connection.
Secondly, CDN also helps in minification to reduce the file sizes as well the number of web page requests. Usually, manually performing the minification of your files is inconvenient and becomes virtually impossible for more complex sites.
A CDN Service provides automated minification for its own distribution needs. You retain the original uncompressed files in the main server while the CDN stores the minified versions on its caching servers and PoPs — keeping them in perfect sync with the source modifications.
This also potentially protects your organization against threats like DDos attacks.
Some companies the provide CDN services include: Cloudflare, Amazon CloudFont, Google Cloud and Imperva.
4. Reduce Redirects
As the heading says, avoid many redirects on your site. Too many redirects eventually increase the load time of the page as every time a page redirects, it delays the HTTP response and request process.
How can you avoid too many redirects?
- Avoid creating too many internal linking and menus if possible.
- Resolve your TLD(Top Level Domain) with a redirection max.
If you need to test and identify your redirects that can possibly be inaccurately set up, you can use Redirect Detective
5. Remove Render-blocking JS
Browsers have to build a DOM tree by parsing HTML before they can render a page. If your browser encounters a script during this process, it has to stop and execute it and download resources before it can continue, which may cause at least one network roundtrips and defer the chance to initially render the page
Learn more: BlockingJS.
Other useful tips:
- Use asynchronous and eliminate loading for your CSS and JavaScript files.
- Enable browser caching.
- Eliminate unnecessary plugins.
Summing up
People want to visit and want to be able to easily get what they came for. Users hate slow-loading pages. Anyone would.
To reduce the bounce rate and increase user engagement, its extremely paramount to make the pages load seamlessly.
Amazon did tests that showed they would lose $1.6 BILLION consistently in the event that they slowed down by just one second.
Lastly, improved page load speed also affects your SEO and Google rank as they love speed.
“We’re striving to make the whole web fast”