Tag: performance

People who visit your website don’t want to wait a long time to see your content. If you don’t optimize your code, render-blocking resources like CSS can contribute to visitors’ perception of slower load times.

Fortunately, you can easily generate critical CSS for your website. By installing a plugin like Jetpack Boost, you’ll be able to extract all the necessary CSS for displaying above-the-fold content. This can be key to making your website appear faster and more user-friendly. 

In this post, we’ll explain critical CSS and why you should consider generating it for your website. Then, we’ll show you two different ways to do this in WordPress. 

What is critical CSS in WordPress?

Once a visitor clicks on a link to your website, their browser has to process a series of tasks to render the content fully. All the steps involved in downloading, processing, and converting the code into pixels make up the Critical Rendering Path.

The browser reads the site’s HTML, CSS, and JavaScript code from top to bottom during this loading process. Since it won’t automatically know which resources are most important in rendering the page, the browser could get stuck processing unnecessary code. 

If a certain CSS file stops your website from rendering, it becomes a render-blocking resource. Even if it isn’t necessary for displaying the page, visitors won’t see the content until this render-blocking CSS is fully processed.

Critical CSS refers to the required CSS code for the above-the-fold web content. Essentially, it’s the bare minimum code the browser needs to display the first section of content to visitors. 

The benefits of generating critical CSS

Generating critical CSS for your web pages involves eliminating any render-blocking CSS and enabling the browser to only process what’s necessary.

1. Optimize content delivery

When you optimize CSS delivery for your WordPress website, it can improve the rendering process. To a front-end visitor, it might even seem like your pages are loading more quickly.

When someone lands on your website, the first thing they’ll see is the above-the-fold content. This is everything displayed on the front page without needing to scroll.

By extracting critical CSS, you’re optimizing the CSS files needed to display this initial section. Without it, users may see partial elements that haven’t been fully rendered. 

A common misconception is that critical CSS decreases your loading time. Although this isn’t true, the optimization technique can improve perceived performance. 

Essentially, users will think your pages are loading faster because the browser can simply display above-the-fold elements more efficiently. 

By generating WordPress critical CSS, visitors will have a better User Experience (UX) on your site. As a result, you can reduce bounce rates and encourage return visits. 

2. Improve Core Web Vitals

Although WordPress critical CSS doesn’t increase or decrease page loading time, it can improve your Core Web Vitals. These metrics analyze a website’s user experience. 

Here are the Core Web Vitals:

• Largest Contentful Paint (LCP): A website’s loading performance
• First Input Delay (FID): A website’s interactivity
• Cumulative Layout Shift (CLS): A website’s visual stability

After you scan your website for a Core Web Vitals report, you may see additional metrics like First Contentful Paint (FCP) or Time to First Byte (TTFB). These impact LCP and play an important role in the loading process.

Critical CSS directly impacts FCP. Put simply, FCP measures the time it takes to render the first element on a web page after it starts loading. If your site has a poor FCP score, visitors will often see a blank page for a while.

As a WordPress website owner, you should aim to get FCP under 1.8 seconds, but many elements can negatively impact this score, including:

• Render-blocking JavaScript and CSS
• A slow server
• Bulky font files
• Large Document Object Model (DOM) size

Since render-blocking CSS contributes to FCP, generating critical CSS can improve this score. During this process, you’ll inline all the CSS needed to render above-the-fold content. 

How to test your website for render-blocking CSS

Before generating WordPress critical CSS, you’ll need to know whether it’s necessary for your website. Since large CSS files are considered render-blocking resources, you can scan for them with a speed optimization tool.

To get started, enter your website’s URL into PageSpeed Insights. This Google software will analyze your site’s performance with various speed audits.

At the top of the page, you’ll see your Core Web Vitals assessment. It includes metrics for Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint, and Time to First Byte.

As you learned earlier, render-blocking CSS is closely tied to the FCP score. Make sure both your mobile and desktop assessment results are 1.8 seconds or less.

If you receive a poor score, you may have bulky, unoptimized CSS files on your website. To verify if this is true, scroll down to Opportunities. This section provides specific suggestions to improve your website’s loading time.

Here, you may notice an alert telling you to Eliminate render-blocking resources. Although this message could refer to a JavaScript file, it might also signal that you need to generate critical CSS.  

How to generate critical CSS in WordPress

Now that you understand more about WordPress critical CSS and why it’s important, it’s time to generate it! Regardless of your skill level, you can easily learn how to optimize CSS delivery in WordPress by following our beginner-friendly tutorial. 

Method 1: Generate critical CSS with a plugin

Although you could generate it yourself, optimizing CSS delivery with a WordPress plugin is often easier. The right tool can automatically defer less important CSS. Plus, you won’t have to edit any code manually.

Jetpack Boost can quickly improve your site’s loading performance. After a simple setup process, you can use this plugin to generate critical CSS, defer non-essential JavaScript, and more.

To start using Jetpack Boost, install and activate it in WordPress. Then, you’ll receive a score based on your website’s current performance.

With the free plugin, you’ll see an option to Optimize CSS loading. Alternatively, you can upgrade to a paid subscription to generate critical CSS automatically. This will help avoid having to regenerate CSS every time you make a change.

To enable critical CSS, simply use the switch on the left-hand side. Similarly, you can defer non-essential JavaScript and turn on lazy loading for images. Combined, these settings can significantly reduce page loading time and allow visitors to see your content earlier. 

Method 2: Manually generate critical CSS

If you don’t want to use a plugin, you can also manually generate critical CSS. It’s important to remember that this method involves editing your site’s code, so it can be a more complicated process for beginners. 

Step 1: Back up your website

To get started, you’ll want to create a backup of your WordPress site. If you make a mistake in your site files, you can easily revert to this saved version. This way, you won’t lose any important data.

If you need to manage your backups easily, you can install the Jetpack VaultPress Backup plugin. This tool stores backups off-site and provides one-click restorations, even if your site is completely down.

Here’s how to get started:

Go to Plugins → Add new in your WordPress dashboard. Search for “Jetpack VaultPress Backup” and click Install now → Activate. 

Then, you’ll see a new window that will allow you to set up the plugin. Click Set up Jetpack. 

Then, connect your site to your WordPress.com account. Once you’re redirected back to your site, click Upgrade now to view several options for Jetpack VaultPress Backup plans. 

At a minimum, you’ll need the Backup plan, but Security and Complete provide additional tools for protecting, growing, and speeding up your site.

Your first backup will start automatically, and you can check its progress by going to Jetpack → Backup in your WordPress dashboard. 

If any mistakes happen during the next few steps, simply come back to this page and hit Restore to this point. This will revert your site to the older version, eliminating any errors that occurred. 

Step 2: Use a critical CSS generator

Once you know that your website is backed up, you can start generating your critical CSS. One of the easiest ways to do this is with a critical CSS generator. This tool will automatically produce your critical CSS, preventing you from having to manually create code.

