10 Proven Steps to Speed Up Your WordPress Site

Image: PP Limited

Let’s face it – Slow websites don’t convert.

 

For any new visitor or potential customer landing on your site, you only get a few seconds to grab their attention, and if your website loads too slow, your visitor will simply close the page or go back and move away to a competitor site.

Below we list 10 proven steps to optimize a WordPress site for speed. Note that many would apply to websites in general. At Positive Partnerships we’ve also completed site speed-ups on Joomla and other platforms.

Important Disclaimer: please take a backup of your files before making any changes at the code level as they might result in site issues.

Get Your FREE Bespoke Site Speed Action Plan

1. Reduce number of HTTP requests

When a user visits your website, the browser makes several requests to the server for the necessary HTML, CSS/JS files, Images etc. Every request made by the Browser to the Server is an HTTP Request. For best results, it’s a good practice to reduce the number of HTTP Request. This can be done by three important steps:

  1. Combining of CSS and JS files using a minification plugin like Autoptimize, Better WordPress Minify, or Fast Velocity Minify.
  2. Ensure that same resources used in different parts of the website e.g. the site logo, are served from a single URL.

2. Defer parsing of Javascript:

 

Image: Wikimedia Commons

 

Loading Javascript files at the beginning blocks the page from rendering until the files are completely loaded. This increases the time before the page “appears” to load and is a bad experience.

This can be greatly minimized by deferring the load of Javascript files.

This can be done by using the Async JavaScript plugin or by adding this code snippet in your theme’s functions.php file.
     function add_async_attribute($tag, $handle) {
     if ( ‘jquery-core’ !== $handle )
     return $tag;
     return str_replace( ‘ src’, ‘ async=”async” src’, $tag );
     }

     add_filter(‘script_loader_tag’, ‘add_async_attribute’, 10, 2);

3. Enable GZIP compression:

Compressing resources before rendering on the browser goes a long way in minimizing the page size, and ultimately the page load time. GZIP compression can be achieved by adding the following block of code in the .htaccess file of your site’s root folder (NB: always get an expert to do this for you).

      <IfModule mod_deflate.c>
      # Compress HTML, CSS, JavaScript, Text, XML and fonts
      AddOutputFilterByType DEFLATE application/javascript
      AddOutputFilterByType DEFLATE application/rss+xml
      AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
      AddOutputFilterByType DEFLATE application/x-font
      AddOutputFilterByType DEFLATE application/x-font-opentype
      AddOutputFilterByType DEFLATE application/x-font-otf
      AddOutputFilterByType DEFLATE application/x-font-truetype
      AddOutputFilterByType DEFLATE application/x-font-ttf
      AddOutputFilterByType DEFLATE application/x-javascript
      AddOutputFilterByType DEFLATE application/xhtml+xml
      AddOutputFilterByType DEFLATE application/xml
      AddOutputFilterByType DEFLATE font/opentype
      AddOutputFilterByType DEFLATE font/otf
      AddOutputFilterByType DEFLATE font/ttf
      AddOutputFilterByType DEFLATE image/svg+xml
      AddOutputFilterByType DEFLATE image/x-icon
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/javascript
      AddOutputFilterByType DEFLATE text/plain
      AddOutputFilterByType DEFLATE text/xml

 

# Remove browser bugs (only needed for really old browsers)
     BrowserMatch ^Mozilla/4 gzip-only-text/html
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
     Header append Vary User-Agent
     </IfModule>

 

4. Minify CSS and  JS files

Image: Max Pixel

Minification means removing extra whitespaces and comments between the codes. The advantage associated with this is that it ultimately reduces the page size. The tools that can be utilized for this purpose are cssminifier to minify the CSS and javascript-minifier to minify the JS.

Minification can also be achieved by using plugins listed in point 1 above (Autoptimize, Better WordPress Minify, or Fast Velocity Minify). Note that there are risks to minification which can break some WP themes. Always get expert advice before implementing.

 

5. Browser caching

Image: Nakanzab

Every website has static and dynamic contents. With  Expire headers set, the files that have been loaded once are served from the browser cache and are not loaded from the server. This results in a huge decrease in page load times.

As a general rule, try to set a long expiry date to static files that does not change with time such as favicon, logo, contact page etc.

The following block of code can be added to the .htaccess file to achieve the purpose (NB: please get an expert coder to implement this for you).

 

   <IfModule mod_expires.c>
     # Enable expirations
     ExpiresActive On
     # Default directive
     ExpiresDefault “access plus 1 month”
     # My favicon
     ExpiresByType image/x-icon “access plus 1 year”
     # Images
     ExpiresByType image/gif “access plus 1 month”
     ExpiresByType image/png “access plus 1 month”
     ExpiresByType image/jpg “access plus 1 month”
     ExpiresByType image/jpeg “access plus 1 month”
     # CSS
     ExpiresByType text/css “access plus 1 month”
     # Javascript
     ExpiresByType application/javascript “access plus 1 year”
     </IfModule>

 

Get Your FREE Bespoke Site Speed Action Plan

6. Remove query strings from static resources

The query strings in the files such as CSS and JS prevents it from being cached which can affect the speed of the website. The following block of code added to the functions.php file of your theme will remove these query strings and solve the problem (NB: please get an expert coder to implement this for you).

 

     function _remove_script_version( $src ){
     $parts = explode( ‘?ver’, $src );
     return $parts[0];
      }
     add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
     add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

 

7. Optimize images

Image: Pexels

 

If you run a website that has several images, then your image sizes might be a major factor causing the slowness of your website.

In these cases, it becomes imperative to compress the images. There are ways to achieve this without compromising image quality. We recommend compressor.io which provides very effective image compression.

8. Choose a good hosting company

A large part of the website’s performance depends upon your server resources and configurations. If you are just starting out with a small blog or website, you can opt for a Shared Hosting Plan, but once it starts getting a decent amount of traffic, it’s always recommended switching to Dedicated Plans. If you want a lightning fast site, do not be a cheapskate when it comes to hosting.

For WordPress sites, please contact us for advice on the fastest hosts. We also include free high-speed hosting with our Site Speed Up services.

9. Lazy load images and videos

Simple principle – request a resource only when it’s needed.

It’s a costly affair (speed wise) to load every image or video that is used on a web-page during page load itself. One way to handle this is by utilizing lazy load for images and videos which loads these resources only when the user scrolls to the particular section of the page that contains the media resource.

For WordPress, a simple plugins such as a3 Lazy Load can be used for this purpose.

 

10. Select your theme wisely

ImagePixabay

 

Before selecting a WordPress theme for your website, follow these steps to ensure your theme is optimized for speed.

  1. The theme does not load too many generic stylesheets on every page
  2. Check the source code of the theme to see how many CSS/JS requests your theme makes.
  3. Check the speed score of your theme on GTMetrix, Google Pagespeed.

We recommend working with Design M who built this very site on a responsive theme which has a Google PageSpeed score (desktop) of 88/100: they optimize for speed as standard in all their site builds.

While every site has its own peculiarities in terms of issues concerning speed, we do believe that following these steps would really go a long way in optimizing your site for maximum speed.

At Positive Partnerships we have recently launched a WordPress optimization service to speed up your website and keep it fast. To get your free website speed diagnosis contact us here.

Get Your FREE Bespoke Site Speed Action Plan

 

Image: PP Limited

MONEY-BACK GUARANTEE:   If we don’t significantly speed up your site (as verified by Google PageSpeed), we’ll refund your full money back. We are a global digital marketing agency based in London (est. 2009). Contact us on +44(0)774 0483053 or email us today.

Leave a Reply