The Anatomy of a Fast Website

There are five main areas that need to be considered when trying to understand why a website is performing the way it is, and how to subsequently improve it. These aren’t in order of importance, and they are all equal in the sense that if any one of these are in poor condition, it can end up being the culprit in poor website performance.

1) The Platform

First and foremost, we need to look at what kind of software the website is running on, if at all. Content Management Systems are prolific and WordPress now accounts for 34% of all websites in the world. When a website is running on a any kind of software it has an entire ecosystem that it relies upon to function, which includes a database that stores all the content and much of the functionality. This overhead can play into the size and overall performance of a website. Recently, in an effort to fight against “website obesity”, there’s been a renewed interest in Static Site Generators and the “flat file” CMS, which basically results in a website without a database, or any software overhead at all for that matter. This doesn’t mean that a website running WordPress or Drupal will not load quickly, but it’s a big factor to consider, since a website without a database will have a much higher chance of performing better. However, going with a static site has other drawbacks and might not solve your problems if there’s a problem in other areas, such as…

2) The Design/Content

A website’s design can greatly influence the potential load times it might encounter. A website design that relies too heavily on large high resolution images, graphics and video is going to have more of an uphill battle to reach those sweet 1-2 second load times than a contemporary, minimal design. In an era of highly accessible web fonts, it’s not uncommon to find designers using 3 to 5 font families in their designs. Having lots of fonts has an impact on load time, especially when they are coming from different providers (Adobe, Google, MyFonts, etc..). Cool interactive animations can also bog down a site since there’s potential javascript bloat that will need to be considered when trying to keep load times as low as possible. The other side to this coin is content. In the era of content management systems, many business owners are managing their own content and may not be aware that loading large files such as big images, placing extraneous embed codes, or installing plugins indiscriminately can be slowing down their site.

3) The Coding

Off the shelf WordPress Themes tend to come with a lot of “bloat”, which is basically saying there’s extraneous code that prevents an efficient front end of a website. We recently encountered a site built on the Divi theme that was crawling and barely usable, until we completed a re-write with a custom theme, and that was all that was changed! Minification; removing white space and compressing files), proper knowledge of how to create efficient CSS, formatting assets for fast loading (such as SVGs: low file size but high resolution graphics for elements like icons and logos)…there’s a long list that a skilled developer will consider to ensure they squeeze in every kilobyte.

4) The Integrations

Integrations can have a tremendous impact on a site’s performance. Integrations come in all shapes and sizes, but some of the most common and significant are:

Social Media Feeds (FaceBook being one of the most notorious for impacting load times)

Video Embeds

On-Screen Analytics and Tracking Codes (such as HotJar or Mouseflow)

WordPress Plugins (which can often load many additional 3rd party vendor assets)

API Integrations (such as a feed that is pulling data from an entirely different platform and database)

The rub with many of these integrations, is that if a business owner is really invested in using them, there’s not a whole lot the developer or host can do to prevent these from creating a bottleneck as the page loads. While there are some best practices that can be implemented (i.e. asynchronous loading which enables the rest of the site to load while these integrations do, instead of waiting on them to finish), they are still in the hands of the provider to ensure they are performing efficiently. And the more you “add to the stack”, the higher the chance they will drag your website performance down with them.

5) The Hosting Provider

For WordPress websites, there’s been a growing trend in Managed WordPress Hosts, which is a hosting service dedicated to offering optimized environments purely for the WordPress platform. And an even more recent trend has been Cloud Hosting, which is highly scalable and performant hosting based on the concept of “cloud sourcing” the hosting resources. Finding a host that utilizes the proper caching methods and/or setting up a CDN (Content Delivery Network) for static assets is a must for any modern hosting solution. This is arguably one of the biggest considerations we need to look at when analyzing site performance as it’s the gateway for a user to visit your website and the last thing in line when delivering a website to a browser. The leanest and most optimized website in the world still won’t perform well, if placed in a poor hosting environment.

Website Performance Tests

Once you’ve addressed the above issues you’re ready to run your website speed test. The tools we can use to analyze are in abundance, but the most popular arguably are:

All these tools essentially do the same thing, which is give you a comprehensive review of all the different aspects of your website and run a comparative analysis against the “best case scenario.” They then assign a unique grade, along with an array of recommendations and action items. These tools are absolutely indispensable for any site owner or developer to aid in the quest for the quick site, but they are also quite troublesome because they aren’t easy to decipher for the layman, nor are they to be taken at face value. These tools should be used to analyze performance attributes and spot any red flags that can be addressed, but should not be used to “chase the grade”. We’ve had sites that receive poor scores but fast load times, as well as sites that have received high scores but slow load times. And trying to address every item on the list isn’t always possible.

In our case, we apparently have some image scaling issues to try and solve for, if we care to:

Reviewing the reports for each site is a painstaking process and involves looking at all five of the aforementioned components that go into creating and launching a website. If you’ve run your site(s) through one of these tools and are freaking out a bit about the big red F grades you’re receiving, try assessing the site through an alternative tool. It’s not uncommon to find Google’s PageSpeed Insights to be a lot tougher to get a higher grade on than GTMetrix or Pingdom. And of course, looking at your actual page load time is crucial. As I mentioned, you might be receiving a lot of red flags and warnings, but still achieving fast load times.

Using all of these tools in tandem, as well as some tried and true troubleshooting tactics, will determine what areas of each particular site need to be addressed, and what specific items per site might be causing bottlenecks.

Final Thoughts: Measure Twice, Cut as Much as You Can

As you can hopefully see by this point, there’s simply no panacea for a fast site. We have to look at the anatomy of the entire stack to be able to understand why a certain site is not performing as well as it should. Sometimes those are factors we can control, sometimes they aren’t…but it’s a case by case analysis of each site to find out what can be done. And ideally, it’s best to work with a trusted developer from the start that can guide the process to avoid the common pitfalls of poor coding, too many plugins/integrations, selecting a low quality host, etc.

Whether your site is loading pretty quickly or seems sluggish, there’s almost always something more that can be done to knock a few milliseconds off the final load time, and nobody has ever complained about a site that loads too fast.