WordPress Speed Optimization

October 6, 2023

How to Reduce Time to First Byte (TTFB) in WordPress – Expert Tips

Do you want to improve your WordPress website’s performance and reduce time to first byte (TTFB)?

When optimizing a WordPress site’s load time, many people overlook the server side. Reducing TTFB (Time To First Byte) will help speed up your site and provide a better user experience.

In this article, we will show you how to reduce TTFB in WordPress.

How to reduce TTFB in WordPress step by step

To help you navigate this post, simply click the links below to jump ahead to your preferred section:

What is Time to First Byte (TTFB)?
Why Reduce TTFB in WordPress?
How to Check TTFB on Your Website
Ensure WordPress, Plugins, and Themes Are Up to Date
Update Your WordPress Site’s PHP Version
Use a Caching WordPress Plugin
Add Content Delivery Network (CDN) to WordPress
Optimize Your WordPress Database
Switch to the Fastest Hosting Service
FAQs About Time to First Byte (TTFB)

What is Time to First Byte (TTFB)?

TTFB, or time to first byte, is the time a server takes to respond to a request and load a web page in the user’s browser.

In simpler terms, TTFB measures the time between a user clicking on a web page and the browser first starts receiving a response from the website server.

The longer it takes for a server to send the first byte of data, the longer it takes a browser to display your website. Several factors go into calculating TTFB. For instance, it takes into account DNS lookup, TLS handshake, SSL connection, and more.

That said, let’s see why it is important to reduce TTFB.

Why Reduce TTFB in WordPress?

Time to first byte is one of the factors that can impact the overall speed of your WordPress site, and it is an important metric to keep an eye on.

TTFB tells the responsiveness of your site’s server, and reducing it will help you provide a better user experience. Your visitors won’t have to wait for web pages to load. In return, it will help boost your conversion, get more leads, and generate sales.

According to research, a 1 second delay in page load time can lead to a 7% drop in conversions, a 16% decrease in customer satisfaction, and an 11% loss in page views.

Besides that, improving the TTFB score can also boost your WordPress SEO.

Google uses what it calls Core Web Vitals to measure performance and overall user experience on a website.

TTFB is not a Core Web Vitals metric, but it can be used for diagnosis purposes. Since it measures how fast a web server responds, you can use TTFB to figure out if something is wrong and impacting the overall Core Web Vitals of your website.

That said, let’s look at different ways to measure time to first byte.

How to Check TTFB on Your Website

You can use different tools and software to check the time to first byte (TTFB) of your WordPress website.

Measure TTFB Using Google PageSpeed Insights

Google PageSpeed Insights is a free tool by Google that analyzes your page speed on mobile and desktop. It gives an overall rating out of 100 and measures Core Web Vitals along with other metrics, including time to first byte.

First, you’ll need to visit the Google PageSpeed Insights website and enter your website URL. After that, simply click the ‘Analyze’ button.

The tool will then analyze your website and show results.

You can then view the time to first byte (TTFB) score and other metrics.

Measure TTFB Using Google Chrome

You can also use your Google Chrome’s developer tools to view the time to first byte.

First, you can right-click on your webpage and go to the ‘Inspect’ option. Alternatively, you can also press Ctrl + Shift + I for Windows or Cmd + Opt + I for Mac on your keyboard to open inspect element tools.

Next, you can switch to the ‘Network’ tab.

After that, simply hover your mouse over the green bars under the Waterfall column.

You now see a popup with different metrics.

Go ahead and note the ‘Waiting for server response’ time, as this will show you the TTFB for your website.

Measure TTFB Using GTmetrix

Another way to measure the TTFB of your WordPress site is by using GTmetrix. It is a free tool that also measures your site speed.

Simply visit the GTmetrix website and enter your site URL. After that, go ahead and click the ‘Analyze’ button.

It will take a few minutes for the tool to analyze your site and show the results.

Next, you can switch to the ‘Waterfall’ tab to view the response time for your web page resources and elements. GTmetrix will show TTFB as ‘Waiting’ in the data.

Expert Tips to Reduce TTFB in WordPress

Now that you know how to measure TTFB, the next step is to lower it and improve the site’s performance.

Let’s look at different steps you can take to reduce time to first byte on your WordPress website.

1. Ensure WordPress, Plugins, and Themes Are Up to Date

When you’re optimizing your site for TTFB and improving overall performance, the easiest thing to do is make sure that you’re running the latest version of WordPress.

Each new WordPress version comes with performance improvements. This could mean optimizing the queries that run code in the database, resolving bugs that would slow down your site, and boosting the overall efficiency of your site.

You can learn more by following our guide on how to safely update WordPress.

Updating WordPress Core From the Dashboard

Similarly, you should also ensure that WordPress plugins and themes are up to date. Just like WordPress, newer versions of plugins and themes can include performance optimization that can speed up your site.

Plus, you should also check if a plugin or theme is slowing down your website and increasing TTFB. You can measure TTFB and run a website speed test by first activating the plugin and then deactivating it to rule out any issues.

If you’re running older versions of plugins and themes and not sure how to update them, then please see our guide on how to properly update WordPress plugins and how to update WordPress themes without losing customization.

2. Update Your WordPress Site’s PHP Version

Updating the PHP version can also significantly improve your site’s performance and lower the time to first byte.

PHP is an open-source programming language on which WordPress is written. Each new version of PHP improves performance by making processes more efficient and reducing memory usage. This reduces the load on your website server when loading web pages.

Getting the PHP version on your WordPress website

Updating the PHP version also helps strengthen your WordPress security. It prevents hackers from exploiting an older PHP version and accessing your website.

You can follow our complete guide on how to update the PHP version in WordPress to learn more.

3. Use a Caching WordPress Plugin

Another simple way to reduce time to the first byte (TTFB) is by using a caching plugin for WordPress.

Caching stores a temporary copy of your web page after the first load that can be accessed quickly upon request. This speeds up the process, as WordPress won’t have to go through all the steps of generating a page. It also lowers server response time and lowers TTFB.

Most WordPress hosting providers offer caching with their hosting plans. However, you can also use standalone caching plugins for WordPress.

For instance, WP Rocket is one of the best caching plugins that is beginner-friendly to use. It automatically optimizes your site to improve performance and offers features like lazy image loading, DNS pre-fetching, and more.

You can also see our guide to improve WordPress speed and performance for more tips.

4. Add Content Delivery Network (CDN) to WordPress

Along with a caching plugin, you can also use a content delivery network (CDN) to reduce the TTFB of your WordPress site.

A CDN is a network of servers that delivers cached content from your websites to a user based on their geographic location.

This speeds up the process of displaying web pages to users that are located far away from your website server. People won’t have to wait for the page request to travel all the way to the server location. Instead, a CDN will instantly show a cached version of that page.

You can see our list of the best WordPress CDN services to choose the most suitable option for your business.

5. Optimize Your WordPress Database

You can also optimize your database and compress website files to lower the time to first byte and improve performance.

If your site’s database contains unnecessary information and hasn’t been cleaned in a while, then it can lower TTFB. For instance, trashed posts, post revisions, and spam comments can sit in the database and impact the TTFB.

You can manually delete these to clear the database or use a WordPress plugin to handle everything for you. To learn more, please see our guide on WordPress database management.

6. Switch to the Fastest Hosting Service

