{"id":2693780,"date":"2020-09-09T12:22:15","date_gmt":"2020-09-09T10:22:15","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=2693780"},"modified":"2022-03-10T10:59:05","modified_gmt":"2022-03-10T09:59:05","slug":"wp-rocket-3-7","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/","title":{"rendered":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP&nbsp;Rocket 3.7"},"content":{"rendered":"<p>After our seventh anniversary celebrations in July and a month of August dedicated to product development, we open September with a bang: <strong>welcome WP Rocket 3.7<\/strong>!<\/p><p>The <a href=\"https:\/\/wp-rocket.me\/changelog\/\">changelog of this new major version is rich with improvements<\/a>, and you shouldn\u2019t miss it. In this article, we\u2019ll focus on the two queen features of 3.7: <strong>delay of JS execution <\/strong>and<strong> link preloading<\/strong>.<\/p><p>Curious to know more about them? You just have to keep reading!<\/p><h2 class=\"wp-block-heading\">What\u2019s New in WP Rocket 3.7<\/h2><p>There are many features that enrich this new major release.&nbsp;<\/p><p>We leave you the curiosity to discover in our changelog those that will have a lighter impact on the user experience.<br><\/p><p>We want to focus instead on the two features that will produce a <strong>great improvement in your PageSpeed score, loading time, and the perceived speed<\/strong> of your website:<br><\/p><ul class=\"wp-block-list\"><li>Delay of JavaScript Execution<\/li><li>Preload Links<\/li><\/ul><p>Also, because we want to keep our user <strong>interface always clean and as clear as possible<\/strong>, we have removed some options from the WP Rocket backend: we\u2019ll detail these changes below in this article.<\/p><p>If you prefer to have a video preview of what&#8217;s new in this version, here is our presentation video:<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"WP Rocket caching plugin: version 3.7 \ud83d\ude80\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/DdhhEYGZMfE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>To know v3.7 in detail, read on!<\/p><h2 class=\"wp-block-heading\">Delay of JavaScript Execution<\/h2><p>Are you familiar with the concept of lazy-loading? You&#8217;ve probably heard about it in terms of <a href=\"https:\/\/wp-rocket.me\/blog\/lazyloading\/\">image management and optimization<\/a>. Lazy-loading for images is one of the first features we included in WP Rocket and now <a href=\"https:\/\/wp-rocket.me\/blog\/lazy-loading-wordpress-5-5\/\">the latest version of WordPress, 5.5 \u201cEckstine\u201d<\/a>, has introduced it by default.<\/p><p>The principle behind lazy-loading is to load files only when the user visiting a page needs them. With WP Rocket 3.7, we are applying this same principle to JavaScript files.<\/p><p>Not all scripts are relevant for the initial page render and <strong>delaying them can improve the loading time<\/strong>.&nbsp;<\/p><p>For example, think about a script managing an exit intent popup: such script is not relevant during the initial page load because it will be triggered only when the user is about to leave the page.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"519\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wprocket-exit-intent-popup.png\" alt=\"The exit-intent popup on the WP Rocket website\" class=\"wp-image-2693829\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wprocket-exit-intent-popup.png 720w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wprocket-exit-intent-popup-300x216.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>The exit-intent popup on the WP Rocket website<\/figcaption><\/figure><p>This kind of JS script can be delayed. As a result, you&#8217;ll <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/reduce-javascript-execution-time\/\">reduce the JavaScript execution time<\/a>.<strong> You can obtain a huge performance gain<\/strong>.<\/p><h3 class=\"wp-block-heading\">How Does It Work?<\/h3><p>When you enable this option from the <em>File Optimization<\/em> tab, WP Rocket will reveal a text area where you can enter the scripts you want to delay. The <em>Delay JavaScript Execution<\/em> is an opt-in feature, so it\u2019s up to you to tell WP Rocket which inline or JavaScript files to delay.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"992\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-1024x992.png\" alt=\"The area of pre-populated scripts in WP Rocket settings\" class=\"wp-image-2693838\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-1024x992.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-300x291.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-768x744.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-1080x1046.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution-896x868.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/delay-js-execution.png 1082w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The area of pre-populated scripts in WP Rocket settings<\/figcaption><\/figure><p>To do so, specify the keywords that identify the files to delay and WP Rocket will search for those keywords. Our plugin will analyze all the scripts found on the page, not only its URL.<\/p><p>This means that you can include keywords that target data attributes or any other attributes on the script tag; for inline JavaScript, you can use any keyword inside the code itself.<\/p><p>The only thing you have to pay attention to is the<strong> choice of unique keywords<\/strong>, so that WP Rocket doesn&#8217;t get confused with script identification.&nbsp;<\/p><p>WP Rocket pre-populates this text area with some scripts, when it identifies some that are safe to delay. For example, this is the list of third-party scripts we are delaying on our website:<br><br>&#8211; Google Analytics<br>&#8211; Facebook Pixel<br>&#8211; Linkedin Pixel<br>&#8211; Twitter Pixel<br>&#8211; OptinMonster<br>&#8211; Olark Chat<\/p><p>If any of the scripts WP Rocket includes by default happen to cause issues, you can remove them from the list in a blink of an eye. This is also how you can <a href=\"https:\/\/wp-rocket.me\/blog\/third-party-scripts\/\">reduce the impact of third-party scripts on your WordPress site<\/a>.<\/p><p><a href=\"https:\/\/docs.wp-rocket.me\/article\/1349-delay-javascript-execution\">Learn more about this new feature with our documentation<\/a>.<\/p><h3 class=\"wp-block-heading\">What Can You Achieve with This Option?<\/h3><p>Although we can&#8217;t predict precise numbers that apply to all websites (<em>you know how difficult this is when it comes to speed testing!<\/em>), we can show you the <strong>results we&#8217;ve achieved on the WP Rocket website<\/strong>.<\/p><h4 class=\"wp-block-heading\">Before<\/h4><p>Before enabling the Delay of JS Execution option, we tested the <a href=\"https:\/\/gtmetrix.com\/reports\/wp-rocket.me\/bp97sfnv\">speed of WP Rocket website with GTMetrix<\/a>:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-before-1024x412.png\" alt=\"GTMetrix speed test before the delay of JS execution\" class=\"wp-image-2693879\"\/><figcaption>GTMetrix speed test before the delay of JS execution<\/figcaption><\/figure><p>We also ran a few PageSpeed tests. While the score for the desktop version of our site was already very good (97), for the mobile version we started from a fairly low score:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/psi-before-mobile-1024x509.png\" alt=\"PageSpeed score for WP Rocket\u2019s mobile site before delaying JS execution\" class=\"wp-image-2693903\"\/><figcaption>The PageSpeed score for WP Rocket\u2019s mobile site before delaying JS execution<\/figcaption><\/figure><p>Ready to see what happened when we enabled the <em>Delay JS Execution <\/em>option? ?<\/p><h4 class=\"wp-block-heading\">After<\/h4><p>As soon as WP Rocket started to delay JS execution, the <a href=\"https:\/\/gtmetrix.com\/reports\/wp-rocket.me\/VFsahptB\">GTMetrix report turned into a green field<\/a>. ?<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-1024x422.png\" alt=\"GTMetrix speed test after the delay of JS execution\n\" class=\"wp-image-2693897\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-1024x422.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-300x124.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-768x316.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-1080x445.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after-896x369.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gtmetrix-after.png 1195w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>GTMetrix speed test after the delay of JS execution<\/em><\/figcaption><\/figure><p>What about the PageSpeed score? See for yourself.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/psi-after-mobile-1024x512.png\" alt=\"PageSpeed score for WP Rocket\u2019s mobile site after delaying JS execution time\n\" class=\"wp-image-2693909\"\/><figcaption><em>PageSpeed score for WP Rocket\u2019s mobile site after delaying JS execution time<\/em><\/figcaption><\/figure><p>We have summarized the results in this table, so it is easier to evaluate them at a glance:<\/p><figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Before<\/strong><\/td><td><strong>After<\/strong><\/td><\/tr><tr><td><strong>Loading time<\/strong><\/td><td>2,6 seconds<\/td><td>0,9 seconds<\/td><\/tr><tr><td><strong>PageSpeed Score Mobile<\/strong><\/td><td>46<\/td><td>86<\/td><\/tr><\/tbody><\/table><\/figure><p>As you can see, we obtained an amazing <strong>65% reduction in loading time <\/strong>(from 2,6s to 0,9s) and a <strong>87% improvement in the mobile PageSpeed score<\/strong>!<\/p><p>Considering that <a href=\"https:\/\/wp-rocket.me\/blog\/how-fast-is-my-mobile-site-measure-mobile-website-speed\/\">mobile speed is more and more important in the eyes of Google<\/a> and search engines every day, we are very happy with this outcome?<\/p><div id=\"om-vhommyfcghnxb3ebtozu-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'vhommyfcghnxb3ebtozu')<\/script><h2 class=\"wp-block-heading\">Preload Links<\/h2><p>There are a myriad of ways to optimize the performance of your site and make it load objectively faster; WP Rocket already plays a big part in it. But what about optimizing your site to make it load <em>psychologically faster<\/em>?&nbsp;<\/p><p><a href=\"https:\/\/wp-rocket.me\/blog\/perceived-performance-need-optimize\/\">Perceived performance<\/a> is a measure of how fast a user thinks your website is, not necessarily how fast speed tests say it is. The goal is to improve your website so it <em>feels<\/em> faster than the objective loading time.<\/p><p>We developed the <em>Preload Links<\/em> option to <strong>improve perceived performance<\/strong>.&nbsp;<\/p><h3 class=\"wp-block-heading\">How Does It Work?<\/h3><p>Preloading a link is technically called link <strong>prefetching<\/strong>. What does it mean?<\/p><p>A good definition is the one found in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Link_prefetching_FAQ#What_is_link_prefetching.3F\">MDN Web Docs<\/a>:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Link prefetching is a browser mechanism, which utilizes browser idle time to download or <em>prefetch<\/em> documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser&#8217;s cache.<\/p><\/blockquote><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-1024x529.png\" alt=\"How prefetching works\" class=\"wp-image-2693915\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-1024x529.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-300x155.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-768x397.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-1536x794.png 1536w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-1080x558.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links-896x463.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-links.png 1626w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>How prefetching works &#8211; <a href=\"https:\/\/web.dev\/link-prefetch\/\"><em>Source<\/em><\/a><\/figcaption><\/figure><p>WP Rocket 3.7 is going to use an early prefetch strategy to anticipate what page the user may navigate to next. As a result, the user will perceive pages linked by those URLs as loading instantly.&nbsp;<\/p><p>Does that mean we can predict the future now? Well, almost. ?<\/p><p>WP Rocket has become an excellent observer of the actions that take place on a page: it senses when the user hovers the mouse over a link or when they touch a link while swiping, scrolling, or zooming.<br><br>When we detect that the user is interested in an URL, we preload that page automatically.<\/p><p>In the <strong>Preload tab<\/strong>, you will find a new section dedicated to <strong>Preload Links<\/strong>. It&#8217;s a checkbox to enable\/disable the option:<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"716\" height=\"202\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/preload-links.png\" alt=\"Preload Links option in WP Rocket\" class=\"wp-image-2693944\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/preload-links.png 716w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/preload-links-300x85.png 300w\" sizes=\"(max-width: 716px) 100vw, 716px\" \/><figcaption>Preload Links option in WP Rocket<\/figcaption><\/figure><p>To prevent unexpected results, we also thought of a list of URL types that WP Rocket 3.7 excludes automatically from this behavior:<\/p><ul class=\"wp-block-list\"><li>Any wp-admin URL or login\/logout pages<\/li><li>URLs already excluded from the cache according to your WP Rocket configuration<\/li><li>Links to image files<\/li><li>Links including a query string or an anchor<\/li><li>External URLs<\/li><\/ul><p>\u2757\ufe0f <strong>Important:<\/strong> At the moment, this feature only works in Chrome. Safari, Opera, IE, and Edge don\u2019t currently support link prefetching. Firefox does make a link prefetch request; however, there is a<a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1527334\"> bug in Firefox<\/a> which blocks the prefetched page from being served from FF prefetch cache.<\/p><p><a href=\"https:\/\/docs.wp-rocket.me\/article\/1348-preload-links\">Learn more about this new feature with our documentation<\/a>.<\/p><h2 class=\"wp-block-heading\">Improving Core Web Vitals<\/h2><p>Over the past few months, we have been closely following the evolution of <a href=\"https:\/\/web.dev\/vitals\/\">Google&#8217;s Core Web Vitals<\/a>, and we are working to ensure that WP Rocket meets these new standards.<\/p><p>Version 3.7 already makes good progress in improving Core Web Vitals. ?<br><\/p><p>For example, we are automatically adding <code>font-display:swap<\/code> to CSS files containing a font-face.&nbsp;<\/p><p>By adding this property to the font, we instruct the browser to use a system font while the custom font is being downloaded. Once the custom font download is complete, the system font is replaced with the custom font.&nbsp;This means your users can interact with the website faster without waiting for the font to download.<\/p><p>At the same time, this enhancement improves rendering time and <a href=\"https:\/\/web.dev\/lcp\/\">Largest Contentful Paint (LCP)<\/a>. It also improves user experience because it avoids the &#8220;flash of invisible text&#8221;, the <a href=\"https:\/\/web.dev\/avoid-invisible-text\/\">invisible text during font loading<\/a>.<\/p><p>On the other hand, the new<em> Preload Links<\/em> features we\u2019ve just described in the previous paragraph are going to improve metrics like<a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-first-contentful-paint\/\"> First Contentful Paint<\/a> and <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-time-to-interactive\/\">Time to Interactive<\/a>; it can also often make subsequent navigations appear to load instantly.<\/p><p>And this is just the beginning!<br>A sneak-peek of what\u2019s coming next? ?<\/p><p>We are already working on some great news for the next versions of WP Rocket, like <strong><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/remove-unused-css\/\">removing unused CSS<\/a><\/strong> or <strong>loading fonts asynchronously<\/strong> to <a href=\"https:\/\/web.dev\/optimize-webfont-loading\/\">optimize WebFont loading and rendering<\/a>. ?<\/p><h2 class=\"wp-block-heading\">A Cleaner UI: Options Removed from the User Interface<\/h2><p>\u00abDecisions, not options\u00bb is the motto that has been leading our development philosophy since the beginning, here at WP Rocket.<\/p><p>We don&#8217;t want people using our plugin to feel overwhelmed by dozens of options and choices to make before finishing the setup.&nbsp;<\/p><p>Following this philosophy, over the years we have always tried to maintain a balance between basic and advanced options and clean user interface.<br><\/p><p>With WP Rocket 3.7, we took the opportunity to do some cleaning and focused on these two features:<\/p><ul class=\"wp-block-list\"><li><strong>Optimize Google Fonts<\/strong>&nbsp;<\/li><li><strong>Minify HTML<\/strong><\/li><\/ul><h3 class=\"wp-block-heading\">Optimize Google Fonts<\/h3><p>From now on, the <em>Optimize Google Fonts<\/em> feature is <strong>enabled by default in WP Rocket<\/strong>. Based on the data we have, around <strong>94%<\/strong> of our customers keep this option enabled.<\/p><p>The rest of the users who don\u2019t enable this option are probably not using Google Fonts on their site, or have voluntarily disabled it for some reason.<br><br>Incompatibilities due to this feature are rare, and we can count on the fingers of one hand the support tickets we receive related to it.&nbsp;<\/p><p>These factors helped us in our decision to remove this option from the UI and keep it automatically enabled in the background. ?<\/p><p>If you didn\u2019t previously enable the option, you won\u2019t have it active after updating to v3.7. To activate it, you can visit the <em>Tools <\/em>tab and use the \u201cOptimize Google Fonts\u201d button:<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-1024x364.png\" alt=\"How to enable Google Fonts Optimization\" class=\"wp-image-2693960\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-1024x364.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-300x107.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-768x273.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-1080x384.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization-896x319.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-optimization.png 1144w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>How to enable Google Fonts Optimization<\/figcaption><\/figure><h3 class=\"wp-block-heading\">Minify HTML<\/h3><p>We decided to remove this feature from WP Rocket altogether, as it is now obsolete.<\/p><p>GTMetrix eventually deprecated its <a href=\"https:\/\/gtmetrix.com\/blog\/recommendation-updates-http-2-changes-and-more\/\">recommendation to minify HTML<\/a> as the effect on the overall performance is not significant anymore. Performance tools like PageSpeed Insight and Pingdom Tools have been ignoring this recommendation for a while, so we feel confident that the Minify HTML option is no longer needed.&nbsp;<\/p><p>Following these changes, we are going to remove the <em>Basic Settings<\/em> area inside the File Optimization tab:<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-1024x524.png\" alt=\"The &quot;Basic Settings&quot; area we are removing from WP Rocket settings\" class=\"wp-image-2693971\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-1024x524.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-300x154.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-768x393.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-1080x553.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts-896x459.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-google-fonts.png 1168w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>We are removing the &#8220;Basic Settings&#8221; area<\/figcaption><\/figure><h2 class=\"wp-block-heading\">Summary<\/h2><p>WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score.&nbsp;<\/p><p>It revolves around two new stellar options: <strong>Delay JavaScript Execution <\/strong>and <strong>Preload links<\/strong>. The first one applies a sort of lazy-loading technology to JS files, while the second preloads the URLs a user is about to visit.<br><br>There\u2019s indeed some magic in this new version of WP Rocket! ?<\/p><p><br>Following our motto \u00abDecisions, not options\u00bb we also removed two features from the user interface of WP Rocket: Google Fonts Optimization and HTML Minification.&nbsp;<\/p><p>In <a href=\"https:\/\/wp-rocket.me\/changelog\/\">our changelog<\/a> you can find the complete list of enhancements WP Rocket 3.7 includes (yes, there\u2019s more!).&nbsp;<\/p><p><em>Update to v3.7 and leave your opinion in the comments section below!&nbsp;<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>WP&nbsp;Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features and update your WP&nbsp;Rocket! <\/p>\n","protected":false},"author":9832,"featured_media":2693986,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[62],"tags":[],"class_list":["post-2693780","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inside-wp-rocket"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7<\/title>\n<meta name=\"description\" content=\"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7\" \/>\n<meta property=\"og:description\" content=\"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T10:22:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-10T09:59:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alice Orru\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alice Orru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\"},\"author\":{\"name\":\"Alice Orru\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417\"},\"headline\":\"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP&nbsp;Rocket 3.7\",\"datePublished\":\"2020-09-09T10:22:15+00:00\",\"dateModified\":\"2022-03-10T09:59:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\"},\"wordCount\":2035,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg\",\"articleSection\":[\"Inside WP Rocket\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\",\"url\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\",\"name\":\"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg\",\"datePublished\":\"2020-09-09T10:22:15+00:00\",\"dateModified\":\"2022-03-10T09:59:05+00:00\",\"description\":\"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg\",\"width\":1200,\"height\":628,\"caption\":\"WP Rocket 3.7\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inside WP Rocket\",\"item\":\"https:\/\/wp-rocket.me\/blog\/inside-wp-rocket\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP&nbsp;Rocket 3.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417\",\"name\":\"Alice Orru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4f4cb17d459b1433fea57ad2286303bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4f4cb17d459b1433fea57ad2286303bd?s=96&d=mm&r=g\",\"caption\":\"Alice Orru\"},\"description\":\"Alice Orr\u00f9 is a web content writer with strong experience in international customer service and B2B copywriting. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7","description":"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!","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:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/","og_locale":"en_US","og_type":"article","og_title":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7","og_description":"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!","og_url":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2020-09-09T10:22:15+00:00","article_modified_time":"2022-03-10T09:59:05+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg","type":"image\/jpeg"}],"author":"Alice Orru","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"Written by":"Alice Orru","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/"},"author":{"name":"Alice Orru","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417"},"headline":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP&nbsp;Rocket 3.7","datePublished":"2020-09-09T10:22:15+00:00","dateModified":"2022-03-10T09:59:05+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/"},"wordCount":2035,"commentCount":13,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg","articleSection":["Inside WP Rocket"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/","url":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/","name":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP Rocket 3.7","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg","datePublished":"2020-09-09T10:22:15+00:00","dateModified":"2022-03-10T09:59:05+00:00","description":"WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. Discover its new stellar features!","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/3-7-is-here.jpg","width":1200,"height":628,"caption":"WP Rocket 3.7"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Inside WP Rocket","item":"https:\/\/wp-rocket.me\/blog\/inside-wp-rocket\/"},{"@type":"ListItem","position":3,"name":"Delaying JS Execution and Preloading Pages Before Click: Welcome to WP&nbsp;Rocket 3.7"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]},{"@type":"Person","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417","name":"Alice Orru","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4f4cb17d459b1433fea57ad2286303bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4f4cb17d459b1433fea57ad2286303bd?s=96&d=mm&r=g","caption":"Alice Orru"},"description":"Alice Orr\u00f9 is a web content writer with strong experience in international customer service and B2B copywriting. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps."}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2693780"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/users\/9832"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/comments?post=2693780"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2693780\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media\/2693986"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=2693780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/categories?post=2693780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/tags?post=2693780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}