Training on how to fix the optimize the order of styles and scripts error in GTmetrix
In this series of GTmetrix tutorials, going to discuss how to fix the optimize the order of styles and scripts error. Just as from the literal meaning of this error, which consists of the words optimize and order, it can be understood that the meaning of this error is correct placement and optimization in the loading of css and js files. That is, when the style and javascript files are loaded in the head section of your pages, they should be loaded in such a way that both of these files are loaded in each line, and not in such a way that css file is in the first line, js in the next line, and css in the next line again. Supposed to be. Rather, we should make sure that all css files are located in several lines and js files are located separately in several lines so that we do not encounter the order of styles and scripts error in GT Matrix.
fix optimize the order of styles and scripts
When you check the source of the pages, you will see that on each page of the site there is a series of links for css and js files, which will give your site its appearance by loading these files. In the meantime, there may be a situation where you have made some changes in the style file using JS, in this case, when these files are not loaded in order and before the css file is loaded, the javascript file that makes the changes in the css If you applied it, it should be loaded, in this case, the appearance of the site will encounter an error.
So we have to make sure that the codes placed in the source pages are in the same order and that these two file formats are not loaded out of order. For this, you should check your site’s header file, move the links for loading these two file formats, and place them in an orderly fashion. The error “optimize the order of styles and scripts” can optimize the layout of CSS and js files.
Even if the reason for this change is not the dependency between two files, it is better to prioritize the css file because it is lighter and makes this file format start to load first and a complete structure of our site is formed in a few seconds. This will reduce the bounce rate due to faster loading of the site and will not harm your site because visitors don’t have the patience to wait for the full content of the site to be shown after a few seconds.
<head> <title> Title </title> <style> // CSS Code </style> <script type="text/javascript"> // javascript Code </script> </head>
As you can see in the code sample above, you should optimize your site in terms of css and js layout on the site, and first send the style files and then the javascript to the user’s browser. If WordPress , for this you need to check the header.php file and edit the layout for loading these two file formats and put them in order.
افزونه Optimize the order of styles and scripts
But because in WordPress plugins also have various CSS and JS files, you may not be able to do this correctly, so there is a simple solution that you can use the plugin to identify and arrange all the files that are loaded on the site pages. Choose the one you want to load. The WP Scripts & Styles Optimizer plugin is one of these good plugins that has managed to achieve more than 800 active installations and get a 4.7 rating. With this plugin, you can organize files in WordPress. To use this plugin, click on the button below and then plugin installation guide in WordPress install and activate the plugin
Download the WP Scripts & Styles Optimizer plugin
After installing and activating the plugin, a sub-menu called WP Scripts & Styles Optimizer will be added, and by going to this page, you can identify these files and choose the desired arrangement for each one.