First, open the CoreWebVitals Critical CSS Generator. Enter the URL for your website or a specific page you want to optimize. Then, hit Generate critical CSS.

Once it’s finished loading, you’ll see the CSS code generated in the text box. Copy this code.

After you save this code, you can inline it on your website!

Step 3: Inline critical CSS

When someone visits your website, their browser will retrieve your site’s files from the server. It will first check the <head> section for necessary content during the parsing process. Then, it’ll continue rendering the <body> content.

To prioritize critical CSS, place it in your files’ <head> section. This is called inlining. When you inline CSS, the browser requests that this stylesheet is retrieved before rendering the rest of the page.

Essentially, inlining CSS will place the code where it needs to be used. So, a visitor’s browser won’t have to parse render-blocking files before displaying the target content. 

Once you’ve copied the generated critical CSS, you can inline it in your files. Navigate to your public_html folder via FTP. Then, go to wp-content → themes → your active theme and open the header.php file. 

In this header file, locate the <title> tag. Beneath it, add the critical CSS using <style> tags. Finally, select Update File.

Frequently asked questions (FAQs)

So far, we’ve discussed critical CSS and how to generate it. If you still have questions about inlining CSS on your website, we’ll answer them here!

Can generating critical CSS break your site’s appearance?

If done incorrectly, generating critical CSS could negatively impact your site’s appearance and layout. Fortunately, you can reverse any changes by simply restoring a saved backup of your WordPress site. Using Jetpack VaultPress Backup, you can view an activity log and restore old versions of your site with one click.

Plus, you can use a plugin like Jetpack Boost to turn critical CSS on and off whenever necessary. These simple settings were built according to WordPress best practices, so they’re less likely to affect your site on the front end.  

What else can I do to optimize my CSS code?

If you want to further optimize CSS on your site, consider minifying it. You’ll remove unnecessary code during CSS minification to reduce the CSS file sizes. 

Your CSS code likely has spaces and line breaks to make it easier to read. Since a browser can process code without these extra elements, you can delete them. This reduces the resources and time needed to run the files. 

You can also remove unused CSS altogether. By reducing your files to only the necessary code, your website will start loading faster. 

What else can I do to improve my page speed?

One of the best ways to speed up your site is by improving your Core Web Vitals. Using a tool like PageSpeed Insights, you can identify unoptimized elements like render-blocking resources. 

Since browsers load your site’s code from top to bottom, the loading process can easily be interrupted by JavaScript. By deferring JavaScript parsing, visitors won’t have to wait for scripts to load before they see your content.

Additionally, consider implementing lazy loading for images. With this setting in Jetpack Boost, pictures below the fold won’t load until visitors scroll down. This can prevent your website from loading every image simultaneously, delaying the rendering process.

Lastly, a Content Delivery Network (CDN) can significantly speed up your website. Instead of relying on one server, a CDN uses a system of data centers worldwide. An option like Jetpack’s CDN can improve content delivery for images and static files.   

Optimize CSS delivery in WordPress

If you’re trying to improve your website’s content delivery, it’s important to eliminate any render-blocking resources. Since unoptimized CSS can delay the rendering process, it’s worth generating critical CSS. Although doing this won’t directly improve loading time, it will enable visitors to see above-the-fold content much faster. 

To review, here’s how to generate critical CSS in WordPress:

1. Generate critical CSS with a plugin like Jetpack Boost.
2. Use a Critical CSS Generator.

With Jetpack Boost, you can optimize CSS without editing any code. After downloading and activating the plugin, you’ll be able to generate critical CSS with just one click!

There are many reasons you may want to upload a video in WordPress. Whether you’re a professional videographer or a food blogger with an amateur cooking show, you’ll need a simple way to post audiovisual content on your site. 

There are a couple of different ways you can add a video to a WordPress page or post. You could embed one from a video hosting service like Jetpack VideoPress or upload and add it directly from your site’s hosting server. Each method has its pros and cons, which we’ll cover in more detail in our tutorial. 

In this post, we’ll go over the various ways you can upload a video to your WordPress Media Library. Then we’ll walk you through adding a video to a post or page. Finally, we’ll discuss some frequently asked questions related to videos on WordPress. 

Adding videos to WordPress: The basics

Before you learn how to add videos to WordPress, it’s helpful to have a basic understanding of what that process means. First off, there’s an important distinction between ‘uploading’ and ‘embedding’ a video into your WordPress site.

When you add a video directly to WordPress, the video file will be stored on your host’s server. This is called uploading.

When you add a video to a post or page in WordPress using a third-party site like YouTube or a video hosting platform like Jetpack VideoPress, this is called embedding.

As you can see in the example above, when you embed a video, you’ll likely get advanced player features. These will be unique to each platform. Sometimes, they’ll include built-in social sharing options to enhance audience engagement.

Additionally, when you use a third-party host, the video doesn’t actually ‘live’ on your website’s server. Therefore, it won’t have a significant impact on your page loading times. 

Why should I add a video to WordPress?

Before we continue, it’s worth discussing some of the many benefits of learning how to upload videos to WordPress. For starters, visual media is on the rise in nearly every virtual space, from ecommerce to social media. As a result, online users have come to expect more video content.

No matter what type of site you run, videos can help engage your audience and keep them on your site longer. Often, videos are useful to explain complicated concepts or humanize a company or subject. Using videos can also help you meet a wide array of audience preferences and learning styles.

Tons of creative websites incorporate high-quality video content into their posts and pages. From product videos and promotional content to independent films and lifestyle reels, there are video opportunities for any type of site.

Can uploading a video slow down your WordPress site?

When you upload a video directly to your Media Library, it’s saved on the back end of your site and, thus, takes up space on your server. And video files aren’t usually small — adding even just the occasional video can weigh things down and negatively impact performance. 

This means slower loading times and worse Core Web Vitals scores. This could not only cause your search engine rankings to suffer, but result in frustration for both new and regular site visitors. In other words, if performance tanks as a result of adding a bunch of videos, it could counteract the benefits the videos were supposed to bring in the first place. 

Luckily, you can avoid all of these adverse effects by simply using a third-party video hosting provider to upload your videos. This way, the clips will use external server resources while still looking great on the front end.

In this tutorial, we’ll show you how to use various upload methods, so you can ultimately decide which approach is best for your needs.

How to upload a video to the WordPress Media Library

Now that you know the basics of adding videos to WordPress, we’re going to go over three methods of doing so.

Method 1: Using the video hosting plugin Jetpack VideoPress

With WordPress, the simplest way to upload a video is using a plugin. A video hosting plugin can function similarly to popular options like YouTube and Vimeo.

But, unlike the alternatives, Jetpack VideoPress is designed specifically for WordPress.

Using Jetpack VideoPress is highly straightforward because it fully integrates with your WordPress dashboard. It’s also affordable, offering your first video for free and a generous 50 percent discount for your first year.

