How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

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 WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

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 WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

18 Useful Tricks To Speed Up WordPress & Boost Performance

Do you want to speed up your WordPress site? Fast loading pages improve user experience, increase your pageviews, and help with your WordPress SEO. In this article, we will share the most useful WordPress speed optimization tips to boost WordPress performance and speed up your… Read More »

The post 18 Useful Tricks To Speed Up WordPress & Boost Performance appeared first on WPBeginner.

Do you want to speed up your WordPress site? Fast loading pages improve user experience, increase your pageviews, and help with your WordPress SEO. In this article, we will share the most useful WordPress speed optimization tips to boost WordPress performance and speed up your website.

Speed up WordPress - Ultimate Guide

Unlike other “X best WordPress caching plugin” lists or generic “X tips to speeding up WordPress” tutorials, this article is a comprehensive guide to WordPress performance optimization.

We include everything from why speed is important, what slows down your WordPress site to actionable steps that you can take to improve your WordPress speed immediately.

To make it easy, we have created a table of contents to help you navigate through our ultimate guide to speeding up your WordPress site.

Table of Contents

Basics of WordPress Performance

Speeding Up WordPress in Easy Steps (No Coding)

WordPress Performance Optimization Best Practices

Fine-Tuning WordPress for Speed (Advanced)

Why Speed is Important for Your WordPress Site?

Studies show that from 2000 to 2016, the average human attention span has dropped from 12 seconds to 7 seconds.

What does this mean for you as a website owner?

You have very little time to show users your content and convince them to stay on your website.

A slow website means users will potentially leave your website before it even loads.

According to a StrangeLoop case study that involved Amazon, Google, and other larger sites, 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.

How slow websites cost you money

On top of that, Google and other search engines have already started penalizing slower websites by pushing them down in the search results which means lower traffic for slow websites.

To sum it all up, if you want more traffic, subscribers, and revenue from your website, then you must make your WordPress website FAST!

How to Check Your WordPress Website Speed?

Often beginners think that their website is OK just because it doesn’t feel slow on their computer. That’s a HUGE mistake.

Since you frequently visit your own website, modern browsers like Chrome store your website in cache and automatically prefetch it as soon as you start typing an address. This makes your website load almost instantly.

However, a normal user who is visiting your website for the first time may not have the same experience.

In fact, users in different geographical locations will have a completely different experience.

This is why we recommend that you test your website speed using a tool like Pingdom.

It is a free online tool that allows you to test your website’s speed from different locations.

Pingdom site speed tool

After you run your website speed test, you might be wondering what’s a good website speed that I should aim for?

A good page load time is under 2 seconds.

However, the faster you can make it, the better it is. A few milliseconds of improvements here and there can add up to shaving off half or even a full second from your load time.

[Back to Top ↑]

What Slows Down Your WordPress Website?

Your speed test report will likely have multiple recommendations for improvement. However most of that is technical jargon which is hard for beginners to understand.

However understanding what slows down your website is key to improving performance and making smarter long-term decisions.

The primary causes for a slow WordPress website are:

  • Web Hosting – When your web hosting server is not properly configured it can hurt your website speed.
  • WordPress Configuration – If your WordPress site is not serving cached pages, then it will overload your server thus causing your website to be slow or crash entirely.
  • Page Size – Mainly images that aren’t optimized for web.
  • Bad Plugins – If you’re using a poorly coded plugin, then it can significantly slow down your website.
  • External scripts – External scripts such as ads, font loaders, etc can also have a huge impact on your website performance.

Now that you know what slows down your WordPress website, let’s take a look at how to speed up your WordPress website.

Importance of Good WordPress Hosting

Your WordPress hosting service plays an important role in website performance. A good shared hosting provider like BlueHost or Siteground take the extra measures to optimize your website for performance.

However, on shared hosting you share the server resources with many other customers. This means that if your neighboring site gets a lot of traffic, then it can impact the entire server performance which in turn will slow down your website.

On the other hand, using a managed WordPress hosting service give you the most optimized server configurations to run WordPress. Managed WordPress hosting companies also offer automatic backups, automatic WordPress updates, and more advanced security configurations to protect your website.

We recommend WPEngine as our preferred managed WordPress hosting provider. They’re also the most popular one in the industry. (See our special WPEngine coupon).

