When buying products or services on our site, we often receive affiliate commissions that support our efforts. Learn More

How to Speed Up and Optimize WordPress Website for Faster Load Time

fast website

Having a fast website is not only beneficial for your visitors but also for your search rankings.  In order to have your website optimized for search engines, a typical visitor shouldn’t have to wait more than three seconds for a page to load – and even that’s pushing it.

Slow load speeds translate to a poor user experience, search rankings, and in turn less visitors consuming your content.  In fact, these are steps you can implement today to shave seconds off the load time if your site is running slowly.

HOW TO SPEED UP WORDPRESS SITE

    • Image Optimization
    • Image Compression
    • Enabling Caching
    • Deleting Unused Plugins
    • Use Faster Web Hosting
    • Upgrade to a LiteSpeed Server
    • Minify HTML CSS JavaScript
    • Use a CDN for Delivering Web Content
    • Utilize GZip Compression
    • Update PHP Version
    • Avoid Heavy CSS Rules
    • Reduce HTTP Requests
    • Disable Settings & Plugins on Certain Pages

Although there are many factors that can affect website speed, making your site faster doesn’t have to be complicated.  Even shaving one second goes a long way in terms of SEO and website usability.

 

 

 

IMPROVE YOUR BOUNCE RATE WITH A FASTER WEBSITE

According to Google/SOASTA research 2017, for mobile page speed, page load time directly affects bounce rates.

mobile-page-speed-new-industry-benchmarks
Source: Google/SOASTA Research 2017

Let’s look at some facts about how website performance affects consumer behavior according to kissmetrics:

    • 47% of consumers expect a web page to load in 2 seconds or less.
    • 40% of consumers will abandon a website that takes more than 3 seconds to load.
    • 79% of shoppers who are dissatisfied with website performance are less likely to buy from that site again.

The numbers seem realistic and reasonable since we no longer live in the dial-up modem era, and I’m sure most people can agree that waiting for a slow website to load is like watching paint dry.

Imagine having to wait 3+ seconds for every page to load on Amazon while shopping – sounds like an exhausting and irritating experience.  This is also the reason why Google considers page load time one of the many ranking factors for search results.

If you want your website to rank better you need a zippier website.

 

 

 

TEST YOUR WEBSITE SPEED

The first step that you need to take is to check your website speed.  Running a speed test for your website will determine metrics such as load time, total requests, time to first byte (TTFB) and page size, among others.

Here are 3 popular speed test tools that are free to use, including one from Google.

Pingdom and GTmetrix allows you to choose the testing location closest to your datacenter but with GTmetrix a login is required.  Google PageSpeed Insights doesn’t have that option but it does give you ratings and metrics for both desktop and mobile.

Your results will be different with each speed test tool because they use different metrics and the tests are done from various locations.  I personally use Google PageSpeed Insights the most, followed by Pingdom but others can provide useful information as well.

If Google thinks my site is fast, it’s good enough for me.  Here is the desktop score.

Google PageSpeed Insights Perfect Score
Google PageSpeed Insights Desktop Score

The mobile score isn’t perfect but close enough without obsessing over it.

PageSpeed Insights Mobile Score
Google PageSpeed Insights Mobile Score

Here’s a list of additional website speed test tools including one specific to mobile from Google.

 

 

 

13 WAYS TO MAKE YOUR WEBSITE LOAD FASTER

There are many ways to speed up the page load time of your website but listed below are some the easiest ways to help you get there.  Try running a few speed tests before getting started and compare the results once you’re done.

 

1 – OPTIMIZE IMAGES AND PHOTOS

Using heavy images can really slow down your page load speed to a crawl.  It’s tempting to use high resolution images to portray your website in the best light but you’ll notice that the difference in quality is unnoticeable.

As a general rule of thumb, images used in your website should always be measured in kilobytes, never megabytes – even for header and featured images.

    • Use jpg over png unless you need an image with a transparent background.
    • Always try keep all images under 350KB but less than 200KB is ideal – less is more.
    • Approximately 1500 pixels wide should be sufficient for header images.
    • About 1000 pixels wide is adequate for all other images.
    • Avoid scaling images in HTML or CSS.

Canva and Fotor are popular browser apps to scale and resize images – they are free and easy to use without having to download and install software.  If you need a more premium tool with pro functionalities, Photoshop and Gimp are good options with the latter being free to use.

 

2 – COMPRESS IMAGES AND PHOTOS

After resizing your images, you can take it a step further by compressing them.  Compressing images will further reduce the file size without compromising quality.  Image compressors can also remove hidden information set by your camera called EXIF data or metadata.

