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.

Difficulty Level in Implementing this Optimization =  Medium

.

 

Use a tag with width or initial-scale

Leveraging the viewport meta tag allows you to configure the width and scaling of the viewport, ensuring proper sizing across all devices, especially on mobile.

Neglecting to use the viewport meta tag could result in your website being hard to navigate and could possibly introduce a notable lag on mobile browsers, affecting the First Input Delay.

How does not using the viewport meta tag affect page performance?

The viewport meta tag is widely accepted as a gold standard in mobile web design as it essentially allows the browser to display your webpage in the most suitable manner on mobile displays.
In the absence of this tag, your mobile page performance could be impacted as follows:

1. Sub-optimal scaling

Without a viewport meta tag, your website initially renders at standard desktop screen dimensions and is then shrunk to fit the width of the mobile screen. This could potentially lead to a challenging reading experience for some visitors.

2. Increased FID

A number of mobile browsers have a built-in feature that facilitates instant zooming by double-tapping the screen. This feature is especially handy for pages that are not mobile-optimized.
Nevertheless, if your page lacks a viewport meta tag, mobile browsers typically impose a delay of up to 300 ms following the first tap to ascertain if a second tap is forthcoming.
During this delay, the page is unable to react to the initial tap, which can add a considerable amount of time to your page’s First Input Delay (FID).
Not only does this degrade the user experience, but it may also adversely impact your page’s search rankings. Implementing a viewport meta tag can eliminate this delay and enhance the user experience on your page.

How to implement e a tag with width or initial-scale in WordPress

If GTmetrix triggers this ¬†finding, paste the following code in your page’s <head>:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Where:

  • width=device-width sets the width of the viewport to the width of the device.
  • initial-scale=1 sets the initial zoom level when the user visits the page.