Plus, you’ll never have to worry about advertisements interrupting your videos. You’ll even be able to apply your branding to your video player.

To get started, navigate to your WordPress dashboard. Go to Plugins → Add New. Use the search function to find the Jetpack VideoPress plugin.

After you’ve installed and activated Jetpack VideoPress, you should see the following screen:

If you like, you can sign up for the premium version of Jetpack VideoPress here. Otherwise, click on Start for free to explore the tool before making a decision.

After that, you’ll be prompted to connect Jetpack to your site. Click on Approve.

Keep in mind that you won’t need to complete this step if you’ve already connected your website to Jetpack for one of its other tools.

The connection process should take a few seconds. Then, you’ll be able to add your first video to WordPress.

On the above page, you can either select Add your first video or Select file to upload. Alternatively, simply drag and drop a video onto the page.

The video will now be added to your Jetpack VideoPress library and your WordPress Media Library. That’s it! Later on, we’ll show you how to insert this video into your posts and pages.

Method 2: Using your site’s hosting server (not recommended)

The next way to upload a video in WordPress is by using your site’s hosting server. This method is not recommended because it can slow down your website by consuming a substantial amount of precious server resources. Depending on your hosting provider, they may also have limits on the maximum file size you can upload.

It’s also not usually the best choice because your playback speed won’t be optimal, and the player will have limited features. In any case, knowing how to carry out this approach can still be useful for certain situations.

To begin, simply head to your WordPress dashboard. Go to Media → Add New. Then go ahead and drag your video file into the box or click on Select Files.

Once the video has finished uploading, your screen will update automatically. It should now have a banner below the Upload New Media section showing your video’s thumbnail.

To confirm that your video was uploaded correctly, navigate to Media → Library.

You should be able to see your video’s thumbnail in the upper left corner of the screen. 

At this point, you might notice that your video is mixed with all of your images and other media files. That’s because there isn’t a separation of videos and photos in the WordPress Media Library. 

Method 3: Using an external hosting server

The final way you can add a video to WordPress is by using an external hosting server like Amazon S3. While this platform offers the power and security needed for large sites, it’s a fairly complicated and expensive option. 

To use Amazon S3, you must set up and manage your own server — requiring a good degree of development experience or the help of a professional. Furthermore, AWS S3 isn’t natively designed to integrate with WordPress and doesn’t come with a video player feature.

For all these reasons, WordPress-specific video hosting options like Jetpack VideoPress often make more sense. They integrate seamlessly with the WordPress Media Library and are usually more affordable.

Learn more about Amazon S3 and video streaming here. 

How to add a video to a WordPress post or page (2 ways)

Now that you know how to upload a video to WordPress, we’ll show you how to insert one into a page or post. We’ll review two ways you can do this using the Block Editor so that you can easily share videos with your audience.

Method 1: Using the VideoPress block

Firstly, let’s see how you can easily use the VideoPress block to add a video to a WordPress page or post. 

Step 1: Add the VideoPress block

To begin, you’ll need to create the page or post where you’d like to insert your video. Alternatively, you can navigate to a pre-existing page or post and modify it. Once you’re in the Block Editor, simply click on the plus symbol to Add block.

Next, use the search tool to look for the VideoPress block.

When it appears, click on it, and the block will be added to your page.

Another handy way to add any block to a page or post is by using keyboard shortcuts. For instance, you can type in “/videopress” and access the block that way.

You can either select the block when it appears or simply hit the enter key to add it to the editing interface.

Step 2: Add your video and customize its settings

Once your VideoPress block is on the screen, add your video by selecting Upload, Media Library, or Insert from URL.

We’re going to go with the Media Library for our example since we already uploaded the video earlier in the tutorial. However, you can also drag and drop your video here to add it to VideoPress. Remember, your videos will be stored separately from your server to improve speed, but will still be visible in the WordPress Media Library.

Since the VideoPress block deals with videos, you’ll only see that type of media in your library. When you’ve located the clip you want to use, simply click on it and hit Select.

After that, your video will appear on your page. As you can see, the VideoPress block gives you access to a variety of settings. You can enable or disable playback controls, turn on and off autoplay, choose to loop the video, and mute it if you’d like.

You can also select the dropdown menu next to Progress Bar Colors to change the way that the video’s progress bar appears. There are some other options as well, so feel free to play around until you get the look and functionality that you’re going for.

Step 3: Publish and preview your video

When you’ve finished making your changes, click on Publish in the upper-right corner of your page. Now let’s preview what your video will look like on the front end.

In this example, we left the progress bar colors setting to Match video. This makes the progress bar blend in, while still remaining functional. 

Your viewers can make additional adjustments to video speed and quality. Plus, they’ll be able to change to full-screen viewing or create a pop-out window to watch while they scroll.

Method 2: Using the Video block

Now, let’s explore how to add a video to a post or page using the default Video block that comes with WordPress. Remember, this will store videos on your server and could cause your site to load more slowly.

To get started, open up the Block Editor and add the Video block. You can locate the block by clicking on the plus symbol or using keyboard shortcuts.

Then, choose your preferred method for adding a video to the block. Again, we’ll insert our clip from the Media Library by hitting Select. The video will now be added to the page.

You should notice that the Video block has some of the same settings as the VideoPress block, though it does provide fewer customization options.

Once you’ve modified your video block’s settings, click on Publish. Now let’s preview it on the front end:

As you can see, the progress bar and settings are a bit less discreet, and the video is showing at a lower quality.

Frequently asked questions

Hopefully, you’re now comfortable with the basics of uploading videos in WordPress. Just in case, though, we’ll cover some frequently asked questions!

Can self-hosting my video slow down my WordPress site?

When you upload large video files to your Media Library without using a tool like Jetpack VideoPress, they’ll occupy space on your website’s server. So, this video hosting option can slow down your website, hindering the overall user experience.

But this won’t be an issue if you use a video hosting tool like Jetpack VideoPress. This is because the heavy files will be hosted on a separate, more robust server.

What is the best option to upload a video to WordPress? 

Using Jetpack VideoPress is hands down the best option to upload a video to WordPress. 

The plugin provides the best experience for viewers because it can handle and maintain the highest-quality video content. Plus, with Jetpack VideoPress, you’ll never have to worry about ads interrupting your content. 

Additionally, Jetpack VideoPress is very practical for WordPress creators because it fully integrates with the dashboard and the Block Editor. Lastly, with Jetpack VideoPress, there’s minimal impact on site since your content is served using Jetpack’s global Content Delivery Network (CDN).

Can I use an uploaded video to build a video header?

Yes, there are a few ways to use an uploaded video as your WordPress header. You can create this effect using the Cover block or a video plugin. 

For complete instructions on how to do this, check out the complete tutorial on adding a video background to a WordPress page!