Metadata can be important to photographers but unnecessary for most users – removing it will also help reduce file size.  For WordPress websites, image compression is as simple as installing plugin.  Here are 2 free image optimizer plugins that are free to use.

  • Smush is the most popular with the most active installations; however, it doesn’t do a very good job of image compression with a rate of only 10%, give or take.  There is an option to double the compression rate with their pro plan but not without incurring a monthly fee.
  • ShortPixel is another image optimizing plugin for WordPress but does a much better job of compressing images.  It typically compresses at a rate of 70%-80% at the recommended compression setting.  The free plan includes 100 images every month which should be enough for most users.

To compress images without a plugin, imagecompressor and iloveimg are just a few of the many sites on the web that’ll compress images for free.  If neither fits the bill, just do a Google search and you should be presented with tons of other image optimizing sites.

 

3 – ENABLE WEBSITE CACHING

Every time someone visits your website, pages are shown to the end user.  In doing so, it makes a request to your server to compute all the code to properly display your website content.

However, because most content on websites do not change frequently, it would be inefficient to compute the same code every time someone makes the same request.  This is where website caching comes into play.

Caching is the process of serving stored data and sending the pre-loaded static HTML file to the visitor’s browser.  Enabling caching will help websites load much faster for repeat visitors because it doesn’t have to reprocess the same page over and over to the same user.

Browser caching may not lessen the load time for first time visitors but repeat visitors will be able to appreciate the faster page loads after it gets cached in their browser.  For first time visitors, there is however a caching solution by utilizing a CDN, which will be discussed later.

Enabling cache is especially important for WordPress sites because it doesn’t have to reload the heavy PHP scripts to serve repeated requests.  Here are two of the best WordPress caching plugins for their simplicity, performance and user reviews.

  • WP Fastest Cache doesn’t cost anything to use and is one of the easiest to get started among the free caching plugins.  It also has better user reviews than others with over one million active installations.
  • The setup process is as simple as checking off some boxes in settings.  There is a paid version if you need more features but if you’re willing to pay for a license, for the same price, the better option would be WP Rocket.wp-fastest cache plugin settings
  • WP Rocket is just as easy to setup and considered to be the best WordPress caching plugin for being the most comprehensive – it has you covered in all aspects of speed including prefetching.  Prefetching allows the browser to cache resources in the background for later use – ideal for using Google Fonts API.

Although there isn’t a free version, WP Rocket eliminates the need for installing other speed optimization plugins that can conflict with your site.

For website speed, using less plugins is always better and if you’re willing to shell out $49 for a WP Rocket license, it might save you some headaches in the future.  They offer one year of tech support and a 14-day refund policy if you want to take it for a test drive.

 

4 – DELETE UNUSED PLUGINS

The ability to install plugins with ease is one the reasons that makes WordPress so versatile but having too many can also make your website slower.  For every plugin that is installed, it’ll also require additional files like JavaScript and CSS rules to be loaded.

This will lead to more scripts and CSS code to run leading to more HTTP requests.  When your site’s page load, all the plugins have to load with it.  It is better practice to keep plugins at a minimal and avoid them whenever possible.

For instance, if your site is already setup with Google Analytics you can access it directly from Google – any additional third party analytics plugin is redundant.  Don’t install SSL plugins, it should be enabled with your web host.  You get the idea..

If your web host doesn’t offer free SSL, you may want to consider migrating to another web hosting company.  It can be tempting to install a bunch of free plugins but you’ll quickly realize that you can do without most of them.

Another reason to minimize the use of plugins is security.  It can serve as a portal for hackers to gain access to your website because they are essentially open-source software.

Sometimes plugin developers can give up on their project so it’s important to avoid outdated plugins that aren’t updated regularly.

WordPress is also an open-source platform that gets regularly updated so for plugins to be compatible, they need to be updated accordingly.

 

5 – USE FAST HOSTING

One often overlooked, but possibly most important, factor of website speed is web hosting.  Most people start with shared hosting because it is the least expensive – however, not all shared plans are created equal.

Shared hosting is when your websites share the same server space with other websites.  Often, web hosts who offer cheap prices clog their servers with too many websites making it slow for everyone using the same single server.  Here are 3 well-known web hosts to avoid.

In recent years, cloud web hosting is gaining popularity and for good reasons.  With cloud hosting, your website is distributed over multiple server instead of just one.  If one slows down, there are other server computers capable of carrying the load leading to maximum speed and uptime.

Another benefit is scalability.  As your website gains more traffic, hosting in the cloud allows you to add additional resources at a moment’s notice.  This is possible because your website isn’t bound by one server.  If you’re still stuck on the traditional non-cloud shared plan, it’s a good idea to future-proof your website with the cloud.

