Category: wp-rocket.me

Are you wondering how to use WebP on WordPress and how to convert your current images in the WordPress library? You’ve come to the right place! 

If you run a web performance on PageSpeed Insights, you may see the recommendation to serve images in next-gen formats to boost performance. Google is telling you to forget about JPEG and PNG and focus your image optimization efforts on image formats like WebP.

This guide explains how to solve this warning and everything you need to know about WebP on WordPress. You’ll also get a list of the best tools to convert almost any format to WebP. 

What’s WebP Image Format?

Created by Google, WebP is a next-gen format for the web. It provides superior lossless and lossy compression for images while preserving quality. Compared to the traditional JPEGs or PNGs, this modern format allows you to create even smaller file sizes, resulting in a faster loading page.

WebP vs. PNG vs. JPEG

If you are hesitating between the three formats and care about performance, choose WebP to serve optimized images on WordPress. You’re going to understand why. 

JPEG vs. WebP 

Both file formats compress images to make them easier to share on the web and preserve their quality. They look quite similar, so why choose WebP? 

A WebP file is generally much smaller than a traditional JPEG. According to Google, a WebP image with lossy compression could be 25% to 34% smaller than a comparable JPEG file. 

Have a look at the figure below: WebP (in red) achieves better compression compared to JPEG. 

Let’s check this statement with our JPEG image weighing 3.7MB. After converting to WebP, the image kept the same quality, but the file size dropped to 1.3 MB. 

PNG vs. WebP 

PNGs are mostly used for web graphics without background, such as logos and illustrations, rather than high-quality photos. They usually take up more storage space than the other formats. WebP lossless images are, on average, 26% smaller than PNGs.

Let’s do another quick test and convert a PNG image to WebP. Our original file weighed 432 KB, and with a simple conversion to WebP, it shrank to 244 KB. 

JPEG vs. PNG vs. WebP

To summarize, if you want to improve the Lighthouse performance score of your WordPress site, opt for WebP. That’s how the three formats compared to each other: 

Which Browsers Support WebP?

In 2023, all the major browsers support WebP. For example, this modern format is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and other tools.

Displaying WebP Images with Fallback for Older Browsers

Images are crucial to ensure a great user experience, so they should be displayed for every visitor, even the ones using older browser versions. If you want to play safe, you should enable a fallback to other traditional formats, such as PNG or JPEG. 

How to Add Fallback to WebP Images

• You can add the <picture> tag for your image to implement fallback if your visitor uses an old version. Browsers supporting WebP will display “dog. webp” while the older browsers version that don’t support WebP will fall back to “dog.jpg” element. 

• Using a WordPress plugin like Imagify that allows you to convert your images to WebP and use the <picture> tags to enable the fallback on WebP Images.

How to Create and Use WebP Images on WordPress

As of WordPress 5.8, the WebP format is fully supported by WordPress. Simply upload your images to your media library and include them in your content. 

4 Best Plugins To Create a WebP Image

There’s no longer any need to install a third-party extension to upload Web images to WordPress, but you’ll need a plugin to convert your existing images to WebP. Here are 4 WebP WordPress plugins you can use to convert images to WebP:

1. Imagify – an easy-to-use image compression plugin that offers WebP conversion. It’s free for around 200 images a month.
2. WebP Converter for Media – converts files in standard JPEG, PNG, and GIF formats to the WebP format.
3. WebP Express – adds a line of code to serve WebP images to users.
4. Shortpixel Image Optimizer – another image optimization plugin that converts JPEG, PNG, or GIF to WebP and AVIF.

How to Create a WebP Image on WordPress

The easiest way to create a WebP image on WordPress is to use a plugin like Imagify. All your images can be converted to WebP in one single click, along with bulk compression. 

1. Upload your JPEG, PNG, PDF, or GIF to your WordPress library
2. From your WordPress dashboard, go to Settings > Imagify > Optimization Tab
3. Check the following boxes: Create WebP versions of images and Display images in WebP format on the site

Bonus: If you are not a WordPress user you can also use design software such as Photoshop, Lightroom, or Sketch and export your media directly to WebP: 

Give an Extra Boost to Image Optimization

Along with image compression and WebP conversion, lazy loading is an additional way to serve optimized images to your visitors and boost your page loading speed. Using a script like Lazy Load means the browser only loads images above the fold (in the user’s viewport). 

Additionally, in their performance report, PageSpeed Insights recommends to “defer offscreen images” which means applying lazy-loading: 

How to Apply Lazy Loading to Your WebP Images

The easiest way to apply the lazy loading script to your WebP images is to use a WordPress plugin like WP Rocket. To implement lazy loading, follow those two easy steps directly from the WordPress admin:

• Go to Settings > WP Rocket > LazyLoad tab
• Tick the boxes of your choice amongst images, CSS background images, iframes, and videos.

WP Rocket is the first plugin to offer lazy loading on CSS background images in one single click!

Finally, PageSpeed Insights can detect if WP Rocket is installed on your WordPress site and eventually recommends you enable the LazyLoad feature: 

Do you want to improve your overall web performance?WP Rocket is also one of the best WordPress cache plugins that optimizes your database, your code and improves your Core Web Vitals in a few clicks.

Wrapping Up

Serving your images with the WebP format on WordPress is an easy way to boost performance. This next-gen format helps improve your Core Web Vitals by serving smaller image file sizes to your visitors – without impacting the quality! 

WordPress and the major browsers now support WebP, so you don’t need to worry about compatibility. With a tool like Imagify or WebP Converter for Media, converting your images into WebP directly from the WordPress dashboard is easier than ever.  

If you are willing to go the extra mile to boost your performance and optimize your images even more (with lazy load for example), give WP Rocket a try. It applies 80% of the performance best practice upon its activation and no technical knowledge is required. Also, there is a 30-day money-back guarantee, so you don’t take any risks – except the one to see your website loading faster!

The post WebP Image on WordPress: What It is and How to Use it appeared first on WP Rocket.

Interaction to Next Paint (INP) is a webpage responsiveness metric measuring the latency of all user interactions on a page. Optimizing your website’s INP metric plays a crucial role in its speed, user experience, and SEO. 

Announced in 2022 as an experimental metric to address many limitations of the First Input Delay (FID) metric, Google declared that INP will replace FID as a Core Web Vital metric in March 2024.

This post will explore the basics of INP, why it is replacing FID, and how you can measure and improve your site’s INP metric.  

Excited? Let’s go!

Importance of Measuring Webpage Responsiveness

No one likes a slow website (including Google!). And nothing shoves users away from your website faster than a slow website. 

Metrics like Largest Contentful Paint (LCP) are a great indicator of page load speed—which is why it’s a Core Web Vitals metric. 

But what happens after the page loads and the user sticks around? LCP doesn’t measure a page’s interactivity. As per Google, users spend 90% of their time on a page after it loads. Hence, measuring page responsiveness throughout its lifecycle—from opening to closing—is critical.

A website with fast page load speed but poor responsiveness is still a slow website—the result is a bad user experience. For example, taking a long time to open a mobile navigation menu or updating items in your online shopping cart. 

That’s where measuring webpage responsiveness comes in. Websites with good responsiveness respond swiftly to user interactions. And this response has to be in the form of visual feedback. 

Even for complex interactions requiring a longer time, presenting the user with some visual cue (e.g. a loading animation) is super important to maintain a stellar user experience.

Interaction to Next Paint (INP) vs. First Input Delay (FID): What’s The Difference?

Measuring a webpage’s user experience is quite tricky. You can use metrics like Total Blocking Time (TBT) and Time To Interactive (TTI) to get an idea of a page’s responsiveness, but they don’t indicate actual user experience.  

For instance, a page can have fast TBT or TTI and still feel sluggish for the user because of how they interact with it. The same holds in reverse. 

Enter FID—it directly measures a user’s first interaction on a webpage. Specifically, it measures real user experience in the field.

First Input Delay (FID) Limitations

As its name implies, FID only measures the “delay” in a browser’s response to the “first input.” 

In short, it’s a page load responsiveness metric—how quickly the JavaScript code loads and executes—not a runtime responsiveness metric—how quickly the page responds to user interactions after page load. 