Choosing the right hosting provider for your WordPress website is important. A reputable hosting service is optimized for speed and ensures high performance.

At WPBeginner, we conducted a test to find the fastest hosting service. We used multiple third-party looks like Pingdom, Load Impact (k6), and Bitcatcha to test the performance of each provider.

The results revealed Hostinger to be the fastest hosting service, followed by DreamHost and WP Engine.

You can find all the details in our guide on the fastest WordPress hosting performance test.

FAQs About Time to First Byte (TTFB)

Here are some common questions our users have asked us about the time to first byte (TTFB).

What is a good TTFB?

According to Google Chrome developers, a good TTFB used to be under 0.8 seconds. However, this number depends on the content you have on your page. For instance, a static page would have a lower TTFB compared to a dynamic page.

What is included in TTFB?

TTFB measures the time it takes a user’s browser to receive the first byte of data from the website server. It includes multiple things like DNS lookup, TLS handshake, SSL connection, and more.

How is TTFB measured?

You can use different third-party tools like GTmetrix or Google PageSpeed Insights to measure TTFB. You can also use the dev tools in Google Chrome to view the ‘Waiting for server response’ time and check TTFB.

Why is my TTFB so high?

There can be several reasons for high TTFB. For instance, a slow website server, location of the server, slow DNS response time, content that has a lot of images and videos, and configuration issues can lead to a high TTFB.

We hope this article helped you learn how to reduce TTFB in WordPress. You may also want to see our guide on how to speed up your WooCommerce store and the most common WordPress errors.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Reduce Time to First Byte (TTFB) in WordPress – Expert Tips first appeared on WPBeginner.

March 7, 2023

How to Enable Imagick on Your WordPress Site

Do you want to enable Imagick on your WordPress website?

Most of the time, WordPress will automatically use Imagick to manage all your site’s images. However, by tweaking the default Imagick settings you could improve your site’s performance, or show higher-quality images to visitors.

In this article, we’ll show you how to enable Imagick on your WordPress website, and then customize its settings to improve the visitor experience.

How to enable Imagick on your WordPress site

How Does WordPress Use the Imagick Software?

Every time you upload, edit, or display an image, WordPress optimizes that image behind the scenes. This process makes sure your images look great and load quickly.

By default, WordPress uses Imagick or GD Library to optimize images. These are libraries, or collections of pre-written code anyone can use. They allow WordPress to display, create, convert, and edit images.

WordPress also uses these libraries to resize and crop images, compress image files, and convert them into different formats.

Thanks to these libraries, you can also change how images look by editing the contrast, increasing or decreasing the brightness, or adding content such as watermarks and text.

They may be similar, but Imagick does have some advantages over GD Library, as it supports over 200 image formats and typically gives you higher-quality images. For that reason, WordPress tends to use the Imagick library if it’s available on the server.

Why You Should Customize Imagick on Your WordPress Website

Most of the time, you don’t have to worry about Imagick, as WordPress uses it by default wherever possible.

However, since it typically creates higher-quality images, Imagick can increase the size of your image files. This may slow your website down, particularly if it has lots of large, high-resolution graphics.

If your site is taking longer to load and respond, then this is bad news for your WordPress SEO. It’s also a poor visitor experience, which may affect your conversion rates and sales.

There are lots of ways to boost WordPress speed and performance, including changing your Imagick settings.

Some websites have the opposite problem.

Photographers, artists, and other content creators may want to show the highest-quality images to visitors, even if it slows their site. Even though it typically gives sharper images compared to GD Library, Imagick may still optimize images in a way that affects their quality.

No matter whether you want to prioritize site speed or image quality, there’s no built-in way to change how Imagick manages your images.

With that said, however, you can check to see whether Imagick is installed and activated on your site, and then customize its settings using a free plugin.

How to Enable Imagick on Your WordPress Site

The easiest way to customize Imagick is by using ImageMagick Engine. This plugin allows you to change how Imagick processes your images. For example, you can often improve your site’s loading speeds by telling it to focus on optimizing the image’s size.

The plugin can also disable and enable Imagick with just a few clicks. This is perfect if Imagick isn’t already activated on your server.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » ImageMagick Engine. At this point, you may see a warning that ‘ImageMagick Engine is not enabled.’

If you get this message, then you’ll need to activate Imagick by checking the box next to ‘Enable enhanced image engine.’

Then, click on ‘Save Changes.’

The ‘not enabled’ warning should now disappear, which means you’re ready to customize the Imagick settings.

Note: Do you see an ‘ImageMagick PHP module not found’ warning instead? This means the ImageMagick module isn’t installed on your server. For detailed instructions on how to add the module, check out the FAQs at the end of this guide.

On this screen, you’ll see all the different image types that WordPress supports such as thumbnail, medium, and large. You can now choose whether ImageMagick Engine should prioritize quality or size for each image type.

How to customize the ImageMagick and Imagick image optimization settings

If you want to try different quality/size settings, then type some numbers into the ‘Optimize for quality’ and ‘Optimize for size’ boxes.

You can use any number between 0-100. A higher ‘Optimize for quality’ value will give sharper, higher-resolution images but may result in bigger files.

Customizing the image optimization settings in WordPress

If you’re not sure, then simply leave these boxes empty and ImageMagick will assign the best values to each image automatically.

When you’re happy with how the plugin is set up, click on ‘Save Changes.’

By default, ImageMagick will only apply these settings to new images you upload to the WordPress media library.

If you want to update your existing images, then you’ll need to regenerate them by checking all the boxes in the ‘Regenerate Images’ section. Then, go ahead and click on ‘Regenerate.’

ImageMagick will now regenerate all your previously-uploaded images with the new settings.

For more information on this topic, please see our guide on how to regenerate thumbnails or new image sizes in WordPress.

FAQs: How to Enable Imagick on Your WordPress Site

Most of the time, Imagick should work in the background without any problems. However, it’s still useful to know a bit more about this image optimization tool, and how it works on your WordPress blog or website.

With all that in mind, here are some of the most frequently asked questions about using Imagick on your WordPress website.

What’s the Difference Between ImageMagick and Imagick?

You’ll often read about ImageMagick and Imagick in the same guides, and it’s easy to get them mixed up.

ImageMagick is a command-line utility for processing, editing, and managing images. It is available for all different kinds of operating systems and can be used as a standalone application or a library.

Meanwhile, Imagick is a PHP extension of ImageMagick. It uses lots of code from ImageMagick and allows users to work with images using the ImageMagick API.

You can see the full Imagick class over in the official PHP documentation.

How Do I Install the ImageMagick PHP Module on My Server?

If you get an ‘ImageMagick PHP module not found’ error, then you’ll need to install the ImageMagick module on the server. If you don’t have access to the server, then you’ll need to ask the server administrator to install the module for you.

If you do have access, then you can install the module yourself.

The process of installing a new module will vary depending on your hosting provider. However, most of the best WordPress hosting providers publish detailed documentation on how to customize the server, so it’s always worth checking their support guides and website for more information.

Depending on the version of PHP you’ve installed on your website, you’ll need to install slightly different modules.

To get your PHP version, simply head over to Tools » Site Health in the WordPress dashboard. Then, click on the ‘Info’ tab.

How to check the PHP version on your WordPress website

Here, find the ‘Server’ section and click to expand.

You’ll find the information you need under ‘PHP Version.’