For enterprise WordPress hosting, we recommend using Pagely because they’re the best in business.

[Back to Top ↑]

Speeding Up WordPress in Easy Steps (No Coding)

We know that making changes to your website configuration can be a terrifying thought for beginners, especially if you’re not a tech-geek.

But don’t worry, you’re not alone. We have helped thousands of WordPress users improve their WordPress performance.

We will show you how you can speed up your WordPress site with just a few clicks (no coding required).

If you can point-and-click, you can do this!

Install a WordPress Caching Plugin

WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website. To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user.

This process involves a lot of steps, and it can really slow down your website when you have multiple people visiting your site at once.

That’s why we recommend every WordPress site use a caching plugin. Caching can make your WordPress site anywhere from 2x to 5x faster.

Here’s how it works: Instead of going through the whole page generation process every time, your caching plugin makes a copy of the page after the first load, and then serves that cached version to every subsequent user.

How caching works

As you can see in the graphics above, when a user visits your WordPress site, which is built using PHP, your server retrieves information from a MySQL database and your PHP files, and then it’s all put together into a HTML content which is served served to the user. It’s a long process, but you can skip a lot of it when you use caching instead.

There are a lot of caching plugins available for WordPress, but we recommend using the WP Super Cache plugin. Check out our step by step guide on how to install and setup WP Super Cache on your WordPress site. It’s not difficult to set up, and your visitors will notice the difference.

Note: If you’re using a managed WordPress hosting provider, then you don’t need a caching plugin because they take care of it for you.

[Back to Top ↑]

Optimize Images for Speed

Optimize images for the web

Images bring life to your content and help boost engagement. Researchers have found that using colored visuals makes people 80% more likely to read your content.

But if your images aren’t optimized, they could be hurting more than helping. In fact, non-optimized images are one of the most common speed issues we see on beginner websites.

Before you upload a photo directly from your phone or camera, we recommend that you use photo editing software to optimize your images for web.

In their original formats, these photos can have huge file sizes. But based on the image file format and the compression you choose in your editing software, you can decrease your image size by up to 5x.

At WPBeginner, we only use two image formats: JPEG and PNG.

Now you might be wondering: what’s the difference?

Well, PNG image format is uncompressed. When you compress an image it loses some information, so an uncompressed image will be higher quality with more detail. The downside is that it’s a larger file size, so it takes longer to load.

JPEG, on the other hand, is a compressed file format which slightly reduces image quality, but it’s significantly smaller in size.

So how do we decide which image format to choose?

  • If our photo or image has a lot of different colors, then we use JPEG.
  • If it’s a simpler image or we need a transparent image, then we use PNG.

The majority of our images are JPEGs.

Below is a comparison chart of the file sizes and different compression tool that we could have used for the StrangeLoop image used above.

Image Speed Chart

As you can see in the chart, the image format you use can make a HUGE difference on your website performance.

For details on exactly how to optimize your images using Photoshop and other popular editing tools, without sacrificing quality, see our step by step guide on how to save images optimized for web.

[Back to Top ↑]

WordPress Performance Optimization Best Practices

After installing a caching plugin and optimizing your images, you’ll notice your site will start loading a lot faster.

But if you really want to keep your website as fast as possible, you’ll need to use the best practices listed below.

These tips aren’t too technical, so you don’t need to know any code to implement them. But using them will prevent common problems that will slow down your website.

Keep Your WordPress Site Updated

Keep your WordPress site up to date

As a well maintained open source project, WordPress is updated frequently. Each update will not only offer new features, but also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too.

As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.

For more details on the importance of updates, see our article on why you should always use the latest WordPress version.

[Back to Top ↑]

Use Excerpts on Homepage and Archives

Using excerpts

By default, WordPress displays the full content of each article on your homepage and archives. This means your homepage, categories, tags, and other archive pages will all load slower.

Another disadvantage of showing full articles on these pages is that users don’t feel the need to visit the actual article. This can reduces your pageviews, and the time your users spend on your site.

In order to speed up your loading times for archive pages, you can set your site to display excerpts instead of the full content.

You can navigate to Settings » Reading and select “For each article in a feed, show: Summary” instead of “Full Text.”