While first impressions matter, they don’t necessarily give a full picture! FID improved how we measure webpage responsiveness, but it doesn’t accurately measure how users interact with a webpage—from opening to closing a webpage.

For instance, FID doesn’t measure the time taken to run event handlers on delays in presenting the next frame. 

What’s Interaction to Next Paint (INP)?

INP measures a page’s overall responsiveness to user interactions—clicks, taps, keypresses, etc. 

An interaction can include multiple group handlers. For instance, tapping your phone’s touchscreen can start a chain of events in the page’s background. Either way, INP is the page’s longest latency from when the user starts the interaction to when the browser presents the next frame with visual feedback. 

Unlike FID, which only measures the time taken for a browser to respond to a user’s first interaction, INP observes all user interactions on a page and provides an overall score.

As such, INP goes beyond first impressions and samples all user interactions, making it a more reliable indicator of page responsiveness.  

Just like with FID, a low INP score means better page responsiveness to user inputs.

How Is INP Calculated?

For most websites, the final INP metric is the longest interaction. However, some outliers exist. 

For instance, if your webpage has mostly text and images, it won’t have many user interactions. But if it’s a dynamic page with many interactive elements (e.g. text editors and games), it’ll have numerous interactions. In such cases, a random delay can setback the page’s INP score on an otherwise highly responsive site. To overcome this, INP ignores one highest interaction for every 50 user interactions.    

Most pages have way fewer interactions than 50, so that shouldn’t be a concern. Plus, INP only takes into account the 75th percentile of all the page views, further removing unexpected outliers.

Ultimately, the final INP score is a reflection of what most users experience.   

Note: INP doesn’t take into account hovering and scrolling actions. However, scrolling with your keyboard may trigger events measured by INP. Either way, page scrolling isn’t measured by INP. If a user doesn’t interact with the page, it’s also possible for that page load to return no INP score. 

What’s a Good INP Score?

Users may be browsing websites on a variety of devices. And each website can be unique.  Hence, it’s hard to label a website’s responsiveness “good” or “poor” based on a single metric. But that’s precisely what INP aims to achieve.  

Google has an easy chart to ascertain whether your site has a good or poor INP score:

• Good responsiveness: An INP score below 200 milliseconds.
• Needs improvement: An INP score between 200 and 500 milliseconds. 
• Poor responsiveness: An INP score above 500 milliseconds. 

As mentioned earlier, INP considers the 75th percentile of all recorded page loads, spread across desktop and mobile devices.  

How To Measure INP

You can measure INP both in the field (data from actual users) and in the lab (data from speed test tools).

Measuring INP In the Field

There are two ways to measure INP in the field: Chrome User Experience Report (CrUX) and Real User Monitoring (RUM). 

CrUX data is collected from Chrome browser users who have opted in. If your website qualifies for CrUX evaluation, you can measure its INP using Google’s PageSpeed Insights speed testing tool. 

Google uses CrUX as its official dataset to evaluate websites for its Core Web Vitals program. However, if your website doesn’t qualify for CrUX for some reason (mainly, very few visitors), then you need to collect your own field data by adding code to your website. You can then feed this field data to a RUM provider for a deeper analysis. 

For most websites, PageSpeed Insights is a good enough tool to measure INP and all related Core Web Vitals metrics. 

However, CrUX doesn’t provide you with detailed information about its results. If you want to understand and improve your metrics further, then investing in a RUM solution is recommended. Covering how to use these tools is beyond the scope of this article. You can check out Datadog and New Relic, two popular free RUM solutions.

Note: When measuring INP, you may find stark differences between data from the field and the lab. Ideally, you should gather metrics from the field as that gives you a measure of what actual users experience. You can then use this data to optimize your INP further. We’ll cover that in a later section.   

Measuring INP Without Field Data

You cannot measure INP in the lab, but if you cannot measure field data for some reason—having very few site visitors to qualify for CrUX or you don’t have enough resources to invest in RUM—you can still improve your potential INP score by finding slow interactions in the lab.

Note: As mentioned above, measuring INP in the lab isn’t possible. The below suggestions only give you a rough picture of the actual INP metric. You can’t rely on lab measurements to predict field metrics like INP, as they don’t simulate how real users use your website accurately.     

The Web Vitals Chrome browser extension is the simplest way to test the latency of user interactions. After enabling it, test your website’s typical interactions. The extension will output detailed diagnostic information for each interaction to the console. 

After installing the extension, you need to identify common user interaction flows on your webpage and test the responsiveness of those interactions individually. For instance, submitting a form or adding an item to the cart. You can follow web.dev’s step-by-step instructions to get started. It’s not a perfect workaround, but in the absence of field data, it’s a great alternative.

Another option is to measure your site’s Total Blocking Time (TBT) metric. It correlates pretty well with INP and can hint toward interactions you can focus on. Two great tools to measure your page’s TBT are Lighthouse and PageSpeed Insights. 

However, keep in mind that TBT doesn’t measure slow interactions after the page has loaded. 

How To Optimize Interaction To Next Paint (INP)

The first step to improve your website’s INP is to identify its slowest interactions. The earlier section highlights how to collect field data to diagnose your website’s slowest interactions. 

Once you’ve got that down, you can analyze these slow interactions in the lab and find a suitable solution. 

Every user interaction consists of three phases. You can look at these phases individually to figure out how to optimize the overall interaction latency.

1. Input Delay: This starts when a user initiates an interaction and ends when the interaction’s event callback begins to run. 
2. Processing Time: The time taken for the event callbacks to complete.
3. Presentation Delay: The time taken for the browser to update the next frame with visual feedback. 

Every phase of a user interaction contributes to the final interaction latency, and thus the INP score. Knowing how to optimize each phase is key to speed up responsiveness.  

Optimizing Input Delay

Input delay is the first part of any user interaction. Anyone who plays videogames knows how frustrating it is to have any input delay. The same applies to website interactions.

Based on the interaction, input delays can stretch from a few milliseconds to hundreds of milliseconds. This can be due to multiple reasons: busy main thread activity, errors, overlapping interactions, etc. 

No matter the reason, you must keep input delay to a minimum so that the event callback can start running as soon as possible. Here are three ways you can reduce input delay:

• Reduce the number of resources a page requires to become fully functional. 
• Avoid loading large scripts, as they’ll require resource-heavy script evaluation by the browser, blocking the main thread. Consider breaking down your scripts into multiple chunks and spreading them out. 
• Include as little JavaScript in your code as possible. 

Reducing Event Callback Processing Time

The next part of optimizing your INP score involves reducing the time taken to process an interaction’s event callbacks. 

Apart from optimizing the event callback’s code, there are some actions you can take to reduce processing time:

• Don’t block the main thread. Break up your long tasks (>50 ms) into smaller tasks.
• If you’re embedding something on your page, avoid loading them when they’re not used. For example, it’s not efficient to load YouTube videos if the user doesn’t intend to play them. 

Here’s where WP Rocket, one of the best WordPress performance plugins, can help immensely. You can enable its Replace YouTube iframe with preview image feature to replace any YouTube iframe with a thumbnail image.

The iframe tag will load and play the video only after a visitor clicks the thumbnail. WP Rocket’s powerful features can boost your loading time and improve your Core Web Vitals. 

• Avoid third-party scripts in your code. For third-party scripts that you do use, tools like Google Tag Manager or Cloudflare Zaraz can help you streamline loading these scripts. 
• Defer unnecessary tasks to perform later asynchronously. You can enable this with WP Rocket’s built-in Load JavaScript deferred feature. 

A webpage’s main thread can process only one task at a time inside the browser. The tasks can include activities such as parsing HTML/CSS, rendering the page, and running JS code. When a task runs for a long time (say, 50 milliseconds or more), it’ll hold back all the other tasks, including user interactions

In some instances, you may find a theme or plugin slowing down your main thread. As you don’t have much control over its code, you can reach out to the theme or plugin authors to find a suitable fix.

By breaking down your long tasks into smaller chunks, you free the main thread to take up high-priority tasks, which include user interactions. This results in a snappy website!

Minimizing Presentation Delay

The final part of user interaction is the presenting delay. It’s the time between finishing event callbacks and painting the next frame with visual feedback. 

Typically, presentation delay takes up the least time for user interactions. However, it can be held back in several ways. Here are some ways to keep it to a minimum: 

• Keep DOM size to a minimum. Page rendering tasks scale up or down depending on the DOM size. Updating a large DOM for every user interaction can become super expensive for the browser. Moreover, a large DOM requires more time to render a page’s first state. Refer to our handy DOM size guide for more details.
• Render off-screen elements lazily. If a large portion of your page content isn’t visible to the user on page load, rendering off-screen elements lazily can allow faster interactions with on-screen content. You can use the CSS content-visibility property to achieve this easily without adding any extra code or plugins. 
• Avoid rendering HTML using JavaScript. Browsers parse and render HTML optimally to deliver the best user experience possible. Using JS to render parts of HTML is fine, and is an integral part of most user interactions. However, rendering large chunks of HTML with JS will impact your website’s rendering performance significantly, including presentation delays for user interactions.

Boosting Your Website’s INP Score with WP Rocket

WP Rocket includes many options to provide immediate performance benefits to your website. From automatically enabling page caching and cache preloading to GZIP compression and eCommerce optimization, it applies 80% of web performance best practices to get your website running blazing fast right upon activation!

Besides applying most web performance best practices upon activation, WP Rocket offers powerful features such as lazy loading, removing unused CSS, and optimizing JavaScript. 

Most importantly, you can use WP Rocket’s built-in feature to delay the execution of JS scripts till user interaction. This reduces initial page load time and betters interactivity. It also impacts Core Web Vitals metrics such as Largest Contentful Paint (LCP), First Input Delay (FID), and the upcoming Interaction to Next Paint (INP).

Wrapping Up

With INP replacing FID as a Core Web Vital metric in March 2024, how your website handles user interactions can have a significant impact on its SEO.  

If you have a highly interactive website, optimizing your site’s INP can seem like a neverending process. There’s always one more interaction to optimize. Adding new features only adds further to the burden. However, you have to start somewhere. This article has hopefully started you off on the right foot. 

A better INP score also means better user experience, and that’s worth all the time and effort!

The post How To Optimize Interaction To Next Paint (INP) on WordPress appeared first on WP Rocket.

Do you want to know how to reduce page weight on your WordPress site? Knowing your page size is a good start in your speed optimization journey. The smaller your files are, the faster it will take for your browser to download and render them to your visitors. Users expect to find the information they are looking for as quickly as possible, and if they don’t see what they are looking for, they will remember that they are just one click away from the competitors. 

One golden rule to remember: reduce your web page weight to serve your content fast and keep your visitors (and Google) happy!Â

Our guide will help you understand the basics of page weight, how to check the size, and how to make a web page smaller to boost performance. 

What’s Website Page Weight or Page Size?

Page weight – also called page size – tells you how many bytes were downloaded by the browser. It refers to the total byte size of a web page when adding up all the following assets used to generate the page:

1. CSS – which is used to style the page
2. JavaScript – that provides interactivity
3. HTML – that makes up the page 
4. Fonts – the way you use them on your website can affect its performance
5. Image and other media files – such as audio or video 
6. Any other third-party resource 

Measuring the web page weight is the answer to “How many bytes were downloaded to load this specific page?”

How to Check Your Web Page Size

Many different techniques can be used for measuring a web page size, but two of the most popular are GTmetrix and WebPagetest. The approach is straightforward for both performance tools, and here’s how it works with GTmetrix: 

1. Add the URL of your site in the search bar and hit the Analyze button.

2. Simply check the results in the Page Details section: we got 224 KB for WP Rocket, which is a good score compared to the average worldwide, as shown in the next statistics section.

Want to run a full performance audit of your site? Follow our guide that helps you to improve the Lighthouse score on WordPress.

Now that you know more about web page weight, we thought it would be interesting to share some key figures about what takes up the most space on a web page. 

What Is The Average HTML Page Size In 2023?

The average HTML page size in 2023 is around 2.5MB for desktops and 2.2 MB for mobiles, according to httparchive.org.

What Takes Up Most Space on a Website?

The most common content types making up the weight of pages are – from largest to smallest – images, JavaScript, CSS, and HTML.

What’s the Average Image Weight on a Web Page?

In August 2023, images are consuming up to 1029.3 KB on desktop and 873 KB on mobile, on average.

What’s the Average JS Weight on a Web Page?

JavaScript is the next largest contributor for desktop and mobile page loads and consumes, on average, 533 KB on mobile and 587 on desktop. It’s essential to optimize it if you don’t want to impact your site’s performance.

What’s the Average Font Weight on a Web Page?

Fonts are often overlooked, but they take up 151 KB on desktop and 132 KB on mobile in 2023. 

What’s the Average CSS Weight on a Web Page?

On average, CSS consumes around 80 KB on both desktop and mobile in August 2023. 

What’s The Ideal Web Page Weight?

The average weight page is around 1-1.5 MB on mobile and desktop, so anything under or within this range is ideal. However, if you need videos and lots of media, anything under 3 MB is still acceptable. Keep in mind that the heaviest your page is, the harder it will be to optimize it for performance. 

Why You Should Make Your Web Page Smaller 

Here are 3 reasons that will convince you to start reducing the size of your web page:

1. Ensure Fast Loading Speed And Provide a Seamless User Experience on Mobile 
2. Improve Your Ranking on Search Engines (SEO)
3. Reduce Bandwidth Costs.

It’s mainly about making your website faster and more visible on Google while delivering an exceptional user experience to your visitors.

Let’s see what it takes to make it possible.

How to Reduce Web Page Size (Including HTML) 

To reduce the size of a web page, you can apply the 5 following performance techniques:

1. Enable Caching
2. Optimize the Code
3. Resize, Compress, and Convert Images to WebP
4. Optimize Fonts
5. Use a CDN

Before installing any extra plugins, make sure to keep your website lean with accurate content and only useful information. Use images wisely, and don’t add anything extra that will not benefit your visitors. Now, let’s go over each tactic so you can start reducing your web page size as soon as possible! 

1. Enable Caching 

Caching is an efficient technique to reduce the size of your page because you won’t need to include the whole content on every page of your site. As a result, using caching also improves the speed because it loads the previously stored version from its cache. 

Tools to implement caching:

• WP Rocket is one of the best caching plugins for WordPress that applies the best performance practices right upon its activation. You don’t need to do anything. WP Rocket automatically implements caching and GZIP compression, allowing you to reduce your page size easily. 

2. Optimize the Code

As seen previously, a web page’s weight is mainly made of code, media, and third-party elements. By optimizing the delivery of HTML, CSS, and JS, you will certainly reduce the size of your page. Code optimization can be done through minification or delaying the load of non-critical code. Below is an example of what CSS’s minification looks like:

Tools to optimize CSS and JavaScript:

• WP Rocket optimizes your code: it minifies JS and CSS, defers and delays JavaScript, and removes unused CSS.

Here you can have a look at the CSS optimization features:

And here’s what to expcet from the powerful JavaScirpt optimization options:

• You can optimize JS and CSS manually if you are comfortable editing the code. In that case, you can use an online tool like CleanCSS.
• To optimize your code, you can also take advantage of other tools such as:
  • Flying Scripts
  • Asset CleanUp
  • Gonzales

3. Resize, Compress, and Convert Images to WebP

Images are the elements that take up the most space in a web page, so optimizing them as much as possible is crucial. We suggest you resize your images for the web, compress them without impacting the quality, and serve them using the WebP format. 

On average, Google found out that the average WebP file size was 25%-34% smaller compared to JPEG.

Tools to optimize images: Imagify is the easiest image optimization plugin that automatically compresses your images without degrading their quality. The plugin perfectly balances performance and image quality and comes with a  bulk compression option. It also offers WebP conversion to save even more image bytes and make your web page size lighter.

• More image compression plugins are available on the market – check our detailed comparison article that lists the best image optimization plugins for WordPress. 
• Other online tools are available, like CompressJPG or Tiny-img, but you’ll need to browse your computer to use your images there, compress them, and re-upload them on WordPress. 