Here are 2 web hosts that offer superior performance backed by glowing user reviews.

  • NameHero offers affordable hosting plans all deployed from a private cloud server.  Their shared plans start at only $3.29 per month making it one of the least expensive ways to get cloud hosting with LiteSpeed.
  • They offer the best performance to price ratio with an in-house support team and is also the reason why this website is hosted with NameHero.  Check their trustpilot reviews.
  • SiteGround is another reputable web host for their reliability and great support team.  Similar to NameHero, they have some of the best uptime but their cloud hosting packages come at a cost.
  • They do offer affordable shared plans but if you’re looking for speed, you might want to lean towards cloud hosting.  Check their trustpilot reviews.

 

6 – USE WEB HOSTS WITH LITESPEED SERVERS

Continuing on from the topic of web hosts, the type of a server also has an influence on website speed.  The most common type of server technology used by web hosts is the Apache or Nginx Web Server.

litespeed

Although they are the most widely used, they aren’t necessarily the fastest.  In terms of speed, LiteSpeed is faster and more efficient.

Introduced in 2002, a single LiteSpeed server is capable of managing the same amount of traffic as two Apache servers.  It has scalable characteristics like cloud hosting so using a web host with cloud and LiteSpeed can really turbo-charge the speed of your website.

LiteSpeed also uses Apache settings so switching doesn’t require any changes in configuration.  It is the best direct replacement for Apache servers and is also better at handling of DDOS attacks.

LiteSpeed does come at a cost but is free with some web hosts like NameHero and Hostinger.   If you want to future-proof your website, use a web host that uses LiteSpeed servers with LiteSpeed Cache (LSCache).  Learn how to setup LSCache with Cloudflare.

 

7 – MINIFY HTML CSS JAVASCRIPT

Minifying the HTML, CSS and JavaScript is another easy way to increase the speed of your website.  Doing so will remove the white spaces and unnecessary characters to reduce file size and make it load faster.

When you view the page source of any minified web page, the code will be difficult to read for humans but optimal for computers.  It’ll look like this:

One thing to keep in mind is that minifying JavaScript files can sometimes break your website because scripts may not function properly.  In such instances, it is necessary to enable minification only for HTML and CSS files while disabling it for JavaScript files.

You shouldn’t have to install more plugins just to minify HTML, CSS and JavaScript files.  This feature is already included in caching plugins which you should already have installed – it is supported by both WP Fastest Cache and WP Rocket.

Another option is to use a Content Delivery Networks (CDN) which also supports minifying HTML, CSS and JavaScript files.

 

8 – CONNECT TO A CONTENT DELIVERY NETWORK (CDN)

Content Delivery Networks (CDN) helps websites load faster by distributing content from a network of data centers.  This is done from servers placed around the world that holds cached data of your website, and delivers it from a server with the closest proximity to the person requesting it.

Without it, data would have to be routed from your web host’s origin data center which could be thousands of miles from the end-user.  In layman’s terms, it’s just efficient logistics of data based on a geographical location that’ll help users see your content faster.

If you expect a lot of traffic to your site or visitors from around the globe, using a CDN should on the top of your list.  CDNs can get costly but Cloudflare offers a free basic plan that caches the following files extensions.

clouflare file extensions cached
Source: cloudflare

Cloudflare is a popular CDN with data centers in over 193 cities around the globe.  It’ll help your website load faster and for even more speed, they also have a service called Railgun.  Cloudflare delivers cached data faster while Railgun helps quickly deliver non-cached data.

FYI, Railgun is available with Cloudflare’s business plan but if you host your site with NameHero, it is free with their hosting plans.

 

9 – ENABLE GZIP COMPRESSION

Using GZip compresses files like HTML, CSS and JS when serving browser requests to the end user.  If you’ve ever zipped a file before transferring it via email, then this concept shouldn’t be new to you.

Web pages are served faster because users visiting your website will be downloading smaller files.  Once GZip is enabled, the files should be compressed by approximately 70-80 percent.

Additionally, less bandwidth is used from your server which can help keep costs down with web hosting.  To check if your website has GZip enabled, you can run a test on sites like giftofspeed or whatsmyip.

