Tag: Page speed and caching

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:

	Unoptimized web page size	Web page size with WP Rocket + Imagify
Total Page Size	1.30 MB	158 KB
Space taken by CSS	59 KB	50 KB
Space taken by JS	728 KB	44 KB
Space taken by fonts	234 KB	47 KB
Space taken by images	86 KB	26 KB

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.

Are you looking for the best Google Fonts for your next web project? 

Fonts are a crucial part of the whole brand identity. You need to choose them carefully according to context because it affects your audience’s feelings (and, therefore, the buying decision process). Some famous brands, such as Disney or Coca-Cola, are automatically associated with a font when we mention them. 

Google has over a thousand fonts available in its catalog, but we’ve done the heavy lifting for you and selected the 11 most popular ones. You’ll see that there is always a font that can match your needs and your niche!

What Are Google Fonts?

Google Fonts is a robust collection of web fonts you can use for any project online and offline. They are free and open source, so that you can use them commercially for a logo, print, apps, teaching materials, e-books, etc. The value is real: you will not need additional licensing charges. You can find the perfect Google Fonts directly from the directory by using the search box and the different filters available: 

Google Fonts usually don’t impact performance much as they are retrieved from Google’s content delivery network (CDN) and will load automatically once uploaded to your site.

How to Choose and Use Google Fonts on WordPress

When choosing the best Google Fonts for websites, you should consider the readability and the look and feel based on the context and industry.

1. Readability & Accessibility 

Readability describes how easy and inviting it is for a person to read some text online. Fonts directly affect readability in web design, as you can see in our example below. The article written using the “Roboto” font looks easier to read than the one in the “Kablammo” font. 

Accessibility also correlates to font size, colors, and contrasts you will use on your web page. Check the web content accessibility guidelines to make sure that all can read your font. 

2. Look-and-feel Based on the Industry

Each font impacts and influences your customers’ emotions when they read something online or in the street. You can’t use the same font for a reggae bar and a lawyer: the design codes are different. Similarly, if you want to create a website for a kindergarten, you should opt for a friendly and easygoing font. But if your client is more of a luxury brand, then the font should express elegance and sophistication. 

To give you a real-life example, the Formula 1 website chose the perfect font for their ticketing site. They created a “racing” and “automotive” look and feel by choosing the right font. 

Bonus: How to Identify a Font on a Website 

You can install the free Chrome extension “Whatfont” and hover your mouse on the font that you like, it will identify the family font, the weight, the size, and much more. 

Best Practices to Use Google Fonts on WordPress

To help you find the best Google Fonts on WordPress and install them on your site, follow our 3 best practices below.  

1. Less Is More: Only Use The Fonts You Need

We don’t recommend you use more than 2 or 3 fonts for your brand identity, and also make sure to limit font weights. Regular and bold are the most popular ones, there is no need to have the whole variation from extra-thin to extra-bold from a performance perspective. All the font weights that aren’t being used will slow down the requests from Google’s servers.

2. Mix and Match: Make Sure The Fonts Match Well Together

When you have chosen the best Google font but want to add another one, make sure that it’s a match. 

• Choose different fonts (but not so different). This one is hard to explain, so here’s an image instead: 

Keep in mind the hierarchy of the information: Use a bold and bigger font for a title and a smaller font for a paragraph. Here’s how WP Rocket communicates visual hierarchy through font pairing:

• When you pair them, a general tip is to combine serif headings with the sans-serif body text. Using two serif fonts together makes your text hard to read. If you want to learn more, Webflow explains the major font combinations you can use in your design work. 

3. Installing Google Fonts With a Plugin

Once you have chosen your favorite Google font(s), you can use a typography plugin to use them on your WordPress site. 

The most popular is the free Google Fonts Typography plugin, unlocking all your WordPress site’s Google fonts. It also comes with a live preview feature which comes in handy when pairing fonts:

Good to know before installing a typography plugin: Popular page builders like Divi or Elementor offer Google Fonts in each element of their respective builders. Most WordPress themes also use Google Fonts in the core to allow you to use fonts from their library.

Now that you know what to look for in a font, let’s see which are the top Google fonts of 2023!

The Best and Most Popular Google Fonts in 2023

In 2023, the 11 best and most popular Google Fonts for a WordPress site are the following:

1. Roboto 
2. Open Sans
3. Montserrat
4. Lato
5. Poppins
6. Roboto Condensed
7. Inter
8. Roboto Mono
9. Oswald
10. Noto Sans
11. Raleway