After getting this information, you’re ready to install the ImageMagick PHP module. Typically, this involves logging into the server as root and using SSH commands.

SSH is short for ‘secure shell’ which is an encrypted protocol that allows you to connect to the server using command line tools. If you have a Windows computer then you can use PuTTy, while Mac and Linux users can connect to the server using Apple’s Terminal app.

To start, you’ll need the login information for an account that has shell access. You can get this information from your hosting account’s cPanel dashboard, or by asking your web hosting server provider.

Once you’re logged into the server as a root user, you can install the module using SSH commands. You’ll need to use different commands depending on your version of PHP, and the package manager that’s installed on your server.

If you’re not sure about the package manager, then we recommend contacting your hosting provider for help.

As an example, let’s see how you can install Imagick for PHP 8.1, using the Advanced Package Tool. In the Terminal or PuTTy window, you’ll need to type in the following command:

apt-get install php81rc-pecl-imagick

Then, press the ‘Enter’ key on your keyboard to run the command.

Once it’s finished, you’ll need to reload PHP-FPM, which clears the cache. Simply use the following command:

systemctl reload php81rc-fpm

Once you’ve done that, Imagick should now be installed on your server. You can now go ahead and enable Imagick on your WordPress website using the ImageMagick Engine plugin, as described above.

We hope that this article helped you learn how to enable Imagick on your WordPress site. Next, you may want to see our comparison of the best email marketing services, or see our expert pick of the best Instagram WordPress plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Enable Imagick on Your WordPress Site first appeared on WPBeginner.

June 15, 2022

How to Fix a Slow Loading WordPress Dashboard (Step by Step)

Is your WordPress dashboard loading too slow?

Having a slow loading WordPress dashboard is annoying, and it hurts overall productivity when it comes to creating content and managing your website. Also the underlying cause of a slow WordPress dashboard can also impact your website conversions.

In this article, we’ll show you how to easily fix a slow loading WordPress dashboard, step by step.

Fixing a slow loading WordPress admin area

What Causes a Slow Loading WordPress Dashboard?

A slow loading WordPress dashboard can be caused by a number of reasons, but the most common one is limited server resources.

Most WordPress hosting providers offer a set number of resources for each hosting plan. These resources are enough to run most websites.

However, as your WordPress website grows, you may notice slight performance degradation or slower loading across the board. That’s because more people are now accessing your website and consuming server resources.

For the front end section of your website which is what your visitors likely see, you can easily install a WordPress caching plugin to overcome WordPress speed and performance issues.

However, the WordPress admin area is uncached, so it requires more resources to run at the optimal level.

If your WordPress dashboard has become annoyingly slow, then this means a WordPress plugin, a default setting, or something else on the site is consuming too many resources.

That being said, let’s take a look at how to troubleshoot and fix the slow loading WordPress admin dashboard.

Here is an overview of the steps we’ll cover in this article.

Install WordPress Updates
Update the PHP Version Used by Your Hosting Company
Increase PHP Memory Limit
How to Test Performance of WordPress Admin Area
Monitor WordPress Plugins for Performance
Install a WordPress Caching Plugin
Tweak Admin Screens & Disable WordPress Dashboard Widgets
Fix Slow Loading WooCommerce Dashboard
Block Access to WordPress Admin and Login Pages
Control Autosave Intervals
Switch to Better WordPress Hosting

1. How to Test Performance of WordPress admin area

Before making any changes, it’s important to measure the speed of your WordPress admin area, so you can get an objective measurement of any improvement.

Normally, you can use website speed test tools to check your website’s speed and performance.

However, the WordPress admin area is behind a login screen, so you cannot use the same tools to test it.

Luckily, many modern desktop browsers come with built-in tools to test the performance of any web page you want.

For example, if you’re using Google Chrome, then you can simply go to the WordPress dashboard and open the Inspect tool by right-clicking anywhere on the page.

This will split your browser screen and you will see the Inspect area in the other window either at the bottom or side of your browser window.

Inside the Inspect tool, switch to the Lighthouse tab and click on the Generate Report button.

This will generate a report similar to the Web Vitals report generated by Page Speed Insights.

From here, you can see what’s slowing down your WordPress admin area. For instance, you can see which JavaScript files are taking up more resources and affecting your server’s initial response time.

2. Install WordPress Updates

The core WordPress team works hard on improving performance with each WordPress release.

For instance, the block editor team tests and improves performance in each release. The performance team works on improving speed and performance across the board.

If you are not installing WordPress updates, then you are missing out on these performance improvements.

Similarly, all top WordPress themes and plugins release updates that not only fix bugs but also address performance issues.

To install updates, simply go to Dashboard » Updates page to install any available updates.

For more details, see our guide on how to properly update WordPress (infographic).

3. Update the PHP Version Used by Your Hosting Company

WordPress is developed using an open-source programming language called PHP. At the time of writing this article, WordPress requires at least PHP version 7.4 or greater. The current stable version available for PHP is 8.1.6.

Most WordPress hosting companies maintain the minimum requirements to run WordPress, which means they may not be using the latest PHP version out of the box.

Now, just like WordPress, PHP also releases new versions with significant performance improvements. By using an older version, you are missing that performance boost.

You can view which PHP version is used by your hosting provider by visiting the Tools » Site Health page from your WordPress dashboard and switching to the ‘Info’ tab.

Luckily, all reliable WordPress hosting providers offer an easy way for customers to upgrade their PHP version.

For instance, if you are on Bluehost, then you can simply login to your hosting control panel and click on the Advanced tab in the left column.

From here, you need to click on the MultiPHP Manager icon under the Software section.

On the next page, you need to select your WordPress blog and then select the PHP version that you want to use.

For other hosting companies, see our complete guide on how to update your PHP version in WordPress.

4. Increase PHP Memory Limit

Your web hosting server is like any other computer. It needs memory to efficiently run multiple applications at the same time.

If there is not enough memory available for PHP on your server, then it would slow down your website and may even cause it to crash.

You can check the PHP memory limit by visiting Tools » Site Health page and switching to the Info tab.

You’ll find PHP memory limit under the Server section. If it is less than 500M, then you need to increase it.

You can increase PHP memory limit by simply entering the following line in your wp-config.php file.

define( 'WP_MEMORY_LIMIT', '512M' );

For more details, see our article on increasing the PHP memory limit in WordPress.

5. Monitor WordPress Plugins for Performance

Some WordPress plugins may run inside the WordPress admin area. If plugin authors are not careful, their plugins can easily consume too many resources and slow down your WordPress admin area.

One way to find out about such plugins is by installing and activating the Query Monitor plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item to your WordPress toolbar.

Clicking on it will show performance results for the page you are currently viewing on your website.

This will bring up the Query Monitor console.

Here you need to switch to ‘Queries by Component’ tab on the left side. From here, you can see the performance impact of plugins and find out which one is taking up too many resources.

You can now temporarily disable the slow plugins and see if that improves performance.

If it does, then you can reach out to plugin author and seek support or find an alternative plugin.

6. Install a WordPress Caching Plugin

WordPress caching plugins not only improve your website speed, but they can also help you fix a slow loading admin dashboard.

A good WordPress caching plugin helps you optimize page load speed, CSS and JavaScript delivery, your WordPress database, and more.

This frees up resources on your WordPress hosting server that your WordPress admin area can utilize for improved performance.