Where can I learn more about Jetpack VideoPress?

You can learn more about Jetpack VideoPress on the Jetpack website! Check out the complete list of Jetpack VideoPress features.

Streamline video uploads in WordPress using Jetpack VideoPress

Whether you’re an aspiring filmmaker, a talented blogger, or a business owner who understands the value of video, knowing how to add a video in WordPress is key. If you’re not careful, though, your clips can look unprofessional and even slow down your website.

Fortunately, you can use a video hosting service like Jetpack VideoPress to easily upload videos in WordPress. With Jetpack VideoPress, you can add clips to the Media Library without damaging your site’s performance. Then, you can use the Jetpack VideoPress block to insert your videos into any page or post, with plenty of customization options to improve the viewing experience.

Are you looking for additional ways to improve your website’s performance? Why not check out Jetpack Complete? This plan offers top-tier performance and security tools for WordPress sites. Plus, it includes Jetpack VideoPress at no additional charge!

Search engine optimization (SEO) is an ever-changing game without an instruction manual. There’s much more to optimization than just adding keywords into your content. Search engines like Google also take into account indicators of a quality, safe web experience — like how fast your site loads, how easy it is for visitors to interact with it, and more. 

Cumulative Layout Shift (CLS) is a metric used by Google to measure how much a web page rearranges as it loads. A site that moves significantly — causing users to click the wrong link or have trouble reading content — provides a bad user experience and is frowned upon by Google. 

Reviewing your site’s CLS score and other Core Web Vitals can help you identify ways to improve its overall health and, in turn, boost your rankings!

This article will explain the causes of CLS, why you should minimize it, and some methods to reduce it. 

What is cumulative layout shift?

Cumulative Layout Shift (CLS) measures the severity of movement on a web page as assets load. You’ve probably noticed that sometimes when you open a website, images and videos can appear at different times and push around other content as they load.

Here you can see CLS in action:

Bad CLS scores, especially paired with long load times, can be frustrating for visitors. Few things are more aggravating than accidentally clicking an ad because the page suddenly moved underneath your cursor. 

How does CLS impact user experience on a WordPress site?

Shifting can be annoying when navigating a web page. It can cause text to jump around as you’re trying to read, buttons to move as you go to click on them, and accidental clicks on ads or links when you want to interact with something else. 

If visitors have to wait several seconds for a page to fully load and fight with shifting elements, they might simply leave your site. This is especially true if all of your pages shift severely. Visitors are likely to bounce after a few misclicks or excessive wait times. 

What affects your CLS score?

A poor CLS score results from major site elements causing other parts of the page to shift as they load. The worst culprits tend to be photos, videos, and ads because these things often load more slowly than text and may have to adjust based on screen sizes. 

And while decreasing load times can improve your overall UX, this won’t actually reduce the amount of shifting, just mitigate the effects.

Here are four factors that can affect your CLS score:

1. Images and videos without size attributes

Without preset size attributes, visual content like images and videos will often load in smaller placeholders. This means that content around the placeholder will initially take up the ample available space afforded by the small placeholder. Then, when the image arrives, it takes up more space and shifts around neighboring elements. 

By setting size attributes, the placeholder takes up the same space as the element. So, it loads in the same area and doesn’t affect the placement of nearby content. 

In the following picture, you can see some early elements loading on the GameStop homepage:

The images load a few seconds later, pushing the Top Sellers heading down and out of sight. This is a prime example, with fast-loading text being moved around when slow-loading images populate without preset boundaries.

This scenario is precisely what you’ll want to avoid or minimize on your site. 

2. Ads and embeds without size attributes

If you sell or display ads on your website, they’re likely in image or video format. Like in the example above, if these ads load without size attributes, they probably hit the page later than other content and shift things around. 

This is especially true for some third-party services that choose advertisements for you. These ads may not always be the same size or fit in the same space. 

A small graphic might not be a problem. But if a large video ad loads slowly and takes up a lot of space, it could force other elements on your page to move dramatically. 

Optimizing ads and embedded content to load quickly can reduce the annoyance, though your CLS score will still suffer. Layout shifts that cause visitors to click on your site’s ads inadvertently may leave them feeling tricked and hurt their chances of returning. 

3. Custom fonts 

Custom fonts have to be hosted somewhere — like your web server, for example. You’re unlikely to see the Didot font offline (unless you find an old French book). This font offers a formal, elegant feel and is an excellent option for upscale restaurants or antique-related websites.

But since this font is being pulled from somewhere other than the browser, it needs to be downloaded each time a visitor accesses the site. This setup may prevent text from appearing until the font is downloaded. Then, the font can suddenly appear, likely jumbling up any assets already loaded on the page. 

Another option is to load all the text in a more basic font, like Serif. Then it will be replaced with Didot once it loads in the browser. Since the letters of different fonts don’t usually take up the same amount of space, the font change will shift the text around, pushing or pulling neighboring elements in the process.

These shifts will increase a CLS score, so it’s in your best interest to avoid them. Luckily, some workarounds allow you to still use custom fonts while solving load time delays. We’ll take a closer look at these methods later in the post. 

4. Dynamically-injected content

Dynamically-injected content is a web page element that can change based on certain factors. Often these factors depend on the user, allowing for a more personalized experience.

For example, an online store may suggest products based on a visitor’s history. A weather website might use the location data of a user’s device to display results for that area.

Dynamic content can increase conversions with a more relevant experience and product offers. Still, its reactionary nature can be resource-taxing and lead to layout shifts. 

As in the weather example above, different weather information, the name of the city, or even the language used will take up varying amounts of space on the page. A town with sunny skies and mild weather might be a much simpler entry than a city in the crosshairs of a coming hurricane. 

The result is that less content will load in the former example, and more will load in the latter, affecting how neighboring elements are shifted on screen. As with any dynamically-injected content that can vary in size or quantity, this will impact the CLS of the page. 

How to reduce Cumulative Layout Shift on WordPress

Now that you know the primary contributors to layout shifts on WordPress, you can work towards reducing their impact. 

As with any time you make fundamental changes to your website, it’s wise to create a backup and use a staging site to catch problems before they go live. 

Below, you’ll find solutions to reduce CLS and improve your site’s user experience.

1. Set dimensions for images and videos

When using images and videos alongside other elements on a page, consider assigning them width and height attributes. These settings will reserve the graphics’ required space and avoid shifting. 

Fortunately, setting dimensions is very easy in WordPress. Simply click on your embedded image and adjust the Image dimensions to the appropriate values:

You can also use aspect ratio boxes to allocate the space for visual elements with CSS before they load. These boxes will have the same effect as set dimensions, reducing layout shifts by pre-assigning the space for images and videos. 

2. Set dimensions for ads and embedded content

Like in the step above, you should consider creating space for ads and other embedded content that can cause page shifts. You can do this by setting dimensions for these elements or using CSS to allocate space.

