There are many different types of methods to measure the time taken by the browser to load your website. You might like this one.
Have you tested your site speed on Google PageSpeed Insights? If yes then you are nearly familiar with an issue which arises when your enter your website’s URL in it.
This issue mainly arises in the small-width devices such as smartphones, tablets, etc. Simply, it slows down your page loading speed in web browsers.
Before the website completely loads the browser has to create a DOM (Document Object Model) tree to first load all the HTML elements of the web page. During this process, if the browser encounters any script in the above-the-fold or head content, it has to stop loading the HTML and load the script first. And hence it breaks down the DOM construction.
This creates a chain of links on your website. Furthermore, the browser has to first extract the files from other sites then again from your site and then it serves to your users. Isn’t this a very long way friends ?
Google prefers to show their users the better content which loads in no time. And if you’re slow, you know that how will Google treat you. It will definitely push your contents to further (lower) pages.
We have already shared the major factors affecting the website speed and how to fix it in our previous posts. You may like to read:
- How to speed up your WordPress site ?
- How website speed affects SEO Ranking signal (Google)
Before making any changes you should know if you really need it. Yes, it is my first recommendation for you to check your website speed grade (Using Google PageSpeed). Change your settings only if Google is opting to do so.
It is very simple. Go to > Google PageSpeed Insights > Enter your website URL in the placeholder > Click on Analyse button.
Well, there are some easy and some complex methods to fix this issue of website speed. But I will recommend you to use an easy method and not to wreck your website (especially Beginners or non-coders). Because if you are going to fix it using the coding method you will have to do a couple of more customization for its operation.
Of course, an easy method requires a good plugin as always. As WordPress plugins are the primary solution, right?
The name of this cool plugin is Above The Fold Optimization.
For installing the Above the Fold Optimization, follow up the usual routine.
- Open WordPress admin >> go to the Plugins and click Add New.
- Enter “Above the Fold Optimization” in the search box and hit Enter.
- The plugin will show up as the first on the list, click “Install Now”. The plugin thumbnail must have the Google Pagespeed 100/100 score.
- Activate the plugin and then Go to the settings >> Above the Fold Optimization.
You will come across the page which will show the number of CSS optimisation options. For first, you have to check the boxes and enable ‘advanced CSS editor‘ and ‘optimise CSS delivery‘.
This will automatically add ‘async‘ attribute to all the external CSS strings opened in your <head> tag. You will come to know more about ‘Async‘ in the manual method (given below).
If you are a beginner and don’t know much about WordPress but wish to solve this issue then please use the above method (Do not go for code as it can be harmful if not done correctly).
Also, this issue can be fixed by using any external content delivery network. Here at 3nions, we are using CloudFlare CDN and hence we do not face this issue. This is because CDN caches the files of your website such as scripts and styles and then serves it to your users from the alternate web servers.
Well, if you really care about your website speed you should definitely attempt to fix this ASAP.
Hence, this creates another network jump in which the browser takes more time to render the web page.
If the header code of your website looks like this,
..then you should inline the script like this:
The next thing you should attempt is to add ‘Async‘ attribute to your code.
What are (Async) Asynchronous scripts ?
‘Async‘ is an HTML attribute for giving the browser a specific information about the order of loading a web page.
When you put ‘async’ attribute if your HTML script, it doesn’t stop loading of HTML, on the other hand, it lets the browser load HTML first. The script will be loaded after the HTML.
Thus, it maintains your website’s speed and performance on the browser.
This is another way to optimise the loading of your website. Using this way you can customise your HTML markup in such a way that browser will fetch only those scripts which are required to load the specific page. This helps to reduce the server load and hence, improves the website performance.
If you’re using WordPress then the </body> tag of your site must be present in the footer.php or index.php file. Don’t forget to specify the file path in it. The path should be specified like this,
- Website speed is an essential SEO factor and you should 4-way optimise it. Remember, while optimising don’t forget to Backup your site files as it is a DIY guide.
- If you’ve problem fixing this issue on your website let me know and we will fix it together.