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

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

Lazy load Third-Party Resources with Facades

Lazy loading third-party resources with facades involves postponing the loading of actual third-party embeds and substituting them with static elements, or “facades”. The genuine third-party content is loaded only when users interact with these facades. This strategy reduces the time browsers spend on unnecessary scripts during the initial page load, enhancing page load speed.

How does lazy loading third-party resources with facades affect page performance?

Third-party resources, when loaded immediately, can often slow down a page. This slowdown can be due to various reasons such as delayed server responses, inefficient DNS lookups, server response errors, and main thread-blocking scripts, to name a few.

When these third-party embeds are non-critical, like ads or social media widgets, their performance impact can be minimized. By replacing the actual embed with a facade, the page’s usability and speed are preserved. Facades are lightweight placeholders that load much quicker than the full third-party content, allowing the browser to focus on loading more crucial elements of the page.

How to lazy load third-party resources with facades?

Utilizing facades to lazy load third-party resources can considerably minimize the initial load impact on your page. Facades, which visually resemble actual third-party embeds, offer a lightweight alternative. They ensure scripts are activated only upon user interaction with the facade, resulting in quicker page load times and a prompt user engagement.

CMS Plugins (For WordPress or other CMS): Use plugins in your CMS that offer the capability to swap third-party embeds with placeholders. As a matter of fact, this whole problem can be avoided by using a specialized video embed plugin. Please look at our review of the best WordPress embed plugins that address this issue, leading the pack is a plugin I use called on all 9 of my websites called Presto Player.
Google’s Recommended Facades: Employ open-source facades endorsed by Google. These may involve embedding specific codes into your page’s HTML or incorporating JavaScript plugins and libraries. Further details on open-source facades can be found here.
Manual Facade Creation: For those technically inclined, a custom facade can be designed to limit the influence of third-party embeds on performance. The suggested approach is:

- Present a facade in place of the third-party embed during the initial load.
- Initiate a preconnect to the third-party domain when users hover or scroll over the facade.
- Substitute the facade with the genuine third-party embed upon user interaction.

Potential Considerations: Lazy loading with facades, while beneficial for performance, may come with certain trade-offs:

Functionality Limitations: Lazy loading can temporarily disable features, like live updates in chat widgets or dynamic ads, until the actual embeds are fully loaded.
Autoplay Disruption for Videos: Websites relying on video autoplay may need to seek other solutions or refrain from lazy loading such videos.
Challenges with Dynamic Third-party Content: Crafting a visually matching facade for dynamic content, like ads or social media widgets, can be challenging due to the unpredictable nature of third-party content.
Potential CMS Plugin Conflicts: Lazy loading plugins could clash with existing plugins or even cause site malfunctions. It’s crucial to confer with plugin developers about known issues or conflicts.

Testing on a staging or test site is crucial before deploying lazy loading with facades to ensure site integrity. Evaluate the performance gains against any potential functional restrictions.