When ads are populated by third parties, their dimensions can be challenging to predict. So, you can try to estimate an amount of space to set aside and box it out so other content won’t overlap as the ad loads. 

This setup may result in extra white space around smaller ads. Still, that’s usually better than large ads (that often take longer to load) dramatically moving other elements on your page.

3. Use fallback fonts to reduce layout shifts

Earlier, we discussed custom fonts and how they can cause shifting. One possible solution here is to use the ‘font-display’ attribute to match fallback fonts as closely as possible. 

Browsers load fallback fonts when the custom fonts defined on your site aren’t immediately available. So, while your custom font loads, it will display the fallback fonts that you set. If you match these as closely as you can, the text won’t shift as much when the custom option does load.

The Font Style Matcher app can be very helpful here. You can select your custom font and fallback font, then preview them on top of one another and make style adjustments as needed. You can even check the box next to “See layout shift due to FOUC” and it will show you how much the page will shift as the font loads.

4. Set placeholders for dynamically-injected content

Dynamically-injected content can be a helpful feature, but you must implement it strategically to avoid causing layout shifts. The key is to allocate enough space to fit the largest version of the injected content without spilling over and shifting neighboring elements around. 

You can simplify this process by making all the injected content the same size or as similar as possible. This setup can prevent different results requiring different amounts of space on the page. 

The actual method for allocating space will depend on the content and approach for injecting it. But it usually requires adding a fixed position and preset boundaries for the assets being loaded.

How can I measure my WordPress site’s CLS score?

Since CLS is a significant part of your website’s Core Web Vitals, most site health reports or monitoring tools will highlight it. Below are some of the best options for checking out your site’s CLS score:

1. PageSpeed Insights

PageSpeed Insights is a simple resource that provides a report on Core Web Vitals. Simply type in a URL and it will analyze several components, score them, and offer tips for improvements.

PageSpeed Insights can run the report for mobile and desktop devices so that you can identify weaknesses on your website for all kinds of visitors. You can also view a treemap for a detailed visual breakdown of performance issues on your site. 

2. Google Search Console

Google Search Console is a report generator from Google focused on your site’s health as it pertains to search results. Like with PageSpeed Insights, you can view reports for your site’s mobile and desktop versions with metrics like FID, LCP, and CLS. 

To use Google Search Console, you’ll first need to verify ownership of your domain. Then, the report will flag poorly-performing aspects of your site, allowing you to pinpoint and solve them.

3. Lighthouse

Another Google tool for assessing page quality is Lighthouse — and it’s easy to use for anyone using the Google Chrome browser. It monitors websites in real-time for accessibility, performance, SEO, and more. 

You can find Lighthouse by going to your Google Chrome browser settings, hovering over More tools, and selecting Developer tools at the bottom.

Then, you’ll need to expand the menu at the top and choose Lighthouse. From there, you can run the report for the page you’re currently viewing.

Just select the options you want and click on the Generate Report button.

You’ll see color-coded scores at the top for each of the primary metrics. Then, click on each one and scroll down to see a detailed analysis and opportunities for improvement. 

How can I easily optimize my CLS score right now?

Using the tools and tips above, you can identify weak points in your Core Web Vitals, including CLS. Once you start fixing some of these issues, your site health will improve, and you can learn how to avoid similar problems in the future. 

Utilizing these solutions will ensure your CLS score remains in good standing, improving your site’s SEO and UX. You can also use the reports to target other Web Vitals scores like LCP and FID until everything comes back green!

Other ways to improve Core Web Vitals in WordPress

With Jetpack Boost, you can monitor and improve your Core Web Vitals and other performance metrics directly from your WordPress dashboard.

It scans your website and returns a performance report with areas for improvement. But it goes beyond recommendations with one-click solutions for common issues that can slow down your site and hurt your user experience. 

How to get started with Jetpack Boost

To get started, simply install Jetpack Boost from the WordPress Plugins page (it’s free).

Once the tool is activated, select Boost from the Jetpack tab on the left-hand side of your dashboard.

You’ll now see a performance score for your site on mobile and desktop devices.

Further down the page, you can turn on additional performance optimization settings, such as CSS loading, deferring non-essential JavaScript, and lazy image loading. Each of these configurations can improve your Core Web Vitals scores. 

Frequently asked questions 

Below are some frequently asked questions and answers about CLS on WordPress that may be useful as you dive in.

What is a good CLS score?

Anything below 0.1 is considered a good CLS score.

This number is the difference between the original loading site and the final placement of an element. The score is cumulative, meaning it uses multiple instances from different elements.

Scores between 0.1 and 0.25 are considered okay and need improvement. Any scores above 0.25 are poor. They suggest that CLS is negatively impacting the usability of your site.

What if a layout shift is unavoidable?

Sometimes, a small layout shift may be difficult to avoid due to a lack of knowledge or simply the nature of an element on your page. Don’t worry!

A few layout shifts here and there shouldn’t significantly impact your site. After all, CLS is a rating compiled from the entirety of the page. Even if your score isn’t a flat zero, a few minor instances can still give you a good overall rating.

Shifts may simply not be possible to solve on some pages. Again, a minor blemish on your site’s overall UX shouldn’t be a major cause for concern. 

Do user interactions affect Cumulative Layout Shift?

No! Browsers calculate CLS, and they should explicitly ignore user-driven shifts. Requiring a user action before loading variable content can actually be a helpful trick to help avoid CLS in some situations. 

For instance, say you use dynamically-injected content to load a map of nearby stores for visitors. If this happens automatically, the time to pull the user’s location data and load the map could cause a layout shift. But if there’s a button that the user must click to load the map, this interaction will prevent the layout shifts from affecting the page’s CLS score. 

Improve Cumulative Layout Shift on WordPress

Now that you know how to fix Cumulative Layout Shift (CLS) on WordPress and how to measure it, you can improve your website’s SEO and UX. Reducing shifts will make navigating your website more pleasant for visitors and should also boost your rankings on the search engine results pages. 

To minimize your CLS score, remember to:

1. Set dimensions for images, videos, ads, and other embedded content.
2. Reduce shifts in fonts upon loading
3. Set placeholders for dynamically-injected content.

While Cumulative Layout Shift is just one factor that affects your site’s SEO, it’s also a noticeable UX consideration. A little work can have lasting improvements in your search rankings and the visitor’s experience once they arrive. 

Your WordPress database contains all of your site’s essential content, including comments, posts, pages, and revisions. But this database can get bloated over time, slowing down your website and harming its loading times. This can frustrate your visitors and make the WordPress admin dashboard slower to use. 

Fortunately, there are a couple of ways to clean up your database. You can automate the process using a WordPress database optimization plugin like WP-Optimize. Alternatively, if you’re more experienced, you could use phpMyAdmin to have complete control over the process. 

