Web page speeds are crucial not only for Search Engine Optimization (SEO) but also for enhancing user experience and retaining potential customers. A recent study reveals that improving web page speeds can enhance user experience by 27% to 58%, underscoring the significance of focusing on the three Core Web Vitals.

However, many people overly focus on scoring high on tools like Google PageSpeed, Pingdom, and GTmetrix. While these tools provide valuable insights, it’s essential to remember that they don’t always accurately reflect real-world web performance or user experience. Some websites may achieve high scores on these tools but fail to deliver a fast and satisfying user experience.

Conversely, there are web pages with lower scores that actually load faster and provide a better user experience. Therefore, it’s important to look beyond just the scores and consider the actual performance metrics.

Key Website Performance Metrics

The three Core Web Vitals, integral to the overall Page Experience Update, are critical to understand:

1. Largest Contentful Paint (LCP): Measures loading performance. A fast LCP helps reassure the user that the page is useful.
2. First Input Delay (FID): Measures interactivity. A low FID means the page is more usable.
3. Cumulative Layout Shift (CLS): Measures visual stability. A low CLS ensures that the page is more predictable and less prone to shifting content.

These Core Web Vitals offer a more comprehensive view of a website’s performance, emphasizing the importance of optimizing for both speed and user experience.

Core Web Vitals Update: INP Moves from Experimental to Pending Metric

Starting today, the Interaction to Next Paint (INP) metric shifts its status from experimental to a pending Core Web Vital. This change signifies INP’s readiness to eventually replace the First Input Delay (FID). Although INP is set to take over, the transition isn’t immediate, indicating a future-focused update in the Core Web Vitals.

Bullet Points:

• Default Mode, WordPress isn’t much speed optimized and structured compared to “Duda” when it comes to core web vital points. (source) Yet, there are simple strategies to make WordPress effective and improve your server’s faster response time, page loading time, and webpage performance. 
• You can easily manipulate website performance scores using Wp-Rocket, Litespeed, and other plugins by minifying CSS, Javascript, and Lazy loads. Yet, it doesn’t mean real-time speed increases. Minimizing CSS is not always the best choice if it’s already minified. 
• Choosing simple, lightweight, and faster loading themes in WordPress such as Kadence or Generatepress is a great way to enhance website performance and page loading and speed up the webpage. However, you already have other themes; you can improve by speeding up some strategies we will mention. 
• An excellent compression method is one way to improve, such as enabling “Brotli compression” features. It was initially released in 2013 by software engineers from Google. It’s slightly better than Gzip compression. Yet, According to the WP-ROCKET Blog, “Brotli is better at compressing static data because of its superior compression ratio, GZIP is better at compressing dynamic data because of its often superior compression speed.”
• Using Preload is a great way to optimize webpage speed, help slow-loading pages, and better user experience by fast-loading critical elements, which leads to help conversions.
• Defaulting the system font of a particular operating system can boost performance because the browser doesn’t have to download any font files. System fonts work just like web-safe fonts in that they don’t require any download time by the browser

Faster Load Times and Speed Up Your Website By Using Preload Attribute 

Preload lets you pinpoint resources (such as fonts, images, JavaScript, and CSS) that are needed instantly or very soon during a page load. 

 You can preload all critical CSS files, making them requested research priority. Preloading your CSS (and other external resources) allows the page to load quickly

Time To First Byte, Page-loading time, And HTTP Request.

When users first click on a website, every millisecond counts. To ensure optimal speed and loading performance, it’s crucial to monitor several key metrics:

1. Time to First Byte (TTFB): This is the time taken for a user’s browser to receive the first byte of data from the server. A lower TTFB means quicker initial responses, enhancing user perception of speed.
2. Page Loading Time: The total time it takes for a page to fully load. Faster page loading improves user experience and is favorable for SEO.
3. HTTP Requests: Each element on a page (like images, scripts, and CSS files) requires an HTTP request to load. Minimizing these requests can significantly speed up your website.
4. Performance Monitoring: Regularly checking these metrics helps in identifying and rectifying performance bottlenecks.
5. Load Optimization: Implementing strategies like caching, image optimization, and minimizing redirects can improve these key metrics.

