Why should I optimize my WordPress site for speed?
You’ve probably heard that speed is important for websites and that you should optimize your WordPress sites.
That’s incredibly true and for reasons above and beyond just conversions, which we’ll talk about in this article. Speed optimization has both direct benefits and indirect benefits related to visitor experience, decreased costs & potential increased conversions.
The “only a face a mother could love” syndrome.
Why optimizations are sometimes neglected.
One of the problems with WordPress relating to speed optimizations is also the benefit of WordPress. It’s incredibly intuitive and you can be building a site in no time; however, that can often create situations where speed optimizations must be added retroactively – which is incredibly more difficult than having a keen awareness of it up front.
As a result, many WordPress websites can be relatively slow. This can cause situations where owners of the site are oblivious to the frustrations that can cause because owners who built the site, are proud of what the site displays, and have a vested interest in the site have a sense of patience for it that others won’t. Someone who invested a month building a WordPress website (and that maybe isn’t entirely aware of speed optimization important) might have a site that’s 2 seconds slower than their competitors, but justify it as “just 2 seconds”. I call this the “face only a mother could love” syndrome where webmasters with a slow website allow their pride of what they built get in the way of making improvements because they don’t feel the same frustration about the user experience.
Images are often at the forefront of this problem.
Images typically end up being some of the most bandwidth and resource intensive components of a website, especially as the web has pushed for greater amounts of media usage amidst text. And of course, because imagery is visually appealing and black text on a white background can be boring compared to a fun and conversion inducing hero image.
An entire web page consisting of a few lines of HTML & CSS only a few KB large in size can be slowed to a crawl if one of components on the page requires downloading a large image that’s several MB large. That can be problematic.
But WordPress is kind of clunky by default…
In order to understand why WordPress speed optimizations are so important to get an edge in SEO and user experience, it’s important to understand how WordPress works by default. Every WordPress website consists of files and a database. The database holds all of the user generated content, like the words on a post or the URL of an image that needs to be loaded that’s been saved to the WordPress uploads folder or the usernames of users on the site. Even if that information is relatively consistent (i.e. static), WordPress still loads it dynamically by default.
Here’s what happens.
Each time you visit a WordPress website a series of steps occurs. The browser requests the domain name and tells the computer to connect to the server that houses that domain name. That part is consistent regardless of website, but in the case of WordPress, each time a visitor access the website, the first thing that happens is that PHP (a coding language) code runs to dynamically build the content that needs to be displayed on the site by making requests to the database to fetch the information. That information is then generated into an HTML file that the browser is able to understand and display.
See the problem?
If the content (or certain aspects of content) on your website rarely or never changes, you could eliminate several steps just by providing the HTML content immediately upon request instead of dynamically fetching and building that HTML on each visit. The use of a database provides a lot of benefits, but there’s ways to approach it that provide the same benefits of serving the HTML without sacrificing the use of a database, which we’ll cover later.
The Reasons Optimization is Important
User Experience
At the forefront of the problem is that slow websites can be incredibly frustrating for end users who are [im]patiently waiting for a page to load. Assuming imagery is such a large portion of the components that require downloading to a browser, it would make sense that speeding up the time it takes to download those images would improve load times and thus improve the user experience.
Conversions
Lending itself greatly to the user experience, to take it one step further that results to greater conversion rates. Websites exist to serve a purpose to a visitor: inform them, sale to them, sign them up, show them something or make them aware of something. If the imagery is contributing to slowing down that process it could be doing so in a way that decreases the amount of people willing to wait around while the assets load, thus decreases the amount of people your website objective can reach.
Dial Up Connections
Believe it or not, but dial up internet is still a thing and it serves a surprisingly large number of people. Aside from the nearly 3% of Americans on dial-up internet there’s also a wide number of people across the world that don’t have access to hide speed internet or are accessing websites through throttled connections. Optimizing imagery ensures your optimizing the speed in which media on a web page can be delivered to them.
Cost
There’s a very real cost for entities that pay for their hosting on a bandwidth or storage basis. If you’re on a cloud hosting plan or content delivery network that’s charging you per GB of storage or bandwidth used for uploading and downloading files, now you have a very direct cost association between the size of an image and the cost to host it.
Even if a shared web hosting plan is unlimited, at the very root of the service, someone along the web hosting supply chain is paying for that data on a per GB level whether that’s through the use of reseller cloud hosting or physical data centers.
Consider for a moment that your unlimited hosting plan isn’t actually unlimited…mostly because, well it’s not. You only have so much server resources you can allocate to an account and the users accessing your site requesting assets for download, the most you’ll eat up those finite resources. While that may not immediately hit your bottom line at a fixed cost for hosting, if the underlying services providers see increased expenses as a result of increased data storage, delivery and processing needs, those costs will eventually be pushed to customers. Imagine if every single web hosting customer optimized their images, this would decrease the total minimum bandwidth and storage requirements the host needs to serve their customer base and thus total overhead cost and vice versa.
A bit outdated, but according to the 2012 ACEEE Summer Study on Energy Efficiency in Buildings:
Our major finding is that the Internet uses an average of about 5 kWh to support the utilization of every GB of data, which equates to about $0.51 of energy costs.
https://www.aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
Assuming an image can be optimized to create a 50% reduction in size without affecting the end user experience, suddenly you can see how the math would work out that two seemingly identical versions of the internet, one in which every website was optimized to be the smallest size it could be and one in which every image was uploaded at it’s original size, would have dramatically different total costs. But those energy costs extend beyond just dollar bills.
Environmental Impact
It’s easy to become oblivious to the energy required to display a web page. We type in a URL and imagery and text just appear on the screen in a matter of seconds. Behind the scenes though is a wealth of hardware and networking infrastructure pulling from the power grid to ensure a website is available 24/7. Those lines of code that seem to exist intangibly through a screen equate to very real, tangible energy producing power plants to keep both the data centers and end user’s computer powered on and processing data. Looking at any one individual website, an image of 2MB might not seem like it moves the needle, but as you scale up across billions of web pages (and potentially trillions of images being stored) that starts to add up.
Methods.
Now that we know why it’s important to optimize WordPress, let’s take a look at some of the ways we can improve the speed of a WordPress website.
In fact, some of these tools can be applied to many websites whether they’re WordPress or not.
Start With a Baseline
Using a tool like GTMetrix is a great way to evaluate the current speed of your website and provide some ideas on ways to improve.
Upload Images Scaled In Advance
One of the primary ways to improve loading speeds is by decreasing the image size before it even gets uploaded to WordPress. Through plugins (and WordPress image resizing), some of this happens on the fly as you upload media, but you still end up with situations where images have to be dynamically resized.
If the maximum width of your website is 1600px, there’s never a situation where an image needs to be larger than 1600px. Often, high resolution images can be as high as 2400 pixels or more, requiring significant downsizing.
Furthermore, images that get uploaded to the correct width, for example, but end up being dynamically resized for a certain widget of your website are better of being loaded exactly at the height and width needed. If you upload an image at 300 x 300 & WordPress needs to use it at 300 x 250, it ends up using the full image size, but resizing it in the browser.
Use A Caching Plugin
As we discussed earlier, WordPress builds pages on the fly using PHP code to create the HTML content using a variety of files & information from a database.
A caching plugin, like WP-Optimize, saves the HTML that’s generated when a user visits the page and then serves that HTML file to subsequent visitors. This improves load time dramatically!
Minify Code
As a swiss army knife of features, WP-Optimize also reduces bloat in the code. Each line of text in a file increases file size and certain lines, such as informational notes that are ignored when processing the code, can safely be removed. Many plugins, like WP-Optimize, do this automatically, though you need to be careful and check that it doesn’t break the site.
Tired of reading articles to answer your questions to make your website work right? Let me help.
“…[my] success is 10 years in the making…I’m selling you all the times I failed, all the mistakes I made, and all the setbacks…that’s where the value lies – experience. I’m selling you on my knowledge of ranking a website with a list of SEO failures that a new webmaster is apt to make without a helping hand.”
Landon – Read More
Use a CDN & DNS Service
So these services are separate, but often provided together through companies like Cloudflare, which actually offers their basic CDN & Name Server service free. The DNS aspect requires moving your DNS records to be maintained by Cloudflare. The benefit to changing your name servers to them is that their DNS lookups are the fastest DNS directory. Imagine DNS like an address book and it takes time to open the book up and find the address you need. Some services improve that speed.
Using a Content Delivery Network, which also is offered by Cloudflare as part of their basic plan, allows certain resources like images to be saved on a network of computers that are located physically closer to users. Believe it or not, tangible wires and physical distances still affect page load times. If your server is located in Chicago, but a visitor to your website is in Europe, that takes much longer to download an image than if the server was in Europe. CDNs make that possible.
A CDN works as a middle man between your website and the user. The CDN company downloads certain files related to your website to their server, distributes them across their network, and then serves them to visitors based upon proximity of the visitor’s IP address compared to the nearest server holding that file.
Delete Unnecessary Plugs
This is especially important if the plugins are still activated. Let’s say you have a website using Contact Form 7, but you decided to change to Fluent Forms. Unless you deactivate Contact Form 7, it will continue load on every page. Speaking of that, there are also methods of selectively choosing how and where certain plugins load, but that’s a bit more technical. Deleting plugins save space as well, which can decrease processing times required for performing backups and improves security on your site by reducing potential vulnerabilities a plugin you no longer use might have.
Even if you deactivate a plugin, certain database entries for that plugin may still exist, leading to bloat in the database that can slow down lookups.
Database Cleanup
Rounding out WP-Optimize features is a database cleanup service that optimizes and cleans the WordPress database. Over time, it can get bloated with revision entries, spam entries, and other entries that can safely be removed. The smaller the database, generally the faster things will work when performing a fetch of information from it.
Image Optimization & Lazy Loading
While we talked about serving scaled images already, there’s additional changes that can be performed using algorithms that intelligently decrease file size. Typically, these optimization provide a sliding scale of quality versus compression. Some optimization features, like removing locational and camera information embedded in the image won’t affect quality at all. However, optimization features that intelligently combine colors (such as two close shades of black into one black blob) can, so it’s important to play around with these settings.
Lazy loading is also a great way to improve perceived load times.
Using lazy loading, images that lower down on the page aren’t loaded until the browser window reaches them. There’s no reason to load an image if the user doesnt even scroll far enough to view it.
.htaccess Methods Worth Noting
GZIP Compression
Most speed optimization plugins will enable this, but if not it can be added to the .htaccess file. This a method of compressing page sizes even smaller.
Browser Caching
This method actually saves files directly to a user’s computer. While it doesn’t speed up first time visitors, once an image (like a logo in the header) is saved locally to the computer, it doesn’t need to download it again for subsequent page views. These files are typically saved for 28 days (more or less) unless a browser deletes them locally sooner. Again, this feature is commonly added by caching programs, otherwise it can be added by the htaccess file.
Disable eTags
Since we’re setting our cache control and header expirations, we want to force browsers to rely on those instead of etags. By eliminating etags, we reduces additional requests for information we’re already supplying.
Enable Keep Alive
Each time you visit a website is like unloading groceries from the car. The car (website) pulls in and now you (the browser) must deliver them from the car to the house. Except, by default, each time you walk outside and return with a bag, you have to ring the doorbell and open the door. Not very quick, huh? What if instead, since you’ve already validated the car is the right car, the groceries are the right groceries and the house is the right house, you just kept the door open. That’s what enabled Keep Alive in your .htaccess file does.
