{"id":5752545,"date":"2023-07-07T08:20:14","date_gmt":"2023-07-07T06:20:14","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=5752545"},"modified":"2024-06-11T12:01:45","modified_gmt":"2024-06-11T10:01:45","slug":"web-performance-misconceptions","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/web-performance-misconceptions\/","title":{"rendered":"The 10 Most Common Web Performance Misconceptions"},"content":{"rendered":"

At WP Rocket, our mission is to educate users about the importance of web performance while making it as simple and accessible as possible. It\u2019s quite a challenge: web performance is not an easy topic, and optimizing a website to improve performance is even less easy to explain and understand. What\u2019s more, finding reliable information is difficult \u2013 the topic is complex and sometimes subjective. <\/p>

This article highlights some misleading concepts about what matters when identifying the key performance optimization actions to speed up a website. Keep reading, and you\u2019ll find a list of the most common misconceptions we encountered. We\u2019ll explain why they are incorrect and share how we tackle web performance challenges with our plugin.<\/p>

What Are the Most Common Web Performance Misconceptions?<\/h2>

Let\u2019s discover the misconceptions we consider more relevant regarding web performance optimization. <\/p>

1. Delay JavaScript<\/h3>

Optimizing JavaScript files is one of the most challenging web performance optimizations. It\u2019s also one of the most impactful to improve performance and key metrics such as Core Web Vitals<\/a>. In other words, you can\u2019t avoid optimizing JavaScript if you want a fast website. One effective way to go is to delay the JS files that don\u2019t need to be executed immediately. As a result, the page will load faster, and the browser will execute JavaScript only when needed by the user interaction. <\/p>

The misconception is that all JS files should be delayed. The truth is that this will often hurt the user experience and might even break the site’s functionality. Critical JS should never be delayed, such as those related to the above-the-fold resources (e.g., menu) and the tracking scripts (e.g., Google Analytics). These resources must be available early in the page load to ensure a smooth user experience.<\/p>

It\u2019s now easy to understand why knowing which JS files should be excluded from being delayed and how to do it is crucial.<\/p>

For instance, WP Rocket allows you to manage the Delay JS execution feature easily. The option makes it easy to delay JS \u2013 a key optimization task. On top, WP Rocket allows you to exclude JavaScript files both manually and thanks to the one-click exclusion released with our latest major version, WP Rocket 3.13<\/a>.<\/p>

\"Delay
Delay JS execution – File optimization tab, WP Rocket
<\/figcaption><\/figure>

We asked Adam Silverstein, Developer Relations Engineer at Google<\/strong>, their take on always delaying JavaScript and its impact on performance. He confirms our view and adds: \u201cGenerally, for server-rendered sites like WordPress sites usually are, most JavaScript can be deferred unless it is required early on in the page cycle for some reason. An example is analytics scripts where you want to capture data as soon as possible: here, the async attribute is more appropriate. One potential risk with deferring scripts is that if other scripts or inline scripts depend on the deferred script (and are not deferred as well), the dependency can break\u201d. <\/p>

So, it\u2019s time to look at the misconception about deferring JavaScript.<\/p>

2. Defer JavaScript<\/h3>

Here, the misconception is that all JS can be deferred. <\/p>

The truth is, deferring JavaScript is crucial as long as it respects dependencies. In other words, deferring JS without considering dependencies is not recommended.<\/p>

For example, an inline script using the jQuery library will need jquery.js to run before it can be executed without crashing. If jquery.js is deferred, the inline script won\u2019t find jQuery declared and will prompt a console error jQuery is not defined, preventing the code from running, breaking the related feature, and potentially breaking the layout and the overall functioning of the page as well. <\/p>

Adam Silverstein mentions a new WordPress script API proposal near to be released<\/a>. It will help the deferring strategy by defining loading tactics and preventing dependency issues. <\/p>

Adam explains: \u201c<\/em>In the proposed approach for core, we are handling the deferring cases automatically with the core approach to script strategy – including checking the dependent scripts are also deferrable and handling delayed execution of inline scripts that depend on a deferred script\u201d.<\/p>

When it comes to JavaScript deferring, WP Rocket has a lot of automated exclusions to prevent conflicts. For instance, when Avada is enabled, WP Rocket automatically excludes the jQuery library and Google Maps external script.<\/p>

The new Script API will allow our plugin to extend the exclusions library further. As a result, it will be less and less likely that your website will break when deferring JavaScript. <\/p>

3. Reduce Used CSS<\/h3>

In addition to JavaScript optimization, reducing used CSS is one of the most effective ways to boost your website performance. There are two ways to manage such optimization:
<\/p>