{"id":8161,"date":"2020-06-06T15:00:17","date_gmt":"2020-06-06T13:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8161"},"modified":"2020-08-28T12:11:12","modified_gmt":"2020-08-28T10:11:12","slug":"eliminate-render-blocking-resources","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/eliminate-render-blocking-resources\/","title":{"rendered":"How to Eliminate Render-Blocking Resources (JavaScript and CSS) in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Website speed is one of the many things that affect your Google Search rankings. Also, since it dramatically impacts whether a visitor will stay on your site or not, it\u2019s no wonder that website owners continuously strive to improve it. Some of the methods of improving your page loading speed include having a good web hosting service, using caching plugins, and eliminating render-blocking resources like JavaScript and CSS on your WordPress website. Therefore fixing render-blocking issues is quite important. Since knowing how to do that isn\u2019t common, we prepared this article to explain what it means to have render-blocking resources and how to eliminate them. For easier navigation, we divided this article into several sections:[\/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=\"#testing-your-website\">Testing your website<\/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=\"#using-wordpress-plugins\">Solving the issue using WordPress plugins<\/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=\"#verifying-that-the-issue-is-solved\">Verifying that the issue is solved<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What It Means to Have Render-Blocking JavaScript and CSS Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]When a user visits your website, their web browser will start to load the page from top to bottom. The upper section of the page, that is loaded and seen first, is called <strong>above the fold (ATF) content<\/strong>. If the browser comes across a CSS stylesheet or a JS script during the loading process it will pause the page loading in order to parse those resources, thus slowing the overall page load speed. Only the CSS stylesheets or JS scripts that are loaded while above the fold content is loading, but are considered non-relevant to its functioning, are the ones we call render-blocking. A solution to counteract this is to delay the loading of unnecessary resources. You can do this by loading your JS scripts, which are responsible for interactions and functionality rather than style, in the footer (before the closing <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;\/body&gt;<\/code> tag). CSS stylesheets should still be loaded at the top (in the head section) in order to avoid the so-called <strong>flashes of unstyled content<\/strong> (FOUC). FOUC is a short moment where above the fold content is loaded with default browser stylization, which can look unappealing to visitors and cause them to turn away from your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since all plugins and themes add both CSS and JS, some of which may be render-blocking, you need to tackle this issue as efficiently as possible. We&#8217;re going to introduce you to several plugins you can use to address render-blocking scripts and stylesheets. Additionally, we\u2019re going to quickly cover what some of those plugins are doing behind the scenes so you can grasp what you need to do. <strong>The explanations might seem a bit complicated but are necessary in order to understand the options offered by certain plugins<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to the elimination of render-blocking JS scripts, one of the solutions is to add async or defer attributes to them. Async and defer achieve the same purpose \u2013 <strong>downloading JS scripts while parsing HTML content<\/strong>. The main difference between the two is that when using async the script is executed after it is loaded (by pausing the HTML parsing) whereas when using defer the scripts are executed after the HTML parsing is done. Both methods have their pros and cons. <strong>Defer is better suited for scripts with a dependency, as it preserves the order in which they are defined. Async is better suited for scripts without a dependency, as they are executed as soon as they are loaded<\/strong>. Additionally, before you employ either of those methods, make sure to exclude jquery.js as it needs to load with ATF content. <strong>Deferring or asynching jquery.js can result in your site breaking since there are scripts dependant on it running properly<\/strong>. Spamaller scripts can either be combined and then asynced\/deferred or loaded inline with HTML.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to the elimination of render-blocking CSS stylesheets, the solutions include loading smaller CSS inline with HTML, use conditional CSS-specifying viewports and widths (with the use of media queries), and asynchronously loading the remaining stylesheets, which has become a common WordPress practice.[\/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\">How to Eliminate Render-Blocking JS and CSS Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]You can use WordPress plugins to eliminate render-blocking resources. Depending on the extent of the issue, you can <strong>opt to use free or premium plugins<\/strong>. You could also <strong>eliminate render-blocking resources manually, but that requires a great deal of advanced WordPress knowledge<\/strong>, and, as such, we will focus on plugin-based solutions. <strong>Using plugins can make the process of removing render-blocking resources simple<\/strong>. It includes the following steps: testing the site to establish which resources are render-blocking, enabling the proper plugin options, and re-testing to verify if the issue is gone. If needed, the process can be repeated several times by testing additional plugin options to get the best results.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"testing-your-website\"><\/a>Testing Your Website<\/h3>\n<p>[\/vc_column_text][vc_column_text]The first step of every successful troubleshooting attempt is finding the problem. Luckily, there are many good website-testing tools. We will take a look at two such websites \u2013 <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GTmetrix<\/a> and <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">PageSpeed Insights<\/a>. Other options you can try include <a href=\"https:\/\/tools.pingdom.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom Speed Test<\/a>, <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebPage Test<\/a>, and <a href=\"https:\/\/tools.keycdn.com\/speed\" target=\"_blank\" rel=\"noopener noreferrer\">KeyCDN Website Speed Test<\/a>. Before we move on to testing, you should be aware that website-testing tools might crawl your site more slowly the first time. Because of that, they may end up showing higher page load times. Therefore, <strong>we suggest running several tests and using the average result as the yardstick<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>GTmetrix is a very detailed website-testing tool<\/strong>\u2014it checks the PageSpeed and YSlow metrics and shows the waterfall visualization of your page load. If you register (which you can do for free) you also <strong>get access to page load timings, video playback of your loading process, as well as the history of previous tests you made<\/strong>. Additionally, while being logged-in, you get to edit analysis options. Those include the browser type (Chrome and Firefox), mobile testing (Galaxy Nexus, Android system using the Chrome browser), seven different locations to choose from, types of connection, and the use of an Adblock.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To test your site, visit the GTmetrix page, <strong>insert your URL<\/strong>, and click <strong>the <em>Test your site<\/em> button<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Testing-your-website.jpg\" class=\"attachment-full size-full\" alt=\"Testing your website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Testing-your-website.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Testing-your-website-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Testing-your-website-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By clicking on <strong>the <em>Page Speed<\/em> tab<\/strong> you can see all the recommendations and your current grade for each. To locate all render-blocking CSS and JS resources, check the relevant lines regarding inline code, minification, and optimization. <strong>We marked all the options you should look for in the screenshots below<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Page-Speed-tab.jpg\" class=\"attachment-full size-full\" alt=\"Page Speed tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Page-Speed-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Page-Speed-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Page-Speed-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Options-you-should-look-for.jpg\" class=\"attachment-full size-full\" alt=\"Options you should look for\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Options-you-should-look-for.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Options-you-should-look-for-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Options-you-should-look-for-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In most cases, the last two options we marked (<strong>Put CSS in the document head<\/strong> and <strong>Prefer asynchronous resources<\/strong>) can be ignored. That is because both those options are currently default WordPress practice.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you click on any of the recommendations, it will show a list of resources that need to be improved<\/strong>. For our purposes, it will be <strong>a list of stylesheets or JS scripts<\/strong>. Also, hovering over <strong>the <em>What\u2019s this mean?<\/em> button<\/strong> will show a small excerpt of an article clarifying the meaning of the recommendation, accompanied by <strong>a <em>Read more<\/em> link<\/strong> to the complete article for further explanation.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-List-of-JS-scripts.jpg\" class=\"attachment-full size-full\" alt=\"List of JS scripts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-List-of-JS-scripts.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-List-of-JS-scripts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-List-of-JS-scripts-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>You should save a list of the stylesheets and scripts you get in the results as it will be helpful in the steps to come.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another often-used website tool is the <strong>PageSpeed Insights<\/strong> website. PageSpeed Insights reviews your site\u2014both the desktop and mobile versions\u2014on a scale of 0\u2013100. It reviews above-the-fold loading time as well as full-page loading time. Similar to GTmetrix, it provides suggestions for improving your website loading time. Moreover, it takes into account information from the <em>Chrome User Experience Report<\/em> to score your mobile website by considering the font and button sizes on mobile as well as the viewport configuration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To test your site, visit PageSpeed Insights, <strong>insert your website URL<\/strong>, and press <strong>the <em>ANALYZE<\/em> button<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-PageSpeed-Insights.jpg\" class=\"attachment-full size-full\" alt=\"PageSpeed Insights\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-PageSpeed-Insights.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-PageSpeed-Insights-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-PageSpeed-Insights-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Navigate to <strong>the Opportunities section<\/strong> to see where you can make improvements to get a faster page load time. PageSpeed Insights offers a more concise report regarding the removal of render-blocking resources, shown in a single subsection. You only need to search for the <em><strong>Eliminate render-blocking resources<\/strong><\/em> subsection\/tab.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Opportunities-section.png\" class=\"attachment-full size-full\" alt=\"Opportunities section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Opportunities-section.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Opportunities-section-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Opportunities-section-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Eliminate-render-blocking-resources.jpg\" class=\"attachment-full size-full\" alt=\"Eliminate render blocking resources\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Eliminate-render-blocking-resources.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Eliminate-render-blocking-resources-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Eliminate-render-blocking-resources-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Clicking on it<\/strong> will open its content. There you will find a short explanation regarding render-blocking resources, including links to possibly helpful plugins. Most importantly, it contains <strong>the list of all render-blocking stylesheets and scripts<\/strong> which you will need later on.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-List-of-all-render-blocking-stylesheets-and-scripts.jpg\" class=\"attachment-full size-full\" alt=\"List of all render blocking stylesheets and scripts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-List-of-all-render-blocking-stylesheets-and-scripts.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-List-of-all-render-blocking-stylesheets-and-scripts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-List-of-all-render-blocking-stylesheets-and-scripts-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;84px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-wordpress-plugins\"><\/a>Solving the Issue Using WordPress Plugins<\/h3>\n<p>[\/vc_column_text][vc_column_text]One of the many benefits of WordPress is the multitude of plugins for almost every purpose. Fixing render-blocking resources is no exception, so we turn to caching and site-optimization plugins for help. However, before you proceed, we strongly advise you to make <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">a backup of your site<\/a>. Removing or changing the order at which some resources are loaded in order to prevent them from being render-blocking could negatively impact your website or, more precisely, break your theme. So make sure you have a backup ready just in case, and then we can move on to the main section of this article. We will take a look at two plugins \u2013 <a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3 Total Cache<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/wp-fastest-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Fastest Cache<\/a>, and give you some additional suggestions and alternatives in the section afterward.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>W3 Total Cache<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]After you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install and activate the plugin<\/a>, navigate to the <strong>Performance tab<\/strong> in your dashboard and click on the <strong>General Settings<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-W3-Total-Cache-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"W3 Total Cache General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-W3-Total-Cache-General-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-W3-Total-Cache-General-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-W3-Total-Cache-General-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <strong>the Minify section tick to <em>Enable<\/em><\/strong>. Select <strong><em>Auto<\/em> under Minify mode<\/strong> and then <em><strong>Save all settings<\/strong><\/em> below. Finally, click <strong>the <em>Save Settings &amp; Purge Caches<\/em> button<\/strong> on the right.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Minify-section.jpg\" class=\"attachment-full size-full\" alt=\"Minify section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Minify-section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Minify-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Minify-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to have additional control over which stylesheets and JS scripts get minified, you can <strong>select <em>Manual<\/em> under Minify mode<\/strong>. However, we advise against using manual minification unless you are a more advanced WordPress user or have someone to guide you through it. If you still want to try manual minification of JS scripts, then you should navigate to <strong>Performance &gt; Minify<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Performance-Minify.jpg\" class=\"attachment-full size-full\" alt=\"Performance Minify\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Performance-Minify.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Performance-Minify-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Performance-Minify-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then locate <strong>the JS section<\/strong>. <strong>Tick the checkbox next to <em>Enable<\/em><\/strong> and choose <strong>your embed type<\/strong> (we suggest <em>Non-blocking using async<\/em> or <em>Non-blocking using defer types<\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Choose-your-embed-type.jpg\" class=\"attachment-full size-full\" alt=\"Choose your embed type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Choose-your-embed-type.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Choose-your-embed-type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Choose-your-embed-type-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, select <strong>your active theme<\/strong> and start adding the JS scripts by clicking <strong>the <em>Add a script<\/em> button<\/strong>. To add a script, insert its <strong>file URL<\/strong> and select its <strong>embed location<\/strong>. The URLs are the ones you got in the previous step, either by using GTMetrix or Page Speed Insights. And the embed location for JS scripts should be before the closing <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;\/body&gt;<\/code> tag.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Select-embed-location.jpg\" class=\"attachment-full size-full\" alt=\"Select embed location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Select-embed-location.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Select-embed-location-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Select-embed-location-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, to minify stylesheets, scroll down to <strong>the CSS section<\/strong>, located in <strong>Performance &gt; Minify<\/strong>, and tick <strong>the checkbox next to the <em>Enable<\/em> option<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-CSS-section.jpg\" class=\"attachment-full size-full\" alt=\"CSS section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-CSS-section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-CSS-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-CSS-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Choose <strong>your active theme<\/strong> and click on <strong>the <em>Add a style<\/em> sheet button<\/strong>. After you are done adding the stylesheets you need, click on <strong>the <em>Save all<\/em> settings button<\/strong> below. Afterward, click on <strong>the <em>Save Settings &amp; Purge Caches<\/em> button<\/strong> on the right.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Add-a-style-sheet.jpg\" class=\"attachment-full size-full\" alt=\"Add a style sheet\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Add-a-style-sheet.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Add-a-style-sheet-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Add-a-style-sheet-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;34px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>WP Fastest Cache<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]After you install and activate the plugin, open <strong>the <em>WP Fastest Cache<\/em> option<\/strong> in your admin dashboard menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click on <strong>the <em>Settings<\/em> tab<\/strong> and tick all the options regarding the minification and combining of CSS and JS. Those are <strong>Minify Css<\/strong>, <strong>Combine Css<\/strong>, and <strong>Combine Js<\/strong>. However, please note that you need to buy the premium version of this plugin to get access to its more powerful options for fixing render-blocking. Those premium options include <strong>Minify Css Plus<\/strong>, <strong>Minify Js<\/strong>, <strong>Combine Js Plus<\/strong>, <strong>Render Blocking Js<\/strong>, and the <strong>Google Fonts option<\/strong> (for asynchronous load). Once you\u2019ve selected the options you need, simply <strong>go to Submit to finish up<\/strong>.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Tick-all-the-options-regarding-the-minification-and-combining-of-CSS-and-JS.jpg\" class=\"attachment-full size-full\" alt=\"Tick all the options regarding-the-minification-and combining of CSS and JS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Tick-all-the-options-regarding-the-minification-and-combining-of-CSS-and-JS.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Tick-all-the-options-regarding-the-minification-and-combining-of-CSS-and-JS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Tick-all-the-options-regarding-the-minification-and-combining-of-CSS-and-JS-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"verifying-that-the-issue-is-solved\"><\/a>Verifying That the Issue Is Solved<\/h3>\n<p>[\/vc_column_text][vc_column_text]After your plugin of choice completes elimination of render-blocking scripts and stylesheets, you should run another test of your website using the website(s) mentioned before. Make sure to clear both plugin and browser cache beforehand. Also, we suggest waiting a couple of minutes before running the test. Then, you can <strong>check your website using one of the website-testing tools<\/strong>. If you aren\u2019t sure how to re-test your site, you can repeat the same process described under <em><strong>Testing your website<\/strong><\/em>. Make sure to run the test using the same tool, in order to be able to compare results. For our new test-run, we got the following results.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>GTmetrix results:<\/strong>[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Verifying-that-the-issue-is-solved.png\" class=\"attachment-full size-full\" alt=\"Verifying that the issue is solved\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Verifying-that-the-issue-is-solved.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Verifying-that-the-issue-is-solved-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/17-Verifying-that-the-issue-is-solved-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-GTmetrix-results.png\" class=\"attachment-full size-full\" alt=\"GTmetrix results\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-GTmetrix-results.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-GTmetrix-results-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/18-GTmetrix-results-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>PageSpeed Insights results:<\/strong>[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-PageSpeed-Insights-results.jpg\" class=\"attachment-full size-full\" alt=\"PageSpeed Insights results\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-PageSpeed-Insights-results.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-PageSpeed-Insights-results-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/19-PageSpeed-Insights-results-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, the results are very close to being perfect but aren\u2019t there yet. Sometimes, this means you should run through another fix using a different plugin but, it\u2019s more likely that you need to take the result with a grain of salt. It\u2019s important to note that the recommendations given by website-testing tools are simply guidelines, and shouldn\u2019t be followed blindly. <strong>You shouldn\u2019t strive to achieve a perfect score at the cost of removing an essential JS script required for a robust WordPress website to work properly<\/strong>. For example, because you excluded jquery.js, you won\u2019t get a perfect score, but that was necessary to ensure that all scripts (and by extension, your site) that rely on it are running smoothly.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Other Helpful WordPress Plugins<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you aren\u2019t satisfied with the test results you got after your first fix, you can try using another caching or page optimization plugin. You can also consider finding a developer for further help. As with all plugins, conflicts can happen, so you should check the compatibility before adding a new one. In case of conflicts, contact the plugin authors for guidance.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will take a look at two more plugins\u2014<a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">Autoptimize<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/async-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Async JavaScript<\/a>. They are both free, designed by the same author, and often used in conjunction to optimize websites and remove any render-blocking resources. Autoptimize can minify both scripts and stylesheets, aggregate them, and inline both JS and CSS. However, Async Javascript is only useful for optimizing JS scripts. It gives you direct control over which scripts are asynced, deferred, or excluded.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Autoptimize<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing the plugin, navigate to <strong>Settings &gt; Autoptimize<\/strong> and click on <strong>the <em>JS<\/em>, <em>CSS<\/em> &amp; <em>HTML<\/em> tab<\/strong>. You can significantly improve the impact of render-blocking JS and CSS code simply by checking the default <strong><em>Optimize JavaScript Code?<\/em> and <em>Optimize CSS Code<\/em>? options<\/strong>. Also, you can tick the checkbox next to<strong> the <em>Also aggregate inline JS?<\/em> and <em>Also aggregate inline CSS?<\/em> options<\/strong> to fix additional render-blocking JS and CSS files. However, unless you are an advanced WordPress user, we advise sticking to the default options for optimizing the JS and CSS code.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Autoptimize-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Autoptimize Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Autoptimize-Plugin.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Autoptimize-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/20-Autoptimize-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Fix-additional-render-blocking-JS-and-CSS-files.jpg\" class=\"attachment-full size-full\" alt=\"Fix additional render blocking JS and CSS files\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Fix-additional-render-blocking-JS-and-CSS-files.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Fix-additional-render-blocking-JS-and-CSS-files-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/21-Fix-additional-render-blocking-JS-and-CSS-files-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Async JavaScript<\/strong>[\/vc_column_text][vc_column_text]After installing the plugin, navigate to <strong>Settings &gt; Async JavaScript<\/strong> and click on <strong>the <em>Settings<\/em> tab<\/strong>. Tick the checkbox next to <strong>the <em>Enable Async JavaScript?<\/em> option<\/strong> and choose either <strong>the <em>Apply Async<\/em> or the <em>Apply Defer<\/em> option<\/strong> from <strong>the <em>Quick Settings<\/em> section. If the <em>Apply Async<\/em> option causes issues to your website, try excluding jQuery (click on the radio button next to <em>Exclude<\/em> in the jQuery section) or simply choose the <em>Apply Defer<\/em> option<\/strong>. Using this plugin, you can choose which scripts to async and which to defer by manually adding them. Also, this plugin offers the option to exclude scripts from the async\/defer process. This is true for both single scripts and those contained within a plugin or theme. While this plugin has its uses, it\u2019s geared towards advanced WordPress users, so it would be best for developers.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Async-JavaScript.jpg\" class=\"attachment-full size-full\" alt=\"Async JavaScript\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Async-JavaScript.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Async-JavaScript-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/22-Async-JavaScript-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Apply-Defer-option.jpg\" class=\"attachment-full size-full\" alt=\"Apply Defer option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Apply-Defer-option.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Apply-Defer-option-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/23-Apply-Defer-option-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Render-blocking scripts and stylesheets can have a significant impact on the speed of your site, so it\u2019s important that you learn how to address them. In this article, we have taken a look at what it means to have render-blocking JavaScript and CSS code, how it loads, and some of the plugins you can use to eliminate render-loading resources. The plugins we chose include advanced website-optimization options that will help you shave down your load time. So, your site will be ready to rise in search engine rankings.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll show you how to locate and eliminate render-blocking resources like JavaScript and CSS in WordPress.<\/p>\n","protected":false},"author":11229,"featured_media":8185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,52,13],"class_list":["post-8161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-troubleshooting","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8161","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\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8161"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8185"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}