Interested in Image optimization? Imagify put together 3 easy-to-read guides that explain: – How to resize images – How to compress images  – How to convert images to WebP

4. Optimize Font Delivery

Often forgotten, web fonts can add up quickly to slow down page speed and increase the page weight. Optimizing fonts is an important step in reducing the size of a page and can also help refine typography and the overall design of your site. Font delivery optimization can be done thanks to preloading, meaning that you tell the browser to start downloading fonts immediately before the final page is rendered. 

Tools to optimize font delivery:

• WP Rocket has a preload fonts feature telling the browser to start downloading fonts immediately. Otherwise, they would be discovered much later. It gives you more control over how the fonts are loaded, which helps optimize performance and improve your site’s perceived page load time.  

• Manually, you can add the Link element at the head of the document:

<head>
<!-- ... -->
<link rel="preload" href="/assets/Belleza-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Here’s a detailed guide about font optimization and how to remove any flash of unstyled text (FOUT), that is when you briefly see the page with another web font (browser’s default style).

5. Use a CDN

While CDNs don’t directly reduce the size of a page, they contribute to serving content faster. They reduce the distance between the user and the servers thanks to caching and points of presence located around the world. 

Web page size is important for the ranking of your website because it directly affects your speed. Larger web pages load slowly, which means that Google penalizes them. To prevent those performance issues, a CDN can be one of your best allies.

Tools to optimize content delivery:

• RocketCDN – If you are looking for a CDN that does the heavy lifting for you, then it’s one of the best value for money on the market. It even sets up the CNAME and configures your DNS record for you. 

Want to take your performance optimization journey to the next level? Apply 19 additional tips to speed up your WordPress site.Â

How to Reduce a Website Page Weight With WordPress Plugins

Here are two plugins you can use to reduce your web page weight easily and without touching a single line of code: 

1. WP Rocket: one of the best caching plugins for WordPress
2. Imagify: a super easy-to-use image optimization plugin

In this section, we are showing a real case scenario using WP Rocket and Imagify, and we will compare the page weight of a web page before and after using them. Here’s what my page looks like:

Scenario 1 – My web page size without any performance plugins 

• Total Page Size: 1.30 MB
• Space taken by CSS: 59 KB
• Space taken by JS: 728 KB
• Space taken by fonts: 234 KB 
• Space taken by images: 86 KB

Scenario 2 – My web page size with WP Rocket and Imagify

• Total Page Size: 158 KB
• Space taken by CSS: 50 KB
• Space taken by JS: 44 KB
• Space taken by fonts: 47 KB 
• Space taken by images: 26 KB

Here’s a visual comparison table that highlights the differences that two plugins make in terms of page weight:

Key Takeaways

• WP Rocket and Imagify significantly reduced my web page size. It went from 1.30 MB to 158 KB.
• JavaScript was optimized thanks to minification and enabling the “load JS deferred” feature.
• Fonts take up only 47 KB against 234 KB before installing WP Rocket.

Key Features We Used 

The optimization is really easy to do with WP Rocket and Imagify. All you need to do is check a few options directly from the WordPress admin. With WP Rocket, 80% of the performance best practices are even applied right upon its activation!

All options are intuitive and can be accessed from different tabs. Most of the features help reduce the web page weight and boost performance. WP Rocket is also helpful to fix the vast majority of the PageSpeed Insights performance audits and pass the Core Web Vitals assessment as it applies caching, optimizes the code, reduces the number of requests, and much more. 

Wrapping Up

To reduce the size of your web page, you can use WordPress plugins like Imagify and WP Rocket. WP Rocket will help you implement caching, optimize your CSS and JS, and improve your Core Web Vitals. Imagify is your best bet to optimize your images and convert them to WebP while preserving the quality. With the right tools, reducing the web page weight is a real breeze! 

The good news is that you can try Imagify for free, and WP Rocket can be refunded within 14 days if you feel it’s not for you. Don’t waste more time: improve your performance by decreasing your web page weight today!

The post Web Page Weight: What It Is and How to Reduce It appeared first on WP Rocket.

This is a guest post. Opinions and recommendations are the author’s own.

Speed is the heartbeat of the online world, and your WordPress membership site is no exception. A one-second delay in page load time can lead to a 7% conversion loss. 

Imagine the impact of speed on a membership site where delivering top-notch user experience is highly valued. 

It also has an impact on SEO. Considering how important page speed is for SEO, it should be your priority when creating a membership site.

In this guide, you’ll learn the different ways to optimize your membership site for speed and search engine rankings. 

Let’s get started!

Introduction to WordPress Membership Sites

WordPress membership sites allow you to create premium content accessible only to paid members. 

It is a powerful way to monetize your website and create recurring revenue through paid subscriptions. It isn’t a built-in feature of WordPress, though. You need a plugin to make this happen. 

Why Create Membership Sites With WordPress?

WordPress makes making membership sites easy. It’s also a great way to improve your online presence and generate a regular income.

WordPress helps you:

• Set up your membership site quickly using a membership plugin
• Offer different membership options
• Easily manage members
• Protect your content
• Build a community

You can charge members to access premium content and be part of an exclusive community. This gives you a steady income stream while working for different budgets.

WordPress also helps protect your best content while also building an engaged community. 

Members with similar interests can easily connect and interact through your site, giving them a sense of community. 

How to Pick the Right Membership Plugin for Your Membership Site

A membership plugin for WordPress is key to running your member website. It handles jobs like limiting content, processing payments, and managing members automatically. 

When picking a plugin, think about:

• Is it easy to use? Look for one with a user-friendly setup and good instructions.
• Does it have the features you need? Make sure it can limit content, process payments, and manage members.
• Can you customize it? The plugin should let you tailor it to match your brand and needs.
• Are support and updates reliable? Choose a plugin with solid support and regular updates.
• Is the price right? Consider the cost and if it’s a good value.

Let’s look at some of the best WordPress membership plugins that you can try!

Top Plugins for Creating WordPress Membership Sites

Let’s look at some of the top membership plugins on WordPress to help you get started.

1. SureMembers

SureMembers is a comprehensive solution for creating subscription-based courses or restricting content on your WordPress site. 

It helps you:

• Create subscription-based courses
• Restrict content access
• Secure digital downloads
• Customize access rules
• Manage menu item visibility

It’s a perfect fit for businesses of all types, including agencies, bloggers, podcasters, influencers, eCommerce gurus, and course creators. 

2. MemberPress

MemberPress is a robust WordPress membership plugin designed for creators aiming for 7-figure earnings. 

It helps you:

• Create and sell online courses
• Set up paywalls and private communities
• Provide a members-only dashboard
• Offer digital downloads and corporate memberships

MemberPress is ideal for anyone looking to build and manage a membership site easily, from beginners to experienced site owners.

3. ProductPress

ProductPress is a simple yet powerful plugin that enables you to sell memberships, courses, and subscriptions on your WordPress site via a simple interface. 

It helps you:

• Use Gumroad or Paddle for payment processing
• Create and sell online courses
• Restrict access to members-only content
• Earn recurring revenue

It’s particularly suitable for online entrepreneurs starting courses and selling memberships on their sites.

By now, you should have a fair idea of the tools required to build a functional membership site. 

Let’s jump into the next most important step of the process — improving site performance.

But simply starting your membership won’t help. You must optimize your site for better performance, user experience, and SEO. 

Let’s explore this further.

The Importance of Performance and SEO for Membership Sites

Having a fast, reliable membership site is critical to success. You want happy members who stick around and engage with your content while strong SEO brings in new people — it’s the perfect combination!

Speed matters big time. 

Slow load times frustrate users, leading to poor engagement and canceled subscriptions. 

Site performance also significantly influences search engine optimization since Google cares about speed and user experience.

Let’s pick a good host.

1. Selecting Quality Hosting For Your Membership Site

Picking a good web host is important to make a WordPress membership site. 

The type of hosting you get decides how fast your site loads and how often it goes down. 

Those things matter a lot for giving members a good experience and ranking your site higher in search engines.

How Hosting Affects Site Speed And Reliability

Your hosting service is like the foundation of a house. Bad hosting means slow speeds and frequent downtime. This can frustrate visitors and hurt your SEO. Choose a reliable host with fast servers and great support that ensures maximum uptime, fast page loads, and good search rankings. 