Test your site here: 

https://bytecheck.com/

Just write your website here, and check it out. The point should be less than  100 ms Time to First Byte (TTFB). 

If it’s higher than that, it would be helpful to use CDN. 

Finding Unused CSS & JSS Files

The Chrome DevTools Coverage tab can assist you in locating unused JavaScript and CSS code. Removing unused code will help your page load faster and reduce mobile data on your mobile users.

Manually:

1. Open Chrome DevTools (Use the keyboard shortcut “Ctrl + Shift + J” )
2. Click Three Dots On the Right Side
3. Click on the “More Tool” Find Coverage Tab option
4. Click To Reload Button
5. Select a CSS file from the Coverage tab, which will open the file up in the Sources tab
6. Red Color CSS Unused and blue Color CSS used in HTML File

Note: You can manually delete the CSS files here, but in some cases, it may damage the theme. Always take a backup of your website. However, you can save a lot of files when deleting unused CSS files. This helps improve the website speed.

Also, you can use plugins such as wp-rocket for that regard. Apart from that, you can delete the file by downloading it and uploading it to Unused CSS, PurgeCSS, and UnCSS sites.

Careful: Minimizing CSS and Javascript Easy Way TO Manipulate SCORE

Most of the score-oriented “web page speed optimizing services” focused on the minimize Java, CSS, and HTML. Yet, The traditional, unplanned ways focused on the “Minify CSS and JSS could be dangerous to conceivably break the user experience and theme structure. It might be an improved score in the Google page speed, but sometimes it’s not practical should be.

For example

As you can see, they have already minified CSS files. Suppose you are a beginner or don’t know about HTML, CSS, or coding. Trying to minify CSS files might be risky and can break your design, theme, or other functions and create a bug on your website.  

Minifying is “the process of removing all unnecessary characters from source code without changing its functionality.”

Extra formatting data makes CSS files larger than they need to work as intended. (contains line breaks, spaces, indents, and comments)

And, larger files typically indicate more time and resources needed to process the files, giving the feeling of a slower website or web application.

Minimizing your CSS files is good if they’re specific, robust, and heavy CSS files, which might be more than 30kb file size up to 1500 kb. 

You can check using “DevTools Network Panel” to find which CSS file makes a heavy-weight structure. 

Some themes, such as GeneratePress, Kadence, Sober(Woocommerce), and Astra, are immune to the extra minify and inline of CSS. However, some types of themes high on CSS, Jnews, Jannah, and others can negatively respond to the CSS minimize process.

Defer Parsing of JavaScript

When you visit a WordPress site, the server sends its HTML content to your browser. Your browser starts at the top of this code and works its way down to render the site. If it encounters JavaScript, it pauses to download and execute it before continuing. This process repeats for each JavaScript file, potentially slowing down the site’s loading time. This delay can result in a blank screen, leading to a slower user experience as the browser processes the JavaScript.

You can defer Javascripts by editing the “functions.php” file

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

 This code adds the “defer” attribute to all your Javascript files. [expect jQuery) By enabling JavaScript deferred parsing, you may allow your content to load faster and with higher priority.

Defer Parsing of JavaScript can be defined as the process of using defer or async attribute with JavaScript to avoid render blocking of the first paint of a web page. These attributes tell the web browser to parse and execute the JavaScript in parallel (asynchronously) or after (defer) the parsing of HTML of a web page. Thus, the visitors need not wait longer to see the meaningful content of the web page.

Improve Your Response Time By Using Content Delivery Network ( CDN)

A Content Delivery Network (CDN) helps speed up your WordPress site by storing your assets and code (HTML, JS, CSS, images) on different edge servers (POPs) around the globe. 

