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.

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

 

 

Preload Key Requests in WordPress

Utilizing <link rel="preload"> is an effective strategy to prioritize vital requests, fostering quicker page loads. Often, the browser remains unaware of essential resources until later stages of the page load cycle due to their placement in the request sequence. By implementing preload, we can give browsers an early heads-up about these crucial resources.

How Does Preloading Impact Page Performance?

During the page’s load process, the browser retrieves and deciphers the HTML to discern and fetch necessary resources. Occasionally, some resources, due to their late-loading nature or sheer size, can impede performance. With preload, you can instruct the browser to fetch a resource earlier than it might naturally, recognizing its importance.

For instance, CSS might reference fonts and images, while JavaScript might invoke additional resources like JSON or other scripts. These dependencies extend the critical request chain. Moreover, if large requests emerge late in this chain, they could introduce noticeable delays. In such scenarios, <link rel="preload"> can provide considerable load-time enhancements.

Benefits of Preloading Key Requests in WordPress

¬†Incorporating <link rel=”preload”> in your HTML header and denoting the resource kind with the as attribute informs the browser to cache these pre-fetched resources, ensuring their instant availability during subsequent visits.

Furthermore, preload offers you enhanced control over the loading procedure, allowing scripts to be downloaded ahead of time and executed later. This prevents scripts from obstructing the main-thread during pivotal load moments, facilitating quicker page interactions for users.

How to fix Preloading for WordPress:

  1. Scripts Preloading: For JavaScript file preloading, integrate the subsequent tag in your HTML header:
				
					<link rel="preload" href="script.js" as="script">
Here, "script.js" corresponds to the JavaScript file's URL set for preloading.

				
			

2. Stylesheet Preloading: For stylesheet preloading, integrate the subsequent tag in your HTML header:

				
					<link rel="preload" href="stylesheet.css" as="style">
In this instance, "stylesheet.css" corresponds to the stylesheet's URL targeted for preloading.
				
			

3. Font Preloading: To preload fonts, including web fonts, add the following:

				
					<link rel="preload" href="fontname" as="font" type="font/format" crossorigin>
"fontname" designates the font's URL for preloading, and "format" specifies its kind (e.g., ttf, woff, woff2). The as attribute pinpoints the content type targeted for preloading (e.g., video, image, script).
				
			

4. For CMS Users: For WordPress and other CMS platforms, users can leverage plugins to preload specific resources like stylesheets and fonts. For instance, Siteground’s Optimization plugin provides a feature to preload fonts, significantly enhancing loading speeds.