We recommend using WP Rocket. It is the best WordPress caching plugin on the market. It works out of the box and makes it super easy to optimize your WordPress performance.

For more details, see our guide on how to properly install and setup WP Rocket in WordPress.

7. Tweak Admin Screens & Disable WordPress Dashboard Widgets

WordPress automatically loads some widgets on the dashboard screen. This includes Quick Draft, Events and News, Site Health, and more.

Some WordPress plugins add their own widgets to the dashboard screen as well. If you have a lot of these widgets loading on your dashboard, it could slow things down.

You can turn off these widgets by simply clicking on the Screen Options button and unchecking the box next to the widgets.

Screen Options to remove unnecessary widgets

Similarly, you can use the Screen Options menu to show and hide sections on different admin screens.

For instance, you can choose the columns you want to see on the posts screen.

8. Fix Slow WooCommerce Admin Dashboard

If you run an online store using WooCommerce, then there are some specific WooCommerce features that can affect the performance of your WordPress admin area.

For instance, you can turn off the WooCommerce dashboard widget by clicking on the Screen Options menu.

Similarly, you can change the information displayed on the Products page.

After a while, your WooCommerce store may add unnecessary data to your WordPress database.

If you are already using WP Rocket, then you can simply switch to the Database tab under plugin settings. From here, you can delete transients and optimize your WordPress database with a click.

9. Lock WordPress Admin Area and Login Pages

Random hackers and DDoS attacks are common internet nuisances that can affect WordPress websites.

These automated scripts access WordPress login pages and attempt to login hundreds of times in a short amount of time.

They may not be able to gain access to your WordPress website, but they would still be able to slow it down.

One easy way to block these scripts is by locking your WordPress admin directory and login pages.

If you are on Bluehost, then you can simply go to your hosting control panel and switch to the Advanced Tab. From here, you need to click on the Directory Privacy icon.

Next, you need to locate wp-admin directory (usually found inside public_html folder).

Then simply click on the Edit button next to it.

Next, you will be asked to provide a name for your protected directory.

Click on the Save button to continue. The control panel will save your options and you’ll need to click on the Go Back button to continue.

After that, you will need to create username and password for the protected folder.

Now, when you visit your WordPress admin area, you will be prompted to enter username and password.

For more details, see our tutorial on how to password protect the WordPress admin directory.

Password Protect WordPress Login Page

Next, you would want to block access to WordPress login page. For this, you’ll need to manually edit .htaccess file on your website and generate a password file.

First, connect to your WordPress website using an FTP client or the File Manager app inside your hosting control panel.

After that, go to the root folder of your website (the root folder is where you can see the wp-admin, wp-includes, and wp-content folders).

Here you need to create a new file and name it .htpasswd.

Next, you need to visit this online tool to generate a .htpasswd string.

You need to use the same username and password that you used for the WordPress admin directory.

Then click on the Generate button.

The tool will generate a username and password string under the output box.

You need to copy and paste this string inside the .htpasswd file you created earlier.

Next, you need to edit the .htaccess file and copy and paste the following code inside it.

### BEGIN BASIC BLOCK
<Files wp-login.php>
AuthType Basic
AuthName "Protected Folder"
AuthUserFile /home/username/public_html/yourwebsite/.htpasswd
Require user jsmith
Satisfy All
</Files>
### END BASIC BLOCK

Don’t forget to replace jsmith with your own username and change AuthUserFile value with the path to your .htpasswd file. You can find it inside the File Manager app.

You can now visit your WordPress login page to see the password protection in action.

10. Manage WordPress Autosave Intervals

The WordPress block editor comes with built-in autosave feature. It allows you to easily restore your content in case you close the editor without saving your changes.

However, if multiple users are working on your website during peak traffic, then all those autosave requests will slow down WordPress admin area.

Now autosave is a crucial feature and we don’t recommend turning it off. However, you can slow it down to reduce the performance impact.

Simply add the following line to your wp-config.php file.

define( 'AUTOSAVE_INTERVAL', 120 )

This line simply tells WordPress to run autosave once every 2 minutes (120 seconds) instead of 1.

Reduce Heartbeat API Calls

WordPress uses something called the heartbeat API to send Ajax calls to a server without reloading a page. This allows WordPress to show other authors that a post is being edited by another user, and it enables plugin developers to show you notifications in real-time.

By default, the API pings back every 60 seconds. If multiple authors are working on your website at the same time, then these server calls can become resource-intensive.

If you are already using WP Rocket, then it will automatically reduce heartbeat API activity to pingback every 120 seconds.

Reduce Heartbeat API activity using WP Rocket

Alternately, you can also use their standalone plugin called Heartbeat Control to reduce Heartbeat API calls.

We recommend reducing them to at least 120 seconds or more.

11. Upgrade or Switch to Better WordPress Hosting

All WordPress performance issues depend on the infrastructure provided by your WordPress hosting providers.

This limits your ability to improve performance to the resources offered by your hosting provider.

The above tips will certainly help you reduce load on your WordPress server, but it may not be enough for your hosting environment.

To improve performance even more, you can move your WordPress site to a new host and sign up with a different hosting provider.

We recommend using Bluehost, as one of the top WordPress hosting companies. Their shared hosting plans come with built-in caching which improves WordPress performance.

However, as your website grows you may need to upgrade your hosting plan.

High traffic sites would benefit from moving to a managed WordPress hosting platform like WP Engine or SiteGround.

At WPBeginner, we use SiteGround to host our website.

We hope this article helped you learn how to fix a slow loading WordPress dashboard. You may also want to see our complete WordPress security handbook or see our pick of the best WordPress plugins to grow your business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix a Slow Loading WordPress Dashboard (Step by Step) first appeared on WPBeginner.

June 16, 2021

How to Remove Unused CSS in WordPress (The Right Way)

Do you want to remove unused CSS in WordPress so your site will load faster?

Unused CSS is any CSS code added by your WordPress theme or plugins that you don’t really need. Removing this CSS code improves WordPress performance and user experience.

In this article, we’ll show you how to easily remove unused CSS in WordPress without breaking your website.

What is Unused CSS in WordPress?

Unused CSS in WordPress is CSS code that loads on your website but isn’t actually needed in order to display the page.

The extra code can make a visitor’s browser take a bit longer to render a page, which creates a bad user experience. The slower loading times can even affect your search rankings, resulting in less traffic to your site.

You can see how unused CSS code is affecting your website by using Google Pagespeed Insights. It will show you a section titled ‘Remove unused CSS’ with details of which CSS files are affecting your loading times.

Why Is Unused CSS Added in WordPress?

CSS is used to style the appearance of your WordPress website. Your WordPress theme includes CSS, with most of it included in a single style.css file.

In addition to your theme’s CSS, your WordPress plugins will also load their own CSS. For instance, WooCommerce will load CSS to display products, a page builder plugin will add its own CSS to display your custom pages, and a form builder plugin will include CSS to style your forms.

Then, you have your web fonts, icon fonts, and other elements that will need to add their own CSS files as well.

Usually, these files are very small and load quickly. However, if your WordPress site has a lot of them, then the effects can add up and have a noticeable impact on your site speed.

How to Remove Unused CSS in WordPress?

There are a few different ways that you can reduce unused CSS on your WordPress website.

However, it would be quite a difficult task to completely remove all unused CSS in WordPress. Because of the way WordPress works behind the scenes, some unused CSS may be hard to find and remove.