Recommend CDN Settings:

• Enable “Brotli” features in the settings. This factor is a form of compression faster than its predecessor GZIP.
• Disable Rocket Loader: This depends on the websites but causes additional requests to the server and webpages. It also adds extra “codes” to your JavaScript file. 
• Browser Cache TTL: The Browser Cache Time To Live (TTL) is the amount of time the end-users browser will cache a resource. Google requires that your caching headers are at least 30 days or higher. Cloudflare, one month or higher, is a good setting. 
• Enable Crawler Hints: It is a feature where Cloudflare shares information with search engines about when the content of a web page has changed. Search engines; can better schedule browsing activities and avoid unnecessary and excessive scans. Cloudflare Hints help improve crawlers’ efficiency and limit them if the content hasn’t changed.
• Auto Minify(CDN LEVEL): This is crucial. The minified files are served directly from the CDN and minified in the background, so they don’t slow down first-time requests. (FTP)

How To Check Brotli Compression Through Google Developer Tools?

Brotli uses the LZ77 algorithm for lossless compression; for Brotli, there is also a Google Working Group.  Brotli performs 36% better than Gzip! – Koray Tuğberk Gübür

You can also check just putting your websites: https://www.giftofspeed.com/gzip-test/

The next feature you should enable is Brotli compression on the cPanel because some host services won’t support Broli compression.

Brotli Vs. Gzip

When Brotli was compared against gzip, they discovered that it compresses files more effectively:

• 14% smaller JavaScript files
• 21% smaller HTML files
• 17% smaller CSS files

Brotli seems better and faster, but as a regular setup, it is harder than Gzip, and the Hosting services should support it. (Otherwise, you need to use CDN for Brotli compression).

In general, the data seems to suggest that:

• Brotli is better at compressing static data because of its superior compression ratio
• GZIP is better at compressing dynamic data because of its often superior compression speed

In general, though, if you’re just an average WordPress user, I don’t think the GZIP vs Brotli debate is something you really need to worry about.

If you have WordPress Hosting Services (Apache),

<IfModule mod_deflate.c>
# Enables GZIP compression
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs in old browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Choosing the Right WordPress Theme: A Guide to Speed and Efficiency

Opt for Lightweight Themes: GeneratePress and Kadence

When setting up a WordPress site, start with a lightweight theme like GeneratePress or Kadence. These themes are designed for speed, ensuring your website loads quickly.

• GeneratePress: It offers unique features, allowing you to design using the block editor. Its Dynamic Block Elements give you the flexibility to create custom designs without compromising speed.
• Kadence: Known for excellent DOM optimization, Kadence enhances performance with its well-structured DOM, fast loading times, and user-friendly navigation.

Consequences of Not Choosing Wisely

If you’re not careful in selecting your WordPress theme, you might face issues like:

• Style and Import Errors: Choosing a heavy theme can lead to missing stylesheet and sample data import errors.
• DOM and Speed Problems: A complex theme can cause DOM issues and slow down your site.
• SEO Impact: Changing themes on a well-ranked site can negatively affect SEO factors like stability, speed, content, and indexation.

The Impact of Web Fonts

Web fonts, while aesthetically pleasing, can add extra load to your site. Using system fonts can enhance performance by reducing page size and load times.

• Benefits of System Fonts: They improve speed and reduce webpage size. As they’re already installed on the operating system, they don’t require additional downloads, leading to faster loading times.
• Aesthetic Considerations: Some may prefer the appearance of web fonts, but system fonts offer a familiar look aligned with the user’s operating system.

Remember, the right theme and font choices are crucial for a fast, efficient, and SEO-friendly WordPress site.

Other Strategies: Hosting Google Analytics on your WordPress site

Speed Up Your Site with Local Google Analytics

Hosting Google Analytics locally can enhance your site’s speed by minimizing DNS lookups and addressing the “leverage browser caching” issue associated with their script.

