.. But what if the website can’t handle that much traffic? That would reflect in 4xx and 5xx error codes, unresolved pages or complete downtime. As we know, 404s are not a big deal SEO-wise, but customer dissatisfaction can affect your bounce rates and impact your overall strategy in the long run.
Performance for UX, SEO, Cost Savings and More
DIY site builders and hobbyist service providers are everywhere. This leads to low-cost WordPress solutions bundled with numerous plugins which ends up being a mess.
While I appreciate WordPress as a solution that’s free and open source, with a bearable learning curve, this doesn’t mean that it should be used by non-professionals for business applications. This requires the expertise of professionals who understand how servers work, what happens in the database, how’s traffic transferred through the network, what are OS processes and how is PHP interpret behind the scenes.
Which is why we’ve built our Ultimate Business Guide at DevriX which serves as a go-to resource for our prospects, eager to understand what makes a $500 website different from a $30,000 website.
Our first question for most of our prospects who want to work with us (but can’t justify the prices) is:
How important are the 3S to you: Speed, Stability, and Security?
That’s what really makes the difference.
Website Speed as a Ranking Factor
Website speed is also one of the ranking factors that Google takes into account. Here’s what Matt Cutts said on the official Google Webmaster Central Blog back in 2010:
You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.
As webmasters, we should keep website speed into account and consider it an important part of every SEO strategy. Here’s a short guide on analyzing and improving the site load time of a website.
Testing The Speed Of Your Website
There are several tools that you can use in order to test the load time of your website(s), such as Pagespeed Tools and YSlow. A good alternative would be checking GTmetrix out, which combines the best of both worlds:
A standard test would outline several different sections:
- Pagespeed Score – a rank between 1-100% based on the Pagespeed chart (higher is better);
- YSlow Score – the result would be within 1-100% as well, validating additional criteria provided by YSlow;
- Page Load Time – the amount of time for loading the page. GTmetrix uses different test servers in multiple locations, so this may vary, but lower is always better (studies show that there is an average of 25% abandonment rate for sites loading for 4 seconds or longer);
- Total Page Size – the size of the generated HTML of your page, plus all of its assets (scripts, styles, fonts, images);
- Requests – the number of requests to resources linked within your HTML document – assets and images required for rendering your site successfully;
- List of Recommendations – a handy list of recommendations by GTmetrix for common problems that affect your load time.
Following the recommendations is a straight-forward way of improving the load time for your website. However, some of them are not entirely clear, and more often than not are outside of your control – unless you adhere to a set of best practices or compromise certain features of your site during the performance optimization process.
Website speed is often assessed on desktop machines and laptops for standard business websites or blogs, but there are other considerations that affect mobile users and eCommerce stores as well. Kissmetrics has conducted a detailed research on how loading time affects the bottom line. I also believe that Stellasoft have an interesting post on the matter, too.
Factors Affecting the Website Speed
There are numerous factors that affect the website speed, such as:
- Your CMS;
- The template/theme in use;
- Additional features that include extra assets;
- The hosting provider and your hosting plan;
- Configuration arguments for your host/website;
- Your content.
A slow website is a byproduct of several factors, and you can experiment with each of them until you get the best performance results without affecting the user experience for your readers.
Each CMS loads a good amount of code that should be processed by the web server – which inevitably takes some time. Your theme provides unique styling through a set of CSS stylesheets and fancy scripts, among a few images such as your logo, featured images for your posts, or a favicon. Your web host also plays a major role in forming the final speed, defining;
- the time for processing an initial request
- a series of arguments that could optimize a site for higher traffic
- caching layers handling a larger number of signed-up users or articles
Quick Tips for Speeding Up a Website
1. Use A Caching Plugin
Note: this is the least efficient way to solve your problems at scale but granted, it’s the easiest for starters.
Most popular CMS offer third-party solutions that help out with caching your website. In a nutshell, cached pages are generated once and then a static version is served to guest visitors for a limited amount of time.
If we take an online magazine as an example, its homepage usually lists several posts from multiple categories, among a number of additional features (such as the current weather, the latest news from relevant sources, or the last current number of registered users). Each of those results in a long number of code iterations, as well as a large volume of database queries fetching the latest entries to date.
However, if the magazine doesn’t post often, the homepage will show the same results over the course of a few minutes or even a couple of hours. A caching plugin will take a snapshot of the homepage and serve a clean HTML with the pre-generated data, thus massively reducing the server load, reducing the load times, and allowing for more visitors browsing the site simultaneously.
If you rely on WordPress for your website (currently powering 34.7% of the Internet), a couple of popular choices are W3 Total Cache and WP Super Cache. A reliable alternative (although premium) is WP Rocket, supporting a certain set of edge cases that occur with specific hosts or various plugins out there.
I’ve been working with NitroPack lately and their new SaaS is incredibly progressive. They have conquered other web markets but lately closing thousands of WordPress customers so I absolutely urge you to give them a shot ASAP. NitroPack is a great combo providing a safe caching layer on one end, a CDN on the other, and including some image compression goodies on top of all.
2. Enable gzip Compression
Gzip compression can be enabled for a website on an application or a server level, which reduces the volume of data transferred while serving a website. Think of it as archiving a folder on your computer and sending it via email – it would be more compact and faster for downloading by your colleagues or friends, while they can still access the information easily by decompressing the content.
Modern browsers are used to serving gzip content for optimization purposes and do it blazingly fast – providing you with better UX especially on slower networks or mobile devices.
3. Migrate To a Managed Hosting Provider
Cheap hosts or generic hosting providers often don’t provide the best performance. Luckily, there are managed hosting providers that specialize in a given platform and fine tune the system for best performance.
An example in the WordPress space is Pagely, specializing in scaling WordPress for large brands. Through a combination of server adjustments, they strip down the standard server layer and configure their instances for higher load, allowing them to host websites receiving over a hundred million visitors a month.
Alternatively, you can review Pantheon (known mainly in the Drupal space), Kinsta (hosting with Google Cloud Platform), or SiteGround (for smaller-scale web solutions).
The infrastructure of a managed provider is custom-tailored to the platform’s needs, often cutting the load time in half, in addition to providing additional benefits such as specialized security fixes for your plugins and automatic updates.
One of the hosting-and-network-related challenges is the Time-to-First-Byte (TTFB) issue, or the amount of time it takes a server to start sending data over to a visitor’s browser. It’s a combination of code quality, server load times, network speed, bandwidth availability and a few more, but managed hosts usually specialize in keeping the TTFB to the minimum, which affects all of your websites and their pages together.
4. Resize Your Images
A large percentage of websites online list thumbnails while using the original uploaded photo, instead of resizing it. A large blog or an online magazine may very well display 40 or 50 high-res images on the homepage which could add up to 10MB of page size, making it nearly impossible to render for under 30-40 seconds on a mobile device.
My team at DevriX works with several viral publishers generating hundreds of millions of monthly page views. Viral content is all about consuming long-form content which often ends up as 7,000 – 10,000 words, 50-80 images, and lots of ads here and there.
Given the bandwidth limitations and poor user experience, resizing your images is a great way to improve the speed time of your website:
- Analyze your media-heavy pages and make sure that you’re rendering small images;
- Register thumbnail sizes that your CMS can provide for you (helping out with cropping or scaling), and serve them instead;
- Or use an automated solution like Imsanity that compresses and resizes your images for best user experience online (or look up Kraken.io or EWWW for other compression options).
5. Don’t Overcomplicate Your Feature Set
Often website managers try to provide as many features as possible – accessible by their users, or simplifying their administrative experience. Some of those plugins may be poorly developed or simply heavy, which drastically adds up to your page load time.
If you have a test clone of your website (also known as a staging environment), try to deactivate all of your extensions and test the website speed with and without plugins. A list of 20-30 active plugins can add several seconds of extra load time, which can be avoided by deactivating plugins that are not essential, replacing them with alternatives, or hiring a professional development company that would build a custom solution which works much better.
Gets even worse with video sliders, complex loggers and analyzers working internally, and all sorts of integrations running pixels for social networks, rendering external feeds, and other features squeezing bandwidth off of your server and its CDN vendor.
6. Stick To a Simple Look-And-Feel
Plenty of templates available for your website serve as a Swiss Army Knife – providing a complete set of everything that you can think of. Multipurpose themes cater for several markets, and you may end up with a theme that includes a list of features for the real estate or financial market while you’re looking for a simple business website or a blog.
Therefore, sticking to a simple and clean theme is often beneficial for your website speed.
- Fewer features would decrease the computation while rendering your page.
- Less styling mean less CSS, hence lower page size and fewer external requests.
- Clean themes don’t add as many background patterns or parallax images or sliders, which is a huge win speaking of speed.
7. Load Scripts Asynchronously
Business owners don’t have control over the majority of the code running their website, but due to marketing and advertisement purposes, a lot of 3rd party snippets are being incorporated across a website or at all pages (Google Analytics, other tracking tools, data reporting engines, lead forms and the like).
Here’s a sample chart from Readspeaker explaining how async requests work and how to avoid render delays:
Whenever possible, load scripts in the footer and try to load them as async resources, instead of synchronously loading in the site. The standard behavior (unless otherwise specified) would interrupt the HTML parsing while scripts are executing, hence increasing your page load time.
There is a good reason for the default processing order. Some scripts may adjust your document by adding new containers or restyling everything to follow, which is why browsers are patient and want to avoid concurrency issues.
If your script can be loaded without rushing, this would decrease the amount of time for loading your page. Here’s a sample guide from Google on asynchronous ad code insertion. Some of the caching plugins (or additional tools) allow for adjusting those on-the-fly, but best case scenario this is being done on a code level.
8. Minimize And Combine Your Assets
Let’s review the homepage of Yahoo. It loads 267 remote requests, and you can see how resources are downloaded in chunks in this waterfall chart:
Most popular browsers support 6 or 8 simultaneous connections, and additional requests need to wait for a download to complete before moving to the next resource in the queue. Which adds a massive load to the page load time (reported as up to 22 seconds for Yahoo).
A common best practice is minifying and combining resources in order to reduce the amount of separate connections to each third-party source.
Minifying means compressing each script or style by trimming all whitespace, replacing variable names to shorter strings or even characters (lower end file size) and optimizing other aspects for performance. Combining comes right after by appending several files to a single file, hence resulting in less remote requests as a result.
This can be done on a code level, but is also doable through certain minification and combining extensions, tools, or plugins. Keep in mind that, due to code specifics, this may cause regressions with certain scripts or override sections of the website, so proceed with caution and test carefully.
9. Leverage Browser Caching
Browser caching is a helpful asset that reduces the bandwidth of downloaded resources.
It is enabled by default on most browsers and can be activated with the right expire headers on a server level (usually done in code, or by caching plugins). Essentially what it allows you to do is serve the initial version of your website once, and then reuse most of the assets locally for following page requests.
For instance, after loading the homepage of an optimized website, navigating to an internal page will be faster, since the browser won’t request again the logo in the header, the styling of the menu, or the footer carousel with testimonials. Reusable assets will be gathered from the local browser storage, hence reducing a number of requests needed to the remote server.
Setting up the right expire headers may be tricky, as regularly updated websites may cause regressions with certain assets not flushed. There are workarounds there, so it’s advised that hard caching is mainly used for assets that would stay the same for quite some time (like your company logo that you don’t change daily or weekly).
10. Avoid Redirects
Redirects are a common strategy used by SEO experts in order to bring more link juice to a certain page or refer canonical resources, or satellite website links. That said, redirects produce additional requests, which may recursively make the load time slower for integrated resources (such as embedded widgets for weather or currency conversions, or complex ads).
Reducing the number of redirects will improve the speed time, and ensure that no security warnings would be triggered by the browser if it identifies that as a potentially malicious activity, thus affecting your traffic as well.
Another common trouble for redirects are internal repetitive duplicated redirects from different versions of a website. Think of using www.* and your main domain, running http and https in parallel and the like.
Redirects inevitably take time and may hamper your analytic.
11. Set Up a CDN
Content Delivery Networks are services that connect with your website, gather the assets and distribute them to a large number of zones across the world. Popular solutions are Cloudflare and MaxCDN, both providing alternative data centers in North and South America, Europe, Asia, and Australia (some reaching out to Africa as well).
From a security standpoint, Cloudflare works really well as a web-application firewall. One of the known leading security vendors offering CDN services on top is Sucuri, known for rescuing hundreds of thousands of WordPress websites due to various vulnerabilities.
Distributing assets to a CDN will reduce the traffic load to your main web server and allow for more concurrent users to browse the website simultaneously, without waiting for their turn in line. Moreover, website visitors will be able to download assets from your website from their closest location – reducing additional network time overseas (for instance, a visitor from Paris opening a New York-hosted website can download all images, styles, and scripts directly from a CDN endpoint in France or Germany, instead of going all the way to the US and back, talking to the original server).
CDNs can drastically reduce the load on your server and page load times to your website, and can additionally provide security features, limiting the number of bot attacks or crawlers playing with your website.
12. Optimize Connections With Prefetch And Preconnect
If you’re operating with external domains frequently, it makes a lot of sense to actually load them as early as possible (before triggering a follow-up request).
On a networking level, and across the HTTP protocol itself, a web request consists of multiple steps to fully execute. This include the DNS resolution part, security handshakes when SSL is included, lookups, the three-way TCP handshake and many more. They get executed moderately fast (considering how many web requests take off on every single page) but they also add up when you think about it.
There are several different ways to prepare an early load requests or resources ahead of time:
All of the following arguments can be passed onto single resources so you can easily optimize every single asset (or link) across the site as you see fit. On top of that, prefetching can be applied on a domain-level basis, capturing all requests to this domain name.
KeyCDN have explained the difference between these arguments in their resource hints post.
13. Update Your Server Stack
One of the things I love about the web is that it’s constantly striving to become faster (and faster, and faster).
My digital journey started with a 55.6K dial-up modem. Everything took forever to load and I was proud to get an average download speed of 6 to 7 KB/s.
Since then, home broadband has become blazing fast. 4G is the de facto standard (with 5G adoption on the way). But more importantly, this trend is just as valid when we talk about web servers.
Keeping your technical stack up to date will almost guarantee an improvement in terms of performance. Load times will be reduced and concurrency (the number of supported parallel requests) will increase. Here’s a test that Kinsta ran on WordPress 5.0 between several different PHP versions:
Just by upgrading your PHP version, a vanilla eCommerce built with WooCommerce can handle approximately 3 times more requests with the same hardware.
Upgrading your MySQL server will help as well. The same goes for nginx or Apache as performance is a key goal for virtually every piece of your stack. And your Linux distribution, of course.
14. Lazy Load Media
I was conducting an initial code review a few weeks back for a lead. The process starts with several automated scanners, one of them a GT Metrix run.
When the homepage test was completed, it turned out that the fully loaded page was 30MB worth of bandwidth, mostly all due to a video slider that few users scrolled down to anyway. Apart from heavily compressing the video, lazy loading the resource would have helped a lot.
The process of lazy loading represents a partial load of resources limited to what gets rendered “above the fold”. For instance, if you run an eCommerce website and a desktop user sees your main image first (and a gallery after they scroll), you don’t need to pre-render all media assets before your users reach to this point.
This is especially powerful for long-form content and pages that may render nearly a hundred images, with fewer than 10 loaded on top of the page.
While there are programmatic ways to implement that, WordPress users can also rely on existing plugins like BJ Lazy Load or Rocket Lazy Load. For long-form content, some magazines even prefer Ajax Load More, a more complex implementation of lazy loading that splits a page into chunks and renders every component as a slide, almost like a vertical gallery that gets revealed as you keep scrolling.
Lazy loading can greatly improve load times and user experience and even contribute to monetization techniques for publishers.
On Website Performance and Speed Optimization
While this covers a good chunk of the common performance problems most websites face, it doesn’t end there.
As websites keep scaling, they hit limits on multiple fronts:
- Traffic, or the number of page views and real-time visitors
- Data volume, i.e. number of posts, pages, media files, comments, and other data points stored in the database
- Concurrent users, or people simultaneously browsing the dashboard or interacting with non-cachable content (memberships)
You may very well leverage the power of caching and other server techniques for repetitive session views — especially for static content like news. When it comes to handling dashboard work or dealing with eCommerce (or other dynamic content), your website has to scale after undergoing a code review and performance optimization process.
This often means rebuilding critical areas of your website that slow it down, cleaning up the database (or even restructuring it), offloading various services to avoid parallel PHP processes spinning up per user, and more.
Got any website performance questions for you own site? Let me know in the comments below.