That said, we’ll show you two methods to remove unused CSS, and you can choose the one that works best for you.

Method 1. Remove Unused CSS in WordPress using WP Rocket

This method is easier and is recommended for beginners. It greatly improves the overall delivery of CSS files on your WordPress website, including removing most of the unused CSS.

We think it is the best solution for beginners because it is easier and achieves the main goal of providing a better experience for your users. This means your website loads fast on speed testing tools and also feels fast to your users.

First, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab.

Next, you need to scroll down to the CSS files section. From here, you need to check the box next to the ‘Optimize CSS delivery’ option.

This option generates a CSS file that only contains the CSS code needed to display the visible part of your website. It loads that file first, displays the page to your visitors, and then loads other CSS files using a technology called deferred loading.

By removing this render-blocking CSS, your website becomes viewable to users much more quickly than it would if you had to load all the CSS files before the page is displayed.

After enabling the ‘Optimize CSS delivery’ option, click the Save Changes button and wait for WP Rocket to generate the necessary CSS file for all your posts and pages. It will also automatically clear the cache for your website.

Once finished, you can go ahead and test your website performance again using Google Pagespeed Insights.

Additional File Delivery Tweaks to Boost Performance

WP Rocket also allows you to remove query strings from static files, combine Google Fonts files, and minify HTML. All of these tweaks add tiny improvements to your overall speed, which add up to a faster loading experience for your visitors.

You’ll also see options to minify and combine CSS files. These options will reduce HTTP requests and give you an additional speed boost.

However, you’ll need to carefully check your website to make sure that nothing is broken after enabling these settings.

Additionally, you can apply the same optimization for JavaScript files on your website. You can minify and combine them to serve as a single file and defer loading for JavaScript files to improve performance.

For more details, see our step by step tutorial on how to properly setup WP Rocket in WordPress.

Method 2. Remove Unused CSS in WordPress using Asset CleanUp

This method is a little advanced but incredibly powerful and will let you easily remove any unused CSS from any page of your WordPress website.

However, it is a bit complicated and you will need to test your website functionality and appearance thoroughly to make sure nothing is broken.

First, you need to install and activate the Asset Cleanup plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Asset CleanUp » Settings page and switch to the Test Mode tab. From here, you need to turn on the ‘Enable Test Mode’ option.

This allows you to try out different settings and test them as an administrator without affecting website visitors.

After that, you need to visit the Asset CleanUp » CSS/JS Manager page. From here, you can unload unwanted CSS and JavaScript files on a page by page basis.

It will first fetch your homepage and will show you all the CSS and JavaScript files loaded on that page.

You need to scroll down and review the loaded files. If you see a file that you don’t need, then you can unload it for that particular page, post type, or sitewide.

The plugin also allows you to choose specific posts or pages from here, or you can access the same options by editing the post or page as you normally would.

On the post edit screen, you’ll find the Asset CleanUp box just below the post editor.

The plugin will automatically fetch and list all the files and assets loaded when a visitor views this page on your website. You can then simply unload the unused CSS or JavaScript files that you don’t need on that page.

Important: Don’t forget to test your website after removing any unused CSS or JavaScript to make sure that everything is working fine.

Once you are done unloading and removing unused CSS and JavaScript files, you can go to back to the plugin’s settings page and switch off the ‘Test Mode’.

Don’t forget to click on the Update All Settings button to store your changes.

You can now test your website using Google Pagespeed Insights to see the change in the unused CSS notice.

We hope this article helped you learn how to easily remove unused CSS in WordPress. You may also want to follow our complete guide on how much does it cost to build a website, and check out our list of the best managed WordPress hosting.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Remove Unused CSS in WordPress (The Right Way) appeared first on WPBeginner.

June 1, 2021

How Fast PHP & MySQL Can Boost Website Speed (Beginner’s Guide)

Ever wondered what’s the impact of PHP and MySQL on your website speed?

WordPress is written in PHP programming language and uses MySQL as the database. Both programs run on your web server thus impacting overall performance.

In this article, we’ll discuss how fast PHP and MySQL can boost website speed. We’ll also talk about how to enable it for your website.

How Faster PHP + MySQL Affects WordPress Performance

WordPress is mainly written in PHP, a programming language that runs on your web server. It stores your website content in a MySQL database.

Both PHP and MySQL run on your web server as an application. When more users visit your website, PHP and MySQL take up more server resources.

Most websites address this by using a WordPress caching plugin. However, processes like .htaccess rules, PHP extensions, and SQL queries can still increase server load.

Faster PHP and MySQL optimize these regular processes to improve their performance and speed. The more traffic your website gets, the more of a performance improvement you’ll see.

This is where Ultrafast PHP can help.

What is Ultrafast PHP?

Ultrafast PHP is an optimized version of PHP which is built by the team at SiteGround. Since WPBeginner is hosted on SiteGround’s Enterprise hosting plan, we were one of the first websites to try it and see the speed benefits.

Now SiteGround is making this feature available to all their customers on their GrowBig, GoGeek and Cloud hosting plans.

For high-traffic websites, Ultrafast PHP can increase performance by up to 30% and reduce TTFB (time to first byte) by 50%.

Your server load will also be reduced, and it will be able to run up to 20-30% more processes while consuming 15% less memory (RAM).

SiteGround is one of the best WordPress hosting companies on the market. They are also an officially recommended WordPress hosting provider.

Since they use Google Cloud Platform for their servers, this allowed them the flexibility to work on an optimized PHP setup (Ultrafast PHP) that is optimized for their customers’ needs.

Who Needs Ultrafast PHP?

If you have a medium sized WordPress website or an online store, then you need Ultrafast PHP to help you boost performance.

Ultrafast PHP is currently available to users on the GrowBig, GoGeek, and Cloud plans. Usually, these are the users with busier websites that often end up hitting server resource limitations.

This feature is not available to users using the old control panel on SiteGround. However if your hosting account dashboard is using SiteGround’s new client area and Site Tools control panel, then you can turn on Ultrafast PHP. We’ll show you how below.

If your website is super small, then you may not notice much difference. We recommend that you use a caching plugin like WP Rocket or SiteGround’s own SG Optimizer plugin.

If you have a small business website or new blog with not much traffic yet, then you may not need Ultrafast PHP because the latest version of PHP is already optimized for performance. So make sure you are using the latest PHP version for your website.

How to Enable Ultrafast PHP on SiteGround

It is super-easy to enable Ultrafast PHP for your WordPress website on SiteGround. Your hosting account should meet the following criteria:

Your sites are hosted on SiteGround’s GrowBig, GoGeek or Cloud plans
Your account is using the new client area and site tools control panel

Simply log in to your account and click on the ‘Websites’ menu on the top. After that, click on the Site Tools button next to the website where you want to enable Ultrafast PHP.

From here, you need to click on the PHP Manager menu located under the Dev tab in the left column.

Now, you need to click on the Standard PHP option to change it. This will bring up a popup where you can switch to Ultrafast PHP.

Click on the Confirm button to continue.

You will now see a success message informing you that Ultrafast PHP is now enabled for your website.

Testing Your Website Speed after Enabling Ultrafast PHP

You can use Google Pagespeed Insights or any other website speed testing tool to test your performance.

Take a look at metrics like server response time and time to first byte to gauge the performance of your website.

