Introduction
Web performance is all about loading the websites fast or loading them in a way it seems fast to the end user. Web performance doesn't only mean initial page load it consists of page load, interactivity & load after interactive activity. So, to improve the web performance overall page load time should be reduced & the site should become interactive as soon as possible. Google also uses performance as an important factor while ranking websites on its search engine results so by default performance also becomes the seo factor.
Performance doesn't only depend on how the web is developed & optimized but the devices on which we are opening them & quality of the internet connection also affect web performance. For E.g time taken to load the same website on a legacy iPhone6 compared to the latest iPhone13 will be totally different under the same internet connection also. According to 1&1's survey, 42%men & 35% of woman doesn't return to the same web if they don't like the performance.
Now, Let's see some basic steps through which we can improve our site performance by a large extent.
1. Use a better host for your web
Web hosting is a service that hosts the website for clients. It offers facilities to create & maintain websites & make them accessible to the world. Selecting a fast web host is very much necessary for better web optimization. Try to host your web with private hosting rather than shared hosts if your budget allows it.
2. Optimize Images
One of the most common ways to optimize image performance is by using the image format which offers more compression with better quality. Webp format is the most popular format amongst web developers as it offers 30% more compression as compared to jpeg with exact same quality image.
Another way is to practice serving multiple versions of images so the browser will decide according to screen size the best image it has to use. At least use 2 image varients each one for pc & mobile view.
If images are very much bigger in dimension & we are showing in limited width then use the resized images so that file size will be reduced. E.g If we are using a 2000px image to show on the web in 1000px maximum width then it doesn't make sense to use the original file instead we can resize the image to 1000px & use it then.
Add width & height to images to avoid cumulative layout shifts. Lazy load images where it’s possible. Iframes can also be lazy-loaded. To improve UX progressive jpeg’s can also be used instead of normal jpegs.
Image cdn’s are the most popular & effective ways to serve responsive images. Cdn’s offers image optimization as a service so instead of worrying about image compression you can focus more on your core functionality. With the image cdn’s overall image sizes can be decreased from 40-80%.
3. Optimize scripts/JS/CSS
Most of the websites use analytics, advertisement and embed scripts due to their various requirements. These scripts are sometimes loaded directly while the page loads which is unnecessary. According to hpachrivedata average 57% of js execution time is consumed by analytics & advertisement scripts across the web.
In most cases, we can defer these analytics or advertisement scripts. So avoiding unnecessary scripts while loading the page & loading them with defer attribute is the best way to achieve faster page load.
For optimizing external services or players e.g. embedded video plugins can also be loaded on demand. E.g for showing videos to the user instead of loading it directly we can place thumbnail & load the video player plugin when the user clicks on that thumbnail which is called load on demand.
Load only critical render-blocking CSS first & async/defer the remaining CSS. Try to load the initially required CSS inline if feasible. Remove unused CSS/JS. Some packages are also avilable which detect unused CSS/JS
4. Optimize external libraries
One of the common ways to keep the web fast is by using the latest libraries & updating them as soon as a new stable version is available for must required libraries.
While using must-required libraries also developer has to keep in mind & search for less expensive alternatives to libraries that they are using.
Also if a very small portion of the feature of the library is utilized & if that feature can easily be implemented then developers should implement it as a core feature on the web instead of using it from libraries which come at very expensive import costs(load time).
Like the above analytics & advertisement scripts also libraries can be loaded with defer attribute to achieve faster page loads.
5. Optimize External fonts
By default, most browsers hold text for up to 3 sec if the external font is not loaded so use light & stable external fonts e.g google font & fontawesome.
If possible also avoid using external fonts & use default fonts available in browsers.
Last but not least use caching in websites & only download assets if it's changed.
End Notes: Hope you like the blog. If you have any suggestions please feel free to comment. Happy Coding! Good Day!