Posts

How To Minimize Main-Thread Work and Increase PageSpeed

What is this Main Thread and how is it minimized? We will talk about its methods in today's article and also learn how to increase page speed in this article. 


Google has made the speed of a webpage a ranking factor. In 2021 this ranking factor was implemented for mobile devices and in 2022 it has been made a ranking factor for desktop as well.

These are the speed of the webpage, Google gives that page by deciding the score of pagespeed insight.

One element in Google's pagespeed insight report appears in most websites which is Minimize Main Thread Work.

What is this Main Thread and how is it minimized? We will talk about its methods in today's article.

When you visit a website, you enter a url in the address bar of the browser and after that you start waiting comfortably.  But the browser does not wait for the website to appear by you.  He has to do a lot of work, like find the server of the url you have entered, request files from the server, download the files, extract the html and render this html code to make your viewable, browser is the same  On thread it executes html, passes css, executes java script and finally renders the page.  And what will this person who does all this work be called? ๐Ÿ˜€ ' Main Thread ' correct ?

Now, what will happen if we reduce the work of this Main Thread?  Website will load soon right?  That's why Minimize Main Thread is an element in most speed tests.  Because all the efforts you will make to increase the speed of the page, whatever work you have done, all the optimizations you have done, have to give the final output to this Main Thread.  To reduce the work of this Main Thread, you can work on these 7 points given below.

7 POINTS TO REDUCE MAIN THREAD WORK ๐ŸŽ€

1 :- SMALL PAGE SIZE ✔

The beginning of all optimization starts from here - with the planning of your page. Look at your page carefully and just think about what are the elements that you will not compromise on the quality or information of the page even after removing them. Are there any extra images that can be removed, are there any video extras that can be removed, are the images properly resized? Are their dimensions correct? Have you embedded social media feed in the page? If work can be done by removing it, then why not remove it. Is any visit being used in the page? EMI Calculater, some kind of converter, any tool or if the preview of the other pages you have is not loading.

Remove as many of them as you can, are there any sliders on the page?  If the work can be done without the slider, then very good, there are three disadvantages in the slider.  It contains more than one image, java script is used in it and there is animation in it.  These three eat up the speed, so if the slider can be removed from the page, then definitely remove it. Analyze your page and focus on making it as short as possible.

2 :- USELESS MEMORY ✔

You should focus on keeping your server as free as possible, stay away from shared hosting as much as possible because CPU is used in shared hosting, they have already throttled it.  By using a CDN, you can reduce the load on your server, reduce its pressure, CDN saves your resources, CDN is free and easy to use.

Keep your database clean, if you are a wordpress user, then turn off the heart-beat of wordpress, which are talking about turning off the heart beat API.  WordPress does not give any native option to turn off Heart beat, so you can disable it by using this Heart beat plugin.

Apart from this, keep at least plugins in wordpress, keep these plugins updated, if there is usage tracking in plugins, then disable it, after activating those plugins, a small notice comes and not mummy swear we do not have your data  Will take  Will not steal anything, just take normal information for research and development purpose, yes, do not keep it on, turn it off. ๐Ÿ˜„

READ ALSO : 


3 :- LESS ANIMATION ✔

The website should have as few animations as possible. Animations come in websites with Css and Js and this adds to the unnecessary burden. There are more problems in wordpress, there are elements and plugins like that which have put thousands of types of animations to increase the extra features and people also use them everywhere, all the elements are flying from here and there like shaktiman but You have to think that does this animation really benefit the user? 

If you have created a unique animation, that animation is necessary for branding or if your industry is such that the animated page will look good, then you are fine. Otherwise keep these animations as low as you can, animations not only increase Main Thread Work but can also create layout shift. so, again keep the animation to a minimum.

4 :- REMOVE UNUSED CSS AND JS ✔

These issues come a lot in many template websites, in template themes, in CMS like WordPress. Templates or cms are made for more and more users, so there are many features in it, there are many functions but you do not use all those functions and features.  So the css and js code of the remaining functions and features are lying idle which increases the load of your website, increases the work of Main Thread while loading it. 

It is a bit difficult to remove unused css and js in wordpress, it has a lot of plugins and many of them are good plugins like asset cleanup, perfmatters but WordPress is made in such a complex way that removing unused css and js in it is a difficult process. A lot of css and js inject different plugins, while rendering dynamically, so it becomes a bit difficult to remove it but if you try properly then you can be successful to a great extent.  asset cleanup is a freemium plugin that means you get a chance to use most of the functions for free. After installing and activating this plugin, you have to go to every page and see which plugin is there in that page which is not being used and then that plugin will have to be disabled. 

Like contact form plugin, now contact form plugin maybe being used in only three or four pages in your website but that load is happening in every page because plugin is installed. So the asset cleanup plugin can disable that contact us plugin in all other pages.  asset cleanup not only in a plugin but also specifically closes the special functions of the plugin, now setting it up is a bit long process because you have to go to every page and check individually and then also test if any The functionality break is not happening, but the result of this whole exercise is very good.

5 :- MINIFY CSS AND JS ✔

Minifying Css and Js means to remove the unnecessary space in Css and Js. The function of Css or Js file is not changed, only space, comment and line break etc. are removed, this process seems to be much less effective to look at but remember your target website is to load as fast as 5 seconds. If you want to load the website inside, then these are the smallest savings, these are also useful for you, fortunately minifying Css and Js is a rather easy task, almost every performance plugin has this option whether it is free or paid. Wp rocket, W3 total cash, hummingbird, asset cleanup even small stand alone plugins also come for free which provide this option.

Many hosting servers also give these options by themselves that inbuil, you need to understand this option carefully and need to implement it.

6 :- DEFER CSS AND JS ✔

Defering Css and Js means that the browser will download these Css and Js files but will not execute them till the full page is loaded, this saves the work of Main Thread because these particular Css and Js in which the Defer tag is applied. They can be easily rendered later, they are not fast, so Main Thread can work on the important components of the webpage.

In Custom Coded websites, you have to identify and defer the scripts yourself, and Cms caching plugins like WordPress handle this task, this option is also available in most of the plugins.

7 :- IMPLEMENT LAZY LOAD ✔

Lazy loading means to load the elements when they are needed. These look like difers but are quite different between the two. Difer means to execute after the main activities are over and Lazy Load means to load when needed whether the main page load is done or not.

If the main page is loaded in 10 seconds then the deferred code is executed in 11 seconds but the lazy loaded element is not loaded until the user scrolls the page and reaches the part where he  element is being used. So the difference is huge.

Again, in custom coded site you can implement this from developer and lazy load is now built-in natively in wordpress, so if your wordpress version is updated then you don't need to do anything extra.

In this way, these 7 steps greatly reduce the work of your Main Thread and your site starts loading faster.


Thanks For Visiting Our Site ✔
Take care! ✔

YOU MAY LIKE : 

TheTechPower

Post a Comment

Welcome To The Tech Power.