We hope this article helped you learn how fast PHP and MySQL can boost website speed. You may also want to see our complete WordPress performance optimization guide for more tips to speed up your website, and check out the best email marketing services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How Fast PHP & MySQL Can Boost Website Speed (Beginner’s Guide) appeared first on WPBeginner.

April 28, 2021

How to Use WebP Images in WordPress (3 Methods)

Do you want to use WebP images in WordPress?

WebP images are a modern image format that offers better image compression by reducing the file size. This makes your website load faster and saves bandwidth.

In this article, we’ll show you how to easily use WebP images in WordPress.

What is WebP & Why Use WebP Images in WordPress?

WebP is a new file format for images to be used on the web. By using the WebP image format, your images will be 25-34% smaller in file size than PNG and JPEG without losing quality.

If images are slowing down your website, then converting them to WebP format can improve your page load speed test scores.

To learn more about image compression, see our guide on how to optimize images for the web.

Since WebP is a new file format, it is not yet supported by all browsers. However, most modern browsers like Google Chrome, Firefox, and Microsoft Edge support WebP images.

Should You Use WebP images in WordPress?

WebP images can help you speed up your WordPress website. It is a recommend best practice to be used along with a WordPress caching plugin, CDN, and more.

By default, WordPress doesn’t support WebP images and uploading a WebP image will show an error.

To fix that, you will need to use an image compression plugin to convert images into WebP image format. You’ll still upload your images in WordPress supported file formats like PNG, JPEG, and GIF, so that they can be used as a backup.

If your site uses lots of images, and they are slowing down your WordPress blog, then you should definitely consider using WebP images.

Here is how to use WebP images in WordPress. We’ll show you multiple methods, so you can choose one that works best for you:

Using WebP Images in WordPress with EWWW Optimizer
Using WebP Images in WordPress with WP Rocket
Using WebP Images in WordPress with SG Optimizer

Method 1. Using WebP Images in WordPress with EWWW Optimizer

EWWW Image Optimizer plugin is one of the best WordPress image compression plugins that allows you to optimize your WordPress images. It also supports WebP Images and can automatically show them on supported browsers.

First thing you need to do is install and activate the EWWW Image Optimizer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to the Settings » EWWW Image Optimizer page to configure plugin options. You’ll be greeted by a setup wizard, but you can click on the ‘I know what I am doing’ link to exit the wizard.

On the next screen, you will see a bunch of plugin options. Scroll down and check the box next to the ‘WebP Conversion’ option.

After that, click on the Save Changes button to store your settings.

Next, you need to scroll down to the WebP Conversion section. The plugin will now show you some rewrite rules with a red preview image.

You need to click on the ‘Insert Rewrite Rules’ button, and the plugin will automatically try to insert these rewrite rules to your .htaccess file.

If the plugin is successful in adding those rules, then the red image preview will turn into green with the ‘WebP’ text.

Sometimes, the plugin may not be able to insert the rules. In that case, you need to copy the rewrite rules from the plugin’s settings page and paste them at the bottom of your .htaccess file manually.

Once you’re done, return back to the plugin’s settings page and click on the Save Changes button again. If the preview image turns green, then this means you have successfully enabled WebP image delivery on your WordPress site.

Alternately, you can choose from JS WebP Rewriting or <picture> WebP Rewriting methods as your WebP delivery options. These are a little slower than the .htaccess method, but it will get the job done.

Bulk Convert Your Old Images to WebP Version

EWWW Image Optimizer allows you to easily convert your previously uploaded image files to WebP images. Simply go to Media » Library page and switch to the list view.

Next, you need to click on the Screen Options button and change the ‘Number of items per page’ to 999. If you have 1000+ images, then those images will appear on the next page.

This way you will be able to quickly select a large number of images for bulk optimization. Next, click on the Select All checkbox at the top to select all images.

After that, click on the Bulk Actions drop-down menu and select Bulk Optimize option. Finally, click on the Apply button.

On the next screen, the plugin will give you an option to skip the image compression and only convert them to WebP. You can check this option if your images are already optimized.

After that, click on the ‘Scan for Unoptimized Images’ button to continue. The plugin will then show you the number of images it found, so you can click on the Optimize button to proceed.

Your images will now be optimized, and EWWW optimizer will generate WebP versions for your images.

Testing Your WebP Image Delivery

Once you have optimized your images, you can go to a blog post or page containing several images. Take the mouse over to any image and right-click to open the image in a new tab.

This will open the image in a new browser tab, and you’ll be able to see that it has a .webp extension in the address bar.

If the plugin is unable to serve the webp image, then you can go back to the plugin’s settings page. From here you can change the WebP delivery option to ‘JS WebP Rewriting’ or ‘<picture> WebP Rewriting’ methods.

Method 2. Using WebP Images in WordPress with Imagify

Imagify is a WordPress image optimization plugin created by the folks behind WP Rocket, the best WordPress caching plugin. It allows you to easily optimize and convert images to WebP image format.

First thing you need to do is install and activate the Imagify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Imagify page to configure plugin settings. From here. click on the ‘Create a Free API Key’ button to continue.

You’ll be asked to enter an business email address after that you can check your inbox for an email containing your API key. Copy and paste the key on plugin’s settings page and click on the Save Changes button.

Next, you need to scroll down to the Optimization section. There you need to check the options next to ‘Create webp versions of images’ and ‘Display images in webp format on the site’ options.

Below that, you can choose from two delivery methods to display WebP images in WordPress. The first one is .htaccess method, and the second one is by using <picture> tag.

The .htaccess method is faster, but it does not work if you are using a CDN service. <picture> tag method works with CDNs too, but it may break some WordPress themes.

You can choose either one that works well for your site. After that, click on the ‘Save & go to bulk optimizer’ button at the bottom.

This will bring you to Media » Bulk Optimization page. The plugin will automatically start optimizing all your WordPress images in the background.

If you have a lot of images, then this may take a while. Don’t worry, you can close the page and come back to it later because closing the page will not stop the image optimization process.

Testing Your WebP Images in WordPress

Once the optimization is done, you can visit a page or post containing a few images. Take your mouse over to an image and then right-click to select ‘Open image in new tab’.

This will open the image in a new browser tab, and you’ll be able to see .webp extension in the address bar.

Method 3. Using WebP Images in WordPress with SG Optimizer

This method is recommended if you are a SiteGround user.

SiteGround is one of the best WordPress hosting companies. They offer a free SG Optimizer plugin to their users which allows you to optimize your WordPress performance. It also includes the option to optimize WordPress images.

First, you need to install and activate the SG Optimizer plugin.

Upon activation, the plugin will add a new menu item to your admin sidebar labeled ‘SG Optimizer’. Clicking on it will take you to the plugin’s settings page.

From here you can turn on the caching settings if you want to use SiteGround’s built in caching system.

After that, you can switch to the Media Optimization tab and turn on the ‘Generate WebP Copies of New Images’ option.

Below that, you’ll see the option to ‘Bulk Generate WebP Files’. Clicking on it will start generating WebP copies for all image files in your WordPress media library.

Once finished, your WordPress site will start serving WebP images.

Testing WebP Images in SG Optimizer

To see if your website is serving WebP images, you need to open a page on your site with a few images.

After that, right click and select Inspect tool. This will open the developer console where you need to switch to the Network tab.

