发表新帖
发表新帖

How to use rel=“preload” as=“style” or as=“script” or Better method for page speed

前端 未结
关注
2 1820
孤独总比滥情好
孤独总比滥情好 2021-01-16 11:11

i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .

So i am trying to implement this

相关标签:
2条回答
  • 不思量自难忘°
    2021-01-16 11:34

    Why this doesn't work

    Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.

    Preloading is useful to reduce the length of your request waterfall. Imagine the following situation:

    style.css

    body {
    background-image: url(myimage.png);
}

    index.html

    <html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

    The process of loading the above page consists (roughly) of the following steps:

    1. Download index.html
    2. Parse the HTML file
    3. Because of the link tag, download style.css
    4. Parse the CSS file
    5. Because of the background-image, download myimage.png
    6. Parse the image and display it on the screen

    This means your request waterfall is index.html -> style.css -> myimage.png.
    By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:

    index.html  +-> style.css
            +-> myimage.png

    Instead of 3, it is now only 2 requests long, which means faster load times.

    What else can you do to improve (perceived) page load times?

    Some common ways are:

    • Minify your assets (JavaScript, stylesheets)
    • Ensure your server has compression enabled for static assets
    • Only load resources actually required on page load first, then load other scripts later (like those for user interactions).

    But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).

    0 讨论(0)
  • 孤街浪徒
    2021-01-16 11:48

    https://developers.google.com/web/updates/2016/03/link-rel-preload

    See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.

    You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.

    1. You can minify css and js files which will load very very fast than normal file. You can minify script and css files from (https://www.minifier.org/) here.

    2. Avoid external links of css and js files

    3. Avoid spaces and Newlines in code.

    4. Use compressed images which will also load faster.

    5. Enable Caching.

    0 讨论(0)
 看不清?
提交回复
热议问题