[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag":3,"content:legacy:navigation":1154,"content:legacy:surround:\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag":1439,"content:related-articles:Pre rels in header link tag - SEO technique enhancement":1442},{"id":4,"title":5,"aside":6,"body":7,"categories":6,"category":1137,"description":1138,"duration":1139,"extension":904,"footer":6,"header":6,"icon":6,"image":1140,"main":6,"meta":1143,"navigation":6,"path":1144,"publishedAt":1145,"seo":1146,"sitemap":1147,"stem":1148,"tags":1149,"toc":6,"top":1152,"__hash__":1153},"content\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag.md","Pre rels in header link tag - SEO technique enhancement",null,{"type":8,"value":9,"toc":1133},"minimark",[10,15,19,30,190,193,213,217,222,225,228,236,244,270,278,286,294,297,300,303,307,310,313,327,334,339,389,409,416,423,427,430,439,447,455,552,559,567,684,694,700,708,716,727,731,734,746,749,763,787,819,900,934,940,951,1037,1046,1053,1057,1060,1065,1083,1088,1114,1121,1127,1130],[11,12,14],"h2",{"id":13},"overview","🔍 Overview",[16,17,18],"p",{},"A brief overview of meta tags for the browser: preconnect, dns-prefetch, prefetch, preload, prerender.",[16,20,21,22,29],{},"Five tags ",[23,24,25],"strong",{},[26,27,28],"code",{},"\u003Clink rel>"," instruct the browser to take preliminary actions:",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes github-light github-dark","\u003Clink rel=\"prefetch\" href=\"\u002Fstyle.css\" as=\"style\" \u002F>\n\u003Clink rel=\"preload\" href=\"\u002Fstyle.css\" as=\"style\" \u002F>\n\n\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fexample.com\" \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fexample.com\" \u002F>\n\n\u003Clink rel=\"prerender\" href=\"https:\u002F\u002Fexample.com\u002Fabout.html\" \u002F>\n","html","",[26,38,39,82,110,117,140,162,167],{"__ignoreMap":36},[40,41,44,48,52,56,59,63,66,68,71,74,76,79],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sVt8B","\u003C",[40,49,51],{"class":50},"s9eBZ","link",[40,53,55],{"class":54},"sScJk"," rel",[40,57,58],{"class":46},"=",[40,60,62],{"class":61},"sZZnC","\"prefetch\"",[40,64,65],{"class":54}," href",[40,67,58],{"class":46},[40,69,70],{"class":61},"\"\u002Fstyle.css\"",[40,72,73],{"class":54}," as",[40,75,58],{"class":46},[40,77,78],{"class":61},"\"style\"",[40,80,81],{"class":46}," \u002F>\n",[40,83,85,87,89,91,93,96,98,100,102,104,106,108],{"class":42,"line":84},2,[40,86,47],{"class":46},[40,88,51],{"class":50},[40,90,55],{"class":54},[40,92,58],{"class":46},[40,94,95],{"class":61},"\"preload\"",[40,97,65],{"class":54},[40,99,58],{"class":46},[40,101,70],{"class":61},[40,103,73],{"class":54},[40,105,58],{"class":46},[40,107,78],{"class":61},[40,109,81],{"class":46},[40,111,113],{"class":42,"line":112},3,[40,114,116],{"emptyLinePlaceholder":115},true,"\n",[40,118,120,122,124,126,128,131,133,135,138],{"class":42,"line":119},4,[40,121,47],{"class":46},[40,123,51],{"class":50},[40,125,55],{"class":54},[40,127,58],{"class":46},[40,129,130],{"class":61},"\"dns-prefetch\"",[40,132,65],{"class":54},[40,134,58],{"class":46},[40,136,137],{"class":61},"\"https:\u002F\u002Fexample.com\"",[40,139,81],{"class":46},[40,141,143,145,147,149,151,154,156,158,160],{"class":42,"line":142},5,[40,144,47],{"class":46},[40,146,51],{"class":50},[40,148,55],{"class":54},[40,150,58],{"class":46},[40,152,153],{"class":61},"\"preconnect\"",[40,155,65],{"class":54},[40,157,58],{"class":46},[40,159,137],{"class":61},[40,161,81],{"class":46},[40,163,165],{"class":42,"line":164},6,[40,166,116],{"emptyLinePlaceholder":115},[40,168,170,172,174,176,178,181,183,185,188],{"class":42,"line":169},7,[40,171,47],{"class":46},[40,173,51],{"class":50},[40,175,55],{"class":54},[40,177,58],{"class":46},[40,179,180],{"class":61},"\"prerender\"",[40,182,65],{"class":54},[40,184,58],{"class":46},[40,186,187],{"class":61},"\"https:\u002F\u002Fexample.com\u002Fabout.html\"",[40,189,81],{"class":46},[16,191,192],{},"Documentation on w3.org:",[194,195,196,206],"ul",{},[197,198,199,200],"li",{},"All tags: ",[201,202,203],"a",{"href":203,"rel":204},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fresource-hints\u002F",[205],"nofollow",[197,207,208,209],{},"Preload: ",[201,210,211],{"href":211,"rel":212},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fpreload\u002F",[205],[11,214,216],{"id":215},"️-types-of-preload-tags","🏷️ Types of Preload Tags",[218,219,221],"h5",{"id":220},"_1-dns-prefetch","1. Dns-prefetch",[16,223,224],{},"Asks the browser to obtain information about the specified domain (to find its IP) in the background, to then use it for actual requests to the specified domain.",[16,226,227],{},"Typically, resolving DNS for each new domain takes about 10-120 ms. This only affects the loading of the first resource from that domain. However, if we prefetch the DNS, we can save some time.",[16,229,230,235],{},[23,231,232],{},[26,233,234],{},"Optional instruction"," — the browser may ignore it if it interferes with more important operations.",[237,238,241],"alert",{"icon":239,"type":240},"lucide:triangle-alert","info",[16,242,243],{},"Note that preconnect already includes dns-prefetch. Using them together for one domain doesn't make sense, except to add support for browsers that understand dns-prefetch and don't understand preconnect.",[31,245,247],{"className":33,"code":246,"language":35,"meta":36,"style":36},"\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fapi.my-app.com\" \u002F>\n",[26,248,249],{"__ignoreMap":36},[40,250,251,253,255,257,259,261,263,265,268],{"class":42,"line":43},[40,252,47],{"class":46},[40,254,51],{"class":50},[40,256,55],{"class":54},[40,258,58],{"class":46},[40,260,130],{"class":61},[40,262,65],{"class":54},[40,264,58],{"class":46},[40,266,267],{"class":61},"\"https:\u002F\u002Fapi.my-app.com\"",[40,269,81],{"class":46},[16,271,272,277],{},[23,273,274],{},[26,275,276],{},"href:"," Points to the domain for which the IP address needs to be determined. It can be specified without the protocol - \u002F\u002Fdomain.com.",[16,279,280,285],{},[23,281,282],{},[26,283,284],{},"When to use",":\nWhen the specified domain will be used later on the page, but the browser doesn't know about it yet.",[16,287,288,293],{},[23,289,290],{},[26,291,292],{},"Examples",":",[16,295,296],{},"For instance, in the HEAD of the document, we can request information about the domain, and then a script from that domain is loaded in the footer. The browser will already have information about the domain and, as a result, will retrieve the script data a little faster.",[16,298,299],{},"Your application is hosted on my-app.com and makes AJAX requests to api.my-app.com: you don't know the specific requests in advance because they are dynamically made from JS. It's quite appropriate to use it here.",[16,301,302],{},"Your application is hosted on my-app.com and uses Google Fonts. They are loaded in two stages: first, a CSS file is loaded from the fonts.googleapis.com domain, and then this file requests fonts from fonts.gstatic.com. You can't know which specific font files from fonts.gstatic.com you'll need until you load the CSS file, so we can only establish a pre-connection in advance.",[218,304,306],{"id":305},"_2-preconnect","2. Preconnect",[16,308,309],{},"Preconnect instructs the browser to establish a connection (handshake, connect) with the specified domain in the background.",[16,311,312],{},"The connection process includes:",[194,314,315,318,321,324],{},[197,316,317],{},"DNS resolution. Finding the server's IP address (216.58.215.78) for the specified domain name (google.com).",[197,319,320],{},"TCP handshake. Packet exchange (client → server → client) to initiate a TCP connection with the server.",[197,322,323],{},"TLS handshake (only for HTTPS sites). Two rounds of packet exchange (client → server → client → server → client) to initiate a secure TLS session.",[197,325,326],{},"All these operations take approximately 300 ms.",[16,328,329,333],{},[23,330,331],{},[26,332,234],{}," — the browser may ignore it, for example, if many connections are already established or in some other case.",[237,335,336],{"icon":239,"type":240},[16,337,338],{},"It is not recommended to use it with more than 4-6 domains, as establishing and maintaining connections is an expensive operation.",[31,340,342],{"className":33,"code":341,"language":35,"meta":36,"style":36},"\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fexample.com\">\n\u003Clink rel=\"preconnect\" href=\"\u002F\u002Fcdn.example.com\" crossorigin>\n",[26,343,344,365],{"__ignoreMap":36},[40,345,346,348,350,352,354,356,358,360,362],{"class":42,"line":43},[40,347,47],{"class":46},[40,349,51],{"class":50},[40,351,55],{"class":54},[40,353,58],{"class":46},[40,355,153],{"class":61},[40,357,65],{"class":54},[40,359,58],{"class":46},[40,361,137],{"class":61},[40,363,364],{"class":46},">\n",[40,366,367,369,371,373,375,377,379,381,384,387],{"class":42,"line":84},[40,368,47],{"class":46},[40,370,51],{"class":50},[40,372,55],{"class":54},[40,374,58],{"class":46},[40,376,153],{"class":61},[40,378,65],{"class":54},[40,380,58],{"class":46},[40,382,383],{"class":61},"\"\u002F\u002Fcdn.example.com\"",[40,385,386],{"class":54}," crossorigin",[40,388,364],{"class":46},[16,390,391,396,397,402,403,408],{},[23,392,393],{},[26,394,395],{},"href",": The domain with which to establish a connection. It can be specified without the protocol.\n",[23,398,399],{},[26,400,401],{},"crossorigin",": An attribute that indicates the CORS policy of the specified domain. ",[201,404,407],{"href":405,"rel":406},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Finfrastructure.html#cors-settings-attributes",[205],"CORS Attribute",".",[16,410,411,415],{},[23,412,413],{},[26,414,284],{},":\nUse for domains from which important styles, scripts, or images will soon be needed for loading, but you don't yet know the URL of the resource. For example:",[194,417,418,421],{},[197,419,420],{},"Your application is hosted on my-app.com and makes AJAX requests to api.my-app.com: you don't know the specific requests in advance because they are dynamically made from JS. It's quite appropriate to use the tag for pre-connecting to the domain here.",[197,422,302],{},[218,424,426],{"id":425},"_3-prefetch","3. Prefetch",[16,428,429],{},"Prefetch instructs the browser to load and cache a resource in the background.",[16,431,432,433,438],{},"Unlike ",[23,434,435],{},[26,436,437],{},"preload",", the loading occurs with low priority, so it doesn't interfere with more important resources.",[16,440,441,442,408],{},"Optional instruction — the browser may ignore it, for example, with slow internet. It is executed with low priority, i.e., after loading everything important. See the ",[201,443,446],{"href":444,"rel":445},"https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc",[205],"priority table",[16,448,449,454],{},[23,450,451],{},[26,452,453],{},"The browser does nothing with the resource after loading",". Scripts are not executed, stylesheets are not applied. The resource is simply cached and provided on demand.",[31,456,458],{"className":33,"code":457,"language":35,"meta":36,"style":36},"\u003Clink rel=\"prefetch\" href=\"https:\u002F\u002Fexample.com\u002Fnext-page.html\" as=\"document\" crossorigin>\n\u003Clink rel=\"prefetch\" href=\"\u002F\u002Fexample.com\u002Fnext-page.css\" as=\"style\" crossorigin=\"use-credentials\">\n\u003Clink rel=\"prefetch\" href=\"\u002Flibrary.js\" as=\"script\">\n",[26,459,460,490,524],{"__ignoreMap":36},[40,461,462,464,466,468,470,472,474,476,479,481,483,486,488],{"class":42,"line":43},[40,463,47],{"class":46},[40,465,51],{"class":50},[40,467,55],{"class":54},[40,469,58],{"class":46},[40,471,62],{"class":61},[40,473,65],{"class":54},[40,475,58],{"class":46},[40,477,478],{"class":61},"\"https:\u002F\u002Fexample.com\u002Fnext-page.html\"",[40,480,73],{"class":54},[40,482,58],{"class":46},[40,484,485],{"class":61},"\"document\"",[40,487,386],{"class":54},[40,489,364],{"class":46},[40,491,492,494,496,498,500,502,504,506,509,511,513,515,517,519,522],{"class":42,"line":84},[40,493,47],{"class":46},[40,495,51],{"class":50},[40,497,55],{"class":54},[40,499,58],{"class":46},[40,501,62],{"class":61},[40,503,65],{"class":54},[40,505,58],{"class":46},[40,507,508],{"class":61},"\"\u002F\u002Fexample.com\u002Fnext-page.css\"",[40,510,73],{"class":54},[40,512,58],{"class":46},[40,514,78],{"class":61},[40,516,386],{"class":54},[40,518,58],{"class":46},[40,520,521],{"class":61},"\"use-credentials\"",[40,523,364],{"class":46},[40,525,526,528,530,532,534,536,538,540,543,545,547,550],{"class":42,"line":112},[40,527,47],{"class":46},[40,529,51],{"class":50},[40,531,55],{"class":54},[40,533,58],{"class":46},[40,535,62],{"class":61},[40,537,65],{"class":54},[40,539,58],{"class":46},[40,541,542],{"class":61},"\"\u002Flibrary.js\"",[40,544,73],{"class":54},[40,546,58],{"class":46},[40,548,549],{"class":61},"\"script\"",[40,551,364],{"class":46},[16,553,554,558],{},[23,555,556],{},[26,557,395],{},": URL. Can be relative or specified without the protocol.",[16,560,561,566],{},[23,562,563],{},[26,564,565],{},"as",": An attribute used to pass the resource type, so the browser can optimize prefetch processing, for example, set appropriate request headers, processing priority, and so on. as can be:",[194,568,569,580,595,607,615,623,631,641,649,657,665,673],{},[197,570,571,576,577,408],{},[23,572,573],{},[26,574,575],{},"audio"," — Audio file, usually used in ",[26,578,579],{},"\u003Caudio>",[197,581,582,587,588,591,592,408],{},[23,583,584],{},[26,585,586],{},"document"," — HTML document intended for embedding in ",[26,589,590],{},"\u003Cframe>"," or ",[26,593,594],{},"\u003Ciframe>",[197,596,597,602,603,606],{},[23,598,599],{},[26,600,601],{},"embed"," — Resource embedded in the ",[26,604,605],{},"\u003Cembed>"," element.",[197,608,609,614],{},[23,610,611],{},[26,612,613],{},"fetch"," — Resource accessed using a fetch or XHR request, for example, ArrayBuffer or JSON file.",[197,616,617,622],{},[23,618,619],{},[26,620,621],{},"font"," — Font file.",[197,624,625,630],{},[23,626,627],{},[26,628,629],{},"image"," — Image file.",[197,632,633,602,638,606],{},[23,634,635],{},[26,636,637],{},"object",[26,639,640],{},"\u003Cobject>",[197,642,643,648],{},[23,644,645],{},[26,646,647],{},"script"," — JavaScript file.",[197,650,651,656],{},[23,652,653],{},[26,654,655],{},"style"," — CSS stylesheet.",[197,658,659,664],{},[23,660,661],{},[26,662,663],{},"track"," — WebVTT file.",[197,666,667,672],{},[23,668,669],{},[26,670,671],{},"worker"," — JavaScript web worker or shared worker.",[197,674,675,680,681,408],{},[23,676,677],{},[26,678,679],{},"video"," — Video file, usually used in ",[26,682,683],{},"\u003Cvideo>",[16,685,686,690,691,408],{},[23,687,688],{},[26,689,401],{},": An attribute that indicates the CORS policy of the specified resource. ",[201,692,407],{"href":405,"rel":693},[205],[16,695,696,293],{},[23,697,698],{},[26,699,284],{},[16,701,702,707],{},[23,703,704],{},[26,705,706],{},"For loading resources from other pages",". i.e., when a resource will be needed on another page, and you want to add it to the cache in advance. For example:",[194,709,710,713],{},[197,711,712],{},"You have an online store, and 40% of users go from the home page to the product page. Use prefetch to load CSS and JS files for rendering product pages.",[197,714,715],{},"You have a single-page application, and different pages load different packages. When a user visits a page, you can prefetch packages for all pages it links to.",[237,717,719],{"icon":239,"type":718},"warning",[16,720,721,726],{},[23,722,723],{},[26,724,725],{},"Do not use it if the resource is important for the current page",". If the resource will definitely be used on the current page, use preload instead of prefetch.",[218,728,730],{"id":729},"_4-preload","4. Preload",[16,732,733],{},"Preload tells the browser to load and cache a resource in the preload cache.",[16,735,736,741,742,745],{},[23,737,738],{},[26,739,740],{},"This is a mandatory instruction"," — the browser must execute it, unlike ",[26,743,744],{},"prefetch"," or similar instructions (they can be ignored, for example, with slow internet).",[16,747,748],{},"The browser does nothing with the resource after loading. Scripts are not executed, stylesheets are not applied. The resource is simply provided from the preload cache on demand.",[16,750,751,756,757,759,760,408],{},[23,752,753],{},[26,754,755],{},"Priorities",". Different resources (styles, scripts, fonts, etc.) are usually assigned different priorities by browsers to load the most important resources first. Here, the priority is determined by the ",[26,758,565],{}," attribute. For Chrome browser, you can view the full ",[201,761,446],{"href":444,"rel":762},[205],[237,764,765],{"icon":239,"type":718},[16,766,767,772,773,776,781,782,784,785,408],{},[23,768,769],{},[26,770,771],{},"Do not abuse preloading",". If you load everything indiscriminately, the site will not magically speed up; rather, it will hinder the browser's ability to plan its work effectively.",[774,775],"br",{},[23,777,778],{},[26,779,780],{},"Do not confuse with prefetch",". Do not use ",[26,783,437],{}," if you don't need the resource immediately after the page loads. If it will be needed later, for example, for the next page, use ",[26,786,744],{},[31,788,790],{"className":33,"code":789,"language":35,"meta":36,"style":36},"\u003Clink rel=\"preload\" href=\"\u002Fstyles\u002Fother.css\" as=\"style\">\n",[26,791,792],{"__ignoreMap":36},[40,793,794,796,798,800,802,804,806,808,811,813,815,817],{"class":42,"line":43},[40,795,47],{"class":46},[40,797,51],{"class":50},[40,799,55],{"class":54},[40,801,58],{"class":46},[40,803,95],{"class":61},[40,805,65],{"class":54},[40,807,58],{"class":46},[40,809,810],{"class":61},"\"\u002Fstyles\u002Fother.css\"",[40,812,73],{"class":54},[40,814,58],{"class":46},[40,816,78],{"class":61},[40,818,364],{"class":46},[31,820,824],{"className":821,"code":822,"language":823,"meta":36,"style":36},"language-js shiki shiki-themes github-light github-dark","var res = document.createElement(\"link\");\nres.rel = \"preload\";\nres.as = \"style\";\nres.href = \"styles\u002Fother.css\";\ndocument.head.appendChild(res);\n","js",[26,825,826,852,865,877,889],{"__ignoreMap":36},[40,827,828,832,835,837,840,843,846,849],{"class":42,"line":43},[40,829,831],{"class":830},"szBVR","var",[40,833,834],{"class":46}," res ",[40,836,58],{"class":830},[40,838,839],{"class":46}," document.",[40,841,842],{"class":54},"createElement",[40,844,845],{"class":46},"(",[40,847,848],{"class":61},"\"link\"",[40,850,851],{"class":46},");\n",[40,853,854,857,859,862],{"class":42,"line":84},[40,855,856],{"class":46},"res.rel ",[40,858,58],{"class":830},[40,860,861],{"class":61}," \"preload\"",[40,863,864],{"class":46},";\n",[40,866,867,870,872,875],{"class":42,"line":112},[40,868,869],{"class":46},"res.as ",[40,871,58],{"class":830},[40,873,874],{"class":61}," \"style\"",[40,876,864],{"class":46},[40,878,879,882,884,887],{"class":42,"line":119},[40,880,881],{"class":46},"res.href ",[40,883,58],{"class":830},[40,885,886],{"class":61}," \"styles\u002Fother.css\"",[40,888,864],{"class":46},[40,890,891,894,897],{"class":42,"line":142},[40,892,893],{"class":46},"document.head.",[40,895,896],{"class":54},"appendChild",[40,898,899],{"class":46},"(res);\n",[31,901,905],{"className":902,"code":903,"language":904,"meta":36,"style":36},"language-md shiki shiki-themes github-light github-dark","HTTP Header output:\nLink: \u003Chttps:\u002F\u002Fexample.com\u002Fother\u002Fstyles.css>; rel=preload; as=style\nLink: \u003C\u002Ftheme\u002Fstyles.css>; rel=preload; as=style\n","md",[26,906,907,912,924],{"__ignoreMap":36},[40,908,909],{"class":42,"line":43},[40,910,911],{"class":46},"HTTP Header output:\n",[40,913,914,917,921],{"class":42,"line":84},[40,915,916],{"class":46},"Link: \u003C",[40,918,920],{"class":919},"s2frl","https:\u002F\u002Fexample.com\u002Fother\u002Fstyles.css",[40,922,923],{"class":46},">; rel=preload; as=style\n",[40,925,926,929,932],{"class":42,"line":112},[40,927,928],{"class":46},"Link: \u003C\u002F",[40,930,931],{"class":50},"theme\u002Fstyles.css",[40,933,923],{"class":46},[16,935,936,558],{},[23,937,938],{},[26,939,395],{},[16,941,942,946,947,950],{},[23,943,944],{},[26,945,565],{},": ",[26,948,949],{},"It is important to specify the as attribute"," — it helps the browser to correctly prioritize and plan the loading, as can be:",[194,952,953,961,971,979,985,991,997,1005,1011,1017,1023,1029],{},[197,954,955,576,959,408],{},[23,956,957],{},[26,958,575],{},[26,960,579],{},[197,962,963,587,967,591,969,408],{},[23,964,965],{},[26,966,586],{},[26,968,590],{},[26,970,594],{},[197,972,973,602,977,606],{},[23,974,975],{},[26,976,601],{},[26,978,605],{},[197,980,981,614],{},[23,982,983],{},[26,984,613],{},[197,986,987,622],{},[23,988,989],{},[26,990,621],{},[197,992,993,630],{},[23,994,995],{},[26,996,629],{},[197,998,999,602,1003,606],{},[23,1000,1001],{},[26,1002,637],{},[26,1004,640],{},[197,1006,1007,648],{},[23,1008,1009],{},[26,1010,647],{},[197,1012,1013,656],{},[23,1014,1015],{},[26,1016,655],{},[197,1018,1019,664],{},[23,1020,1021],{},[26,1022,663],{},[197,1024,1025,672],{},[23,1026,1027],{},[26,1028,671],{},[197,1030,1031,680,1035,408],{},[23,1032,1033],{},[26,1034,679],{},[26,1036,683],{},[16,1038,1039,690,1043,408],{},[23,1040,1041],{},[26,1042,401],{},[201,1044,407],{"href":405,"rel":1045},[205],[16,1047,1048,1052],{},[23,1049,1050],{},[26,1051,284],{},": When a resource must be used and needs to be loaded immediately to avoid blocking HTML rendering.",[218,1054,1056],{"id":1055},"_5-prerender","5. Prerender",[16,1058,1059],{},"Asks the browser to load the URL and process it in the background. When the user clicks on a link, the page should be displayed instantly.",[16,1061,1062,1064],{},[26,1063,234],{}," - the browser may ignore it, for example, on a slow connection or with insufficient free memory.",[237,1066,1067],{"icon":239,"type":718},[16,1068,1069,1070,1073,1074,1076,1079,1080,1082],{},"Despite the exceptional efficiency of this tag (or because of it), in 2021 prerender is ",[26,1071,1072],{},"poorly supported by major browsers",". ",[774,1075],{},[26,1077,1078],{},"Do not abuse it",". Prerendering is extremely expensive in terms of traffic and memory usage. Do not use prerender for more than one page. ",[774,1081],{},"\nFirefox and Safari do not support this tag. This does not violate the specification, as browsers are not required to execute this instruction.",[237,1084,1085],{"icon":239,"type":240},[16,1086,1087],{},"For memory saving, Chrome does not perform full rendering, but only preloads NoState. This means that Chrome loads the page and all its resources, but does not render and does not execute JavaScript.",[31,1089,1091],{"className":33,"code":1090,"language":35,"meta":36,"style":36},"\u003Clink rel=\"prerender\" href=\"\u002F\u002Fexample.com\u002Fnext-page.html\">\n",[26,1092,1093],{"__ignoreMap":36},[40,1094,1095,1097,1099,1101,1103,1105,1107,1109,1112],{"class":42,"line":43},[40,1096,47],{"class":46},[40,1098,51],{"class":50},[40,1100,55],{"class":54},[40,1102,58],{"class":46},[40,1104,180],{"class":61},[40,1106,65],{"class":54},[40,1108,58],{"class":46},[40,1110,1111],{"class":61},"\"\u002F\u002Fexample.com\u002Fnext-page.html\"",[40,1113,364],{"class":46},[16,1115,1116,1120],{},[23,1117,1118],{},[26,1119,395],{},": URL. Can be relative or specified without a protocol.",[16,1122,1123,293],{},[23,1124,1125],{},[26,1126,284],{},[16,1128,1129],{},"When you are really sure that the user will navigate to a specific page. If you have a \"tunnel\" through which 70% of visitors from page A go to page B, then prerender on page A will help to display page B very quickly.",[655,1131,1132],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s2frl, html code.shiki .s2frl{--shiki-default:#24292E;--shiki-default-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline}",{"title":36,"searchDepth":84,"depth":84,"links":1134},[1135,1136],{"id":13,"depth":84,"text":14},{"id":215,"depth":84,"text":216},"tutorial","Brief of difference between types of \u003Clink rel=\"pre\"> in header",10,{"src":1141,"alt":1142},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002Fpre-rels-in-header-link-tag.webp","Pre tag image",{},"\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","2025-02-18",{"title":5,"description":1138},{"loc":1144,"lastmod":1145},"posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",[1137,1150,1151],"nocode","seo",false,"Qputjp0Gw9z73YbGv0VlSkWLDAMZgNeKee1l5kG-w_Y",[1155,1271,1279,1418],{"title":1156,"icon":1157,"path":1158,"stem":1159,"children":1160,"page":1152},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[1161,1166,1171,1176,1181,1186,1191,1196,1201,1206,1211,1216,1221,1226,1231,1236,1241,1246,1251,1256,1261,1266],{"title":1162,"path":1163,"stem":1164,"icon":1165},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":1167,"path":1168,"stem":1169,"icon":1170},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":1172,"path":1173,"stem":1174,"icon":1175},"Docker","\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker","vscode-icons:file-type-docker2",{"title":1177,"path":1178,"stem":1179,"icon":1180},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":1182,"path":1183,"stem":1184,"icon":1185},"Golang","\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo","material-icon-theme:go",{"title":1187,"path":1188,"stem":1189,"icon":1190},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":1192,"path":1193,"stem":1194,"icon":1195},"JavaScript","\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":1197,"path":1198,"stem":1199,"icon":1200},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":1202,"path":1203,"stem":1204,"icon":1205},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":1207,"path":1208,"stem":1209,"icon":1210},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":1212,"path":1213,"stem":1214,"icon":1215},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":1217,"path":1218,"stem":1219,"icon":1220},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":1222,"path":1223,"stem":1224,"icon":1225},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":1227,"path":1228,"stem":1229,"icon":1230},"Node","\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":1232,"path":1233,"stem":1234,"icon":1235},"Nuxt","\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":1237,"path":1238,"stem":1239,"icon":1240},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":1242,"path":1243,"stem":1244,"icon":1245},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":1247,"path":1248,"stem":1249,"icon":1250},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql","material-icon-theme:database",{"title":1252,"path":1253,"stem":1254,"icon":1255},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":1257,"path":1258,"stem":1259,"icon":1260},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":1262,"path":1263,"stem":1264,"icon":1265},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":1267,"path":1268,"stem":1269,"icon":1270},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":1272,"icon":1157,"path":1273,"stem":1274,"children":1275,"page":1152},"Interviews","\u002Finterviews","interviews",[1276],{"title":1187,"path":1277,"stem":1278,"icon":1190},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",{"title":1280,"icon":1281,"path":1282,"stem":1283,"children":1284,"page":1152},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[1285,1294,1310,1336,1344,1357,1366,1375,1385,1408],{"title":1286,"icon":1250,"redirect":1287,"path":1288,"stem":1289,"children":1290,"page":1152},"Database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[1291],{"title":1292,"path":1287,"stem":1293,"icon":6},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",{"title":1172,"icon":1175,"redirect":1295,"path":1296,"stem":1297,"children":1298,"page":1152},"\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[1299,1302,1306],{"title":1300,"path":1295,"stem":1301,"icon":6},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":1303,"path":1304,"stem":1305,"icon":6},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":1307,"path":1308,"stem":1309,"icon":6},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":1311,"icon":1312,"redirect":1313,"path":1314,"stem":1315,"children":1316,"page":1152},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[1317,1320,1324,1328,1332],{"title":1318,"path":1313,"stem":1319,"icon":6},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":1321,"path":1322,"stem":1323,"icon":6},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":1325,"path":1326,"stem":1327,"icon":6},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":1329,"path":1330,"stem":1331,"icon":6},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":1333,"path":1334,"stem":1335,"icon":6},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":1182,"icon":1185,"redirect":1337,"path":1338,"stem":1339,"children":1340,"page":1152},"\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[1341],{"title":1342,"path":1337,"stem":1343,"icon":6},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":1192,"icon":1345,"redirect":1346,"path":1347,"stem":1348,"children":1349,"page":1152},"vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[1350,1353],{"title":1351,"path":1346,"stem":1352,"icon":6},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":1354,"path":1355,"stem":1356,"icon":6},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":1227,"icon":1358,"redirect":1359,"path":1360,"stem":1361,"children":1362,"page":1152},"material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[1363],{"title":1364,"path":1359,"stem":1365,"icon":6},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":1232,"icon":1367,"redirect":1368,"path":1369,"stem":1370,"children":1371,"page":1152},"vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[1372],{"title":1373,"path":1368,"stem":1374,"icon":6},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":1376,"icon":1377,"redirect":1378,"path":1379,"stem":1380,"children":1381,"page":1152},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[1382],{"title":1383,"path":1378,"stem":1384,"icon":6},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":1386,"icon":1387,"redirect":1388,"path":1389,"stem":1390,"children":1391,"page":1152},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[1392,1395,1399,1403,1404],{"title":1393,"path":1388,"stem":1394,"icon":6},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":1396,"path":1397,"stem":1398,"icon":6},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":1400,"path":1401,"stem":1402,"icon":6},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":5,"path":1144,"stem":1148,"icon":6},{"title":1405,"path":1406,"stem":1407,"icon":6},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":1409,"icon":1410,"redirect":1411,"path":1412,"stem":1413,"children":1414,"page":1152},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[1415],{"title":1416,"path":1411,"stem":1417,"icon":6},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":1419,"icon":1420,"path":1421,"stem":1422,"children":1423,"page":1152},"Templates","fluent-color:data-pie-24","\u002Ftemplates","templates",[1424,1427,1430,1433,1436],{"title":1182,"path":1425,"stem":1426,"icon":1185},"\u002Ftemplates\u002Fgo","templates\u002Fgo",{"title":1222,"path":1428,"stem":1429,"icon":1225},"\u002Ftemplates\u002Fnext","templates\u002Fnext",{"title":1232,"path":1431,"stem":1432,"icon":1235},"\u002Ftemplates\u002Fnuxt","templates\u002Fnuxt",{"title":1237,"path":1434,"stem":1435,"icon":1240},"\u002Ftemplates\u002Freact","templates\u002Freact",{"title":1262,"path":1437,"stem":1438,"icon":1265},"\u002Ftemplates\u002Fvue","templates\u002Fvue",[1440,1441],{"title":1400,"path":1401,"stem":1402,"children":-1},{"title":1405,"path":1406,"stem":1407,"children":-1},[1443,1451,1458],{"_path":1397,"title":1396,"description":1444,"image":1445,"category":1137,"tags":1448,"duration":164,"publishedAt":1450},"Introduction to the concepts of localhost and 127.0.0.1 in networking",{"src":1446,"alt":1447},"https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F91PrPbuHdhg\u002Fmaxresdefault.jpg","localhost_and_127.0.0.1_image",[1137,1449],"network","2025-08-29",{"_path":1401,"title":1400,"description":1452,"image":1453,"category":1137,"tags":1456,"duration":169,"publishedAt":1457},"What are network protocols? Explore the functions and use cases of each type of network protocol in digital communication",{"src":1454,"alt":1455},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002F8-essential-network-protocols-every-programmer-should-know.webp","Protocols image",[1137,1449],"2025-06-16",{"_path":1388,"title":1393,"description":1459,"image":1460,"category":1137,"tags":1463,"duration":169,"publishedAt":1464},"What is server? Functions of popular servers nowadays.",{"src":1461,"alt":1462},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002Fclassification-and-functionality-of-the-servers.webp","Server image",[1137,1449],"2025-02-26"]