From here, click on the ‘img’ tab and then reload the page (CTRL+R on Windows and Command+R on Mac). As your website reloads, you will see all the images loaded in the developer console.

We hope this article helped you learn how to use WebP images in WordPress. You may also want to see our guide on how to create an email newsletter, and our comparison of the best business phone services for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use WebP Images in WordPress (3 Methods) appeared first on WPBeginner.

April 14, 2021

How to Optimize Core Web Vitals for WordPress (Ultimate Guide)

Do you want to optimize core web vitals for WordPress?

Core Web Vitals is an initiative by Google which helps website owners improve user experience and quality of their websites. These signals are crucial for the success of any website.

In this guide, we’ll show you how to easily optimize Google Core Web Vitals for WordPress without any special technical skills.

Here is a quick overview of what we’ll cover in this guide.

What are Google Core Web Vitals?
How to Test Your Google Core Web Vitals Score
Why are Core Web Vitals Important?
How to Improve Your Core Web Vitals in WordPress (7 Tips)

What are Google Core Web Vitals?

Google Core Web Vitals are a set of website performance metrics that Google considers important in a website’s overall user experience. These web vital scores will be a part of Google’s overall page experience score that will impact your SEO rankings.

The truth is that nobody likes a slow-loading website including Google.

Even if your website loads fast, it may not be fully functional for users to do what they want to do or access the information they need.

This is what Web Vitals helps you measure. How quickly does your website loads, becomes visible, and is ready for your users?

To do that, Google uses three quality tests (Web Vitals).

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

Now the names of these tests may sound too technical but what they do is quite easy to understand.

Let’s see how each Web Vitals test works, what they measure, and how you can improve your score..

Largest Contentful Paint – LCP

Largest Contentful Paint or the LCP, looks for how quickly the main content (whether it is an image, article, or description) becomes visible to the users.

For example, your website might load fast, but the largest content may not appear on the screen as quickly as the rest of the page.

Other speed test tools will give you a high score, but from user’s point of view, the page is still slow.

This is why Google measures the LCP as part of their web vital score, so website owners can have a more clear understanding.

First Input Delay (FID)

First Input Delay (FID) measures the time it takes a user’s browser to actually be able to begin processing event handlers in response to a user’s interaction.

In plain english, let’s suppose a user is on your contact form page. They fill out the form and click on the Submit button. FID, will measure how quickly your website processes that interaction.

An even simpler example would be the time from when a user clicks on a link to the time their browser starts processing the next sequence of events.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the time it takes for a website to become visually stable.

As a website loads, some elements take more time to load than others. During this time, your website’s content may keep moving on the screen.

For instance, if a user is reading a paragraph on a mobile device and a video embed loads above it, this makes the entire content move down. This can be really frustrating if a user was trying to accomplish an action such as adding a product to cart where the button shift down due to other items moving on the page.

How to Test Your Google Core Web Vitals Score

The easiest way to test your Google Core Web Vitals Score is by using the Page Speed Insights tool. Simply enter the URL you want to test and click on the Analyze button.

The core vital results are displayed under the section titled ‘Field Data’ section.

To make it simpler, you will see a message at the top saying ‘[…] field data shows that this page passes the Core Web Vitals assessment’.

In the chart below, you can view the actual score of all three core vitals. Here is how much you need to score to pass the core Web Vitals tests for each item.

Largest Contentful Paint (LCP) – 2.5 seconds
First Input Delay (FID) – Less than 100 milliseconds
Cumulative Layout Shift (CLS) – Less than 0.1

How to View Google Core Web Vitals for Full Website?

Now Page Speed Insights tool allows you to check an individual page. If the page you are checking is the root of your domain name, then you can also click on the ‘Show Origin Summary’ checkbox.

This will show you the score for all pages served from this origin.

However, to really drill down deep, you can access the Core Web Vitals report in your Google Search Console dashboard as well.

This allows you to see how many URLs on your website passed the tests, which URLs need improvement, and which pages have a poor score.

To get even more detailed reports for Web Vitals, you can use the lighthouse speed test by going to Web.dev Measure tool, or by using the built-in test inside Google Chrome browser.

Simply open a website in Chrome, right click anywhere on the screen, and then select the Inspect option. In the tabs, you will see an option called Lighthouse.

After that, click the Generate Report button.

Note: You must do the Chrome test in Incognito mode for the most accurate results. Otherwise your browser extensions may negatively impact the core web vital score it shows you.

Why are Core Web Vitals Important?

Core Web Vitals are important because they reflect how your website performs for the users. It is focused not just on the faster loading of a website but on how quickly users can actually use it.

According to a recent study, a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.

That’s why it is crucial to optimize your website for speed and performance. However, most performance measuring tools didn’t really account for the quality of user experience.

A faster website with poor user experience is still costing you conversions, fewer page views, and poor customer satisfaction. Improving core Web Vitals helps you remedy that.

User experience is also an important factor in SEO rankings. Google has already announced that starting in May 2021 the search algorithm update will include page experience as one of the ranking factors.

That being said, let’s see how you can easily improve your core Web vitals to offer a better user experience on your website.

How to Improve Your Core Web Vitals in WordPress (7 Tips)

Improving your core Web Vitals score in WordPress is not that difficult. Using some essential performance optimization tips you can easily pass the Web Vitals score.

1. Optimize Your WordPress Hosting

Your WordPress hosting company plays the most significant role in your website’s performance.

They are able to optimize their servers for WordPress which gives your website rock-solid platform to build upon.

We recommend using SiteGround for a high-performance website. They are one of the officially recommended WordPress hosting companies, and we use SiteGround for WPBeginner website.

To give your website the performance boost it needs, SiteGround uses Google Cloud Platform for their servers along with ultrafast PHP.

Their SG Optimizer plugin is used by over a million websites. It automatically makes further performance enhancements and turns on built-in caching which does everything WP Rocket does and more.

It’s important to note, that their SG Optimizer plugin only works on SiteGround hosting accounts, and these performance optimizations are available for all plans including the lowest option.

If you’re using another WordPress hosting provider, then we recommend using WP Rocket along with few other tools to achieve better core web vitals score.

WP Rocket is the best WordPress caching plugin on the market. It allows you to easily set up caching on your WordPress website without going into any technical details of server management.

2. Improving Largest Content Paintful (LCP) Score

As mentioned earlier, the Largest Content Paintful (LCP) is literally the largest content part within the viewport of a page. For instance, on a blog post, this could be the featured image or the article text.

The quicker this content loads the higher your LCP score would be.

How do you know which content is considered the largest by the test? Well, you need to scroll down to the test results and expand the ‘Largest Contentful Paint element’ tab.

You’ll see the elements considered for the LCP score. If it is a larger image, then you can try replacing it with a smaller image or an image with lower file size and quality. See our guide on how to optimize images for web performance.

If it is text, then you can try breaking it into paragraphs and headings.

3. Improving First Input Delay (FID) Score

First Input Delay score measures the time between a user clicking on something on your website and their browsers starting processing elements.

The most important tip to improve that is by using a better web hosting or even managed WordPress hosting platform.

Another easy way to improve FID score is by using a caching plugin like WP Rocket. It comes with a built-in feature that allows you to optimize file delivery.

First you would need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After that, go to Settings » WP Rocket page and switch to the File Optimization tab.

Scroll down to the bottom of the page and check the box next to the ‘Load JavaScript deferred’ option.

