{"id":42362,"date":"2023-01-29T15:00:04","date_gmt":"2023-01-29T14:00:04","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=42362"},"modified":"2023-01-24T16:00:34","modified_gmt":"2023-01-24T15:00:34","slug":"how-to-preload-links-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-preload-links-in-wordpress\/","title":{"rendered":"How to Preload Links in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Speed is among the topmost UX factors that determine how popular your website will be with your visitors. There is a number of things you can do to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-speed-up-wordpress-website\/\">speed up your WordPress website<\/a> &#8211; including its <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-mobile-page-load-speed-in-wordpress\/\">mobile version<\/a>. These general best practices are something every WordPress site owner should observe in order to provide good user experience and guarantee plenty of traffic and low bounce rates. But there are some perhaps lesser known and applied techniques you can apply, and preloading links is one of them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019re explaining why you may want to have your WordPress preload links on your pages, and show you how to set it all up (it\u2019s not at all hard!).[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-does-it-mean-to-preload-links\">What Does It Mean to Preload Links?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#benefits-of-preloading-links\">Benefits of Preloading Links<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#wordpress-preload-links-how-to-set-it-up\">WordPress Preload Links &#8211; How to Set It Up?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-does-it-mean-to-preload-links\"><\/a>What Does It Mean to Preload Links?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The term \u201cpreloading\u201d means, obviously, <strong>loading in the background, before the content is served<\/strong> to the visitor. It basically means getting the resources ready before the time they are actually needed, so the whole process runs faster. It is a technique particularly used by browsers, that are taught to predict the resource (a page, most commonly) that a user might want to access, and preloading it in the background, so that it opens and loads faster.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Link preloading, in particular, means that <strong>the browser will identify the links on your page and get them ready for the visitor in case he or she decides to click on them<\/strong>. The links are loaded before the visitor interacts with them, and as a result, the linked resource is served much faster.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Preloading is not to be confused with prefetching.<\/strong> In preloading, you are telling the browser that the user will most likely click on a resource link to access that resource. Because of the high probability of need, the browser will prioritize the preloading of the resource (the linked page).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Prefetching, on the other hand, signals to the browser that a resource might be needed, and it gives it a lower priority. This is usually the case for resources on the next page, not the current page the visitor is viewing.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"benefits-of-preloading-links\"><\/a>Benefits of Preloading Links in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]It\u2019s important to understand that preloading links will not make your page loading speed faster. This will depend on other speed optimization factors, but link preloading will still be very beneficial to the overall UX of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The entire experience of your website includes things that happen on your pages, the quality of your navigation, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/\">the overall accessibility of your site<\/a>, and many other site-specific factors. However, it also includes things that lead visitors to your pages, and that lead away from them. How fast a linked page will load will, in your visitor\u2019s mind, fall into the same experience as how fast your own pages will load. Obviously, you will therefore want to optimize that too, and that\u2019s precisely what link preloading is for. And that\u2019s for external links. For internal ones, it\u2019s even clearer &#8211; you want your entire website to load fast and if you preload your internal links, your internal pages will load faster, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With a better overall UX, your website will also have higher traffic and your SEO score will be higher.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, bear in mind that <strong>it\u2019s not a good idea to just set all links to preload without any criteria or fine-tuning<\/strong>. Specifically, if you set all your links to preload, it may cause an opposite effect and even crash your server. You may want to exclude certain pages, such as login, and if you\u2019re running an online shop, your cart and checkout pages, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s find out how to properly set up link preloading so that you get to reap maximum benefit from this simple technique.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"wordpress-preload-links-how-to-set-it-up\"><\/a>WordPress Preload Links &#8211; How to Set It Up?<\/h2>\n<p>[\/vc_column_text][vc_column_text]As it\u2019s usually the case with WordPress, the simplest solutions involve using our fave little helpers &#8211; plugins. For this purpose, we\u2019ll be using <a href=\"https:\/\/wordpress.org\/plugins\/flying-pages\/\" target=\"_blank\" rel=\"noopener\">Flying Pages<\/a>, a handy little plugin that uses a piece of JS code to preload links. It waits until the browser is idle and then detects all links in the viewport, as well as those hovered upon, and then preloads them. This way, Flying Pages makes sure link preloading doesn\u2019t cause any server issues or crash it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Start by installing the plugin. Go to <em><strong>Plugins&gt;Add New<\/strong><\/em> and then type \u201cFlying Pages\u201d in the search box. Once you find it, click on <em><strong>Install<\/strong><\/em> and then on <em><strong>Activate<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve got that set up, go to <em><strong>Settings&gt;Flying Pages<\/strong><\/em> to configure the plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option here is to set the delay before the plugin starts preloading links regardless of the hover. You can set any value you want here &#8211; we\u2019ll leave it at zero, meaning no delay.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"514\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Start-Preloading-Delay.jpg\" class=\"attachment-full size-full\" alt=\"Start Preloading Delay\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Start-Preloading-Delay.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Start-Preloading-Delay-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Start-Preloading-Delay-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Start-Preloading-Delay-620x329.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your next option is to set \u201cMax requests per second\u201d. Again, set a value you like but note that lower values will be lighter on your server. Three is the recommended value and we\u2019ll leave it at that.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"514\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Max-Requests-Per-Second.jpg\" class=\"attachment-full size-full\" alt=\"Max Requests Per Second\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Max-Requests-Per-Second.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Max-Requests-Per-Second-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Max-Requests-Per-Second-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Max-Requests-Per-Second-620x329.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you may want to check the box that says \u201cPreload only on mouse hover.\u201d This is pretty self-explanatory: when enabled, this option preloads only those links that the user hovers over with their mouse, showing intent to navigate to them. If you want to preload all links in the viewport, leave the box unchecked.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you can also set the duration of mouse hover delay &#8211; the time that passes from the moment a user hovers over a link, until it starts preloading. We will set it to 50ms.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Mouse-Hover-Delay.jpg\" class=\"attachment-full size-full\" alt=\"Mouse Hover Delay\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Mouse-Hover-Delay.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Mouse-Hover-Delay-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Mouse-Hover-Delay-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Mouse-Hover-Delay-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next option is a handy one &#8211; it allows you to create a list of URL keywords and formats that will not be preloaded. The default list includes your login page, checkout, cart, as well as some common image formats. To these, you can add any other keywords you want to exclude from preloading.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Important note: if you\u2019re running an affiliate program or using an affiliate plugin, then make sure to add affiliate prefixes (such as \/go\/ or \/refer\/) to the \u201cIgnore keywords\u201d list, otherwise your affiliate link tracking may not work.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Ignore-Keywords.jpg\" class=\"attachment-full size-full\" alt=\"Ignore Keywords\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Ignore-Keywords.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Ignore-Keywords-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Ignore-Keywords-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Ignore-Keywords-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you may want to check the box saying \u201cDisable for logged-in admins\u201d to help reduce server load.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve gone through the options, click on<em><strong> Save Changes<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Save-Changes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Save-Changes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s literally all there is to it. Once configured, the Flying Pages plugin will take care of link preloading for you. You can always go back to the settings and change the options that don\u2019t work for you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Thanks to Flying Pages, even complete WordPress beginners can set up link preloading on their website or blog. Note, however, that link preloading won\u2019t show any improvement in your page speed tests. As we said earlier, link preloading only improves the overall experience of your website by making link clicking faster, not your actual page loading speed.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress preload links are a great way to improve the overall UX of your website. In this article, we&#8217;re showing you just how to set it up. <\/p>\n","protected":false},"author":3,"featured_media":42382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-42362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=42362"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/42382"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=42362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=42362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=42362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}