Hashtag Website Speed Optimization.
Since JavaScript is single-threaded — the Main-Thread is basically the one focal point inside your browser which includes things such as the Call-Stack, Browser APIs ( setTimeout
 , Promise
 , AJAX
 etc.) and the different queues. The Main Thread performs all the actions to make a web site work such as:
Successfully executing the below steps will help satisfy this crucial step and achieve good website speed optimization.
Doing this will lighten your file sizes and will make it easier for you to bundle your code for production. Minifying your HTML, CSS, JavaScript for production builds will definitely help you improve site performance because now the parser spends less time parsing past spaces and line-breaks.
The lighter the files, the faster they will load!
Placing the defer
 attribute on your script tags like so:
<script src='something.js' defer>
 will literally defer the loading of these script files until the parser has finished constructing the DOM tree, to prevent bottlenecking the Critical Rendering Path. This will improve perceived load times for the user and will improve something known as First Contentful Paint (FCP).
Unused code is like wearing an empty bag-pack, hoping to use it some day. It will eventually start having an effect on performance! When measuring site-speed, try to keep your code as clean and optimized as you can. Remove any unnecessary and commented out code — this removes extra work for the parser. Huge time saver.
SVG, JPEG-2000, JPEG-XR and WebP are good examples. The main benefit they provide is powerful meta-data stripping along with improved image quality as opposed to regular JPEG and PNGs.
This is a widely-used trick to load only what is in the current-viewport, instead of loading an entire page’s worth of images and sections all at once. Doing this will improve First Contentful Paint (FCP) & First Meaninfgul Paint (FMP), thus speeding up your site speed & improving User Experience.
Setting explicit dimensions for your images is not usually your first instinct — because you know, CSS and all. However, doing this can reduce something know as Layout-Shifting.
One of the many reasons this happens is — when the browser has still not loaded or fully loaded your stylesheet(s). An image that is loaded when the HTML file is parsed initially has no set dimensions, but a few milli-seconds later when the stylesheet is parsed — is when your styles are actually applied. Setting explicit dimensions will tell your browser — “Hey, this image is so and so dimensions, so load it appropriately”.
HTTP caching is quite worth the effort because proper caching can provide a great User Experience to repeat-visitors. A server can tell the browser how long it should store the incoming resources (images, fonts, media files, scripts and stylesheets). For all requests after the initial request, the browser will use its local copy — rather than making a network request.
The downside to this is that users won’t see any updates to the UI.
The Critical Request Chain is a list of priority resources for the browser to fetch — such as fonts, stylesheets and vendor libraries such as jQuery. Reducing the number of requests and/or optimizing them by fetching only when a certain user-action is taken is one good solution to improve load times!
You wouldn’t want to load a 3000×1500 pixel image for your logo would you? Making rational choices for image sizes will help you keep your file sizes in check. Further optimizations like image formats, lazy-loading and further image compression can enhance image quality to improve file sizes.
Use a tool such as G-Zip — which basically compresses your HTML, CSS and JavaScript files to strip out extra meta-data. This will reduce file sizes! Now thats good website speed optimization!
Use tools such as Google Lighthouse, PageSpeed Insights and GT-Metrix. These tools will audit your site for both mobile and desktop — Mobile being the crucial word here since 68.1% of all website visits in 2020 came from mobile-devices (according to perficient.com).
Using this right tools for the job is crucial to success. Having web hosting that is affordable, scalable and offers help when you need it will save you money, time a headache. Read this article to find out how to host your website using a web hosting company called BlueHost. Or you can just read this article on Medium instead.
(Disclosure:Â This article contains affiliate links for which I might receive a small commission through BlueHost, at no extra cost to you if you choose to purchase through my links).
The faster your site is, the more people will be willing to interact with it. Plain and simple. Use these above mentioned tricks to… do the trick and increase conversions, user stay-times and user-interactivity!
Please feel free to message me if you have any questions whatsoever.
More content at plainenglish.io