Don’t forget to click on the Save Changes button to store your changes.

Deferring JavaScript allows your website to load without waiting for JavaScript to be loaded. This improves First Input Delay (FID) Score for pages where JavaScript may be the cause.

4. Improving Cumulative Layout Shift (CLS) Score

Cumulative Layout Shift (CLS) score is affected when different elements on a web page are loading slowly and making other elements on the screen move.

You can view which elements are affecting the CLS score by expanding the ‘Avoid large layout shifts’ tab in the Page Speed Insights results.

This will show you the elements that are causing the most layout shift impact during page load.

To make sure that the visual layout of your page does not shift as other items load, you need to tell browsers about the dimensions (width and height) of the elements like images, video embeds, Ads such as Google AdSense, and more.

WordPress automatically adds height and width attributes to images you add. However, you can still check all other media particularly embeds to make sure that all of them have height and width attributes.

One way to do that is by using the Inspect Tool. Simply right-click in your browser and select Inspect to open the developer console.

You can then point and click on different page elements to highlight their source code. There, you can see if the element has width and height attributes defined.

5. Eliminate Render Blocking Elements

Render blocking elements are the elements that are slower to load but are blocking other elements from loading first. This affects your overall Web Vitals score and user experience on your website.

Page Speed Insights results will show you the render blocking elements. These are usually JavaScript or CSS files added by your WordPress plugins, third-party tools like Google Analytics, Facebook Pixel, Google Ads, and more.

However, most such elements are programmatically added to your site by different plugins or theme. This makes it harder for a beginner user to remove or properly load them.

We have a step by step guide on how to easily eliminate render blocking elements in WordPress without messing with any code on your website.

6. Properly Size Images in WordPress

Another common cause of lower core Web Vitals score is very large images. Many WordPress users upload high-resolution images to their websites which take longer to load and in most cases are not necessary.

This becomes even more problematic for users on mobile devices. Your responsive WordPress theme and WordPress will automatically fit the image to user’s mobile screen but they would still be loading a larger file.

We have a detailed guide on how to properly optimize images for your WordPress website without losing quality or affecting the performance.

7. Use a CDN to Server to Improve Web Vitals Score

CDN or content delivery network are third-party services that allow you to serve static content of your website from multiple servers around the globe.

This allows users to download those static files like images and CSS from servers that are nearest to them. It also reduces load on your website which can then continue loading other elements.

You can use a cloud firewall app like Sucuri which comes with a built-in CDN service. Sucuri also helps you block malicious and spam requests which further frees up your website resources.

You can also use Cloudflare free CDN as an alternative. It comes with a basic firewall protection and CDN service that would improve your website’s web vitals score.

We hope this guide helped you learn how to optimize core web vitals for WordPress. Another important aspect of good user experience is security. We recommend that you follow our WordPress security checklist to make sure that your website performance is not affected by spam or DDoS attacks.

You may also want to see our comparison of best video editing software and best webinar platforms to create performance optimized media content that doesn’t slow down your website speed.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Optimize Core Web Vitals for WordPress (Ultimate Guide) appeared first on WPBeginner.

August 4, 2020

How to Fix Render-Blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress?

If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scripts and CSS. However, it does not provide any details on how to do that on your WordPress site.

In this article, we’ll show you how to easily fix render-blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

What is Render-Blocking JavaScript and CSS?

Render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files.

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What is Google PageSpeed Score?

Google PageSpeed Insights is a website speed test tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you guidelines to improve the speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many website SEO metrics that help Google determine how to rank your site. The reason speed is so important is because it improves user experience on your site.

Better user experience requires a lot more than just speed. You also need to offer useful information, a better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers a great user experience.

During the last WPBeginner redesign, we kept our focus on speed as well as improving user experience.

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can, and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render-blocking JavaScript and CSS in WordPress.

We will cover two methods that will fix the render-blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

1. Fix Render Blocking Scripts and CSS with WP Rocket

For this method, we’ll be using the WP Rocket plugin. It is the best WordPress caching plugin on the market and allows you to quickly improve your website performance without any technical skills or complicated set up.

First, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WP Rocket works out of the box, and it will turn on caching with optimal settings for your website. You can learn more about it in our complete guide on how to properly install and set up WP Rocket in WordPress.

By default, it does not turn on JavaScript and CSS optimization options. These optimizations can potentially affect your website’s appearance or some features, which is why the plugin allows you to enable these settings optionally.

To do that, you need to visit Settings » WP Rocket page and then switch to the ‘File Optimization’ tab. From here, scroll to the CSS Files section and check the boxes next to Minify CSS, Combine CSS Files, and Optimize CSS Delivery options.

Note: WP Rocket will attempt to minify all your CSS files, combine them, and only load CSS needed for the visible part of your website. This could affect your website’s appearance, so you need to thoroughly test your website on multiple devices and screen sizes.

Next, you need to scroll to the JavaScript Files section. From here, you can check all the options for maximum performance improvement.

You can minify and combine JavaScript files like you did for CSS.

You can also stop WordPress from loading jQuery Migrate file. It is a script that WordPress loads to provide compatibility for plugins and themes using old versions of jQuery.

Most websites don’t need this file, but you would still want to check your website to make sure that removing it does not affect your theme or plugins.

Next, scroll down a little further and check the boxes next to ‘Load JavaScript Defered’ and ‘Safe Mode for jQuery’ options.

These options delay loading non-essential JavaScripts, and the jQuery safe mode allows you to load jQuery for themes that may use it inline. You can leave this option unchecked if you are certain that your theme does not use inline jQuery anywhere.

Don’t forget to click on the Save Changes button to store your settings.

After that, you may also want to clear cache in WP Rocket before testing your website again with Google Page Speed Insights.

On our test site, we were able to achieve 100% score on Desktop and render-blocking issue was solved in both mobile and desktop scores.

2. Fix Render Blocking Scripts and CSS with Autoptimize

For this method, we will be using a separate plugin made specifically for improving delivery of your website’s CSS and JS files. While this plugin gets the job done, it does not have the other powerful features that WP Rocket has.

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

First, you need to check the box next to ‘Optimize JavaScript Code’ option under the JavaScript Options block. Make sure that ‘Aggregate JS-files’ option is unchecked.

Next, scroll down to the CSS Options box and check the ‘Optimize CSS Code’ option. Make sure that ‘Aggregate CSS-files’ option is unchecked.

You can now click on the ‘Save Changes and Empty Cache’ button to store your settings.

Go ahead and test your website with the Page Speed Insights tool. On our demo site, we were able to fix the render-blocking issue with these basic settings.

If there are still render-blocking scripts, then you need to come back to the plugin’s settings page and review options under both JavaScript and CSS options.

For instance, you can allow the plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

Once you are done, go ahead and check your website again with the Page Speed tool.

How does it work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

This allows you to fix the render-blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

Troubleshooting

Depending on how the plugins and your WordPress theme uses JavaScript and CSS, it could be quite challenging to completely fix all render-blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break the functionality of such plugins, or they could behave unexpectedly.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. WP Rocket allows you to fix that by manually adding Critical CSS required to display the above fold area of your theme.

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

We hope this article helped you learn how to fix render-blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide on how to speed up WordPress performance for beginners, and our comparison of the best managed WordPress hosting companies.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.