Display excerpts instead of full text to boost WordPress speed

For more details on the pros and cons of displaying summaries, see our article on full post vs summary (excerpt) in your WordPress archive pages.

[Back to Top ↑]

Split Comments into Pages

Paginated comments

Getting lots of comments on your blog posts? Congratulations! That’s a great indicator of an engaged audience.

But the downside is, loading all those comments can impact your site’s speed.

WordPress comes with a built-in solution for that. Simply go to Settings » Discussion and check the box next to the “Break comments into pages” option.

Break comments into pages in WordPress

For more detailed instructions, see our guide on how to paginate comments in WordPress.

[Back to Top ↑]

Use a Content Delivery Network (CDN)

Remember how we mentioned above that users in different geographical locations may experience different loading times on your site?

That’s because the location of your web hosting servers can have an impact on your site speed. For example, let’s say your web hosting company has its servers in the United States. A visitor who’s also in the United States will generally see faster loading times than a visitor in India.

Using a CDN, or Content Delivery Network, can help to speed up loading times for all of your visitors.

A CDN is a network made up of servers all around the world. Each server will store “static” files used to make up your website. Static files are unchanging files such as images, CSS, and JavaScript, unlike your WordPress pages which are “dynamic” as explained above.

When you use a CDN, every time a user visits your website they are served those static files from whichever server is closest to them. Your own web hosting server will also be faster since the CDN is doing a lot of the work.

You can see how it works in this infographic.

What is a CDN

We use MaxCDN on all our projects, including here on WPBeginner. It works well with WordPress websites and complements your existing WordPress caching plugins for even faster loading times. See our guide on how to install and setup WordPress CDN solution MaxCDN to get started.

[Back to Top ↑]

Don’t Upload Videos Directly to WordPress

YouTube

You can directly upload videos to your WordPress site, and it will automatically display them in an HTML5 player…

But you should NEVER do that!

Hosting videos will cost you bandwidth. You could be charged overage fees by your web hosting company, or they may even shut down your site altogether, even if your plan includes “unlimited” bandwidth.

Hosting videos also increases your backup sizes tremendously, and makes it difficult for you to restore WordPress from backup.

Instead, you should use a video hosting service like YouTube, Vimeo, DailyMotion, etc., and let them take care of the hard work. They have the bandwidth for it!

WordPress has a built-in video embed feature, so you can copy and paste your video’s URL directly into your post and it will embed automatically.

Find out more details on how it works in our guide on embedding videos in WordPress.

[Back to Top ↑]

Use a Theme Optimized For Speed

Choosing a theme optimized for speed

When selecting a WordPress theme for your website, it’s important to pay special attention to speed optimization. Some beautiful and impressive-looking themes are actually poorly coded and can slow your site way down.

It’s usually better to go with a simpler theme and use quality plugins to get the features you need, than to choose a theme that’s bloated with complex layouts, flashy animations, and other unnecessary features.

Premium WordPress theme shops like StudioPress, Themify, and Array Themes offer themes that are well coded and optimized for speed. You can also check out our article on selecting the perfect WordPress theme for advice on what to look for.

Before you activate your new theme, see our guide on how to properly switch your WordPress theme for a smooth transition.

[Back to Top ↑]

Use a Faster Slider Plugin

Faster slider

Sliders are another common web design element that can make your website slow.

Even if your images are all optimized as described above, a poorly coded slider plugin will mean all your work is wasted.

We compared the best WordPress slider plugins for performance and features, and Soliloquy was the fastest by far.

Here’s how it compares to other popular slider plugins.

Slider Plugin Page Load time Requests Page size
Soliloquy 1.34 secs 26 945 KB
Nivo Slider 2.12 secs 29 1 MB
Meteor 2.32 secs 27 1.2 MB
Revolution Slider 2.25 secs 29 1 MB
LayerSlider 2.12 secs 30 975 KB

[Back to Top ↑]

Use a Faster Gallery Plugin

If you have a photography website or a portfolio, then you’ll probably want to use an image gallery plugin to display your photos.

It’s really important that you use a WordPress gallery plugin that is optimized for speed.

We recommend using Envira Gallery, which is the best WordPress gallery plugin in the market. It allows you to create beautiful image galleries that are lightning fast to load.