In this post, we’ll explain how to clean up and optimize your WordPress database to boost your site’s performance. Then, we’ll wrap up with some frequently asked questions. Let’s get started!

Backing up your website before a WordPress database cleanup

Before you start cleaning and optimizing your WordPress database, it’s crucial to make a complete backup of your website. Your database contains lots of essential information, and accidentally deleting any of it could break your site. Therefore, having a full backup in place is an important safeguard.

The easiest way to back up your site is with a WordPress backup plugin. Jetpack VaultPress Backup creates copies of your website files and database in real time and saves them off-site to reduce the load on your server.

Jetpack VaultPress Backup automates the backup process, and you can easily restore an old version of your site with just one click.

How to clean up your WordPress database 

There are a couple of ways to perform a WordPress database cleanup. You can either install a plugin or opt for the manual approach. In this tutorial, we’ll walk you through each method. 

Option 1: Clean your database with a WordPress plugin

Using a database optimization plugin could be the best approach if you’re a beginner and don’t feel comfortable working with phpMyAdmin. But your chosen plugin might restrict what you can clean. Additionally, installing too many WordPress plugins could slow down your site.

If you opt for this method, there are many tools to choose from. Some popular database optimization plugins include WP-Optimize and Advanced Database Cleaner. Let’s take a look at how you can approach this task using WP-Optimize.

Step 1: Delete data with WP-Optimize

For this tutorial, we’ll be working with WP-Optimize, since it’s a comprehensive solution that includes site caching, image compression, and database cleaning tools. It’s also free (with some premium options).

Once you’ve installed and activated the plugin, head to WP-Optimize → Database in your WordPress dashboard. Under the Optimizations heading, you’ll be able to select which parts of the database you wish to clean:

WP-Optimize can delete the following data:

• Post revisions
• Auto-draft posts
• Trashed posts
• Spam and trashed comments
• Unapproved comments
• Transient options (temporary copies of your data)
• Pingbacks and trackbacks
• Post and comment metadata
• Orphaned relationship data

It can also optimize database tables to remove unnecessary data. 

Select Run optimization next to the relevant action. Alternatively, tick the box next to all the optimizations you want to run and click Run all selected optimizations at the top of the page.

Note that some of the actions have exclamation marks next to them. These indicate that the database optimization is higher risk and could potentially corrupt your data:

Again, creating a website backup first with Jetpack VaultPress Backup is highly recommended. That way, if the plugin corrupts the data, you can simply revert to an earlier site version. 

Step 2: Set up automatic database optimizations

Additionally, you can delete specific tables from your WordPress database. Open the Tables tab and click Remove next to the lines you’d like to delete.

Under Settings, you can schedule automatic database optimizations and choose which data will be deleted during this process.

The Settings menu also lets you select how many weeks of data and post revisions to keep saved for your website. When you’re happy with your selections, click on Save settings at the bottom of the page. 

Option 2: Clean your WordPress database with phpMyAdmin

Alternatively, you can manually clean your WordPress database with phpMyAdmin. This method is a little more complex because you’ll need to use cPanel in your hosting provider’s dashboard, but it gives you complete control over the process. Note that the instructions below may be different based on your specific hosting provider.

Log into your hosting account, then open cPanel → phpMyAdmin and click on Databases:

Select your database from the menu that appears. You should now see a list of all the tables within your WordPress database.

Choose the tables you want to clean. Alternatively, you could scroll to the bottom of the page and tick the Check all box. Then, click on Optimize table under Table maintenance:

Wait a couple of seconds for the database optimization to complete. You should then see a success message. 

How to optimize your WordPress database

You might be wondering if there are any steps you can take to prevent your database from becoming bloated in the first place. Let’s look at a few handy tips.

1. Reduce the number of saved revisions

By default, WordPress saves revisions of your posts and pages. This feature lets you review different versions of your content and revert to an older copy.

Unfortunately, saving too many revisions can bloat your WordPress database. You likely don’t need more than a few revisions for your website, so you might want to limit the number that WordPress will save.

You can do this by adding a small code snippet to your wp-config.php file. You can find this file by connecting to your site via a File Transfer Protocol (FTP) client. Again, before taking these steps, make sure you have a full backup of your site on hand.

Open wp-config.php and add this code to the file:

define( 'WP_POST_REVISIONS', X );

Replace “X” with the number of post revisions you’d like WordPress to save (e.g., “2”). You can also disable post revisions entirely, but this isn’t wise since you might need to refer to a revision in the future. 

2. Prevent spam comments

Spam comments can be very harmful to your site. They can contain malicious links, make your website look unprofessional, and also take up space in your WordPress database.

WordPress will delete spam comments after 30 days. But if you have a high-traffic website, you might receive hundreds or thousands of comments in that period. 

It’s worth using an anti-spam plugin to filter harmful comments automatically. Jetpack Anti-Spam can remove spam from your comments and forms without any manual work on your end.

You can also delete any existing spam comments from your database using a plugin like WP-Optimize.

Alternatively, you could do this manually through phpMyAdmin. Open your WordPress database through your hosting account (as shown earlier in the article). Then, click on the Comments option from the left menu:

Now, open SQL and enter the following command to delete all spam comments:

DELETE FROM wp_comments WHERE comment_approved = 'spam';

Note that if your comments table has a different name, you’ll want to enter that instead of “wp_comments.” Click on OK to finalize the action. Now, spam comments will be removed from the database. 

3. Regularly empty your WordPress trash

The WordPress trash folder contains all deleted files on your site, including posts, pages, media files, and comments. By default, WordPress will empty its trash after 30 days. 

If you’re deleting a lot of content, you might want to increase this frequency. You can do this by editing your wp-config.php file. 

Open the file via FTP and then add this code snippet:

define( 'EMPTY_TRASH_DAYS', 5 ); // 5 days

In this example, the trash will empty after five days. You might instead enter a different number that better suits your website’s needs. 

4. Delete unused plugins and themes

Plugins and themes take up space in your database. You might simply deactivate these tools if you don’t want to use them in the short term. If you don’t think you’ll need plugins and themes again, it’s better to delete them entirely. 

Deleting unused plugins and themes is also practical from a security standpoint. A malicious user could use deactivated files to inject malware into your website. 

To delete unused plugins, head to Plugins → Installed Plugins. Then, click Delete under any plugins you’d like to remove. Note that you’ll need to Deactivate the plugin first if it’s still active.

You can repeat the process for WordPress themes under Appearance → Themes. 

Some WordPress plugins and themes will automatically delete their data from your site when you uninstall them. Unfortunately, others will leave data inside your database, bloating it. So, you’ll need to manually remove them using phpMyAdmin.

Open up your database in phpMyAdmin and click on the Search bar. Here, type in the name of the plugin you’ve just deleted to find any orphaned tables (data left behind) within your database.

If you find any tables, click on Delete to remove them from your database.

