So you finally got your long-awaited WordPress site on the web. You paid top-dollar for the latest responsive parallax theme, put all your best pictures on the site and loaded it with the latest plugins. You go to view it live on the web and… wow, this thing takes forever to load on the page. You check it from your 4G phone to see if it’s a problem with your internet. Same thing. You have a friend check it, only to find it takes them about 10-12 seconds to load the homepage too. Suddenly, your great new site isn’t so great anymore, and you begin to wonder how you are going to get visitors to stay on a page with a ten-second-plus load time.
Is this you? If so, don’t worry, and don’t scrap your WordPress site or run out to change hosting providers thinking you just need more bandwidth. You have options, and I am going to show you first how to discover what is slowing down your site, and then give you five of the easiest fixes out there that can optimize your WordPress site and have you outpacing the other guys in no time.
If you choose to ignore this problem, you do so not only at the risk of losing valuable visitors to your site, but also losing rank in the search engines simply because your site is slower than competitors. Google counts site speed as a ranking factor since early 2010 and will penalize or reward your site accordingly.
Find The Problem to make WordPress load faster
Thankfully, there are numerous free tools out there to assist you in figuring out how fast, or how slow, your site is. Many of these tools also have helpful, step-by-step suggestions on how to correct your site speed bumps.
The two most popular tools out there are Google’s Page Speed Insights and Pingdom’s Website Speed Test.
Google’s tool is great because hey, let’s face it, Google is the king of search, and with this tool, they essentially tell you exactly what they are looking for to speed up your site to their specifications. Google’s tool also has a very user-friendly analysis and walk through, giving you an overall ranking for both mobile and desktop load speeds.
Pingdom’s tool offers a more technical, nitty-gritty look at your site’s page speed and, in addition to offering its own similar list of site speed improvements, offers a useful cascade-view that helps you find the parts of your site that take the longest to load.
1 – Go to their main page and type in your site URL.
2 – Google will analyze the site and feed you results with a speed rank and their color-coded suggestions to improve your site speed. Google gives you line-by-line suggestions on the best fixes to implement on your site, as well as tips on how to accomplish those fixes.
1. Go to the website speed test tab and enter your site URL.
2. Pingdom will analyze your site and give you a brief informational report on page load time, page size, number of requests sent to the server and their performance rating for your site. You will also notice the waterfall (also called cascade) report immediately below that information summary. This will show you the culprits that are slowing down your page load by file name (like the slow-loading CSS file in the example below), a very useful piece of information for our next section.
If you want more options, Yahoo also offers YSlow as a similar tool to Google’s PSI, and WebPageTest offers output similar to the cascade view that Pingdom gives you.
What To Do Next to make WordPress load faster
After you have in your hand the results from the speed tests and a good idea of what is slowing down your site, you need to do something about it. Knowing the problem is half the battle and an important half, but it is only half. Here are five things you can do that address the most common speed problems and some best practices to fix them.
1. Shrink Down Your Photos
Beautiful photos of a Maui sunset, or the latest snapshot of your corporate office, may be an integral part of your website, but they are often the number one culprit for slowing down a site.
Optimize your images to save space and speed. You don’t need a full 300dpi resolution for the web; drop it to 72dpi, and save it as a JPEG at a quality still fit for viewing, though lower than you would for printing. Saving a JPEG at 40-60% resolution is about the optimal range for file size and quality. Aim for at least 60-100kb or less per image. Open source photo editing software such as GIMP (www.gimp.com) are readily available for all platforms.
You can see an example here of a site that started with images of 480kb or larger and utilized image compression to bring them to around 100kb or less without a loss in viewable quality. Doesn’t look too bad at a lower resolution, does it? Ideally, you’d want even smaller pictures than that on a site, but sometimes the client wants that full width 1200px by 500px shot, and you have to make it work.
You can further compress images losslessly with Yahoo’s free tool SmushIt. Just upload your files and Yahoo spits them back out in a compressed format for you after stripping metadata and other space-consuming items. You may find you need to utilize PNG as well if, for example, you need to preserve transparency for a design element.
2. Cache Your Site
The dynamic nature of WordPress sites makes them somewhat resource intensive when it comes to serving up page content from the server to your visitor. That’s where page caching comes into play. Essentially, you are storing a pre-loaded static HTML file of the dynamic content your end user would see from your site. This significantly decreases page load time and, when used properly with the correct refresh intervals and trigger points to re-cache your site pages, there should be no issues with stale page content being delivered to your visitors.
The simplest way to do this, and the way that WordPress itself recommends, is to download either of these plugins and install them on your site:
Browser caching drastically improves user experience (though won’t necessarily affect your initial page load speed) by locally caching files on a user’s web browser once they access your site. You can activate browser caching for the typical large-item files on your site, such as JPEG photos, JS scripts, and your CSS stylesheets, by inserting this code into your .htaccess file on your server (it should be in the folder you upload files to via FTP).
3. Compress Your Files
Depending on your web server configuration (chances are good you are on an Apache server; double check with your hosting provider though!) you should have built-in modules ready to compress your site files before they are served to the end user. If you aren’t sure or find out that is not the case, contact your web host to have them install mod_gzip capability for you. You can utilize the power of on-the-fly file compression GZIP compression in one of two ways.
First, the simplest way to do it manually is to go to your .htaccess file and activate it by inserting the following code:
If that’s not easy enough, you can also enable compression through the WP Super Cache plugin if you downloaded it and installed it on your site. There will be an option to do so under the ‘Advanced’ tab.
4. Minify Everything You Can
Minify might sound the same as compressing files, but it is a different process. What minifying essentially does is strip white spaces and other needless data from your JS, CSS and HTML files to save space on the page load. You will need a tool for this unless you want to go line-by-line through your files and delete all whitespace. Several WP plugins are available:
5. Cut Out The Fat
You may have noticed when you ran a speed test that you had numerous different CSS and JS files that were taking some time to load. Often this is the fault of plugins you loaded onto your WordPress CMS that are making external requests for different files they need to operate with. One of the best things you can do before launching your site, or even if your site is currently up and running, is to deactivate and uninstall EVERY plugin that you do not absolutely need. Go to your WordPress ‘Plugins’ tab, go to ‘Installed Plugins’ and start cutting out the fat. The difference can be amazing.
Closing It Out to make WordPress load faster
These are just a few of the things you can do to speed up your WordPress site significantly with these simple, but substantial, modifications. Other options that go beyond these on-site modifications would be using a Content Delivery Network or enrolling your site in Google’s Page Speed Service, but that can be discussed more in future articles.
Please do remember the cardinal rule of WordPress site modifications, especially when you are re-configuring server-side settings: backup, backup, backup! Backup your site database, and site files, before performing any of these improvements. Something could go wrong either by user error or by a plugin conflict, that may negatively affect your site. Make sure you have a backup ready to go just in case and get ready to be amazed at the difference a few simple modifications can make to your WordPress site’s page speed.