• Efficiency Gain: By hosting the Analytics script on your own server, you avoid extra DNS requests, speeding up the loading process.
• Browser Caching Advantage: This approach also solves the browser caching issue commonly found with external Analytics scripts.

Important Note: While Google doesn’t officially endorse this method, many have successfully used it for years without problems.

Implementing local Google Analytics can be a smart move for improved site performance.

Optimize Your Site: Skip SSL Plugins and Rethink Sliders

Avoid SSL Plugins for Better Performance

Using SSL plugins may seem helpful, but they can actually slow down your website. They impact page speed, load time, and overall performance. Instead, consider a manual approach:

• Manual Redirects: Implement code in your .htaccess file to redirect HTTP to HTTPS. This method is more efficient and avoids the extra load caused by plugins.
• Risk of Plugin Deletion: If an SSL plugin is removed or encounters issues, it can lead to errors and mixed content problems on your site.

Choose Static Sliders Over Dynamic Ones

While image sliders are popular in WordPress sites, they’re not always effective, especially on mobile. They can hinder your site’s speed due to additional CSS and JavaScript. Conversion rate experts often advise against them.

• Problem with Delayed JavaScript: Using “Delay JavaScript” files, which load only upon user interaction, can cause issues with sliders. If there’s a slider at the top of a page and the Delay JS feature is enabled, the slider’s content will be delayed, not showing up immediately.
• Opt for Static Sliders: A static slider is a more performance-friendly alternative. It offers good usability and conversion benefits without the performance drawbacks of standard, moving sliders.

Simplifying your approach to SSL and slider usage can significantly enhance your website’s performance and user experience.

Find Out Heavy Plugings: Which Plugins Are Slowing My Site?

Install The Query Monitor Plugin

Enhancing your WordPress site’s performance starts with identifying and addressing specific bottlenecks. The Query Monitor plugin offers a streamlined approach:

1. Installation: Begin by installing the Query Monitor plugin. This tool is vital for diagnosing and improving your site’s performance.
2. Queries by Component: Navigate to the “Queries by Component” tab. This essential feature provides a comprehensive breakdown of your site’s load times, segmenting them by different components.
3. Performance Analysis: Carefully review the load times of your slowest plugins. This analysis is key to understanding which components are impacting your site’s efficiency.
4. Optimization: Use this insight to optimize or replace slow-performing plugins. Effective optimization is crucial for a fast and responsive website.
5. Proactive Monitoring: Regularly checking and updating based on Query Monitor’s insights ensures continuous performance improvement.

By incorporating these steps and focusing on these key terms, you’ll significantly boost the efficiency and speed of your WordPress site.

Tips for Improving Performance on Slow Websites

1. Use the Latest PHP Version: Updating to the latest PHP version is crucial for enhancing page speed, data handling, security, and bug fixes. You can easily update PHP through your hosting service.
2. Avoid AMP: As of June 2021, AMP pages no longer receive preferential treatment in Google searches. Focus on optimizing your site’s overall page experience instead.
3. Implement Lazy Loading: This technique significantly boosts page loading speed. However, exclude your website’s logo and the first three critical images for a better user experience.
4. Optimize Images: Beyond lossless compression, optimize image quality while reducing file sizes. Large image files can slow down pages, prolong loading times, and affect crawlability.
5. Choose the Right Web Host: If not using a CDN, ensure your hosting server is located close to or in the same region as your target audience.
6. Manage Database and Disk Space: Regularly clean up WordPress features like revisions to prevent slow performance and reduce initial response time.
7. Disable Google Maps If Unnecessary: Google Maps can add over 20 HTTP requests. Disable it if it’s not essential to your site.
8. Disable WordPress Emojis: Removing emojis cuts down on additional HTTP requests, although you can still use them elsewhere.
9. Disable XML-RPC: Turning off XML-RPC can improve both your website’s speed and security.

Implementing these strategies can significantly enhance the performance and speed of your WordPress site.