A fast loading website is essential for many reasons, often directly relating to how your users engage with your content. Even small increases in load times of your website can lead to massive gains when you are trying to improve on key engagement metrics. This article breaks down 10 ways that you can improve the speed of your WordPress website.
WordPress is the most popular content management system (CMS) in the world. It powers over 65% of all websites that use a CMS and over 35% of all websites in general. WordPress can be an extremely powerful tool that allows users to make content changes without touching the code and provides access to millions of plugins and themes to add unique features to your website. Although these are huge upsides to the platform, WordPress is far bulkier than a solution that does not use a CMS, so it is important to be mindful about the speed of your website when building in WordPress.
Fast page speed is essential in an age of short attention spans and users demanding content delivery to be speedy and optimized. Additionally, Google is highly focused on page speed, especially with the rise of mobile devices. It is a ranking factor, meaning that the faster your website, the more likely it is to be ranked higher than your competitors in Google’s search engine results page. This is essential for search engine optimization (SEO), which is a practice that aims to increase your ranking in a Google search for terms that are relevant to your business.
Read on for our 10 recommendations on improving page speed, ranging from beginner to more advanced. Please note that your website does not need to be on WordPress to make use of many of these recommendations.
The easiest way to improve your page speed is to ensure that all the images on your website are optimized. Your website is just a series of files, with images generally being the largest of these files. Think of images as two pieces: file size and resolution. Generally speaking, the larger the resolution, the larger the file size. An example of resolution is something such as 300×200, meaning 300 pixels wide by 200 pixels tall. If you have an image that is 3000×2000 on your website, for example, then this will take a very long time to load and is unnecessarily large.
Resizing this to something more reasonable, such as 1500×1000 or even 750×500 is the first step of optimization. After that, you can dial in the quality of the image. Most programs such as Photoshop or the free Paint.net will allow you to choose between 0-100 for optimization once you resize and save an image. We recommend anywhere from 60-80 in this range – eyeball it and see how low you can go without it pixelating. If you are wanting to use a simple browser based resizer and optimizer, there are many available, such as This technique will drastically improve the speed of your page.
Yes, there are great WordPress plugins out there and online forums may tempt you to download many of them, but it’s important to realize that a plugin can be very large and increase the bulk of your website. The rule with plugins should generally be: if you use almost every feature of the plugin, then it might be worth it. If you only use one or two features of a large plugin, there may be a more custom solution available.
Ask us about what sort of functionality you are needing from your website and we are happy to assess and let you know if a plugin is the best route.
Think about caching as memory. When you learn or see something, it is easier to recall that information when you revisit it. Your web browser has similar functionality. When you visit a website, your browser will cache some of the files, whether it is an image or file of code, making it faster to access when you revisit a site. You can test this by visiting a website for the first time, then refreshing the page. You will notice that it takes longer to load the first time.
Within your website’s htaccess file (ask us about the specifics on this!) you can set a caching policy that instructs browsers on how long it should cache a file. In a page speed testing tool, such as Google PageSpeed Insights or GT Metrix, you will commonly see this noted as “Serve static assets with an efficient cache policy” or “Add expires headers.”
By default, WordPress allows for support of emoji icons as of version 4.2. This converts character combinations such as “:)” into emoji graphics. Many site owners will find that this is not necessary. It creates another “request” (more on this in our next point) to the server, which will slow down the loading of your site.
There are plugins you can use to disable this, but there is also some custom code that can be added to your site to remove this extra request. We highly recommend removing emoji support unless you know you will be using it often!
As mentioned earlier, your website is just a series of files that live on a server. Each page will request a certain number of these files when a user hits that page. Keeping this number of requests to a minimum is key to having a speedy page load time. There are several ways that you can reduce this number of requests, with many of the other points in this post helping.
Many of these options can be rather technical and require some development knowledge, so be sure to reach out and ask us about our practices when it comes to server requests and how we can help you and your website.
There are several different formats that images come in, ranging from .jpg and .png to .svg and .gif. It is important to know which format is appropriate for the usage. At a high level, you will generally run into .jpg, .png and possibly .svg. Both .jpg and .png files are “raster” files, meaning that they have a specific number of pixels and will begin to pixelate when you size them to be larger. On the other hand, .svg files are “vector” files, meaning that they will not pixelate no matter how large you resize them – this is because they are written with code that tells your browser how to display the image.
The rule here is to use .jpg images for any standard image that does not have a transparent background. Use .png images for any complex image (lots of colours, angles, lines) that does have a transparent background. Use .svg images for simple images that have complex backgrounds, such as your company logo or icons used throughout the website. With .svg images, you can embed them right into the HTML of your website, which makes them load faster and doesn’t require another server request – ask us about this one!
Without getting too technical, code that is easily readable is broken up by spaces and line breaks. Minifying your code removes these spaces and line breaks, as spaces and line breaks take longer for your browser to process. You can use a plugin to minify this code, or have your developer ensure that the code is minified. This is a very standard process, so they should definitely be familiar with it.
YouTube is an excellent resource for video hosting. You can store large video files on their servers, which are publicly accessible. What about when it comes to your website? You can rather easily embed a YouTube video, but this is not always be the best option.
A YouTube video requires lots of requests to the server, which will slow down your page quite a bit. A video that is hosted locally will not require as many requests but will take up more space on the server. Generally speaking, locally hosted videos are favoured for short videos (under 30 seconds) whereas YouTube videos are suited for longer videos.
Lazy loading is the practice of only loading in specific resources when a user scrolls down to them. You can see this being used on many popular social media channels such as Facebook, Instagram or Twitter – open your feed and try scrolling to the bottom. You will notice more posts dynamically load in.
With your website, you can load larger resources only when a user scrolls down to them, which can drastically improve load times. This is especially useful with resources such as YouTube videos or larger images, which can eat up massive amounts of precious initial load time. Ask your developer about lazy loading or give us a shout!
Images are going to be the largest files that are loaded on your pages. For this reason, we recommend minimizing the number of images used, if possible. We realize that the design of the website may call for more imagery, but with minimalism and simplicity being staples of modern design, we find that only using images when necessary is key to having a speedy page load.
You will notice that most of the more beginner tips above relate to images, which is great as those are going to be your main target when optimizing the site. The other tips can also have a dramatic effect on your page speed, so make sure to let us know if you need help with any of these! We take speed and optimization very seriously and make sure to not launch any of our websites without a rigorous optimization process.