Hint: You can find that list directly from the Google Fonts website and sort the fonts by popularity:

Let’s go over the list of the best free Google fonts that are available to use on all your personal and commercial projects (copyright free). 

1. Roboto

Roboto has it both geometric but with some friendly open curves. 

• Example of websites using it: Roboto is the default font on Android and other Google services such as Google Play, YouTube, Google Maps, and Google Images. 
• Type of website or industry using it: Tech, web apps. 

2. Open Sans

A clear ultra-readable appearance and versatile font. 

• Example of websites using it: WordPress, Dolce and Gabbana, Ikea
• Type of website or industry using it: Versatile from tech to fashion

3. Montserrat

From Argentina, it was inspired by posters, signs, and painted windows.

• Example of websites using it: hustlerblueprint.com
• Type of website or industry using it: Elegant and stable, Montserrat is great for creating a simple and clean-looking web design

4. Lato 

A sans-serif font family started in the summer of 2010 in Poland. (“Lato” means “Summer” in Polish).

• Example of websites using it: Practical-ui.com 
• Type of website or industry using it: Very versatile, it’s a good font for websites because it’s readable and comes with different styles. It is also great for printing and can be used anywhere because of the geometric simplicity with a great large x-height (typefaces that incorporate large x-heights generally do so in an attempt to increase legibility and readability).

5. Poppins

Poppins’ geometric shapes keep the content readable in small format, while its curves look bold when displayed in headers, big screens, or mobile devices. 

• Example of websites using it: monday.com
• Type of website or industry using it: Perfect for web and UI designs that need style, clarity, and legibility.

6. Roboto Condensed

It is a member of the largest geometric sans-serif typeface family known as Roboto Font. “Condensed” means narrow and taller characters. 

• Example of websites using it: Nintendo Switch 
• Type of website or industry using it: The tall characters and the reduced space between them create a visual effect that can allow your website to stand out and be more memorable (perfect for a tagline or main title).

7. Inter

Another variable font family specially designed for computer screens because it features a tall x-height to aid in the readability of mixed-case and lower-case text.

• Example of websites using it: Jetpack
• Type of website or industry using it: Perfect for responsive design as it ensures your content is easily read on smaller devices.

8. Roboto Mono

Roboto Mono is a monospaced addition to the Roboto-type family. 

• Example of websites using it: Same font family as Google applications.
• Type of website or industry using it: Fonts are optimized for readability and responsive design. It’s also excellent for programming purposes. It’s a “nerdy” font. 

9. Oswald

A redesign of the classic style historically represented by the ‘Alternate Gothic’ sans serif typefaces.

• Example of websites using it: secupress.me
• Type of website or industry using it: Because it is elongated, it always brings contrast to a typography combination and makes it ideal for designing a logo.

10. Noto Sans

This is a clean, unornamented design with a neutral tone best suitable for online reading and one of the best fonts for pairing. 

• Example of websites using it: dimano.rs
• Type of website or industry using it: Perfect for product descriptions or short text.

11. Raleway

A thin and elegant font with a thin weight – the famous ‘W’ really makes it stand out.

• Example of websites using it: Storespark.co
• Type of website or industry using it: Perfect for headings, subheadings, or even text body with an elegant feeling.

Now that we’ve reviewed the best Google Fonts of 2023 let’s see how to optimize them so they don’t slow down your WordPress site. 

How to Optimize Google Fonts

The best way to optimize Google Fonts in WordPress is to use a powerful performance plugin like WP Rocket that applies the optimization best practices right upon activation. If you are tech-savvy, you can do it manually with the font-display attributes and some custom CSS. 

But before we dive into the optimization techniques, that’s the optimization journey we suggest you follow: 

1. Understand how Google Fonts are correlated with performance. 
2. Audit your WordPress site on PageSpeed Insights to see where your website stands regarding fonts and performance.
3. Optimize the fonts that need optimization manually or with WP Rocket.

Let’s go over the main steps for a complete font optimization process.

Step 1 – Why Optimizing Google Fonts is Important for Performance

Google Fonts are often large files with slow load times, impacting the perceived performance and the user experience. Your Core Web Vitals can be affected, meaning your ranking could also be impacted. Below, we explain the consequences of unoptimized fonts on performance.