Here are some hosts you can try:

• SiteGround – Awesome customer service and fast servers. Good plans for websites of all sizes.
• Hostinger – Great low-cost hosting that delivers performance without sacrificing quality.
• Easy WP – Managed WordPress hosting that’s fast, secure, and can grow.
• GreenGeeks – Fast, secure, eco-friendly hosting. Perfect if you care about sustainability.
• Kinsta – One of the more expensive options, but it offers high-performance hosts.

2. Picking the Right Theme for Your WordPress Membership Site

Picking the right WordPress theme for your membership site is super important. The theme sets the look and feel of your site. 

It can also affect how fast your site loads and how easy it is for people to use.

Why Pick a Lightweight and Responsive Theme?

You’ll want to go with a lightweight and responsive theme. A lightweight theme has clean code that loads fast, greatly impacting SEO and user experience. 

A responsive theme makes your site look good and works on desktops, tablets, and phones. 

This is especially important now over half of web users are browsing from their mobile devices. 

Here are some of the fastest WordPress themes:

• Astra – Astra is one of the most popular WordPress themes because it’s fast and flexible. It has tons of starter sites you can install in one click. It works great with SureMembers, LearnDash, and MemberPress, so it’s awesome for membership sites.
• Neve – Neve is a modern multipurpose theme that’s fast and lightweight. This means your pages will load super quickly. 
• OceanWP – OceanWP is a free multipurpose WordPress theme that works well with membership plugins without sacrificing performance or SEO.

3. Create User-Friendly and SEO-Friendly URLs

Making good web page addresses is important for optimizing your WordPress membership website. 

A well-structured web address is easy for users to understand and good for search engines. 

This makes it simpler for people to navigate your site and for search engines to “get” your content.

Effective URLs have two main benefits:

• Show users where they are on the site and describe the page content.
• Help search engines understand site structure and page relevance for searches.

Want to create effective URLs? Follow these tips:

• Separate words with hyphens, not underscores or spaces
• Structure logically to match the site content
• Use relevant keywords but don’t overdo it
• Avoid special characters in the URLs
• Always use lowercase letters 
• Keep it short and simple

WordPress Permalink settings allow full URL customization, including predefined structures or creating your own.

4. Keyword Research for Your WordPress Membership Site

Keyword research is important for your membership website for two big reasons.

First, it helps you understand what your audience is looking for online. This tells you what they need, their interests, and their problems. 

You can use this data to create valuable content for your members.

Second, targeting the right keywords can increase your site on search engines. 

That helps drive more organic traffic to your site and potentially get more people to become members.

Quick Tips for Picking Keywords for SEO

When picking keywords for SEO, keep these tips in mind:

• Focus on understanding user intent. What do people want when they search for certain terms? Match your content to answer their intention behind that search.
• Go after long-tail keywords. These are more specific, longer sentences and less competitive keywords that can bring targeted traffic more easily.
• Look at keyword difficulty. How hard is it to rank for a certain keyword? Easier ones are usually better, especially for new sites.
• Check search volume. How often is a keyword searched? High volume is good, but don’t ignore lower volume keywords either.

Recommended Tools for Keyword Research 

Here are 3 great tools for keyword research and on-page SEO:

• RankMath – A WordPress plugin for SEO. It helps optimize your content and tracks keywords.
• Ahrefs – Performs keyword research, competitor research, and more. Find relevant keywords and see their difficulty and search volume.
• Semrush– Similar to Ahrefs. It also has an SEO writing tool to optimize content for target keywords.

Using these tips and tools can help you do effective keyword research. This can get more organic traffic to your WordPress membership site and bring in more potential members.

5. On-Page SEO

Keyword research is one phase of SEO. Once you have the keywords, write content and start creating the pages. 

But if Google cannot read and understand your pages completely, you’ll leave ranking opportunities on the table. 

On-page SEO means optimizing the content and code on each page so search engines know what the page is about. 

Every website must make a few foundational changes as a bare minimum to improve on-page. 

Meta Titles and Descriptions

The meta title is your page’s title that appears in search results. Make it descriptive with your main keyword so it grabs attention. 

Keep it under 60 characters so the whole thing shows up.

The meta description is a summary under the title in search results. While it’s not a direct ranking factor, it helps increase the click-through rate (CTR). Describe what the page is about and use your main keyword. Keep it under 160 characters.

Headers

Headers like H1, H2, and H3 organize your content. They also tell search engines about the topic.

• H1 is the main header with your main keyword. Each page should only have one H1.
• H2 and H3 are subheaders that break up sections. Use keywords in these where they fit naturally.

6. Improving Site Speed

Having a fast website isn’t just nice — it’s really important! 

Slow loading times can frustrate users and leave your site (called “bouncing”). This means fewer people will buy memberships or use your site. 

You can use Google’s page speed checker to see how fast your website loads. 

Slow speed hurts your search engine ranking as Google uses site speed to decide where your site should rank. 

A faster site can help you get higher in search results, bringing you more visitors.

Optimizing Web Performance

To make your site faster, you can take advantage of a caching plugin. If you’ve picked a host like GreenGeeks or EasyWP, you may get a pre-installed caching plugin to help improve the overall speed of your site too. 

WP Rocket is the easiest and most powerful WordPress caching and performance plugin. It instantly improves your site’s loading times and PageSpeed score by applying web performance best practices immediately upon activation. These include page and browser caching, cache preloading, and GZIP compression.

The plugin also offers advanced features like delaying JavaScript execution and loading JavaScript deferred, removing unused CSS, and lazy loading images. It is constantly updated to keep your site fast and tackle challenging web performance optimizations, including optimizing Core Web Vitals and improving the PageSpeed Insights score. 

This post on the best caching plugins for WordPress has choices if you wish to compare multiple plugins before choosing the best one for your needs. 

Let’s jump to improving the site speed through optimized images. 

Optimizing Images for Speed and SEO

Large, high-resolution images that aren’t optimized can slow down your site. This is a low-hanging fruit that has a big impact on how fast your website loads. 

To optimize images for speed, start with a plugin like Imagify. It helps you resize, compress and convert images to WebP – these are the actions to take to make your images lighter. You must also perform a few more steps to ensure complete optimization from an SEO standpoint. ​​

Here are the additional steps you need to take:

• Use keywords in file names and describe the image
• Add alt text to improve accessibility

Remember that images taken with a professional camera are generally much larger (10+ MB). 

Automated compression can only do so much to reduce the sizes. We recommend uploading a lower-resolution image, like 1920×1080, so optimization can work its magic for your membership website. 

Implementing a Content Delivery Network (CDN) 

A CDN stores a cached version of your site content on servers worldwide. When a user visits your site, the CDN delivers the content from the server closest to the user. 

This shortens the distance the data travels, reducing latency and load times and giving your users a better experience.

Benefits of using a CDN include:

• Faster load times for users worldwide
• Improved site performance
• Better user experience 
• Higher global availability and redundancy

For membership sites, RocketCDN is an excellent choice. It’s customized for and fully compatible with WP Rocket caching. 

RocketCDN relies on StackPath’s high-performance network of 50+ global edge locations to deliver lightning-fast speeds. 

Once you have a CDN set up, your site is snappy, no matter where your users access it from. 

Finally, let’s talk about a highly neglected problem — plugin management. 

Reducing and Managing Plugins

Too many plugins can slow down your site. Each adds code that your server must process, which can cause delays when the site loads on your users’ computers. 

It doesn’t take a lot to manage them efficiently. 

Here are a few things we recommend:

• Only install and use the plugins you need for your site to function.
• Update them on time — WordPress allows automatic updates, but we recommend enabling it only for official WordPress plugins.
• Regularly delete any unused plugins to avoid conflicts in the future.
• Avoid redundant plugins — For example, multiple popups or page builders. They do more harm than good.
• Check plugin reviews and the last updated dates before you install any plugin. We want plugins that are updated frequently.

With the basics of your site setup complete, let’s find a good membership plugin that will handle the technicalities so you can focus solely on creating a better membership experience. 

7. Create Content Your Members Will Love

