6/02/2020

Optimizing Blog Pages with rel="preload" Links

| | Tutorial Blogspot |

rel="preload"

After I discussed how to optimize a website or blog at the time of this speed, now we will discuss other ways to optimize your web page or blog that I think is important to do is use a link rel="preload".

Simply put this <link rel="preload"> is about telling the browser to load script-based resources faster without delay.

In addition to the 3 points that I have mentioned in previous posts, this one trick is important to do to further optimize the page loading speed, especially for mobile phones.

With <link rel="preload"> we tell the browser that these resources are important for the page and instruct them to load them immediately. Resources loaded through <link rel="preload"> are stored locally in the browser so they are available when needed when rendering the page. That way the page can be displayed faster.

If you feel that your blog is fast, maybe not necessarily fast when dealing with mobile phones. Maybe someone will ask, "The AMP page is fast, do you still need rel="preload" ?"

Yes, the AMP page is fast "if" the page is accessed from the mobile search results page with the help of Google cache. But not all visitors come from the mobile search page. Visitors who come directly to the site will certainly not be served by Google cache. That's what makes AMP pages still need to be optimized as well, one of them with this <link rel="preload">.

And this <link rel="preload"> is not only for AMP pages, but applies to NON AMP pages as well.

This <link rel="preload"> placement is in the <head> section after the meta viewport. Like the following example for the AMP page.
<!doctype html>
<html amp="amp" lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1"/>
    <meta name="description" content="This is the AMP Boilerplate."/>
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
    <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
      /* Add your styles here */
    </style>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"/>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href="."/>
    <title>My AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
The main JS AMP v0.js must be loaded earlier with this
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
If you use Google Font then add this
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
If you use an image like the thumbnail above the post or the hero image below the header, or the blog background image, or the blog logo image then add this
<link rel="preload" as="image" href="URL IMAGE"/>
If your NON AMP blog uses Jquery Library, then add it with <link rel="preload"> like the main JS AMP above as follows as an example.
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
The needs of each blog are sometimes different, so please adjust the needs of your blog for each JS that is used.

Reference :
https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developers.google.com/web/updates/2016/03/link-rel-preload
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
https://www.kompiajaib.com/2019/05/optimalkan-halaman-blog-dengan-link.html


Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box