Here are 3 ways to enable GZip:

  • The easiest way to enable GZip is by using a CDN like Cloudflare.  It automatically applies compression with GZip so if Cloudflare is already activated with your website, there’s nothing else you need to do.
  • Note: Pingdom may not recognize GZip with Cloudflare even though it’s active.
  • The second method is by changing a setting in MultiPHP INI Editor from cPanel.  gzip with multi php ini editor
  • From the drop down menu, select your domain, then Enable zlib.output_compression enable gzip from multiphp INI Editor
  • Lastly, the final method of enabling GZip compression is by editing your htaccess file using FTP or File Manager.  This method can seem more intrusive because you’ll need to edit the server configuration file.  For Apache servers, add this code at the very end of the htaccess file.

    <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>

 

10 – UPDATE WORDPRESS TO PHP 7

PHP is the server-side language WordPress is written in.  If your site is still running off PHP version 5, it’s time to upgrade to the newest version of PHP 7.  Version 7.2 can be 2-3 times faster than version 5.6 and is able to handle roughly 70% more requests per second.

There are several way to determine which version of PHP your website is running.  You can check by installing any PHP version checker plugin, from your cPanel, or by accessing your php.info page.  Updating to the latest version can be done directly from cPanel.

cPanel select php version

Select the PHP version you’re updating to and Set as current.

change php version

Note: It is a good idea to check your web host’s default PHP version before upgrading to the latest version of PHP 7.

 

11 – AVOID HEAVY TEXT SHADOW AND BOX SHADOW IN CSS

This one is very simple but very effective if it applies to you.  Adding shadow effects to texts or boxes are great for adding a 3-D look to your website.  It promotes a look of isolation from a web page and is useful when you want something to visually pop out.

However, using heavy shadow effects can cause some serious lag when loading a web page.  Not only does it cause a lag, a web page can get stuck every time that portion of the page gets scrolled back into view.

If you’re using heavy shadow effects on your website, you should check to see if it’s adversely affecting your page load not only on desktop but also on iOS and Android devices.

 

12 – REDUCE HTTP REQUESTS

When a user visits your website, a HTTP request is made to your server for the files needed to load your web page.  Whether it’s a HTML file, CSS file, JS file, image file, etc., a HTTP request is needed for every file needed to load that page.

Running a speed test with Pingdom or GTmetrix can check how many HTTP requests are made for your website.  From the Waterfall tab, you can determine which requests take longer to load.

Some steps you can take for reducing HTTP requests are combing CSS and JavaScript files, deleting unnecessary images or files, prevent loading of plugins when not needed, and using lazy loading.

Note: Combining JavaScript files can be done from your caching plugin.  But doing this can sometimes break your site.  If you see something not working properly after enabling combine JS, disable it.

Images that aren’t optimized or using too many images are one of the biggest reasons for slow loading pages.  If this is the case for your website, using lazy loading will help with lessen initial HTTP requests by delaying image loads as they become visible to the user.

This feature is available with the WP Rocket caching plugin.  Preloading fonts also helps with faster page loads, which can be done with Asset CleanUp.

 

13 – DISABLE SETTINGS & PLUGINS ON PAGES THAT DOESN’T REQUIRE IT

Not all settings or plugins are required for every page of your website – so it wouldn’t make sense to load them when they are not needed.  For instance, loading a contact from plugin from your site’s Home page is an unnecessary HTTP request if it’s only accessible from the contact page.

Asset CleanUp is a WordPress plugin that lets you optimize these settings.  You can decide which plugins to unload when not needed.  There are also settings that lets you toggle common unloads like emojis, dashicons, link and meta tags.

Asset CleanUp also allows preloading of fonts without modifying any code.  The plugin is free to use so test it out to see which settings are optimal for your site.  Here are some tips on steps to take:

  • Disable unused plugins on Home page from CSS & JavaScript load manager.
  • Disable unused plugins on blog posts from bottom while in edit mode.
  • Emojis and dashicons can be disabled from Site-Wide Common Unloads tab.asset cleanup common unloads
  • Links and meta tags can be disabled from HTML Source CleanUp tabasset cleanup html source
  • Google fonts or local fonts can be preloaded from Fonts tab.  You can toggle to combine multiple Google Fonts API request into one.

 

 

 

SUMMARY

This guide showed how to speed up your website and make it faster.  If you followed the steps, there’s no doubt it should have helped with your website load time.  You can try running a speed test again and compare the before and after results to check the improvements.

Your website should also benefit from lower bounce rates as more users stay on your site longer – you can track these metrics in Google Analytics.  If your website isn’t setup with Analytics, Google recently released their own plugin called Google Site Kit.

Google Site Kit is an all inclusive plugin to measure website metrics.  It includes Analytics, Search Console, Adsense, PageSpeed Insights and more.  It is still in beta mode but it can still be manually installed.

Learn more about Google Site Kit and how to install it.

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *