How to delay javascript loading


    Delayed loading of javascript properly is when you only download or parse (parsing) javascript after the content of the page has finished loading (in other words, javascript will not affect the speed of page or important display routes). ).



    1. Using the "onload" event we call an external javascript file (external)

    2. External Javascript will not load until the content of the page has finished loading

    3. The external JavaScript will then be executed and have an effect on the page


    Table of contents


    • Explain

    • The code used to call external javascript file

    • What does the above code do?

    • The specific instructions

    • The above code snippet can be applied in which case (and when it is not applicable).

    • Why are other methods ineffective?

    • Why is it a problem?

    • Practical examples

    • Example files for your testing

    • Important point

    • Tools



    Explain


    Delayed loading of javascript is one of the website's problems that can cause you to scratch your hair to find a solution.


    Many say "just use deferload" ("defer") or "just use asynchronous load ('async')", others say "just bring javascript to the end" of page is done ”but none of these solutions really solved the problem of allowing the page to fully load and then (and only then) can load the external JS. They also do not help you get past the "javascript load delay" warning you will receive when using Google's speed test tool.


    The code used to call external javascript file


    This code must be included in your HTML file before the closing tag (near the bottom of the HTML file). I highlight the name of the external JS file.


    What does the above code do?


    The above code says wait for the entire file to load, then download the external file called "defer.js


    The specific instructions


    1. Copy the code above

    2. Paste the code into HTML immediately before the closing tag (near the bottom of the HTML file)

    3. Replace the name "defer.js" with the name of your external JS file

    4. Make sure the path to your JS file is correct. For example, if you only put "defer.js" then that means "defer.js" must be in the same directory as the HTML file.

    The above code snippet can be applied in which case (and when it is not applicable).


    The above code will not load the external JS file that you specify until the download is complete. So you must not add any javascript in there that code is necessary for the page to load properly. You have to divide your javascript into two groups. One group is the javascript that the page needs to load with, and the second is the javascript that is allowed to load later, after the page has finished loading (for example, clicking on an event or something similar). All javascript that can wait after the page finishes loading must be included in the external file you gave the call to above.


    For example, on this site I use the above file to defer scripts such as Google analystics, Google plus badge (displayed in the footer), and Viglink (the tool for me to make money). There is no reason for me to download these files for content on the first screen because they are not needed to display that content. You can have the same content type on your site. Do you make your users wait to download them before showing them content?


    Why are other methods ineffective?


    Methods such as inline, putting the code at the footer, using "defer" or using "async" are not accomplishing the goal of having the page load first, then load the JS later and they (the methods mentioned above) certainly do not work on all existing browsers (cross browser / concept refers to websites developed on different browser platforms and need to produce similar results). self).


    Why is it a problem?


    It matters because Google sees page speed as a ranking factor and also because users want faster page load speed. It is also a big problem for mobile SEO (which has low connection speed and instability). Google measures page load speed through what is called "first screen content display speed". That means you will want the page to load as quickly as possible. The first screen load time is used by Google to evaluate the website (and don't forget your users also have to wait for it to load). Google actively promotes and recommends prioritizing content above the fold, so removing any resources (js, css, images, etc.) from the important display route is a worthwhile effort. to do the work. If something makes your users happy and makes Google happy, you probably need to implement it.


    Practical examples


    I have created a page here so you can see how to use the code: https://varvy.com/pagespeed/defer/defer-example-solved.html


    Example files for your testing


    Okay, just for illustration, I have created some example pages for you to test. The pages are the same. It is a plain HTML page using a code snippet that waits for two seconds and then says "hello world". You can check and see that only one method does not make you wait 2 seconds to display the content.


    • Page with inline code - see here

    • Pages with external scripts that use "defer" - see here

    • The page uses the recommended code above - see here

    Important point


    The first priority needs to be directed to the task of distributing content to users as soon as possible. Many websites currently do not do it with improper handling of javascript. Users don't need to wait to see your content just because some piece of code is tasked with doing something below the fold. No matter how great your footer looks, there is practically no reason for the user - who may never even scroll down below the footer to download responsible javascript. Your footer service looks good.


    Tools


    Use this tool to check how javascript is used on the page: https://varvy.com/tools/js/






    Không có nhận xét nào