1. Slower website – Unoptimized Google Fonts can have a negative impact on your website performance and your page loading speed. It may be less crucial than image optimization, but remember that each request your WordPress site makes means the user is waiting longer to see the page.
2. Largest Contentful Paint (LCP) – It calculates when the page’s main contents have finished loading. If your LCP is a string of text, you need to ensure that your font is downloaded and rendered as fast as possible.
3. First Contentful Paint (FCP) – It measures the perceived speed of a page because it marks the first point in the page load timeline where the user can see anything. So if a web font has not loaded, browsers typically delay text rendering, resulting in a bad FCP score. On the contrary, having a great FCP reassures the visitors that something is happening on the screen, and they’ll be more likely to wait.
4. Content Layout Shift (CLS) – It measures the visual stability of a page. Unoptimized web fonts can negatively impact the CLS score because the text string using the font and the surrounding content can shift while the web font loads.

Want to boost your Core Web Vitals and improve your WordPress site performance? Read our dedicated guide, where we give you 16 Tips to boost SEO and improve the Core Web Vitals.

Now that you know the impact of poorly optimized Google Fonts on performance and SEO, you should run your own audit using Lighthouse.

Step 2 – Google Fonts Diagnosis On PageSpeed Insights

Once you have installed the Google fonts, we recommend you run a performance audit on PageSpeed Insights. In the report, Lighthouse ensures you’re following web font optimization best practices. Generally, if the fonts are not optimized, those five warnings are likely to be triggered: 

• Preload key requests
• Preconnect to required origins
• Serve static assets with an efficient cache policy
• All text remains visible during webfont loads
• Eliminate render-blocking resources 

The five issues above have a direct impact on page speed, so you may want to fix them as soon as possible to avoid any drop in performance. 

Step 3 – WP Rocket Optimizes Google Fonts Automatically

Once you have selected the best Google Fonts for your web design project, you can use WP Rocket to ensure that your pages follow web font optimization best practices over time. 

The “Optimize Google Fonts” feature is automatically enabled upon WP Rocket installation. You have nothing to do!

WP Rocket implements caching and improves your Core Web Vitals score. It’s one of the best caching plugins for WordPress and will boost your speed and your Core Web Vitals in a few clicks only. It can also be your best ally to optimize Google Fonts and fix the fonts-related issues on PageSpeed Insights:

Curious about what’s happening behind the scenes? WP Rocket applies the following best practices to optimize the requests from your Google Fonts: 

1. One single HTTP request for multiple fonts. WP Rocket combines the multiple requests to Google Fonts on the page into a single one. 
2. Adds the “display=swap” parameter to the request. This solves the “ensure text remains visible during webfont load” warning from PageSpeed Insights.
3. Preloads and loads the Google Font file asynchronously. This is done without render-blocking, so it also fixes the “Eliminate render-blocking resources” warning.  
4. Adds the “preconnect” resource hint to the request. It aims at improving the load time of the Google Fonts, boosting performance and the Core Web Vitals. 

Going Further: A Few Other Plugins That Optimize Google Fonts 

Some other tools are also available to optimize Google Fonts, such as:

• OMGF – It reduces DNS lookups thanks to caching and reduces the Cumulative Layout Shift score. You can choose to preload or unload fonts that are not used on your website. 
• Google Fonts Typography – It allows you to load any Google Fonts to your WordPress site. It also offers some preconnect Resource Hints.

Wrapping Up

You can manually browse more than 1400 fonts, or you can save some precious time and use our guide to select the best Google Fonts for your next project! Remember that your font must be aligned with your brand’s personality: serif fonts are popular with brands that want to portray an elegant and sophisticated image. On the contrary, if you want to convey an image that is more modern and edgy, a sans serif is your go-to.

The golden rule is not to use too many fonts and to optimize them as much as possible. If you serve unoptimized fonts, there will be a dual impact on performance and the user experience because of delayed text rendering and important layout shifts. 

Use WP Rocket to ensure that your Core Web Vitals are healthy and that the Google Fonts chosen do not slow down your page. It is one the easiest and most reliable ways to optimize font and fix the PageSpeed Insights warnings. 

 Plus, you don’t take any risks with the 30-day money-back guarantee. 

The post 11 Best Free Google Fonts for Websites (2023) appeared first on WP Rocket.

Do you want to know how to clear your plugin cache on WordPress? Caching allows your website to load faster and enhances the overall user experience. This article explains what WordPress caching is, why you should clear your plugin cache and how to do it quickly.

Why Caching is Essential for Your Site

Caching on WordPress means creating a static copy of your content and providing that content to your visitors faster than loading all the queries from scratch. The goal is to store the data in a cache to get fewer roundtrips to and from the database. 

If you are unfamiliar with caching, we encourage you to read our guide about WordPress page caching explained in plain English.

There are three good reasons why you should use caching for your WordPress site:

