Optimize Images
When trying to speed up Wordpress, start by taking a look at your website images. The first thing that any Wordpress website owner should do prior to uploading any images to their website is optimize them. Most people don’t realize just how unnecessarily large images can be before they are optimized for the web. Optimizing for web typically just removes any unnecessary image tagging data, EXIF data, location data, and unused color data, so images can be considerably optimized without losing any quality. Image size is usually one of the biggest problems when it comes to slow website speed, so we are usually able to speed up Wordpress websites quite a bit with our first round of image optimization.
If you do not have a plugin on your website to help with image optimization, you can always use the website TinyPNG.com. Their optimization tool is free to use and does an excellent job of compressing .jpg and .png images. They also have a Wordpress plugin available that you can install on just about any Wordpress website. All you need to do to use the plugin is generating a free API key on their website, and then any new images uploaded to your website as well as any existing images on your website can be compressed.
Of all of the page speed improvements, we will detail, image optimization can often times have the biggest impact when trying to speed up Wordpress. This is due to website owners uploading images that exceed reasonable sizes. We typically suggest images be no larger than 300kb - 400kb for banner images and 150kb to 200kb and less for smaller images. We also suggest that you keep the total number of images on a page between 10-12 at most and make sure that image dimensions never exceed 2000 pixels in width. One really easy way to improve PageSpeed for Wordpress websites is to make sure your images are optimized.
Minify & Combine CSS & Javascript Files
Another really great way to quickly speed up Wordpress and improve your PageSpeed score is to minify your CSS and JavaScript files. When it comes to JavaScript and CSS, minification is the process of removing all of the whitespace, comments, line breaks, and other extraneous space. As white space, line breaks, and commented code all add size to a file, this process makes sure that files are as small as they could possibly be, and often times creates a considerable amount of savings. Minification is different than “compression” as the minified code does not need to be interpreted or uncompressed in order to be run.
In addition to minifying code, JavaScript files and CSS can also be combined. What this means is taking many or all of the JavaScript files that a website uses and combining them together into one file. The same would then be done with all of the CSS files on the website. This can be very beneficial to the website and it’s load time as it can greatly reduce the number of requests the site is making. For example, instead of having to load 10 individual CSS files at 15kb each, the site can just load 1 CSS file at 120kb (assuming some loss after minification). While this can sometimes lead to quirks that require some debugging in JavaScript, this is generally a pretty safe practice when it comes to CSS. This can also go a very long when in helping to speed up Wordpress.
There are a number of ways that code can be minified and combined depending on the resources available and your comfort with code. First, there are a number of plugins available within Wordpress that will do this for you. If your site is already developed, you are using a pre-built theme, or are uncomfortable using command line based web design tools, then a plugin is probably the best bet for you. There are a number of great options available, all of which are very low risk to site health as soon as they are disabled, any impact would be immediately reversed. You will also typically see the impact from these tools in tests like GTMetrix or our website grader right away, making them great to improve PageSpeed for Wordpress.
If you’re comfortable with web development or command line based web design tools, then you may want to use Gulp. Gulp is a streaming build system that uses NodeJS to run on your machine. Gulp can be used to compile SASS files, combine and minify CSS, combine and minify JS, minify HTML, minify and optimize images, and so much more. Gulp does require an intermediate level of web design knowledge, but you can learn more about Gulp and how it is used here.
JavaScript Deferment
JavaScript is a “parser blocking” resource, meaning that as the browser is loading a JavaScript file, it stops everything else from loading while this happens. This includes text on the page that has yet to render, images on page and CSS on the page that has not rendered yet, and just about any other element on the page that comes after the JS file is called.
This can lead to problems, especially if you are loading several JavaScript files on one page. This can interfere with important metrics like the time to first byte and time to first paint, even when the actual render of the page doesn’t require these files. For example, a JavaScript file that renders a map in the footer of your website does not need to load in the “head" section of the website. This update can also have a huge impact when trying to speed up Wordpress as it will allow all of the website assets to load more quickly.
There are a number of ways that JavaScript can be deferred in modern browsers. The best way to defer JavaScript is simply to load the JavaScript files after everything else on the page has loaded. You can do this by placing your script tags just before the closing “body” tag on your website. This will be supported in any browser used as long as the browser supports JavaScript.
Another approach to take is using the async or defer attribute on the script tag directly. For example, this would look like [script defer src=“script.js”] or [script async src=“script.js”]. These tags indicate to the browser that the script can be load asynchronously (or at the same time as other scripts) or that it should be deferred. With defer, the JS file can be downloaded while the HTML document is still parsing. If the file is fully downloaded long before the document is finished parsing, the script is not executed until the parsing is complete. You will often be able to speed up Wordpress very easily with Javascript deferment.
Server Optimization
The server your Wordpress website runs on will also play a big part in whether you can speed up Wordpress websites. There are a number of server modifications that you will need to make but here are a few of the more important ones.
You will want to make sure your website has Gzip enabled, which will ensure that all of your website files and assets are compressed at the server level. You will also want to do things like adding expires headers to all of your static file types, configure ETags, and make sure your .htaccess file has all of the necessary compression enabled. While it does take a more experienced developer to implement these changes, you are usually able to speed up Wordpress considerably by improving the way your server delivers the website. If you would like more information about our Wordpress management services, schedule a consultation today.
Website Caching
Once you’ve implemented all of the other changes from above, you can then begin to look at page caching and server caching. Caching creates a “saved” or “cached” version of the website at the time the page is loaded. The server then is able to load the “cached” version of the page or pages instead of having to load the page and all of its assets each time.
For example, if your page has several images, scripts, images an CSS files, by caching these files you are able to load them directly from the cache instead of having to request them from the server each time the page loads. This can save a considerable amount of time for users, especially for pages with heavier content.
The website owner will also have control over how often the cache refreshes. For example, if the website is going to be updated with new content every 4 hours, you will want to make sure the cache is cleared and refreshed directly afterward. You can usually set this to occur on an action, like when a new post is published. You can also trigger the cache clear manually at any time with just about any caching plugin.
When it comes to caching plugins, they’re all great in their own ways. Two of the better ones we have used however are WP Fastest Cache and W3 Total Cache. Both of these caching plugins are “plug and play” and will deliver huge Wordpress website speed improvements.
Our Favorite Wordpress Page Speed Plugins
Not all Wordpress plugins will slow down your website. When it comes to caching and minifcation plugins, you should see big jumps in your page speed scores after enabling these tools. Here are a few of our favorite Wordpress caching plugins.
WP Fastest Cache
By far our favorite caching tool for any Wordpress website. This caching plugin handles a number of really impactful server-side caching needs and server optimizations with a few clicks of a button. All of the general features of the plugin are free to use for any Wordpress website user, and like many premium plugins, there are premium features available for an upgraded cost. We definitely recommend testing out WP Fastest Cache on any WP install where you will be using caching.
W3 Total Cache
W3 Total Cache is another excellent caching plugin available for free to any Wordpress user. W3 Total Cache improves website speed by improving server performance, caching every static aspect of your website, and reducing the download times of content. W3 Total Cache also integrates with just about any CDN right out of the box allowing your caching and CDN to communicate a bit better. W3 Total Cache is another great option for just about any Wordpress install.
Fast Velocity Minify
Sometimes you may be implementing website caching at the server level, or perhaps the caching plugin you're using does not offer minification. In these situations, you may still be in need of a way to merge and minify your CSS and Javascript. While there are a number of plugins available for this purpose, the one we typically use is
Fast Velocity Minify. The plugin developers update the plugin often, it works well with just about any Wordpress website, and it has a major impact on overall Wordpress website speed.
Compress JPEG & PNG Images
One of the easiest places to make big gains in your website page speed score is in your image optimization. Often times, website owners will upload images that are too large, not optimized, and at much larger dimensions than necessary. While Wordpress does have native functionality that allows developers to resize images that are too large, image optimization is something else entirely. The website and service TinyPNG.com created a Wordpress plugin that utilizes it's API to easily and efficiently compress all of your website images. The tool allows you to compress and optimize images on demand and will also optimize images as they're uploaded. This plugin is one of the most powerful plugins that you can have on any Wordpress website, and best of all it's free to use.
Get Compress JPEG & PNG Images
There are a number of other excellent Wordpress plugins that will help with website speed including caching plugins, compression plugins, minification plugins, and more. We encourage you to test out a variety of plugins for yourself in a development environment to get a better idea for the caching stack that works best for you.
Speed Up Wordpress
If you own a Wordpress website and are interested in improving the web page speed, page load times, time to first byte or any other PageSpeed metric, we can help. Page speed plays a crucial role in your websites page ranking, so it’s important that your website is optimized for premium performance. If you would like more information on how we can speed up Wordpress websites, contact us today to schedule a strategy session.