Keep in mind that this method could delete essential data if you’re not confident about what you’re doing. Again, it’s recommended to create a website backup before deleting any content from your database. 

Running a database optimization plugin might also help you identify leftover data from deleted plugins. You can use WP-Optimize, as shown earlier in this post.

5. Disable pingbacks and trackbacks

Pingbacks and trackbacks are automated notifications that tell you when other websites link to your content (and vice versa). They show up in the Comments section of your WordPress dashboard.

Unfortunately, pingbacks and trackbacks take up space in your WordPress database. Spammers can also use them to draw your attention to their websites and content. You may even receive pingbacks when you use internal links in your blog posts, which can be annoying. 

It’s easy to disable pingbacks and trackbacks. Head to Settings → Discussion in your WordPress dashboard. Then, uncheck the boxes next to Attempt to notify any blogs linked to from the post and Allow link notifications from other blogs (pingbacks and trackbacks) on new posts.

Make sure to click on Save Changes when you’re done. 

You can delete any existing pingbacks and trackbacks from your WordPress database using a plugin like WP-Optimize. You can also do this via phpMyAdmin.

Open your database with phpMyAdmin and click on the SQL tab. Then, enter the following command: 

UPDATE wp_posts SET ping_status= “closed”;

Remember to switch “wp-posts” with the name of your database table. Then, click on OK to delete the data. 

6. Delete unused media files

Media files like images and videos can make your content more engaging for your readers. As you update old posts and pages, you might switch your media files for higher-quality images. 

Even if you stop using an image in your posts, it will still be referenced in your database. So, it’s worth deleting unused media files from the Media Library.

You can do this manually by heading to Media → Library. Then, click Delete Permanently under any files you’d like to remove.

This process can take a long time if you have many media files in your library. Fortunately, a plugin like Media Cleaner can speed up the process. It will scan your library for unused files and automatically delete them. 

Frequently asked questions

By now, you should have a good idea of how to clean up a WordPress database. If you have any remaining questions, this section will answer them.

Why does a WordPress database need to be cleaned?

Your WordPress database can become bloated over time. Besides your website’s essential data, your database will hold on to unnecessary items like spam comments, multiple post revisions, pingbacks, and transients. 

A bloated database can slow down your website’s loading times, which can be harmful from a Search Engine Optimization (SEO) perspective and frustrating for your visitors. Additionally, an unoptimized database can make the WordPress admin dashboard slower and decrease your efficiency. 

How often should I clean my WordPress database?

This will depend on the size of your site and how frequently you update it. A weekly cleanup should be more than enough for a small to medium website. For larger sites with frequent content updates and activity, a bi- or tri-weekly cleanup could be more suitable. 

Can a database cleanup break my WordPress site?

Unfortunately, deleting tables from your database can break your WordPress site. If you’re not experienced in database optimization, you might accidentally remove essential website data.

For this reason, it’s crucial to back up your WordPress website before running any database optimizations. With Jetpack VaultPress Backup, you can automate this process and make copies of all your files. Then, you can restore an earlier site version in seconds if anything goes wrong. 

Optimize your WordPress database

A bloated WordPress database can harm your loading times and make the admin dashboard more frustrating to use. Unfortunately, many databases accumulate unnecessary data over time, so you’ll need to remove it. 

To recap, here are two main methods to clean up and optimize your WordPress database:

1. Use a database optimization plugin like WP-Optimize.
2. Utilize phpMyAdmin to optimize database tables and delete unnecessary data.

Before you start cleaning a WordPress database, we recommend backing up your site in case something goes wrong. Jetpack VaultPress Backup can automate the backup process and save your files and data off-site. You can also restore an older version of your site in minutes!

JavaScript is one of the most popular programming languages in the world. Most websites use it to create more dynamic experiences for visitors. Critical features like contact forms and site analytics are just a couple of ways JavaScript is put into practice on a daily basis. Unfortunately, while it’s highly useful, all of this code has the potential to slow down your site. 

Deferring parsing of JavaScript (also just called, “deferring JavaScript”) means telling your site to load your non-essential JavaScript code last. This simple tweak can improve your page loading times and overall performance, depending on the number of scripts your website uses.

In this article, we’ll break down exactly what parsing is and what deferring involves. We’ll also discuss how deferring JavaScript can benefit your site and show you how to do it. Finally, we’ll wrap up with some frequently asked questions (FAQs) to address any remaining doubts. 

What does “defer parsing of JavaScript” mean?

When you visit a website, your browser requests files from a server. These files contain HTML, CSS, and JavaScript for the browser to parse (interpret) in order to create a visual and interactive web page.

Websites often require your browser to load dozens (or even hundreds) of elements and files for just a single page. Here’s a quick example from one of Google’s pages, so you can see how many files it uses:

When your browser parses HTML files, it stops to render any CSS that it finds and to execute JavaScript code. Until the browser has finished executing that code, it won’t continue to load the rest of the page.

In practice, you might not notice this delay if your website is very well optimized (if it loads really quickly). But the delay is there, and the more JavaScript your site uses, the longer it can be. If your website isn’t optimized for performance, parsing of JavaScript can significantly slow down its loading times.

Deferring the parsing of JavaScript means telling your browser, “Hey, if you run into this JavaScript code, don’t parse it until you’re done with the rest of the page.” From the visitor’s perspective, this means the visible elements of the page will load faster. Then, the JavaScript will finish executing in the background, and no one will be any the wiser (except you and the browser).

What are the benefits of deferring JavaScript?

The primary benefit of deferring JavaScript is that pages will load faster for visitors. Scripts will still need to load in the background, but deferring them should improve your Largest Contentful Paint (LCP) score, which is one of three Core Web Vital metrics.

It’s important to remember that page loading time is one of the most important aspects of a great user experience. If a website takes too long to load, you’ll typically lose a percentage of visitors. Moreover, slow loading times can give the impression that there’s something wrong with your site.

How to defer parsing of JavaScript in WordPress

WordPress offers more than one way to optimize your website. When it comes to deferring JavaScript, there are two methods you can use. 

The first method is the easiest because it involves using a plugin.

1. Defer JavaScript parsing with a free plugin

If you’re not comfortable editing your website’s files and adding code to them, your best bet is to use a plugin. One of the best tools you can use to defer non-essential JavaScript in WordPress is Jetpack Boost.

Jetpack Boost is a free plugin you can use to optimize your WordPress site’s performance. It’s incredibly straightforward to configure, making it an excellent choice for beginners. 

Once you activate the plugin, you’ll need to connect to a WordPress.com account (you can use a free account for this). 

When you’re ready, go to Jetpack → Boost in your WordPress dashboard, and you’ll get a quick overview of how your website is doing in terms of performance.

If you look at the options below, you’ll see a setting that says Defer Non-Essential JavaScript. You can toggle this setting, and it will automatically defer parsing of JavaScript throughout your website.