#1 – Improve the page loading speed by unloading the server

#2 – Boost the user experience by optimizing the Core Web Vitals

#3 – Rank higher on Google

Hint: Do you want to improve your speed and rank better on Google? A cache plugin is the easiest to implement caching on your website!

What’s WordPress Object Caching

WordPress has a built-in object cache (the WP_Object_Cache class) that stores any content from the database in the PHP memory. It’s a type of server-side caching, meaning the cache is stored on the server, not on the user’s browser. As a result, it prevents repeated and unnecessary calls to the database. 

To summarize how caching works on WordPress, you can look at our figure below, which shows how caching is correlated with performance.

• Page caching makes your website load faster as it significantly shortens the path from the user to the content.
• Object cache is the WordPress default cache that helps the content loading faster, but the user-content roundtrip is slightly longer than page caching.
• Without caching (the database column), the content would take even longer to be displayed on the user’s screen because it’s coming from the database. There is no cache “shortcut”.

Learn more about the different types of caching by reading our dedicated guide.

Now that we have gone over the concept of WordPress caching, we will explain why it’s crucial to clear your cache every so often. 

Why You Should Clear Your Plugin Cache

Clearing your plugin cache is essential to serve up-to-date content to visitors and for debugging purposes. 

There are three popular situations when clearing your plugin cache is recommended:

1. When you’ve updated your website’s content and want to push this fresh content to visitors. For example, If you have designed and uploaded a new promotion banner, you want all your clients to be able to see it instead of serving outdated content. 
2. When you need to troubleshoot one of the WordPress errors.  Clearing your cache is always a good start when debugging a WordPress-related issue such as error 403. 
3. When you are experiencing performance issues. Sometimes, your cache may store outdated content and files that trigger issues and prevent you from loading a page or accessing your WordPress admin. Clearing your cache may solve this type of issue.

How to Clear Your WordPress Plugin Cache 

Clearing your WordPress cache can be easily done with WP Rocket, one of the best caching plugins on the market. The powerful extension gives an extra speed boost to your WordPress site. The main features are: caching, delaying and deferring JS, removing unused CSS, and even lazy loading your images.

Clearing your cache using WP Rocket can be done directly from the WordPress dashboard. Simply go to: 

Settings > WP Rocket > Dashboard > Quick Actions and press the Clear and preload cache button. 

The WP Rocket plugin is easy to install and will cache your WordPress content as static files. These files – that contain media, texts, and code –  are directly served to users, reducing the load on the server and improving performance. 

Clearing Cache on a Multilingual WordPress Site Using WP Rocket

WP Rocket allows you to clear the cache for a specific language, which is very handy when building a multilingual WordPress site. WP Rocket will detect your language configuration file and cache/purge/preload the content for a specific language (or all of them simultaneously).

Finally, with WP Rocket, you can also set your cache lifespan: files older than the specified duration will be automatically deleted. 

If WP Rocket detects some activities on your WordPress site that may affect the front end, then one of the solutions offered is to clear the cache in one click:

Other WordPress caching plugins allow you to clear the cache, such as WP Super Cache, W3 Total Cache, and WP Fastest Cache. You only need to find the button about “Empty/Delete cache”.

Looking for the right tool? Read our article listing all the best caching plugins for WordPress.

Wrapping Up

Using a WordPress cache plugin is crucial for performance, but don’t forget to clear the cache from time to time. This will avoid serving outdated content to users, which might be a great start when debugging an issue. 

With WP Rocket, you can combine caching, GZIP file compression, JS, and CSS optimization to reduce your page load time and significantly boost the performance of your website. Try WP Rocket today and provide your visitors with a better user experience! No risks are taken thanks to the 30-day money-back guarantee.

The post How to Clear Your Plugin Cache in WordPress appeared first on WP Rocket.

Do you want to know how to clear your browser cache and why it’s important? Hint: If you have encountered an issue with your WordPress site, one of the easy solutions may be to clear your cache! In this guide, you’ll learn more about browser caching and how to clear each browser’s cache (and cookies). 

Let’s dive in!

What’s Browser Cache?

A browser cache stores files and resources downloaded directly from a website, such as media assets, text, and coding files (HTML, CSS, and JavaScript). Built into your web browser, the cache is a database that “memorizes” web content. 

Why Browser Cache Is Important

Browser cache allows content to be served faster to users that have already visited your website. It saves users time and reduces page loading time and web server bandwidth.

This is crucial for performance and the user experience because cached content loads faster than regular content: your browser doesn’t have to load everything from scratch.

