WordPress.NewCitizen.io

Speed Optimization Guide

Your Attention Please !

After selecting your desired 'Optimization' section from the table, please scroll again to the very bottom of the page to view the material.

A complete and Comprehensive Guide On Making WordPress websites faster.

Don’t be overwhelmed by the table below; most optimizations can be easily achieved with an optimization plugin. I personally use the free Speed Optimization plugin that comes bundled with SiteGround’s Hosting plan. However, there are several other options, including W3 Total Cache (W3TC), WP Rocket, and FlyingPress.

Steps to optimizing your WordPress website :

1. Visit GTmetrix: Enter your website’s URL to begin the test. GTmetrix offers this tool for free and allows multiple tests to be performed every hour, at no charge.

2. Review the Report: GTmetrix will quickly generate a performance report, pinpointing each area that requires improvement.

3. Consult our table below to address the specific areas highlighted by GTmetrix. While GTmetrix often uses complex terminology, overcomplicates its instructions, and provides guidance for a broad spectrum of websites, we’ve streamlined and tailored their recommendations specifically for WordPress sites. With our clear and straightforward guidelines, you’ll find it much easier to understand and implement the necessary changes.

4. Re-test After Implementing Changes: After making a change, clear your website’s cache if it’s enabled. Re-test on GTmetrix to assess the impact of your adjustments. Using the new results, move on to the next suggested improvement and continue the process.

wdt_ID	Topic	Difficulty Level	Topic2	Difficulty Level2
1	Avoid an excessive DOM size	Plugin	Minify CSS	Plugin
2	Avoid chaining critical requests	Plugin	Minify JavaScript	Plugin
3	Avoid CSS @import	Plugin	Minimize main-thread work	Plugin
4	Avoid document.write()	Plugin	Preconnect to required origins	Medium
5	Avoid enormous network payloads	Plugin	Preload key requests	Plugin
6	Avoid large layout shifts	Difficult	Preload Largest Contentful Paint image	Medium
7	Avoid long main-thread tasks	Plugin	Properly size images	Easy
8	Avoid multiple page redirects	Easy	Reduce JavaScript execution time	Plugin
9	Avoid Non-Composited Animations	Difficult	Reduce the impact of third-party code	Plugin
10	Deferring Offscreen Images	Plugin	Reduce unused CSS	Plugin
11	Don't lazy load Largest Contentful Paint image	Plugin	Serve images in next-gen formats	Plugin
12	Eliminate render-blocking resources	Plugin	Serve static assets with an efficient cache policy	Plugin
13	Enable text compression	Plugin	Use a tag with width or initial-scale	Medium
14	Ensure text remains visible during webfont load	Plugin	Use a Content Delivery Network (CDN)	Easy
15	Lazy load third-party resources with facades	Plugin	Use video formats for animated content	Medium
16	Use explicit width and height on image elements	Easy

Avoiding an Excessive DOM Size

Implementing this feature can be achieved by using an Optimization Plugin:

An extensive DOM tree can escalate memory consumption, extend the duration of style computations, and potentially lead to expensive layout readjustments.
Modifying DOM elements allows you to change the content on the page based on the desired user view.
It’s beneficial for your webpage to avoid an overly large DOM, especially considering the user’s overall page experience.

What is DOM?

Upon receiving an HTML document, your browser transforms it into a tree-like format, which is then utilized for the rendering and display processes, with the aid of CSS and JavaScript.
This ‘tree’ like structure is called DOM or Document Object Model.

• Nodes – All HTML elements in the DOM are called Nodes. (aka “leaves” in the tree).
• Depth – How long does the “branch” goes in a tree is called the depth. For example, in the above diagram, “img” tag has a depth of 3. (HTML -> body -> div -> img).
• Child Elements – All the child nodes of a node (without any further branching) are child elements.

How does a large DOM tree affect page performance?

When a webpage is loaded, the browser downloads and processes the HTML to construct the Document Object Model (DOM) tree, representing all HTML elements of the page. A large DOM tree can negatively affect page performance by:

• Increasing parse and render time (FCP): A big DOM, along with complex styling, means the browser has a hefty task. It has to interpret the HTML, construct the render tree, and more. Each interaction or change in the HTML necessitates these steps to be repeated.
• Raising memory usage: JavaScript often interacts with DOM elements. A voluminous DOM requires JavaScript to use more memory. For example, the use of document.querySelectorAll(‘img’) to list all images, a method commonly used in lazy loading.
• Prolonging Time To First Byte (TTFB): A growing DOM amplifies the HTML document’s size. The larger data amount needs more time to transmit over the network, leading to increased TTFB.
To improve page performance and offer a better experience to users, it’s crucial to optimize the DOM size. This boosts runtime performance, accelerates page rendering, and enhances user satisfaction.

How can you Decrease DOM size in WordPress?

Managing a webpage’s DOM size is challenging, as there’s no one-size-fits-all solution. During website design, it’s beneficial to integrate specific practices to prevent an overly large DOM. Sometimes, elements like plugins or theme settings, like a Mega Menu plugin, which introduce many divs, are vital for user experience. However, some elements may remain unused. For example, footer links might be overlooked if most visitors only scroll through roughly 75% of your page.

1. Lazy Render below-fold contents

You can tell the browser to lazy render the contents (or elements) if it’s not required for the above fold. It’s just like lazy loading images, but for HTML elements.

2. Split large pages into multiple pages

Do you have a page with everything you got on the site? Like services, contact forms, products, blog posts, testimonials, etc? Try to split them into multiple pages and link to them from the header/navbar.

3. Lazy load and Paginate everything possible

Lazy load every possible element. Some examples could be:

Lazy load YouTube videos – use a good quality youtube embed plugin
Limit number of blog posts/products per page – I usually try to keep a maximum of 10 blog posts per page and paginate rest of them.
Lazy load blog posts/products – Add “load more” button or infinite scroll to load more blog posts or products.
Lazy load comments – If you are using a Comments plugin, make sure it offers the ability to lazy load the comments.
Paginate comments – If you have hundreds of comments, this can also affect DOM size. You should Paginate the comments by reviewing the settings options and breaking the comments into pages
Limit related posts count – Try to limit the related posts count to 3 or 4.

Note: Lazy loading images won’t reduce DOM size

4. Don’t hide unwanted elements using CSS

Sometimes you might need to remove elements injected by the theme/builder. For example, add to cart button in product pages, rating button, author info, published date etc. A quick solution is to hide them using CSS:

.cart-button {
    display:none;
}

Even though this solution looks easy, you’re serving unwanted code to users (which includes both HTML markup and CSS styles).Check your theme/plugin settings to see if there is an option to remove it. Otherwise, find the respective PHP code and remove/comment on them.

5. Use well-coded themes and page builders

A good theme has a major role in DOM size. Use well-coded themes like GeneratePress or Astra.