Engaging content is important for your membership site. It keeps your members coming back and encourages new ones to join.

Understand Their Needs

Before creating content, understand who your members are and what they want. 

Use tools like Google Analytics and surveys to get more information about them. What are they into? What problems are they trying to work through? 

Use this to guide your content creation.

Plan Your Content

A content calendar helps you plan and schedule your content ahead of time. When inspiration strikes, you can batch-create your content in advance for the next few days or even weeks. 

This strategy works great for sites requiring publishing content regularly, as you’re never left without content to post. 

A tool like SureMembers can also help you automatically drip the content to your membership site so your content publishing is on auto-pilot.

Use AI to Research 

ChatGPT has rid social content creators of the blank page syndrome. You can simply drop in a few of your previous content as examples and ask ChatGPT to create new ones with a similar style. 

The results are generally terrible. But you now have something to start with. And within the process, you create new content you otherwise couldn’t. 

Before you go live and start promoting your membership, there’s much to customize. This tutorial on creating a full-fledged membership site from scratch helps you complete the process. 

8. Promoting Your Membership Site

Creating a site and onboarding new members is no easy task. Content is just the beginning. 

People must love the idea behind your membership site before they ever decide to sign up. When you’re just beginning, you have to do a lot of promotions.

One of the fastest ways to gain organic traction is through social media. 

But it’s no easy task, as internet gurus might make it sound. Getting people to start accepting your content on socials is an uphill battle until you hit the right checkboxes for the community. 

Take Reddit or Twitter (X?), for instance. You cannot sign up to these platforms, start sharing or auto-post links, and expect attention. 

You must add value to the community and gain trust before promoting a single link. 

Depending on how well you know the platform, this can take a while. Marketing Examples is a great example of using Reddit to scale your marketing effort and gather an audience. 

It started with Harry Dry, the founder of this site, replying to comments in the writer communities about how they can market their services better. 

Then, he began sharing case studies and stories for free while mentioning that he shares these in more detail in his newsletter. 

As people realized he was adding value, Marketing Examples blew up and gained the attention that Harry was looking for.

That’s just one of many examples of how to promote and retain members on your membership website without being pushy. We’re sure you can come up with many more.

Ready to Unleash the Full Potential of Your WordPress Membership Site?

We’ve gone through the complex process of setting up, improving, and promoting a WordPress membership site. 

From understanding the importance of speed and SEO to creating interesting content and using off-page SEO tactics, we’ve learned what goes into making a successful membership site.

But the real test starts now. It’s time to use this knowledge. 

The path to a successful membership site isn’t straight or easy. It requires thoroughly knowing your audience, providing value, and always adapting.

Remember, your WordPress membership site has to become more than a platform. It must be a single place where people with similar interests and goals can openly share. 

Your role is to build this community and provide excellent experiences to your members.

So, are you ready to fully realize the potential of your WordPress membership site? 

The post WordPress Membership Sites: The SEO and Performance Optimization Guide appeared first on WP Rocket.

Are you experiencing any performance issues on WordPress? Cleaning up your database is a necessary step in your optimization journey. If you’ve been using WordPress for a while, chances are your database is cluttered and filled with tables you no longer need. It looks like it’s time for a clean-up! But where to begin? Which content can be deleted without compromising the smooth running of your website? That’s precisely the purpose of this guide: you’ll understand which content you can delete (and how) to optimize your WordPress database. 

Why Clean Your WordPress Database

Cleaning your database makes it run more efficiently and helps boost performance by clearing up significant space. If you delete all the stale and outdated data, you can remove the bloat accumulated over time (which could have harmed loading times). 

Your WordPress database is a mix of all your site’s essential content, including themes, plugins, comments, posts, pages, and revisions. While some elements should never be deleted, it will not harm to trim the excess of old information around three main optimization areas: 

1. Reduce the database size from unnecessary entries 
2. Index fewer data on tables subject to clean up
3. Rebuild indexes

By following those three rules, you’ll optimize your database, improve the performance of your website and significantly reduce server loads.

Did you know? Cleaning up your WordPress database may also fix a slow WordPress admin.

Let’s go over the 10 applicable tips you can use for a good clean-up of your WordPress database. 

10 Best Practices to Clean and Optimize a Database on WordPress

With WordPress, you can optimize your database in a few different ways. We have put together 10 best practices you can follow to clean up your WordPress tables – and it should always start with a backup!

1. Backup Your Database

Always take a database backup before starting the cleanup and deleting any tables. If you happen to remove the wrong data, the whole website could go down. You can use FTP, your hosting panel, or a WordPress plugin like UpdraftPlus to complete this task and be on the safe side.

2. Delete Old Plugins, Themes, and Post Data

If you decide not to use a plugin or a theme, we recommend you delete them and all their data. 

To delete unused plugins, go to Plugins → Installed Plugins. Then, click Delete under any plugins you’d like to remove. Follow the same path from Appearance → Themes if you want to delete all the themes. 

In the same spirit, get rid of the posts and pages that have been sitting too long in your admin, and that will never be published. 

3. Delete or Limit Post Revisions

WordPress allows you to control how many revisions you want to keep for an article, which can be very handy if you need to restore an older version. To limit post revisions manually, simply add this code to your WordPress site’s wp-config.php file: 

define( 'WP_POST_REVISIONS', yournumberhere )

4. Delete Spammy and Unapproved Comments

Everybody who owns a WordPress blog knows how annoying it can be to get spam comments. Don’t let them pile up; delete them immediately to avoid clutter. Similarly, if you don’t approve a comment, make sure it gets deleted from the admin. Some anti-spam plugins like Akismet may be your best ally. 

You can use phpMyAdmin to bulk delete all the spam comments by opening the WordPress_Comments table as shown below.

(Jump to our full phpMyAdmin tutorial for clearing-up database)

5. Delete Unused Tags

Tags help organize your website’s content by categories. It can help a visitor in the navigation and the overall user experience. However, if some tags become obsolete, delete them from the tags section accessible from the posts > tags section. 

6. Delete Old Shortcodes

Shortcodes are handy to add extra functionality to WordPress posts and pages without writing any code. But what happens if you delete the plugin or don’t want to use a shortcode? Your website gets unnecessarily bloated, and the visitors may see the hooks of the shortcode instead of the content:

[some-random-shortcode-seen-by-visitors]

One of the solutions would be to go manually through the list of shortcodes and delete all the unused ones. Another way would be to use a plugin like Shortcodes Finder that lets you find and optimize all your shortcodes. 

7. Delete Pingbacks and Trackbacks

When your site includes a URL linking to another site, this sends an automatic server notification called a “pingback”. Trackbacks and pingbacks are methods for alerting blogs that you have linked to them, and the messages can fill up the database. To fix this issue, you need to disable both by heading to Settings > Discussion in WordPress and deactivate the first two settings:

8. Delete Transients

Transients are a type of temporary data cache, so you can use them to store data, but only for a while. You can check how many transients are being stored in your database tables by using phpMyAdmin, then you can search for the following option name in the database:

_ transient _%

Then, delete all the transient tables manually from the dashboard. You can also manage and delete transients in WordPress by using the Transients Manager plugin. 

9. Clean Orphan Data 

Orphaned data can appear in various forms within your database, such as unused metadata, unused terms or tags, unattached media files, and more. These data fragments take up valuable space and can clutter your database. An example of orphan data is a piece of information that still sits on an organization’s network (or server) but was created and owned by a now-deactivated employee.

You can use a plugin like WP-Optimize or WP Sweeper to clean orphan data. If you prefer to do it manually using a MySQL request, we recommend you read this tutorial about how to find the orphan data and delete it. 

10. Optimize Tables

The ultimate point of the database optimization journey is cleaning up the tables. WordPress has 11 tables by default, but more will be added according to the theme and plugin you install. 

Optimizing a database requires great care, and you must be cautious. We are sharing two ways of doing a full database clean-up: manually with phpMyAdmin or automatically with a WordPress plugin. Let’s go over both methodologies. 

How to Optimize Your WordPress Database With phpMyAdmin

To manually optimize your WordPress database, you will need to login into PHPMyAdmin via your hosting provider and follow the steps below:

