How To Speed Up a
WordPress Website 2023
Why Is Website Speed Important?
Page Load Speed can literally make or break your website. Nobody likes a slow website, users will leave before it even loads and this will severely impact your google rankings. According to a study, 64% of mobile users demand a webpage loads in just under 4 seconds.Page Speed Impacts Conversions: Did you know 74% of users abandon a website if it does not load within 5 seconds. For each second delay it reduces customer satisfaction up to 16%. The quicker the page loads the more likely they're to perform the action you want them to take. Remember your competition is only one click away. You can lose a lot of money just by having a slow website.
Impacts Google Search Ranking: If a user goes to a website and leaves right away this gives google a signal that your content is not what people are looking for. Google has said that page speed is an important indicator that will determine if your site ranks. Why would google want to send its users to an extremely slow website. Faster websites are also easier to crawl. If your site is too slow, google puts it on the back burner so it will take much longer to index.
Conserve Server Resources: Additionally, a faster site can also reduce server costs and improve the overall performance of your site. When your website is fast it can handle more traffic at the same time. If you get lots of traffic it can overload your server if your not using caching.
Speed Up Your
WordPress Site
- Why Site Speed Is Important?
- Testing Your Speed Score
- Improve Your Website's Speed. Cut the FAT!
- Optimize Media for Speed
- Use Next-Generation Formats
- Web Toolbox Image Optimizer
- Lazy Loading
- Remove Unused Scripts & Styles
- Remove Non Essential Plugins
- Remove That Fancy Slider
- Defer JavaScript
- Web Hosting
- Caching Plugins
- Content Delivery Network
- Gzip compression
- Hire An Expert
How To Test Your Websites Speed
To test the speed of your website, you simply use one of the many tools available. These tools will analyze your site performance and provide a detailed report, including its loading time, page size, and the number of requests.
These tools offer recommendations for improving the speed of your website.
The most important thing for you to notice is the score. Did you pass or did you fail?
Sometimes it can be a bit technical so if you need help from a web developer book a time to speak with us.
Improve Your WordPress Website's Speed
There are many ways you can speed up your WordPress website. Here are some helpful tips!
Optimize Media for Speed
Images are often the biggest contributor to a large page size. Most digital cameras can shoot photos in 4K but these images should NEVER be directly uploaded to a website without properly optimizing them. Often stock images have a very huge file size as well. To improve performance you must get the file size down as small as possible without losing too much quality.
How to Optimize Images for the Web
Decrease Image Resolution:
Any image larger than the screen (1920px) is way too big.
It should only be as big as it needs to be.
Try not to use too many full-screen-size images on your website.
Use Keywords In Your File Name: Using keywords in the file names of your images can help improve your website's search engine optimization (SEO).
Just more ways for people to find your website through image search.
Set The Right Quality Setting:
Set as low as possible without it being too noticeable to the human eye. Always keep the original so you can compare the before & after versions. I personally find that 60 - 70% quality setting seems to be the sweet spot. It depends on the detail and the number of colors in the images.
Convert Images Into
Next-Generation Formats:
WebP Image Format: was created by Google as an alternative to JPEG and PNG formats. It's designed to be used on the web and offers better performance and a small file size while still maintaining high quality. It can also do transparency so it can be a great alternative to PNG which tends to have a very large file size with larger resolution images.
Use Scalable Vector Graphics (SVG): These graphics are created with math and points to create shapes which means they can be resized without losing quality. Great for logos, icons, backgrounds, as long as the graphic is simple it will have a very small file size. Since it's a scaleable vector it will always look sharp no matter the screen size. SVG images can be customized with CSS and JavaScript, which makes them more flexible and interactive.
WebToolBox.pro - Bulk Image Optimizer
This is a tool we created to help you optimize your images. Convert your images into next generation formats like WebP.
Simply upload your images with our bulk editor and set quality, size, image type then click convert.
You can compare the before and after image quality and file size. Rename images with keywords for more search engine traffic.
Other Image Optimization Tools
Smush
Tiny JPG, PNG Etc
Enable Lazy Loading
When you enable lazy loading it will only load images as needed. Starting with the images at the top of the page and then as you scroll down it will load the images section by section as needed. This is great because it really cuts down on loading time.
Premium WordPress Speed Plugin With Loads of Features
Free Lightweight Lazy Loading Plugin
Remove EVERYTHING that is NOT NEEDED
WordPress websites are often slow because your loading so much crap you're not even using.
By default WordPress loads everything just encase you need it. To fix this we need to strip away the fat. There are 2 ways you can do this. One with code and another way using a plugin.
OPTION 1: Remove Scripts & Plugins Page by Page with a Plugin
Some plugins can be too heavy to be loaded on every page. Some examples might include a contact form plugin, WooCommerce, a fancy slider plugin. These should only be loaded on the pages they're used on. Here are a few plugins you can use to remove plugins and other scripts on a page-by-page basis.
Plugin Load Filter
( Removes plugins from certain pages )
Asset CleanUp
( My Personal Choice )
Perfmatters
( Premium )
OPTION 2: Remove Unused Stylesheets & Scripts With Php Code
Dequeue Scripts & Styles
// Removes a stylesheet from being loaded.
wp_dequeue_style( 'name-of-style' );
//---- Removes javascript from being loaded in WordPress.
// Deregister a script from the whole website
wp_deregister_script('name-of-javascript');
// Dequeue a script that has been enqueued
wp_dequeue_script('name-of-javascript');
wp_dequeue_style: Used to remove a stylesheet that has been enqueued. Enqueued means its been added to the list to be loaded on the site. This function can be useful if you want to remove a stylesheet from loading on certain pages of your site.
wp_deregister_script: Used to completely remove a script from the entire website even if it has not been enqueued yet. This can be useful if you have a plugin or theme that registers a script but you don't want to load anywhere on your site.
wp_dequeue_script: Used if you want to remove a script that has been loaded on a certain page on the site, but you don't want to completely remove it from the whole website.
Remove wp block library CSS Scripts with PHP
For example, I use a theme called Divi which comes with its own page builder. I never use the WordPress block library. Why does it need to be loaded on every page if we’re not using it? Let's learn how to remove it.
Add this code to your functions.php file
function remove_block_css(){
wp_dequeue_style( 'wpsl-styles' );
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS
}
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
You can place this code in your theme's functions.php file. Just make sure to replace the name to the handles of the stylesheets and scripts that you want to remove. Make sure you know what your doing here. If you remove a stylesheet or script that is needed for your website to function, it could cause issues. If you need help to decide what should be removed from your website click the button below to speak with us.
Get the name of each script on your WordPress website.
This code will find the names of all the JavaScript files that have been enqueued on your WordPress site and print them above the header. Don't worry this notice will only show for admin users. Use these handles to remove unwanted scripts from your website by using the code examples further below. You can also use this to test and make sure they were removed successfully.
Paste this script into your functions.php file.
// Print all the scripts on a page if the user is admin. Do not show for other website visitors
function show_scripts() {
if (current_user_can( 'manage_options' )) {
global $wp_scripts;
echo '<div style="padding:20px;">';
echo '<h4><b>SCRIPTS LOADED ON THIS PAGE</b> - Only admin can see this notice!</h4>';
foreach( $wp_scripts->queue as $script ) :
if(wp_script_is( $script, 'enqueued' )) {
echo $script . ' | ';
}
endforeach;
echo '</div>';
}
}RESULT WILL LOOK SOMETHING LIKE THIS
SCRIPTS LOADED ON THIS PAGE - Only admin can see this notice!
admin-bar | contact-form-7 | jquery-ui-datepicker | jquery-ui-timepicker | jquery-ui-slider | jquery-ui-slider-access | wpcf7-redirect-script | yt-main-script | monsterinsights-vue-vendors | monsterinsights-vue-common | monsterinsights-vue-frontend | custom-script | divi-custom-script | fitvids | et-core-common | wpcf7cf-scripts |
Remove unwanted JavaScript files from your WordPress website with PHP
Here we use this code to remove JavaScript files from specific areas of our wordpress website. We can remove from the homepage, a specific page or the entire website.
Paste this script into your functions.php file.
function remove_unwanted_js(){
// Remove scripts from the home page
if (is_front_page() ) {
wp_dequeue_script('wpcf7-redirect-script');
}
// Remove scripts from a specific page
if ( is_page( 'contact-us' ) ) {
// Add scripts to dequeue
wp_dequeue_script('jquery-ui-slider-access');
}
// Remove scripts from all pages
wp_dequeue_script('monsterinsights-vue-vendors');
wp_dequeue_script('monsterinsights-vue-common');
wp_dequeue_script('monsterinsights-vue-frontend');
}
add_action( 'wp_enqueue_scripts', 'remove_unwanted_js', 100);Defer Parsing JavaScript Till After the Page Loads
Processing javascript before the page loads can have a HUGE impact on your website performance. Make sure to process this after the page has loaded. Heres a PHP script that will differ all javascript files till after the page loads.
Defer Parsing JavaScript With Php Code
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Remove Non Essential Plugins
There are many plugins available for WordPress, and the quality can vary widely. Each plugin is a piece of software on your website that uses up resources. Make sure to only install high-quality plugins and don't use too many. Lots of junk in the WordPress repository. Deactivate plugins that you don't think you'll need and each time you install a new plugin test the impact on your speed score
Some plugins may be poorly designed, or out of date. Sometimes it's better to use code than to load a plugin that can do many things you won't even use. Often the functionality you're looking for can be implemented with just a few lines of code. You don't need to use a plugin to do everything. Less is more when it comes to plugins.
It's important to research and carefully evaluate any plugin before installing it on your WordPress site. Look for reviews from other users and test to see its overall impact on your website's speed. If you're unsure about a plugin, it's best to seek advice from a WordPress expert.
Remove That Slider at the Top Of The Page
I know they're really popular and many people think they're cool and all but a fancy slider can be really terrible for website performance.
Instead of having to load 1 super large image at the top of the page now you have 3 or more. Sometimes I've seen something crazy, like 6 or more uncompressed large images at the top of the page.
No wonder the site takes 12 seconds to load. The browser also needs to process all the code that makes it work and some slider plugins are packed with so many features you don't even use. Each contributing to the slowing down of your WordPress website.
Use A Good Theme With Only 1 Page Builder
MISTAKE #1 - Using a crap theme
Lots of crap in the WordPress theme library. Often they're made by some guy in his basement as a hobby project. Pick a theme created by a reputable company that is always trying to improve it. Otherwise code never gets updated to the new version, it’s often built inefficiently or has lots of anoying bugs. We suggest a theme called Divi and use it in most of our projects.
MISTAKE #2 - Using more than 1-page builder
I’ve seen websites with 3 different page builders installed. Each page was done a different way. 1 is heavy enough. Often websites made by inexperienced web designers have these issues. In these cases, the website needs to be rebuilt.
Choose a Fast & Reliable Web Host
Your web host plays a crucial role in the performance of your website. If you're on a shared hosting plan, consider upgrading to a VPS or a dedicated server to improve your site's speed.
When choosing a hosting provider for your WordPress site, there are several key factors to consider. These include the provider's reliability, performance, and customer support. Here's a list of my favorite web hosting companies.
SiteGround
SiteGround is known for its fast & reliable hosting. They have features like solid-state drives, and built-in server caching. This can help ensure that your site loads quickly and performs well.
GreenGeeks
GreenGeeks focuses on providing eco-friendly hosting solutions. They offer a range of hosting plans for different types of websites, including shared & dedicated hosting. One of their main differentiators is their commitment to the environment - they offset their energy usage by purchasing wind energy credits and have a goal of being a zero-carbon company. GreenGeeks also has really great 24/7 support.
WPEngine
WPEngine is a managed WordPress hosting provider that offers a range of hosting plans for different types of WordPress sites. WPEngine uses advanced technology and infrastructure to ensure that your WordPress site loads quickly and performs well, even during times of high traffic.
Use a Caching Plugin
Caching plugins are designed to improve the performance of your WordPress website. It does this by generating static HTML files for your dynamic WordPress pages and storing them in the cache. When a user visits your website, the plugin will serve the static HTML file from the cache instead of generating the page on the fly, which can reduce the time it takes for the page to load and reduce the load on the server. Make sure to only use one of these plugins. There is no need to get them all pick the one that works best for you.
Wp Rocket
WP Rocket is a premium caching plugin for WordPress. Its the best and easiest to use but there is no free version there is only a yearly subscription.
10x Booster
This is a less-known one but it works well on some sites. They have a free version, but I found some problems and glitches on some websites. Like the blog module doesn't load content when using the Divi theme.
W3 Total Cache
W3 Total Cache can be a complex plugin to configure and it is recommended that you have some understanding of caching and website performance before attempting to use it.
Wp Super Cache
WP Super Cache is a simple, lightweight plugin that is easy to use and configure. However, it may not offer as many advanced features such as minification of CSS and JavaScript files, lazy loading, and integration with a content delivery network.
Use a Content Delivery Network (CDN)
A CDN stores a copy of your website's static content (such as images, CSS files, and JavaScript) on servers located around the world. When a user accesses your website, the CDN delivers the content from the server that is closest to their location, which can improve your site's loading times.
Cloudflare (BEST FREE)
Cloudflare is a cloud-based service that provides a range of security and performance enhancements for websites. Cloudflare provides a number of features including a content delivery network (CDN), DDoS protection, and a web application firewall (WAF).
Sucuri
Best WordPress CDN and that also offers unbeaten security features. Sucuri offers a firewall that protects your website from hackers, malware, and blocks different levels of DDoS attacks. Sucuri Firewall has plans starting at $9.99 per month.
Stack Path
StackPath offers MaxCDN and its one of the best for WordPress. It’s super easy to use and offers a beautiful control panel. StackPath offers DDoS protection with all its pricing plans. You must contact their sales team to learn more about the pricing.
Key CDN
KeyCDN is easy to integrate with WordPress through its Enabler plugin. It offers 34 servers in 25 countries, to deliver fast content to visitors and make your website secure from hackers and DDoS attacks. This CDN's pricing charges per gigabyte so its perfect for websites that are small or don't get a lot of traffic. The minimum charge is $4 per month.
Enable Gzip Compression
Gzip compression can help reduce the size of your website's files, including HTML, CSS, and JavaScript files. This can help speed up your WordPress website because these files will download faster then get uncompressed in the browser. In addition to reducing the amount of time it takes for resources to download, it can also reduce the amount of bandwidth your website uses. This is especially important if you have a high traffic website.
Here are 3 ways to enable Gzip compression on your WordPress website.
Use a plugin: There are several WordPress plugins that can enable Gzip compression for your website. One popular option is the W3 Total Cache plugin, which allows you to enable Gzip compression as well as other performance enhancements. You can find this setting in the browser cache settings.
Hosting Provider: Some hosting providers offer an option to enable Gzip compression through their control panel.
Enable Gzip Compression with .htaccess File: It's important to be careful when making changes to your website's configuration, as even small errors can have significant consequences. If you're not comfortable with making these changes yourself, you may want to consider hiring a professional developer.
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>Need Help From a WordPress Expert?
Keep in mind that the exact steps you need to take to speed up your WordPress website will depend on your specific situation. For best results, consider hiring a professional developer who can help you optimize your site for performance.
