{"id":26402,"date":"2019-05-02T21:45:06","date_gmt":"2019-05-02T13:45:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26402"},"modified":"2024-07-19T03:21:33","modified_gmt":"2024-07-18T19:21:33","slug":"html-resource-hints-speed-up-websites","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/","title":{"rendered":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag"},"content":{"rendered":"<p class=\"note\"><strong>Editor\u2019s note:<\/strong> This article is part of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/code-optimization-series\/\">Code Optimization series<\/a>, where we explore how to optimize coding for better efficiency to help us become better coders.<\/p>\n<p>\u201c<em>Foreseeing<\/em>\u201d browsers are the future of fast Internet surfing, <strong>bringing us resources we want <em>even before we know we want them<\/em>.<\/strong> Today\u2019s browsers already <strong>make <em>some<\/em> predictions<\/strong> now and then to speed up fetching and rendering of documents. To take this to the next level, we look to none other than web developers.<\/p>\n<p>Developers have a <strong>pretty good idea<\/strong> of<strong> how their websites are navigated<\/strong>, and which <strong>resources are requested most often<\/strong>. Thus, they can predict some future operations browsers should do for sites. All that\u2019s needed now is for developers to find a way to <strong>relay these <em>predictions<\/em> to browsers<\/strong> and <strong>put them to good use<\/strong>. This is where some special \u201cHTML links\u201d come in.<\/p>\n<h2>A Refresher on HTTP Requests<\/h2>\n<p>Before taking a look at these links, let\u2019s refresh our memory on how a typical HTTP-requested file-fetching operation happens. Let\u2019s say someone named Joe wants to visit a website.<\/p>\n<p>Here\u2019s what happens next:<\/p>\n<ol>\n<li>Joe types the website\u2019s humanly recallable address in a browser\u2019s address bar and presses \u201cEnter\u201d.<\/li>\n<li>Once it receives that address, the browser asks a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Domain_Name_System\">DNS<\/a> server (courtesy of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/ISP\">ISP<\/a>) for the IP address of the address given by Joe.<\/li>\n<li>The DNS server obliges.<\/li>\n<li>Now that the browser knows the IP address, it sends a message (in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Transmission_Control_Protocol\">TCP<\/a> dialect) to the website\u2019s server, asking for a connection.<\/li>\n<li>If the server is active, it sends a reply acknowledging the browser\u2019s request, and the browser responds and acknowledges the server\u2019s message. (<strong>Note<\/strong>: Yes, this is an extremely simplified version of a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Handshaking#TCP_three-way_handshake\">TCP handshake<\/a> between a client and a server.)<\/li>\n<li>When the handshakes are over, a connection is established between the two.<\/li>\n<li>Now, the browser switches its dialect to HTTP and asks the server for the website.<\/li>\n<li>The server, knowing the homepage of the website, returns just that, which is received by the browser and shown to Joe, who is waiting patiently in front of the computer.<\/li>\n<\/ol>\n<p>A typical HTTP request goes through <em>all<\/em> that (and more) to fetch a document through the Internet. So if any of these processes <strong>can be jumpstarted when possible<\/strong>, we can <strong>reduce the time we have to wait for the delivery of the resources we want<\/strong>.<\/p>\n<h2>HTML Link Relationships<\/h2>\n<p>W3C specifies 4 HTML link relationships (<code>rel<\/code> for relationship) named <code>dns-prefetch<\/code>, <code>preconnect<\/code>, <code>prefetch<\/code>, and <code>prerender<\/code>. Together they are called (by W3C) the \u201c<strong>Resource Hints<\/strong>\u201c. Now, we\u2019ll see <strong>what they can do<\/strong> and <strong>where they can be used<\/strong>.<\/p>\n<h3>1. DNS Prefetch<\/h3>\n<p>In DNS prefetch, the <strong>domain name resolution<\/strong> (getting the matching IP address from the DNS server) is done ahead of time.<\/p>\n<p class=\"note\"><em>\u201cDNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced significantly at certain times, such as when the user clicks the link. In some cases, latency can be reduced by a second. \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/X-DNS-Prefetch-Control\">Mozilla Developer Network<\/a>\u201c<\/em><\/p>\n<p>Let\u2019s say there\u2019s a reference page in a website with lots of reference links to its sister site. When a user visits the reference page, there\u2019s a <em>high probability<\/em> that the user will navigate to the sister site. So, an <strong>early DNS lookup<\/strong> for the sister site can reduce the time it takes to open the site, thereby improving user experience.<\/p>\n<p>This <strong>latency reduction via DNS prefetching<\/strong> can be done by adding this code to the reference page.<\/p>\n<pre>&lt;link rel=\"dns-prefetch\" href=\"\/\/mysistersite.org\"&gt;<\/pre>\n<p>When a browser processes this code in the reference page, it\u2019ll add the DNS lookup of the sister site to its task queues, and when it is free from other high-priority tasks in the queue, it will start the DNS resolution of the sister site.<\/p>\n<p>So when a user finally clicks one of the links that takes them to the sister site, the DNS resolution of that site might have already been completed, and the browser can right away start establishing the client-server TCP connection with the sister site server, making that page load faster.<\/p>\n<p>This feature is available in almost <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/link-rel-dns-prefetch\">all modern browsers except Safari<\/a> as of March 2016.<\/p>\n<h3>2. Preconnect<\/h3>\n<p>Preconnect is a step further from DNS prefetch; it establishes a connection to the server to which there may be a request sent later in the future.<\/p>\n<p class=\"note\"><em>\u201cPreconnect is an important tool in your optimization toolbox\u2026 it can eliminate many costly roundtrips from your request path \u2013 in some cases reducing the request latency by hundreds and even thousands of milliseconds. \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.igvita.com\/2015\/08\/17\/eliminating-roundtrips-with-preconnect\/\"><em>Ilya Grigorik<\/em><\/a>\u201c<\/em><\/p>\n<p>W3C lists an ideal use case for preconnect: <strong>redirects<\/strong>. Developers use redirects for a number of reasons.<\/p>\n<p>In this case, a browser\u2019s next request (redirected site) is <strong>100% predictable<\/strong> and can <strong>be preconnected to<\/strong>, to <strong>reduce navigation latency<\/strong>.<\/p>\n<p>Imagine there\u2019s an intermediary site page that redirects to \u201c<em>xyzsite<\/em>\u201c, the following HTML link will make the browser preconnect with the xyzsite server when it gets to that intermediary page.<\/p>\n<pre>&lt;link rel=\"preconnect\" href=\"\/\/xyzsite.com\"&gt;<\/pre>\n<p>As of March 2016, this is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chromestatus.com\/feature\/5560623895150592\">available<\/a> in Chrome, Opera, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1135160\">Firefox<\/a>.<\/p>\n<h3>3. Prefetch<\/h3>\n<p>With <code>prefetch<\/code>, for a resource, the browser <strong>starts implementing the DNS resolution of the resource\u2019s domain name<\/strong>, then <strong>performs a TCP connection with the resource\u2019s server<\/strong>, makes the HTTP request, and finally <strong>fetches and stores the prefetched resource<\/strong> in the browser cache.<\/p>\n<p>If you are sure of which resources will be needed later, that\u2019s the resource to prefetch beforehand; therein lies the catch. <strong>Prefetching takes guesswork<\/strong>, and if you guess wrongly, you might actually slow down instead of speed up your site.<\/p>\n<p class=\"note\"><em>\u201cThis technique has the potential to speed up many interactive sites, but won\u2019t work everywhere. For some sites, it\u2019s just too difficult to guess what the user might do next. For others, the data might get stale if it\u2019s fetched too soon. It\u2019s also important to be careful not to prefetch files too soon, or you can slow down the page the user is already looking at. \u2013 Google Developers\u201d<\/em><\/p>\n<p>For online books, galleries, or portfolios, if the user is most likely to browse to the next page, prefetching the resources such as <strong>images<\/strong>, can speed things up significantly. Here\u2019s the code to do that.<\/p>\n<pre>&lt;link rel=\"prefetch\" href=\"\/\/xyzsite.com\/nextimage.jpg\"&gt;<\/pre>\n<p>Prefetch is supported in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/link-rel-prefetch\">Chrome, Firefox, and Opera<\/a>.<\/p>\n<h3>4. Prerender<\/h3>\n<p>Only for HTML pages can prerendering be done. A prerendered HTML page is <strong>rendered offline<\/strong> and is painted to the screen when it\u2019s actually needed by the user. Rendering <strong>costs a higher computational work and memory resource<\/strong>; plus, to render a page, the browser may need extra resources (like images added to the page) which will lead to <strong>more consequent requests<\/strong> by the browser.<\/p>\n<p>So, <code>prerender<\/code> has to be <strong>used with caution<\/strong>, and not overused. Adding the following code will prerender the \u201cAbout\u201d page beforehand.<\/p>\n<pre>&lt;link rel=\"prerender\" href=\"\/\/example.com\/about.html\"&gt;<\/pre>\n<p class=\"note\"><em>\u201cThe <code>prerender<\/code> hint can be used by the application to indicate the next likely HTML navigation target: the user agent will fetch and process the specified resource as an HTML response. To fetch other content-types with appropriate request headers, or if HTML preprocessing is not desired, the application can use the <code>prefetch<\/code> hint. \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/resource-hints\/#h-note2\"><em>W3C<\/em><\/a>\u201c<\/em><\/p>\n<p>Prerender is already available in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/link-rel-prerender\">Chrome, IE, and Opera<\/a> as of March 2016.<\/p>\n<h2>A few Things to Note<\/h2>\n<h3>1<\/h3>\n<p>None of the abovementioned resource hints guarantee the execution and completion of the different stages of request it\u2019s made for because when the browser is already busy processing the requests needed for the operations of the current page the user is in, performing these optimizations <strong>can hinder user\u2019s current tasks<\/strong>.<\/p>\n<p>So, everything is <strong>queued and executed when the browser feels free enough to do so.<\/strong><\/p>\n<p>These resource hints do not necessarily have to be present in the page even before the loading of the page. They can be <strong>added later by JavaScript<\/strong>, and the resource hints will do their job as usual.<\/p>\n<h3>2<\/h3>\n<p>W3C specifies a <strong>HTML link attribute<\/strong> called<strong> hint probability<\/strong>, <code>pr<\/code> (with value 0 to 1) for these resource hints, which can be used to provide the probability of requests that will be made in the future. I haven\u2019t seen this attribute being implemented by any browser yet though. As an example, the following code states that there\u2019s an 80% chance xyzsite will be requested in the future and 30% for the about page.<\/p>\n<pre>&lt;link rel=\"preconnect\" href=\"\/\/xyzsite.com\" pr=\"0.8\"&gt;\r\n&lt;link rel=\"prerender\" href=\"\/\/example.com\/about.html\" pr=\"0.3\"&gt;<\/pre>\n<p>We can also add the optional <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/infrastructure.html#cors-settings-attributes\">crossorigin<\/a> attribute to the resource hints to inform the browser of the linked request\u2019s CORS credential.<\/p>","protected":false},"excerpt":{"rendered":"<p>Editor\u2019s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become better coders. \u201cForeseeing\u201d browsers are the future of fast Internet surfing, bringing us resources we want even before we know we want them. Today\u2019s browsers already make some predictions now&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506,3761],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Speed Up Your Website Using the &lt;LINK&gt; Tag - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor&#039;s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Speed Up Your Website Using the &lt;LINK&gt; Tag\" \/>\n<meta property=\"og:description\" content=\"Editor&#039;s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-02T13:45:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-18T19:21:33+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Speed Up Your Website Using the &lt;LINK&gt; Tag\",\"datePublished\":\"2019-05-02T13:45:06+00:00\",\"dateModified\":\"2024-07-18T19:21:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/\"},\"wordCount\":1390,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"HTML\",\"Series: Code Optimization\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/\",\"name\":\"How to Speed Up Your Website Using the &lt;LINK&gt; Tag - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-05-02T13:45:06+00:00\",\"dateModified\":\"2024-07-18T19:21:33+00:00\",\"description\":\"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-resource-hints-speed-up-websites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Speed Up Your Website Using the &lt;LINK&gt; Tag\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag - Hongkiat","description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/","og_locale":"en_US","og_type":"article","og_title":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag","og_description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become","og_url":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-05-02T13:45:06+00:00","article_modified_time":"2024-07-18T19:21:33+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag","datePublished":"2019-05-02T13:45:06+00:00","dateModified":"2024-07-18T19:21:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/"},"wordCount":1390,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["HTML","Series: Code Optimization"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/","url":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/","name":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2019-05-02T13:45:06+00:00","dateModified":"2024-07-18T19:21:33+00:00","description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency to help us become","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html-resource-hints-speed-up-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Speed Up Your Website Using the &lt;LINK&gt; Tag"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6RQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26402"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26402\/revisions"}],"predecessor-version":[{"id":72333,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26402\/revisions\/72333"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26402"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}