1. Log in to cPanel and open the PHPMyAdmin tool.
2. Select the tables that need to be optimized from the structure tab. You can also select them by checking the “Check all” box below the table lists. 

3. Once the tables are selected, open the dropdown menu located next to the Check all button:

4. Select the Optimize table option:

5. Once the database has been cleaned up and optimized, you should get this success message:

If you need to delete a whole database, head to the Databases tab, select the tables to delete, and click on the Drop button:

How to Optimize Your WordPress Database With a WordPress Plugin

The easiest and safest way to clean your database is to use a WordPress plugin. It will do the heavy lifting for you, and you won’t need to touch any of the tables to start your optimization journey. The best plugins to optimize your WordPress database are: 

1. WP Rocket
2. Advanced Database Cleanser
3. WP-Optimize
4. WP-Sweep
5. Perfmatters

Let’s briefly see how database optimization works for each of them!

1. WP Rocket

One of the best caching plugins for WordPress that will optimize your database in one click. It’s also the most powerful extension to boost your loading time, improve your PageSpeed performance score, and optimize your Core Web Vitals. 

From the WordPress dashboard, open the Database tab and select the advanced options of your choice. You can limit the number of revisions, trash the spammy comments and transients, and schedule an automatic daily, weekly, or monthly clean-up. 

2. Advanced Database Cleanser

One of the most complete plugins that focuses only on database optimization. It will clean up your database by deleting orphaned items such as “old revisions”, “spam comments” and more advanced options. From the first tab, you can do a general clean-up:

If you want to be more thorough in the optimization, open the second tables tab and manually select the table that needs cleaning. 

3. WP-Optimize

WP-Optimize cleans the database, compresses images, and also caches pages. It clears out unnecessary data, cleans up your tables, and retrieves space lost to data fragmentation. There are also some stats about the database and the potential savings you could get after the optimization. 

4. WP-Sweep

The plugin lets you clean up unused, orphaned, and duplicated data in your WordPress database. It cleans up revisions, auto drafts, unapproved comments, spam comments, and more.  It also optimizes your database tables quickly and efficiently.

5. Perfmatters

Perfmatters is a premium WordPress plugin that comes with a dedicated database tab. In terms of optimization, you can disable or limit the number of post revisions that WordPress stores or automatically delete the spam comments to keep your database always clean. 

Wrapping Up

As a final note, there is one golden rule to follow; you should always keep only relevant information stored in the database and lower resource usage. You can achieve better performance and maintain good database health by regularly deleting outdated data.

If you have a technical background, optimizing your database using phpMyAdmin should be straightforward. But if you are looking for an automated tool that does the job for you, you can try WP Rocket. It has a dedicated section to completely optimize your database (e.g., the posts, the comments, the transients.). WP Rocket goes beyond database clean-up and offers caching, advanced JS and CSS optimization, lazy loading, and much more. If you want to speed up your WordPress site, and clear your code and database in a few clicks, WP Rocket is the right choice. Plus, you don’t take any risks with the 30-day money-back guarantee. 

The post How to Clean Up and Optimize a WordPress Database appeared first on WP Rocket.

At WP Rocket, our mission is to educate users about the importance of web performance while making it as simple and accessible as possible. It’s quite a challenge: web performance is not an easy topic, and optimizing a website to improve performance is even less easy to explain and understand. What’s more, finding reliable information is difficult – the topic is complex and sometimes subjective. 

This article highlights some misleading concepts about what matters when identifying the key performance optimization actions to speed up a website. Keep reading, and you’ll find a list of the most common misconceptions we encountered. We’ll explain why they are incorrect and share how we tackle web performance challenges with our plugin.

What Are the Most Common Web Performance Misconceptions?

Let’s discover the misconceptions we consider more relevant regarding web performance optimization. 

1. Delay JavaScript

Optimizing JavaScript files is one of the most challenging web performance optimizations. It’s also one of the most impactful to improve performance and key metrics such as Core Web Vitals. In other words, you can’t avoid optimizing JavaScript if you want a fast website. One effective way to go is to delay the JS files that don’t need to be executed immediately. As a result, the page will load faster, and the browser will execute JavaScript only when needed by the user interaction. 

The misconception is that all JS files should be delayed. The truth is that this will often hurt the user experience and might even break the site’s functionality. Critical JS should never be delayed, such as those related to the above-the-fold resources (e.g., menu) and the tracking scripts (e.g., Google Analytics). These resources must be available early in the page load to ensure a smooth user experience.

It’s now easy to understand why knowing which JS files should be excluded from being delayed and how to do it is crucial.

For instance, WP Rocket allows you to manage the Delay JS execution feature easily. The option makes it easy to delay JS – a key optimization task. On top, WP Rocket allows you to exclude JavaScript files both manually and thanks to the one-click exclusion released with our latest major version, WP Rocket 3.13.

We asked Adam Silverstein, Developer Relations Engineer at Google, their take on always delaying JavaScript and its impact on performance. He confirms our view and adds: “Generally, for server-rendered sites like WordPress sites usually are, most JavaScript can be deferred unless it is required early on in the page cycle for some reason. An example is analytics scripts where you want to capture data as soon as possible: here, the async attribute is more appropriate. One potential risk with deferring scripts is that if other scripts or inline scripts depend on the deferred script (and are not deferred as well), the dependency can break”. 

So, it’s time to look at the misconception about deferring JavaScript.

2. Defer JavaScript

Here, the misconception is that all JS can be deferred. 

The truth is, deferring JavaScript is crucial as long as it respects dependencies. In other words, deferring JS without considering dependencies is not recommended.

For example, an inline script using the jQuery library will need jquery.js to run before it can be executed without crashing. If jquery.js is deferred, the inline script won’t find jQuery declared and will prompt a console error jQuery is not defined, preventing the code from running, breaking the related feature, and potentially breaking the layout and the overall functioning of the page as well. 

Adam Silverstein mentions a new WordPress script API proposal near to be released. It will help the deferring strategy by defining loading tactics and preventing dependency issues. 

Adam explains: “In the proposed approach for core, we are handling the deferring cases automatically with the core approach to script strategy – including checking the dependent scripts are also deferrable and handling delayed execution of inline scripts that depend on a deferred script”.

When it comes to JavaScript deferring, WP Rocket has a lot of automated exclusions to prevent conflicts. For instance, when Avada is enabled, WP Rocket automatically excludes the jQuery library and Google Maps external script.

The new Script API will allow our plugin to extend the exclusions library further. As a result, it will be less and less likely that your website will break when deferring JavaScript. 

3. Reduce Used CSS

In addition to JavaScript optimization, reducing used CSS is one of the most effective ways to boost your website performance. There are two ways to manage such optimization:

• Inlining CSS files, which means integrating CSS on the same page using a `style` tag.
• Use separate external files.

The misconception is that delivering the used CSS in separate files is always the best way to address such optimization.

The truth is that inlining CSS is perfectly fine and has two important advantages from a performance and user experience standpoint:

• It’s a faster process because the browser will only make a tiny request to check the freshness of the page. If the page has not changed, which is generally the case, the browser will serve a cached copy of the page. For this reason, inline Used CSS will improve performance: the browser won’t load and parse a CSS file but will directly process the inline CSS on the page.
• Inlining all the page’s CSS prevents issues such as FOUC (Flash of unstyled content) and doesn’t impact user experience, as using the Critical Path CSS in addition to a separate file could do. To prevent other metrics from worsening, having the Critical Path CSS should be required when the Used CSS is delivered using a file.

That’s why WP Rocket inlines CSS and allows anyone to take advantage of an advanced feature such as removing unused CSS with just a click:

Once again, Adam Silverstein from Google shares our point of view. We asked him what’s the most effective way to deliver the used CSS. He says: “My expectation is that for smaller CSS sizes, at least, inlining will be faster by reducing the need to load the additional CSS file. The “penalty” for that may vary depending on conditions – for example, the device and network the user is using”. 

4. Host Fonts Locally

If you run a WordPress website, you may already know that hosting fonts locally can be another good choice for improving performance. Plus, hosting local fonts is essential to comply with the GDPR rules. 

