You searched “Why is my website slow?”
Here’s an overview of what’s involved.
First, consider four fundamental technologies needed to view a website. I’ll provide a brief overview of each technology and how it relates to a slow website. If you don’t need this preliminary information, skip ahead to some techniques for making your WordPress site faster. Better yet, make it easy on yourself and hire Kitestring Studio to do it for you.
Web Server
Your website runs on a physical machine (sometimes many) somewhere on Earth. Hopefully it’s a well-maintained and well-optimized machine to run whatever application or code that comprises your site. If it’s working hard, configured improperly, maintained improperly, short on RAM, out of disk space, or full of malware, any and all of these issues will slow down your site. However, the server is rarely the culprit when I’m optimizing WordPress. What is the culprit, you ask? Read on.
Application
As in, the code on the server, such as WordPress, which itself is not slow. But add on a builder theme, thirty-six plugins, and a thousand posts, and it will probably be slow to serve its web pages. Feature-rich themes and plugins (and plenty that aren’t) store information in the database, which is a separate piece of software. Every instance of something being read from or written to the database takes time. Sometimes, instead of (or in addition to) the database, plugins will interact with data stored on other servers via their APIs. If your site needs to check Instagram for your recent posts before it can finish generating the page it sends to the browser, or fetch a thing from another service, this can add seconds to the time it takes to render the page. Seconds are decades.
Internet
Your business site may be comprised of dozens of files. WordPress sites that aren’t professionally maintained commonly have more than 100 files. This includes javascript, CSS, fonts, images, and more. All of those files are downloaded over the internet. The majority of your visitors will look at your website on their phone. Compared to a computer, assume that their phones are slower and their internet speeds are slower. Therefore your website will load slower, especially if the visitor lives across the country or across an ocean.
Browser
We’re talking about Firefox, Chrome, Safari, etc. The browser puts it all together, and the performance issues (present in the previous technologies) will be multiplied. Your site starts out with one HTML file that tells the browser to download everything else, i.e. all of the dozens to hundreds of files mentioned above. Many of the files could be made smaller to download faster, and much of the code the browser receives may not even be used. Furthermore, the order in which files are downloaded could be configured, as well as what the browser does in between requesting them. Most sites will download everything on the entire page, which the visitor may never access, rather than first downloading what the browser needs to display the first screenful of the site (the crucial area “above the fold,” like the visible portion of a newspaper on the stand).
So. What makes your WordPress website run faster?
These seven techniques greatly improve site speed. The process is called performance optimization. Some common low-hanging-fruit techniques work for everyone, even though all sites are unique. Beware: techniques that help many sites will break a few, and no one wants a broken site. What does your website need? Get in touch! We’re happy to talk.
Page Caching can help a problematic server or slow application. If the server takes a while to generate the code of a page, it may be an option for the server to generate the content once and store the page HTML (bookmark it, in so many ways) for subsequent viewers. Less work means faster results.
Image Optimization is a multi-pronged topic, but mostly means decreasing the size of images so they download faster. Image Resizing means reducing the number of pixels in an image. Image Compression means reducing the size of the image file. Reductions of 90% are sometimes possible with minimal image degradation. Problematic images have too many pixels for the browser to draw on the page. Consequently, the browser will clumsily wrestle with the image because the dimensions are greater than what will ever be shown on the screen. Smaller files mean faster downloads.
Lazy Loading is now built into WordPress, and it can be fine-tuned. Lazy Loading is the technique of deferring the download of images that aren’t shown until later on the page. Have an image placed in the footer? Don’t allow it to download until the visitor has scrolled closer to the footer. Downloading fewer files means the site renders faster.
Code Minification means throwing out bits of code that humans wrote for their own ease of reading. Comments and spaces in the code aren’t necessary for the computer to understand it. This technique is easy to implement, but usually offers only minor performance improvements. Smaller files means faster downloads.
Deferring Assets means that you’re going to change the chronological order of scripts and style sheets to be downloaded. Code assets need to be downloaded, compiled, and then executed. Each of those processes takes time. Optimization can get complicated in this technique, and yet there’s a huge amount of benefit to be gained. This is where we start interacting with the browser to help it do its job more efficiently. Some assets can be prioritized, while others will be told to wait until everything else is finished. If we determine which chunks of code can wait until later, we can prioritize the code that supports the basic needs of displaying the page. Download files in the order they’re needed to render the web page.
Critical CSS is sneaky. It means prioritizing the download of Cascading Style Sheets (CSS) required for displaying the “above the fold” content, kind of like Lazy Loading. The remaining CSS that styles the rest of the page is deferred. There’s a catch! Unless you hand-code your CSS, the Critical CSS has to be generated by an external program that loads the page and analyzes which CSS to consider “critical.” Prioritize the bare necessities for the user experience.
Tree Shaking is complex but awesome. Earlier I mentioned that your site may be downloading code that’s never used, or only used once. You could consider tree shaking similar to critical CSS because it involves scanning the page to understand which code remains unused after the full page loads. Individual analysis of each page or template adds complexity, as can generating a unique code file that’s stripped down to the needs of that page. Worse case, this technique could introduce new performance issues because previously-downloaded code could be shared between pages. Depending on the tree shaking technique, the reduced code files could be split by what’s reusable on multiple pages… which introduces new levels of complexity. Don’t download what you don’t need.
Stay tuned for future posts going into more detail on these optimization techniques.
Ready to shift your website into higher gear?