For example, the server could tell the browser to store the payment method images and not download them when a user returns: 

Those images are unlikely to change daily so you could cache them for at least a week.  

Browser cache is only a part of caching. You can learn more about the different types of caching by reading our in-depth guide.

Using WP Rocket to Enable Browser Cache

To enable browser caching, you can use WP Rocket – one of the best caching plugins for WordPress. The plugin requests the browser to save the frequently used (but rarely updated) files in its local cache memory, resulting in a faster experience for visitors. 

All you need to do is to install and activate the plugin. WP Rocket will do the heavy lifting and smartly set expiration lengths on the less updated files. 

You can read more on WordPress page caching by reading our easy-to-follow guide.

You’ve learned the meaning of browser caching and how to implement it, let’s explain why it’s important to clear your browser cache as a user. 

Why You Should Clear Your Browser Cache

It’s important to clear your browser cache to avoid seeing outdated content and to solve most of the common problems on the internet – for instance, “issue 403”, nonce issues, and any development made in a local environment (if you don’t clear your cache, you may not see the updated content when you push it from the development environment to production).

We can take the example of a new banner you added but can’t see this change on the front end yet. That’s because your browser is still showing the cached version of the page with the old banner. By clearing your cache, you’ll finally see it when refreshing the page. 

Remember that a browser stores the cached content for a limited time or until it’s full. After that, the cache is cleared, and the browser will serve the updated content on the next visit.

Clearing the browser cache won’t always fix the issue, but it’s a good starting point for debugging.

You can also clear your cookies on a computer to protect your privacy and avoid third-party tracking.

The next section shows you how to delete cookies and clear your cache from the major browsers.

How to Clear Cache and Cookies on Your Browser

You can clear your browser cache and cookies manually on every major browser. To help you with this process, we have put together some easy tutorials for the most popular ones.

How to Clear Cache on Google Chrome

To clear the cache on Google Chrome, click the three dots icon in the top right corner of the browser window, then open the More Tools option and select Clear Browsing Data from the submenu. 

You can choose to clear the basic tab with the browsing history, cookies, cached images, and files by clicking on the Clear data button.

If you want to go further, you can open the Advanced tab and check the boxes of your choice. Note that if you decide to clear the cache of the Passwords and other sign-in data categories, then you will lose all your saved password for each website you have an account for. That may hurt your user experience for future purchases and connections.

When clearing your cache, you can also decide if you want to clear what happened in the last hour, 24 hours, 7 days, 4 weeks, and All time. If you want to clear everything since the beginning of your browsing history, click on “All time”. 

To clear cookies and other site data, you can go to Google Chrome Settings > Privacy and Security > Cookies and other site data:

In this section, you can define your preferred settings for cookies. You can decide to allow them on some websites only. It’s a customizable experience. 

Pro Tip: I use the Chrome extension called “Clear Cache” which allows you to conveniently clear your cache in one click.

How to Clear Cache on Safari

To clear the browser cache (including cookies and web data) on Safari is pretty straightforward. Simply go to Safari > Clear History.

Then you can decide for which amount of time you want to clear your history, by selecting your preferred option from the drop-down menu. When you have chosen the duration, click on the Clear History button.

If you follow those steps, you’ll delete all the history and cookies from your browser. If you need more customizations with your settings, navigate to 

Safari > Preferences

From the General tab, you can choose the time length of your history items:

Then go to the Privacy tab and select how you want to manage the cookies and website data: 

Pro Tip: to easily empty the caches, go to Develop > Empty Caches.

How to Clear Cache on Firefox

To clear the browser cache on Mozilla Firefox, click on the Hamburger icon in the top right corner of the window, and select History > Clear recent history.

You can select the elements you want to clear and indicate your preferred time range:

You also have a dedicated Privacy & Security tab accessible from the following address in the search bar:

 about:preferences#privacy

In that section, you can decide which cookies and data you want to clear. 

Pro Tip: I use the Clear Cache Firefox extension to clear the browser cache in a few seconds.

To download an add-on for browser caching, go to the add-ons window and search for the extension of your choice:

How to Clear Cache on Opera

To clear the browser cache on Opera, click on the History icon (that looks like a clock) on the lower left side menu and press the Clear Browsing Data button.

You have both a basic and advanced tab that allows you to select the content you want to clear the cache for, including cookies. Make up your selection and click on the Clear data button.

Opera also has a dedicated section for choosing which cookies to delete or block, accessible from the easy setup button > Privacy & security > Cookies and other site data.

How to Clear Cache on Microsoft Edge

To clear the browser cache on Microsoft Edge, click on the three dots in the top right of your browser window and select History > Clear Browsing Data:

Select the time range and check the boxes of the content you want to clear the cache from, including the cookies:

If you are looking to do more advanced caching navigate to the three dots icon > Settings > Privacy, Search and Services and then press the Choose What to Clear button:

Regarding the cookies, Microsoft Edge has a dedicated Cookies and Site Permissions panel that allows you to allow or forbid sites to save the cookies data.

How to Clear Cache on Internet Explorer

Internet Explorer is now discontinued so we don’t encourage you to use it for your research on the web. Since 2022, Microsoft has been encouraging their customers to move to Microsoft Edge, which is safer and provides support for modern websites and apps. 

How to Clear Browser Cache on Mobile

To clear the browser cache on iPhone and Android, simply open your browser’s settings by default and navigate to the history and website data. The process is similar for every major web browser, but there is a little difference between iOS and Android. Let’s look at how to clear the cache for those two operating systems. 

Clearing Browser Cache on iOS 

To clear the browser cache on iOS go to your iPhone Settings and scroll down to the app. We are taking Safari as our example.

Then, tap Clear History and Website Data and confirm. This will remove history, cookies, and other browsing data. 

Clearing Browser Cache Android

To clear the browser cache on Android, launch your browser app and open the three dots icon on the top right of the screen. We are taking Firefox as our example.

Then, navigate to the Settings submenu:

Tap the Delete browsing data option:

Finally, tick the boxes of your choice and press the Delete browsing data button:

Wrapping Up 

It’s important to clear the cache of your browser but make sure you find the right balance between privacy and user experience. Having your sign-in and password saved in Google Chrome can be very handy to accelerate your online shopping experience.

A browser cache takes content such as text and images from the websites you visit and saves them in a database for your next visit. As a result, browser caching improves your page load times and enhances the user experience. 

If you want to implement browser caching and speed up your site, try WP Rocket! You don’t take any risks with the 30-day money-back guarantee. And the best part is: you just need to install the plugin as no extra configuration steps are required to set up the cache. 

The post How To Clear Browser Cache and Cookies on Major Browsers (and Mobile) appeared first on WP Rocket.

In case you might be questioning yourself:

“I want to cache my WordPress site. What type of caching should I use for it?”

The answer involves many options, depending on the nature of your website and what you want to achieve from it.

There are several types of caching, each of which is different from the others and useful in different circumstances. So it’s essential to comprehend the kinds of data they store and the levels of control they provide you.

In this article, we’ll discuss different types of web cache in detail, how they work, and their differences.

Then we’ll look at various types of content that can be cached and how you can cache your WordPress site in the most efficient way possible! 

What Are The Caching Types?

There are two types of caching options you can go with:

1. Server-side Caching
2. Client-side Caching

Although both of them cache your website differently but has one similar goal:

Making your website load blazing fast without loading the entire site files again.

Let’s take a closer look at both of them. 

What’s Server-Side Caching?

Server-side caching temporarily stores web files and data on the server for later use, effectively reducing the server’s load and latency.

Here’s how it works:

1. When the user visits a website and requests the web page, the website retrieves data from the server, generates that webpage, and displays it to the user.

2. After the response has been sent back to the user, the server creates a copy of the webpage and stores it as a cache.

The result? 

The next time a user revisits the website, instead of going through the whole process again, it displays the already saved (or cached) copy of the webpage – thus making the website load faster!

What’s Client-Side Caching?

Client-side caching, often called browser caching, temporarily stores the copy of a webpage in the browser’s memory (a folder created by the browser). 

So, the next time a user revisits a website with client-side caching enabled, it won’t make a call to the server for the data. Instead, it will fetch it from the browser cache folder located on the user’s device.

Server-Side Caching vs. Client-Side Caching

The type of caching you choose significantly improves the overall user experience and usability of your WordPress site. So it’s always better to understand which type goes well with your website beforehand.

Let us help you figure that out with an example:

Suppose you run an online retail site.

Because of the nature of the business, the type of content on your website is dynamic (i.e., users see recommended products, emails about abandoned carts, or ads for similar/relevant products).

Due to this, users access your website smoothly whenever there’s a new update. 

If your website takes longer to load, it will urge the users to move on to another site even before the content fully loads. Hence, resulting in increased bounce rates and, most importantly, a negative first impression on a visitor landing on your website.

Now, consider the above example:

• If you use server-side caching:

When the user requests a web page, the website retrieves data from the server. But before that, it checks if a copy of that web page is cached. If it’s cached, it serves the cached copy of the webpage.

There are three main scenarios:

1. If your website’s content is static, it does require any accommodation.

2. If the content is dynamic within a time frame (short-lived content), it requires cache renewal after a certain amount of time or “ajaxifying” the dynamic content.

3. On the other hand, if your website’s content is dynamic with a short time frame and is user-specific (logged-in experience, for example), it requires bypassing the cache.

By default, and if the webpage is cached, it will be served from the cache as long as there is no instruction to bypass it (i.e., adding items to the cart in some specific cases).

But there’s one problem.

It displays the cached version as if the content on the website is static!

Due to this reason:

Server-side caching is the best choice for websites with static content and short-lived cache, as it significantly reduces the number of operations on the server – without having it reconstruct the entire content per user request. On the other hand, a highly dynamic server cache is still possible using advanced technologies like Edge Side Includes (ESI) or Ajax (Asynchronous JavaScript and XML).

• Let’s try it out with client-side caching:

When you use client-side caching, the website’s copy is stored in the browser’s cache. So when the user requests a web page, it displays the cached version stored in the browser instead of requesting it from the server.

For this example, since your website has dynamic features, your preferred method will be using JavaScript (JS). It operates on the browser’s side, so you can rely on it by running the scripts within the browser to handle the dynamic needs of your website in real time.

Due to this reason:

For dynamic websites, client-side caching solves both latency and server cache problems by reducing the server load.

Now, if we categorize it further, some of the types of web cache include:

• Site (Page) Cache
• Server Cache
• Proxy Cache
• Browser Cache

However, there’s also a different type of caching unrelated to the other four types mentioned above, known as Object Cache.

Object Cache is a process that stores database query results so that they can be accessed easily the next time a user requests it. The cached object will be served instantly from the cache without needing to query the database repeatedly.

If you want to learn more about Object Cache, check out What is Object Caching and How to Use It With WordPress.

What is Site (Page) Cache?

Site cache, also known as HTTP or page cache, temporarily stores the content on your website the first time you visit it. 

So the next time you visit that website, it fetches the stored data from the site cache to display static web content faster than it would with a new request.

In addition to that:

All the data is stored in the server’s hard disk or memory (RAM), and you, as a website owner, can determine how much time a file stays in the site cache. 

If elements of your website are static, you can set a file’s expiry date for longer. However, dynamic elements of a website have much shorter expiry dates. These brief expiry dates tell the website when to refresh the files stored in your device’s site cache.

What is Browser Cache?

Browser cache stores cached versions of the specific web pages a user browses. It is built into your web browser – enabling the website to load faster in order to provide you with a better user experience.

Browser caches work by temporarily saving copies of a website’s files, such as:

• HTML pages
• Multimedia content and images
• CSS stylesheets
• JavaScript scripts

When the user revisits your website, their browser will fetch the cached files and use them to assemble your website’s content to create a smooth browsing experience. Cached content loads faster because your browser doesn’t have to load everything from scratch to display them.

Usually, a browser stores its cache for a limited time or until it is full. After that, it automatically clears out the cache and displays the updated website’s content on the next visit.

The silver lining is:

You can also delete your browser cache by manually clearing your browsing data if it takes up too much space – and that’s one of the key features of this type of cache!

In Google Chrome, you can do this by clicking:

Settings > Privacy and security > Clear browsing data

When you visit a website after clearing browser data, it will load everything from scratch.

What is Server Cache?

Server cache is also the type of web caching over which the end users don’t have any control and is fully administered by the server.

(Note: There are mainly four types of web servers – Apache, IIS, Nginx, and LiteSpeed.)

This type of cache is mainly used to reduce server loads.

When a user visits a website and requests a web page from the server, the server scans the cache and displays the stored content immediately. This helps decrease the processing time and return web pages faster, which is especially beneficial for websites with high traffic.

Server cache can be considered an umbrella term for many types of caches. The most common are:

• Object cache – stores database queries in a server-side cache for quick retrieval and prompter page loading without querying the database repeatedly.

• Opcode cache – store precompiled PHP code for speedier execution.

What is Proxy Cache?

Proxy cache stores content on the proxy server, allowing web services to share those resources with more users. The proxy server coordinates with the origin server to cache website data such as files, images, and web pages.

When a user opens a web page, the proxy checks whether it has a recent copy of that web page and its assets. 

If a copy exists, it immediately displays that web page or resource to the user. On the other hand, if the web page is old or missing, it fetches a new copy from the source, caches it to the proxy, and delivers it to the user.