We tested its speed compared to a couple of other popular gallery plugins, and found that Envira Galley is almost twice as fast:

Gallery Plugin Page Load time Requests Page size
Envira Gallery 1.08 secs 24 1MB
Foo Gallery 1.89 secs 23 357.1KB
NextGEN 1.88 secs 33 518KB

[Back to Top ↑]

Fine-Tuning WordPress for Speed (Advanced)

By using the WordPress optimization best practices and basic speed tips listed above, you should see a big improvement in your site’s loading times.

But every fraction of a second counts. If you want to get the very fastest speed possible, you’ll need to make a few more changes.

The following tips are a little more technical, with some requiring you to modify your site files or have a basic understanding of PHP. You’ll want to make sure to backup your site first just in case.

Split Long Posts into Pages

Split long posts into pages

Readers tend to love blog posts that are longer and more in-depth. Longer posts even tend to rank higher in search engines.

But if you’re publishing long form articles with lots of images, it could be hurting your loading times.

Instead, consider splitting up your longer posts into multiple pages.

WordPress comes with built-in functionality to do that. Simply add the <!––nextpage––> tag in your article where you want to split it into next page. Do that again if you want to split the article on to the next page as well.

For more detailed instructions, see our tutorial on post pagination – how to split WordPress posts into multiple pages.

[Back to Top ↑]

Reduce External HTTP Requests

Cross domain http requests

Many WordPress plugins and themes load all kinds of files from other websites. These files can include scripts, stylesheets, and images from external resources like Google, Facebook, analytics services, and so on.

It’s ok to use a few of these. Many of these files are optimized to load as quickly as possible, so it’s faster than hosting them on your own website.

But if your plugins are making a lot of these requests, then it could slow down your website significantly.

You can reduce all these external HTTP requests by disabling scripts and styles or merging them into one file. Here’s a tutorial on how to disable your plugins’ CSS files and JavaScript.

[Back to Top ↑]

Reduce Database Calls

WordPress database calls

Note: This step is a little more technical and will require basic knowledge of PHP and WordPress template files.

Unfortunately, there are a lot of poorly coded WordPress themes out there. They ignore WordPress standard practices and end up making direct database calls, or too many unnecessary requests to the database. This can really slow down your server by giving it too much work to do.

Even well-coded themes can have code that makes database calls just to get your blog’s basic information.

In this example, every time you see <?php, that’s the start of a new database call:

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php language_attributes(); ?>">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> 
charset=<?php bloginfo('charset'); ?>" />

You can’t blame theme developers for that. They simply have no other way to find out what language your site is in.

But if you are customizing your site using a child theme, then you can replace these database calls with your specific information in order to reduce all those database calls.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Review your parent theme for instances like this that can be easily replaced with static information.

[Back to Top ↑]

Optimize WordPress Database

WordPress database optimization

After using WordPress for a while, your database will have lots of information that you probably don’t need any more. For improved performance, you can optimize your database to get rid of all that unnecessary information.

This can be easily managed with the WP-Sweep plugin. It allows you to clean your WordPress database by deleting things like trashed posts, revisions, unused tags, etc. It will also optimize your database’s structure with just a click.

See our guide on how to optimize and clean up your WordPress database for improved performance.

[Back to Top ↑]

Limit Post Revisions

Revisions in WordPress

Post revisions take up space in your WordPress database. Some users believe that revisions can also affect some database queries run by plugins. If the plugin doesn’t specifically exclude post revisions, it might slow down your site by searching through them unnecessarily.

You can easily limit the number of revisions WordPress keeps for each article. Simply add this line of code to your wp-config.php file.

define( 'WP_POST_REVISIONS', 4 );

This code will limit WordPress to only save your last 4 revisions of each post or page, and discard older revisions automatically.

[Back to Top ↑]

Disable Hotlinking and Leaching of Your Content

Prevent image theft in WordPress

If you’re creating quality content on your WordPress site, then the sad truth is that it’ll probably get stolen sooner or later.

One way this happens is when other websites serve your images directly from their URLs on your website, instead of uploading them to their own servers. In effect, they’re stealing your web hosting bandwidth, and you don’t get any traffic to show for it.

Simply add this code to your .htaccess file to block hotlinking of images from your WordPress site.

#disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?wpbeginner.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

Note: Don’t forget to change wpbeginner.com with your own domain.

You may also want to check our article showing 4 ways to prevent image theft in WordPress.

Some content scraping websites automatically create posts by stealing your content from your RSS feed. You can check out our guide on preventing blog content scraping in WordPress for ways to deal with automated content theft.

[Back to Top ↑]

That’s it! We hope this article helped you learn some useful tricks to speed up WordPress and boost performance.

Go ahead and try out a couple of these techniques. Be sure to test your site’s speed before and after, and let us know your results in the comments.

You might also be interested in our case study of how we optimized List25 performance by 256%. It has a few more advanced optimization tips for you.

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 18 Useful Tricks To Speed Up WordPress & Boost Performance appeared first on WPBeginner.

Speeding up WordPress: How We Optimized List25 Performance by 256%

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site… Read More »

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site to boost performance.

You have probably heard WordPress speed is important for SEO. A faster site has better user engagement, more pageviews, and better sales. In a strangeloop case study, they found that a one-second delay can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

Strangeloop Speed Case Study

So how do you actually speed up WordPress?

Well, instead of just sharing a list of speed tips, we decided to do a full case-study to show you the results from our List25 site along with how we accomplished it all.

Overview

List25 is an entertainment blog started by our founder Syed Balkhi. The site has over 1.5 million subscribers, and the YouTube channel has over quarter BILLION views.

The content on the site is mostly images and videos which takes up terabytes of bandwidth, so overall speed optimization was crucial for us to keep the costs down, reduce page abandonment and improve time on site.

Before we started the optimization, our homepage took 2.21 seconds to load according to Pingdom. After we were done, our page load time dropped to 1.21 seconds (~45% faster).

During this optimization, we were able to speed up our server response time, improve our page speed performance score, reduce the number of total request, and improve the overall load time.

Let’s take a look at the optimization techniques that helped us speed up our WordPress site.

WordPress Hosting

Having a good web host is crucial for your website speed. As our site became more popular, we simply outgrew our previous hosting company (HostGator).

Their servers simply couldn’t handle a site of this size because List25 receives tens of millions of pageviews. HostGator is great for smaller sites, but not for something of this magnitude.

We looked at various managed WordPress hosting options, and eventually ended up using SiteGround for hosting List25 because they offered the best overall value for this site.

You can see the improvement in our server response time immediately. We went from max 442ms to 172ms response time. That’s a 256% improvement.

List25 Server Response Time After Switching to SiteGround

Siteground has built performance boosters for specific platforms like WordPress, Joomla, and Magento. Based on the platform of your site, they specially optimize your servers which results in a better overall performance.

We wrote an article about when you should switch your web hosting which talks about the 7 key indicators.

If you are looking to switch hosts, then definitely give SiteGround a try. WPBeginner users get an exclusive 60% discount on hosting + free domain.

Caching Plugin

When it comes to speeding up WordPress, caching is the second most important factor after your web hosting.

Normally when a visitor comes to your WordPress site, your server passes the PHP request to the MySQL Database which finds the page that is being requested, generates it on the fly, and show it to the visitor. This takes up a lot of resources. When you have caching, it saves time and resources.

The diagram below highlights the process. In layman terms, think of caching as creating a desktop shortcut which helps you get to the file faster.

What is Page Cache?

For List25 site, we are using the SiteGround SuperCacher, a plugin they specially built for their customers. On top of that, they added advanced dynamic caching options using Varnish (part of their performance booster).

If you are not on Siteground, then don’t worry. You can setup cache on your WordPress site by using one of the many available solutions like W3 Total Cache or WP Super Cache.

At WPBeginner, we are using W3 Total Cache which provides a number of page caching options, database caching and object caching.

As more hosting companies specialize for WordPress, we will see more custom caching solutions built. Pagely and WPEngine also offer their own built-in caching system.

CDN

Content Delivery Networks (CDN) can help you boost your website speed. We have been using MaxCDN since the beginning of List25, so this part didn’t change.

We have written a full article on what is a CDN and why you need it along with a infographic.

What is a CDN

CDN allows us to serve all CSS, Javascript and images from a Content Delivery Network. This works by determining the site visitor’s location, and serving content from a server nearest to the visitor.