Regarding Google fonts, it’s important to control from where the files will be sent so they do not depend on Google Fonts CDN – especially if it doesn’t perform well for a large part of the audience. 

A common misconception is that hosting them will automatically improve your website’s loading time. 

The truth is that Google fonts will be faster only if displayed in the same zone where the visitor is. 

If the website uses a CDN, Google fonts will be faster only if the CDN coverage is better than the Google Fonts’ – which strongly depends on the visitor’s location. 

We ran tests to validate this assumption and found that hosted fonts were the least performant for distant visitors regarding Time to First Byte, a key metric to boost your website speed.

This performance data is important because it will directly influence the LCP element if it’s a text using Google fonts.

The other misconception about hosting fonts locally is that WP Rocket cannot preload Google fonts. This is false: our plugin can preload Google fonts automatically when enabled by the Remove Unused CSS option. 

5. Fetchpriority Resource Hint

The fetch priority hint is an attribute that tells the browser the priority of resources to discover and download so that the page can load as fast as possible. Currently, its usage is still limited to a bit less than 70% of users worldwide.

The misconception is that you should always use the fetchpriority resource hint. The truth is that resources hint may sound like a must-do, but it’s not as straightforward as it seems.

While fetchpriority hint makes critical resources available in time, it can deteriorate performance if the resources are fetched without the right priority. This is a very complex performance optimization task – and it’s tough to implement it without testing or analyzing pages. 

At the same time, the impact of this task on performance is limited to what can be automatically prioritized or deprioritized. 

We listed a few examples to explain how fetchpriority depends on several factors.

• Logo and LCP image: this is easy – these elements are obvious candidates with a high fetch priority.
• Sliders: it starts getting tricky.

  A slider’s images above or near the fold will have a subjective fetching priority depending on whether they cause an issue.

  If the slider is near the fold but deemed critical to the user experience, its first image should be highly prioritized.

  If a slider is delayed, it is unnecessary to prioritize fetching its images, even if it’s above the fold.

• CSS, JS, and third-party resources: only their respective developers can assess if they should be prioritized or deprioritized. And even with their input, and when mixing several plugins and resources, the fetching priority would be case-based. 

You can see what we mean when saying resources hints are not as easy as you may suppose.

That’s why WP Rocket doesn’t include such a feature yet, although fetchpriority can positively impact your website speed if used correctly. Rest assured, our plugin helps achieve optimal performance thanks to other powerful and advanced features.

We also asked Google’s team what’s their take on using a high fetchpriority for all images above the fold and a low one for all images below the fold. 

Adam Silverstein explains: “In general, the goal should be to add fetchpriority=high only to critical images because adding it to multiple images will generally undo the benefits. Typically you want the LCP image set with this attribute, but think carefully before using it on many other resources. This page is the best resource for understanding loading priority. In general, all images start with a low priority.  Images within the viewport start at “low” priority and then at layout time, as the browser realizes they are in the viewport, are boosted to “high”. By tagging it in markup using fetchpriority=”high”, they can start at “high” immediately and load much faster. If you tag too many images as a high priority, they will compete for the same resources. One possible exception would be trying to tag the LCP image for both desktop and mobile breakpoints (which could be a different image). The WebPageTest ‘experiments’ feature is a great way to test this”.

Speaking of fetchpriority, it’s interesting to highlight that the Core Performance Team proposed to add the fetchpriority=”high” attribute to LCP images in WordPress core to enhance LCP performance. 

Spoiler alert: we’ve been working on an automatic way to add the fetch priority on the LCP element, making it as easy as possible for our users to benefit from the option. You may see what we’re talking about in one of our next releases.

6. Lazy Load Background Images

Lazy loading is another important web performance optimization technique. It allows the browser to load images only when needed so that not all images are loaded simultaneously, and the page can be rendered and displayed quickly.

That’s why lazy loading background images can spare requests for unnecessary images below the fold, thus improving performance. 

The misconception is that background images added on internal CSS (`style` tag) and CSS files can be lazyloaded. The truth is that WordPress, lazyload libraries, and native lazyload don’t allow this optimization – which needs to be accurate, and it’s not as simple as it may seem.

At WP Rocket, we’ve been working on a specific feature to make this optimization easy and automated while being precise.

7. LCP Images vs. Above-the-fold Images 

Speaking of lazy loading and the fetch priority attribute, another misconception is that everything above the fold should be set to a high value (fetchpriority=high).

Adam Silverstein explains: “Fetchpriority optimizations should ideally be applied only to the LCP image. At the same time, all the above-the-fold images should avoid lazy loading”.

And he adds an example: “Let’s say there are six above-the-fold images and one LCP image. Then, the best approach would be to omit the lazy loading from all the images and apply fetchpriority to the LCP image”.

8. Exclude Above-The-Fold Images from Lazy Loading

If you’re familiar with web performance optimization best practices, it’s likely you know that excluding above-the-fold images from lazy loading is a good way to speed up your website performance.

This is partially a misconception, as it mainly depends on how the current tools handle it. 

While excluding above-the fold-images can boost your website speed, it might result in skipping additional images from the lazy load if it’s not implemented for the images currently included above the fold. As a result, the page will load slower instead of the other way around. 

Moreover, the number of images to exclude will usually differ from one viewport to another, making performance optimization more difficult to manage.

Such optimization requires auditing to find accurate images to skip from lazy load. 

The current solutions are not automated and are based on a ‘guess’ rather than getting the actual images to be excluded. That’s why we’ve been developing the easiest possible solution to allow anyone to tackle this performance optimization.

We ran some tests and got interesting results. When implemented correctly, and excluding the exact number of above-the fold-images from lazy loading, it can improve metrics such as First Contentful Paint, Largest Contentful Paint, and Speed Index. Plus, it can address PageSpeed Insights audits such as Avoid enormous network payloads and Keep request count low and transfer sizes small.

In the meantime, WP Rocket allows you to address it with a helper plugin.

9. YouTube Iframe Preview Image

You may be right if you think enabling the YouTube iframe preview image will boost your website speed. This solution avoids loading YouTube scripts and starts loading the video only if the user clicks the play button.

Nonetheless, at this point of the article, you should be familiar with the concept of: it depends. 

Implementing the YouTube iframe preview image to optimize performance won’t work for all websites. It might cause trouble if the parent element holding the video styles images in an unusable way. If so, the preview image won’t be displayed correctly and might need some additional CSS to undo the parent’s element conflicting style. 

The iframe will likely load the same way it does since it will be re-injected once the preview image is clicked.

We ran some tests and validated the assumption that self-hosting the YouTube preview image does not always give better results. Better performance data applies only to local audiences or if a CDN is being used. 

Our tests show that YouTube CDN still performs best and has the lowest TTFB, influencing how fast the image is fetched.

Considering this result is essential because such performance data influences the LCP element if the preview image is part of it.

10. Using a CDN

The last misconception we want to cover is constantly using a CDN to improve performance. While it’s true that a CDN will make your website faster if your audience is worldwide, it’s not correct to say that it will always help your website’s performance.

It depends on the visitor’s location and the distance between the user and the assets requested.

Let’s give you a couple of examples to make it clearer.

• Local audience: You run a local business in France, and your website is already hosted on a local server. Using a CDN that doesn’t have a PoP (Points of Presence) in France or close to it will worsen the user’s experience, as the page and its assets will be shipped from a distant data center, let’s say, New York. On the other hand, the distance will be shorter if you just use the origin server.

• Region or worldwide audience: You run a regional business across Europe. Picking a CDN with a strong Europe presence will give better results vs. picking a CDN that has only one or two PoPs in Europe. 

In short, when picking a CDN, you must ensure their PoPs coverage matches the audience’s locations.

Wrapping up

Web performance optimization is not easy at all – and this article proves it once again. Hopefully, it has shed some light on some misconceptions about key topics such as optimizing JavaScript and CSS and lazy loading. 

At WP Rocket, we strive to make our performance plugin the easiest while offering the most advanced features to boost your website performance. We know what we’re talking about and will always try to explain it as simply as possible. In the meantime, try WP Rocket and see how easy and powerful it is!

The post The 10 Web Performance Misconceptions appeared first on WP Rocket.