There can be a variety of factors that could be slowing your wordpress blog down. Some of the most common reasons are as follows:
- Bad hosting.
- Uncompressed and unscaled Images.
- Too many plugins.
- Too many widgets and fancy elements on the page.
- Too many render blocking javascript references.
- Too many HTTP requests generated because of many external JS and CSS file references.
- Inlined large CSS and JS files.
- Too many DOM elements (HTMl tags) coupled with too many DOM event listeners (scripts that need to make changes to the document).
- Uncompressed JS and CSS files.
- Not using HTTP Compression to serve content.
- Lack of a proper caching mechanism in place.
- Too many external font file references.
You can easily find out which of these factors is causing your pages to load slow using tools like Gtmetrix.com and PageSpeed Insights offered by Google.
Even without these tools, a simple glance at your website's HTML source pages can reveal a lot about the issues at hand. Do you see large inline styles and scripts? Do you see many JS and CSS references? Do you see external JS references or inlined JS that your page does not need? Do you see a lot of unnecessary tags in the header? Then these could be the very reasons why your blog is slow.
Below are 14 simple changes you can make to your wordpress blog which will help your blog load faster.
1.) Compress Images
Uncompressed images are the number one reason for slow page loads. This includes your website logo, background images, buttons, featured images and images used within the article body. If your website uses a lot of images, it is best to look into compressing them.
There are a few good wordpress plugins that you can use to compress your images on the fly. The best ones are TinyPNG and WP Smush it. From the usage perspective, I recommend 'WP Smush it' as it is very user friendly.
You can get anywhere between 17% to 25% reduction in your image sizes using these plugins. And considering that the compression is lossless there will be no reduction in the quality of the images. WP Smush it also offers a paid version which uses lossy compression to reduce image sizes even further with minimum loss in quality. Both of these plugins also offer bulk compression option which means you can compress all your existing images easily.
Using plugins is a great way of easily compressing your images but you will not get any more than 15% to 30% reduction in the image size. If you want to get maximum reduction in size, say more than 50% to 70% reduction, you will need to manually compress your images using a good image compression software before you upload them to wordpress. There are host of free open source software out there. Two of my favorites are RIOT which can compress JPEG, GIF and PNG images and PNGoo(PNG Quant) which compresses PNG files.
If not all images, you can definitely consider using these programs for compressing your logo, buttons, favicon and background images.
If you want to learn more about these open source software programs and how to use them to get maximum reduction to your image sizes, check out these links:
2.) Scale Your Images and Specify Image Dimensions
When you upload an image, wordpress automatically scales the image into three different sizes - the full/original size, medium size (300 x 300 pixels) and thumbnail size (150 x 150 pixels). In addition to that, wordpress also automatically adds image dimensions when you add an image to your post using Add Media. So you are covered here.
But if you use a custom image size, say a 350 x 350 pixels image to display your related posts or a featured image, you will need to use the full image and then scale the image in HTML using width and height specifications. So essentially, you are loading the full image each time the image is requested and then scaling it down in the user's browser resulting in slower downloads.
You can resolve this issue by specifying a custom image size in your functions.php file using the add_image_size function as follows:
add_image_size( 'unique_name', 350, 350, true );
Once you do this, wordpress will automatically resizes your new images into this new dimension and you can then call this new image using the unique name you specify as the first parameter. To resize all your existing images to this new dimension, you can use a plugin like wp regenerate thumbnails.
3.) Disable Hotlinking of Images
Hotlinking is the process of linking to your image on a different site while to image loads from your server. This can increase server loads in-case the hotlinked image is on a popular social network page which will eventually result in slower image downloads for your actual users.
You can use the following tool to check if your images are already protected from hotlinking:
http://www.htaccesstools.com/test-hotlink-protection/
If they are not protected, you can disable hotlinking using your cpanel or by adding the following to your .htaccess file:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
This .htaccess file was created using: http://www.htaccesstools.com/hotlink-protection/
4.) Reduce the Number of Plugins and Widgets
Too many widgets can slow down your page loads considerably. So if your page loads take a very long time, consider removing some unwanted widgets. Similarly, deactivate and uninstall plugins that you no longer need. Most plugins add references to their CSS and Javascript files every time a page loads which can significantly increase the browser render times.
5.) Reduce Number of External Web Font Refences
Using too many external web fonts can slow down page loads considerably. Check your blog's HTML source page to see if you find more than one external font (generally Google fonts) references. It is perfectly okay to have one or two font file references but more than that can impact page load times negatively. Considering removing references that you can do away with and making necessary changes in your style.css page.
6.) Defer or Async Javascript Execution
There are a host of javascript files that wordpress loads when a page is rendering in the user's browser. These include some standard wordpress scripts, scripts referenced by your plugins and scripts referenced by your theme. Fancier themes load a whole lot more javascript than simple ones.
The point to note here is that not all script files need to be loaded and executed before the page load. Some can be made to wait using the defer attribute and some can be made to load and execute asynchronously while your content renders so they don't block the rendering.
All you need to do is add a defer or async attribute to your script reference tags.
Check out this simple tutorial here on how you can add the defer or async attribute to your script tags.
7.) Conditionally Load Javascript and CSS Files
When you activate a plugin it registers the required javascript and CSS files using the wp_enqueue_scripts function. This means, each time your page loads all these scripts and CSS files will load automatically. This is irrespective of if or not you are using the plugin functionality on that particular page.
Take for example the Contact form 7 plugin.
The Contact form 7 plugin is an extremely popular plugin that lets you add a contact form to your site. Given your requirement, you might be adding this contact form most likely on your website's contact page plus a few other pages at the most. But the plugin loads its CSS and JS files on all pages of your site irrespective of if or not the contact form is present. This is the case will most plugins.
Yes you can use defer or async attributes on the Javascript tags (as mentioned in Point 6) but an even better solution is to completely block these files from loading when not required. In other words, load them only on pages that use the plugin functionality and block them on others.
Check out the following tutorial to know how you can do this by adding a simple function to your functions.php page: Preventing Plugins from Loading CSS and JS tags on all Pages
8.) Minify CSS and Javascript
Minifying your external styles is a simple yet effective way of increasing your page load speed. CSS minification involves removing white spaces, combining related classes, removing comments and many such small optimizations to reduce the overall size of the file. Smaller files can be processed faster by the browser leading to faster page loads.
The simplest way to minify you CSS is to use an online tool like CSS minifier. To start, make a copy of your theme's style.css file. Now open the CSS minifier tool and copy and paste the contents of your style.css file into the Input CSS section and click the Minify button. Once the minification is complete, copy the minified file from the Minified Output section and replace the contents of your style.css with the minified style.
Also, your theme might have added styles for various functionalities that you might not use. So before minifying, you can manually scan through your CSS file and remove styles that you don't require. For instance, if you don't use comments in your posts, you can remove all styles related to the wordpress comments.
You can minify external Javascript in the same way.
9.) Enable Keep Alive
Keep Alive is recommended by most experts as a means of speeding up your page load times. Keep Alive basically tells the browser to establish one connection instead of multiple connections to address user requests.
There is a possibility that your server already has this enabled. Use the following tool to check if or not this is enabled:
http://www.giftofspeed.com/enable-keep-alive/
If it is not enabled, you can enable this by adding the following to your .htaccess file:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
10.) Remove Unnecessary Tags from WordPress Header
The wordpress header generated using wp_head throws in a lot of unnecessary tags which can be safely removed. The following are some of the tags that can be removed:
# XFN (XHTML Friends Network) # wlwmanifest (Windows Live Writer) link. # Comments Feed # WordPress Version Generator # XML RPC # Post Shortlink # RSS Feed Links
As you can see, these tags include services that you might never be using, like the XFN tag, wlwmanifest (Windows Live Writer) link and XML RPC which allows you to remotely post to your blog using a webblog client. This also includes the version generator tag which should always be removed as a security measure. These tags can easily be removed by adding the following to your functions.php page:
remove_action('wp_head', 'rsd_link'); //removes EditURI/RSD (Really Simple Discovery) link.
remove_action('wp_head', 'wlwmanifest_link'); //removes wlwmanifest (Windows Live Writer) link.
remove_action('wp_head', 'wp_generator'); //removes meta name generator.
remove_action('wp_head', 'wp_shortlink_wp_head'); //removes shortlink.
remove_action('wp_head', 'feed_links', 2 ); //removes automatic feed links.
To know about more such tags and removing them, check out this article.
11.) Enable Gzip Compression
Chances are that Gzip compression is already enabled by your web host using mod_gzip or mod_deflate. You can use the follow tool to check if you content is being compressed:
http://www.whatsmyip.org/http-compression-test/
Just enter the URL of any page on your site and click test.
If the test indicates that your content is not being compressed, you can try adding the mod_deflate module to your .htaccess file as indicated here.
As an alternative, you can also use PHP's ob_gzhandler function to gzip the content for you. To enable this, just add the following to the top of your theme's header.php page:
<? ob_start("ob_gzhandler"); ?>
12.) Enable Expires and cache control headers
Cache control and Expires headers tell the browser what to cache and for how long to serve a cached version before requesting a fresh new copy of the resource.
This can help reduce redundant HTTP requests and increase the page speeds hugely during subsequent request made by the same user. You can use these headers to set caching info for your images, styles, javascript, video files and HTML simply by adding the following to your .htaccess file:
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|jgp|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
To read more about these headers checkout the original source below on tutsplus:
13.) Remove version from style and script links
WordPress tends to add a version number to CSS references which makes them uncachable by proxy caching servers. To check if this is true in your case, open your website's source page and check your style references to see if they have a question mark (?) symbol at the end as shown below:
http://sitename.com/wp-content/theme/style.css?ver=56
If this is the case, add the following to your theme's functions.php to get the question mark removed.
/*remove version from style and script links*/ function remove_cssjs_ver( $src ) { if( strpos( $src, '?ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'remove_cssjs_ver', 15 ); add_filter( 'script_loader_src', 'remove_cssjs_ver', 15 );
Source: Get rid of ?ver on the end of CSS/JS.
14.) Include a Cachable Favicon
A favicon is a small icon specific to a website which is displayed in the address bar of a browser. All browsers request for a favicon on page loads and not having a favicon results in a 404 response from the server. Even though this won't lead to any significant page delay it is best practice to have a favicon in place. Just make sure that you favicon follows these guidelines:
- Make sure it is a .ico file.
- Keep the dimensions of the icon to 16x16 pixels.
- Keep the file size under 1kb.
- Upload the favicon to the root/main folder of your website and one to your current theme's main folder.
- Optionally you can add the following to your theme's header.php page
<link rel="shortcut icon" href="http://sitename.com/favicon.ico" />
- Make the favicon cacheable using cache control and expires headers. (Refer point )
Here's a great article from wordpress.org on how to create and upload a favicon for your wordpress blog.
15.) WP Super Cache
Last but not the least, make sure to install a caching plugin. The one I recommend is WP Super Cache as it is a fairly easy to set up for beginners. This plugin is coauthored by Automattic which is the company behind WordPress. Install the plugin and select the 'Use mod_rewrite to serve cache files' option.
Apart from these, there are other optimizations you can make which include concatenating your CSS and JS files, lazying loading images, optimizing your MYSQL database, configuring etags, using CSS sprites, using base64 encoded images, using a CDN (content delivery network), inlining smaller JS and CSS and using advanced server caching to name a few. But most of these are a overkill and are not necessary for smaller sites. That said, optimization should always be done based on the specific requirements of a website. Which is why it is important to find the main reason behind the slowness of the website before deciding to implement advanced changes.
Apart from ones mentioned within the article:
Tutplus - Analysis and Effects of HTTP Requests on WordPress Performance
WordPress.org - Get rid of version at the end of CSS and Js links
Google.com - Leveraging Browser Caching
Yahoo Exceptional Performance Team - Best Practices Speeding Up Your Website
Further reading
Enabling Gzip Compression by Kinsta.com
Hi,
Nice article. I also got a lot of things done mentioned in this article. But if i try to ad this my website stopped functioning.
/*remove version from style and script links*/
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 15 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 15 );
Could u advice to get this solved?
Kind regards,
Dennie
You can use following code in functions.php file of current theme.
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
wonderful tips and mostly worked nicely and all of these are unique and real suggestions.