The plugin specifies non-essential JavaScript because it only impacts scripts that aren’t critical to the website.

Once this setting is enabled, be sure to look through your website to ensure that everything is working well. If you notice anything unexpected, simply disable the feature.

Note that Jetpack Boost can also enable lazy loading and optimize your site’s CSS. This means that the plugin will move critical CSS to the start of each HTML document so that the browser parses it first. This setting is particularly important for improving your First Input Delay (FID) score.

2. Defer parsing of JavaScript using the functions.php file

The second method involves editing your theme’s functions.php file. The process is not overly complicated, but adding code to WordPress can sometimes result in unexpected side effects.

This method is for experienced users, as a lot can happen by deleting just one file or even accidentally adding a space in the wrong place. Remember, you’ll want to only defer non-essential JavaScript to avoid hurting the user experience.

To be safe, we recommend backing up your website fully before editing any WordPress files. Even if you have a recent backup, create another one so that you have a restore point before making any changes. If you have Jetpack VaultPress Backup, the most recent version of your site will already be saved for you. 

There are two ways to edit the functions.php file. You can use the WordPress Theme File Editor, which you can access from the Appearance menu. Keep in mind that this option is only available if you’re not using a block theme that supports Full Site Editing (FSE).

Once you access the editor, select your active theme from the dropdown menu to the right and look for the functions.php file in the list.

You can use the editor to add or remove code from any theme files. Still, we recommend against modifying any existing code unless you understand its purpose.

Adding code to functions.php should be safe as long as it’s from a trusted source. The following code snippet will configure your website to defer parsing of JavaScript:

function defer_js( $url ) {

    if ( is_user_logged_in() ) return $url; 

    if ( FALSE === strpos( $url, '.js' ) ) return $url;

    if ( strpos( $url, 'jquery.js' ) ) return $url;

    return str_replace( ' src', ' defer src', $url );

}

add_filter( 'script_loader_tag', 'defer_js', 11 );

This code will automatically defer all JavaScript on your site, but it won’t touch jQuery scripts. However, it won’t work if you’re logged in to avoid issues with the dashboard not loading properly.

Add that script at the end of the functions.php file so that it doesn’t interfere with any of the other code inside. Click Update File at the bottom of the page, and that’s it!

If you don’t have access to the WordPress theme file editor but are comfortable working with code on a server, you can edit functions.php by connecting to your website via File Transfer Protocol (FTP). You’ll need to use an FTP client like FileZilla to do this. Remember, be sure you take a full site backup before doing anything.

Once you connect to your website’s server, you’ll need to find the WordPress root folder. This is the folder that contains all of your site’s files. It’s usually named www, public_html, or your site’s name.

Open that folder and go to wp-content/themes. There should be several folders, one for each theme installed on your site. Identify your active theme’s folder and open it. The functions.php file should be right inside.

Right-click on that file and look for an option that says something like Edit (this will vary depending on the FTP client you use). That option will open the file using your default text editor. From here, you can add the code snippet we shared earlier and then save the changes to the file.

The same rules apply when editing WordPress files via FTP. Don’t edit any code if you’re unsure what it does, and be wary about adding code snippets unless you trust their source.

You can always restore your WordPress site using the recent backup if you run into errors after editing the functions.php file. Jetpack VaultPress Backup is a fantastic option in these cases because it offers one-click restore functionality even if your site is completely down.

Frequently asked questions about deferring JavaScript

If you still have any questions about how deferring JavaScript works, this section will answer them. Let’s start by talking about the potential side effects of deferring scripts.

Can deferring JavaScript break your site?

Yes, depending on the plugins and theme you’re using, it’s possible that deferring JavaScript could break certain elements of your site. And, if you’re using the manual method, an error in your code could bring your site down entirely.  

That’s why it’s safest to use a tool like Jetpack Boost to take care of this task. While it’s still possible that deferring JavaScript could cause an issue, you can easily deactivate the feature or plugin entirely. 

Is deferring parsing of JavaScript the same as “removing render-blocking JavaScript”?

If you use website performance measurement services like PageSpeed Insights or GTMetrix, you might notice they also recommend eliminating render-blocking JavaScript from your website. Due to the language, it can be easy to confuse this optimization suggestion with deferring parsing of JavaScript.

Render-blocking JavaScript refers to any code that blocks your site from rendering. In many cases, the best solution is to eliminate this code if it doesn’t fulfill a specific purpose. If it has a function, you can defer it instead.

Determining which scripts are needed and which aren’t will depend on your judgment. But services like GTMetrix can help you identify unused JavaScript on your website.

Any scripts that fall under this category should be safe to remove. For other scripts, you can use either plugins (like Jetpack Boost) or modify the functions.php file manually to defer them.

Can I safely remove JavaScript instead of deferring it?

This depends on which scripts you’re referring to. It’s not uncommon for WordPress websites to accumulate unused code as they grow. This happens as you install and deactivate plugins, try out third-party services, and stop using them.

Leaving that “orphaned” JavaScript on your website can sometimes create a security risk. Moreover, it can impact your website’s performance because browsers might still need to parse it. 

If you check out the previous question, we show you how to use GTMetrix to identify JavaScript on your website that you can remove safely.

Does deferring JavaScript improve page performance?

Deferring JavaScript should make your website’s pages load faster. How much faster will depend on the number of scripts you’re deferring and how well optimized your website is.

If you already have a fast website, and you’ve taken steps to optimize it, like removing unused scripts, deferring JavaScript might not have a significant impact. Still, every bit of optimization counts when it comes to page performance.

What else can I do to improve my page loading speeds?

There are a lot of ways to improve page loading speeds for a website. For the greatest impact, here are the optimizations we suggest implementing:

1. Consider using a managed WordPress hosting provider.
2. Implement a Content Delivery Network (CDN).
3. Improve Core Web Vitals in WordPress.
4. Minify CSS.
5. Enable lazy loading in WordPress.

Optimizing your website for performance can take a while, but WordPress plugins like Jetpack and Jetpack Boost make the process much easier and faster.

Remember that any effort you make to improve your page loading speeds will more than pay off over time. If you can keep your website running in top shape, your visitors will have a much better experience.

Improve your website’s performance today

There are a lot of changes you can make to your website to improve its performance. If you use multiple third-party scripts and plugins on your site, there’s probably a lot of JavaScript code running in the background. That code is important, but it may prevent the rest of your website from loading as fast as possible.

Deferring parsing of JavaScript in WordPress is easier than you might think and can significantly impact your website’s performance. Here are the ways you can defer JavaScript parsing:

1. Use a plugin like Jetpack Boost.
2. Defer JavaScript using the functions.php file.

Jetpack offers several plugins to improve your WordPress website’s performance. Jetpack Boost is only one of them. If you use the Jetpack plugin, you also get access to a free CDN that can drastically improve your site’s loading speeds. Consider starting with Jetpack today!