Once a proxy updates a web page, it resets the webpage’s expiration date to prevent it from being labeled as outdated. The webpage will be delivered until a specific time passes, after which the proxy server will re-check the source.

Besides that, the proxy cache also has a type known as:

Content Delivery Network (CDN) cache – a cluster of servers located at different geographic locations. The server closest to the end user will return cached content to load content faster.

Site Cache vs. Browser Cache vs. Server Cache vs. Proxy Cache

Now that we know about each type of cache – let’s understand the differences between them:

Site Cache:

• Saves content like web pages, images, text, etc.
• Serves content much quicker after the first visit.
• Ideal for websites with static content.

Browser Cache:

• Stores limited data types like HTML pages, CSS stylesheets, JavaScript scripts, Images, and other multimedia files.
• Files are heavier and take time to load – thus, stored in the computer.
• Controlled by the user’s browser.
• Serves web pages directly without processing from the server.

Server Cache:

• Saves content, code, queries, and similar data on a server.
• Type of server-side caching.
• Controlled by the server.
• Administered by website owners without any input from end-users.
• Best for high-traffic websites that need to reduce server strain.

Proxy Cache:

• Allows web services to share resources with multiple users
• Saves bandwidth and decreases the loading time
• It might help in more complex scenarios, such as handling dynamic or frequently-updated resources (but only when using geotargeted content where the country/region-specific content is stored separately).

What Content Can Be Cached?

There are various types of content that website owners frequently cache. However, some can be cached, but many site owners do not cache them as it seems “risky”. And lastly, there are some which should not be cached at all.

Let’s look into all of them.

Files that can be cached but rarely cached include:

• Pages with dynamic content
• Ajax/REST requests if their cache is purged
• Other code that needs to change less frequently

Files that are frequently cached and should be cached include:

Pages with static content or types of content that remain the same for all users and don’t often change, such as

• Static images
• Logos and assets
• CSS stylesheets
• Downloadable files or other content

Files that should not be cached include:

• Dynamic content, or in simpler terms, personalized data using conditions to be displayed
• Any sensitive data (such as credit card information)

Caching with WP Rocket

WP Rocket is the most beginner-friendly and easiest plugin to quickly improve your WordPress website’s speed and performance! 

Here’s how it works:

It caches your web pages by creating static HTML files and making them readily available for future visits. In addition, it applies browser caching, requesting the browser to save the frequently used but rarely updated files in its local cache memory.

One of the things which makes it the best caching plugin for WordPress is that when you install WP Rocket on your WordPress site and activate it, it automatically applies 80% of web performance best practices right away! 

Furthermore:

WP Rocket can be set to bypass or store dynamic cache depending on query strings and cookies.

Also, it has a system to help refresh the cache in any timeframe requests to help serve a fresh version of the website.

Page caching, browser caching, and GZIP compression are some of the default features that WP Rocket enables for you. But if you don’t settle for the standard settings, WP Rocket also includes advanced features such as:

• Minify CSS and JavaScript files – removes whitespaces and comments to reduce the file size.
• Remove Unused CSS – eliminates render-blocking CSS on your site for faster load time. You can either load CSS asynchronously or remove unused CSS files (the preferred method).
• Load JavaScript deferred – eliminates render-blocking JavaScript to improve load time.
• Delay JavaScript execution – improves performance by delaying loading JavaScript files until the user interacts with the website, i.e., via scroll or click.
• Optimize Google Fonts – combines, preloads, and loads the Google Font file asynchronously (i.e., without render blocking).

With all these features, you can get a blazing-fast website in the blink of an eye, which eventually results in:

Great first impressions, better SEO ranking, & more conversions!

Most importantly, it helps improve the PageSpeed Performance Score and metrics, including the Core Web Vitals grades.

P.S: To set up caching in WP Rocket, go to:

Settings > WP Rocket page > and click on the ‘Cache’ tab. 

WP Rocket already enables page caching by default, but you can tweak additional cache settings from this page. 

Wrapping up

The boost in the performance of your website after implementing caching is simply irresistible. If done right, it can unlock a whole new level of user experience, search engine rankings, and revenue by optimizing your WordPress site for performance. 

However, with so many caching options available, it seems scary to understand which one suits your website well.

But now, as you’re well aware of all the types of caching out there and how they work – it’s time to get cached up! (no pun intended)

The post Server Cache vs. Browser Cache vs. Site Cache: What’s the Difference? appeared first on WP Rocket.