If you’re not in the market for a premium CDN solution, then you can use Cloudflare.

Combining Files to Reduce HTTP Requests

As you add more plugins, often they add their own JavaScript and CSS files. Each additional file is a new HTTP request.

We combined these JavaScript and CSS files into a single file for each to reduce requests and speed up load time. You can see more details about this on how WordPress plugins affect load time.

Whilst we are now loading some small functionality that we might not need on a particular section of the site, this code is cached on the CDN, and results show that fewer requests for files provide better performance than loading several smaller JS files.

This is something you have to do on a regular basis because the plugins you use change overtime.

Image Sprites

We made use of an image sprite which combined several social and site icons into a single image:

List25 Sprite

Whenever we needed to display a particular icon, we’d use CSS to:

  1. Load the image as a background image
  2. Define the width and height of the element we need the icon for
  3. Set the background position for our image to load the necessary icon

For example, to load the sidebar’s social media icons, we use:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

The background-position, width and height CSS properties helps us target the specific section of the image that we want to output:

List25 Sprite, Edited

As a result, only the first request for this image file is using bandwidth. Subsequent requests to the CDN for the image will result in the cached (typically local) version being loaded, as well as only needing to request a single image vs. 6 different social icons.

By combining JavaScript, CSS and images together, we reduced the number of requests significantly.

Code Minification

Code minification involves removing whitespace and line breaks to reduce the file size making it quicker to load when requested.

For List25, we use SCSS, a syntax-based stylesheet (Intro to Sass). This allows us to structure our CSS files across several areas of development in an easy to read layout:

List25 SCSS

We use CodeKit to then compile the SCSS files into a single CSS file. CodeKit also removes whitespaces and line breaks to ensure the file is as small as possible:

As a result, we were able to reduce our CSS file size by 28%.

Image Optimization

We optimized our images in two areas: our WordPress theme and uploaded content.

For our WordPress theme, we used CodeKit to ensure that all images were losslessly compressed. This ensures that the file sizes are as small as possible, with no loss of quality.

List25 Image Optimisation

We also educated all of our writers about the importance of saving images optimized for web. See our guide on how to save images optimized for web.

Javascript-free Social Sharing

Social sharing for List25 is really important just like any other website. However social sharing plugins can significantly slow down your site.

List25 Social Sharing Buttons

Whilst integrating these four social network’s scripts didn’t impact page load time in our tests, it visibly slowed down the web site when viewing on a mobile device. Social sharing buttons would take a few seconds to appear, despite the scripts loading asynchronously, resulting in the post content moving around as the buttons loaded into view.

To tackle this problem, we moved to an (almost) Javascript-free solution. Each of the social network’s sharing buttons are rendered by our custom WordPress Plugin, and the theme’s Javascript is only used to open the web browser window when the user clicks a button.

However, we still wanted to display the total number of shares a post had across all social networks. To do this, we produced a small custom WordPress Plugin to retrieve and cache the social share counts from each social network into the Post meta table. These counts are updated every 24 hours, ensuring time consuming queries are not constantly running.

You can either use an API like Sharre or dissect the Floating Social Bar for customization.

Using Pingdom’s RUM (Real User Monitoring), this new share plugin decreased the ‘true’ page load time from 6 seconds to just over 2 seconds. It also ensured that we reduced the number of requests made for third party scripts.

Result

We significantly improved our site speed. Load time went from 2.2 seconds to 1.22 seconds.

6

We were able to reduce our server response time significantly.

List25 Server Response Time After Switching to SiteGround

This helped reduce the time spent for downloading a page by Google bot which helped our crawl rate.

Webmaster Tools time spent crawling page

Our overall bounce rate dropped by 7% because the site was loading faster, and by switching hosts we were able to reduce server errors.

List25 Bounce Rate

As you can imagine with the lower bounce rate, time spent on site went up as well by over 30 seconds.

Conclusion

As you can see a faster loading web site can improve visitor engagement. The techniques we’ve discussed have covered a range of basic and intermediate improvements that you can implement to optimize your WordPress site. 

We hope this article helped you speed up your WordPress site. You may also want to check out our article about 20 must have WordPress plugins for 2015.

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.

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.