Once Upon a Time on the Internet
Were you ever fortunate enough to experience dial-up internet? Do you remember how SLOW it was!? A website might take over 20 seconds to fully load. Crazy, right? Would you believe this is STILL an issue in 2020? In an era where technology has drastically improved since the good ol’ days of dial-up, why does website performance still plague us?
Any time you create a page or post on a WordPress site, that content is going to live on the internet for a very long time and serve as a resource for the respective audience. The amount of text, images, videos, font types, and overall page length all play a role in how quickly the page loads and the user’s experience (UX). If I have a page that takes 20 seconds to load because I have 40MB worth of images and videos, then you can expect the user to leave the page and never return.
The same is true for a page that has little to no imagery but drudges on and feels like you’re scrolling for 1,000 years, it will have the same effect: the user will leave and never return. There’s a delicate balance between aesthetics and content, as well as performance and usability. Generally, we want the user to have a clear path to the result: downloading a freebie, signing up for a webinar, scheduling a call, etc. The best way to achieve this is to strategize and plan from both technical and non-technical points of view.
In case you were wondering what goes into making a fast web page, and website, here’s a list of elements you want to make sure to implement so you can give your users the best experience and increase conversions:
Server Level Checks
Web hosting is the most important component to building your website. Most people tend to go with the “cheapest” hosting i.e. $2/month but in reality they’re hurting themselves because they’re probably one of the EIG owned companies. Whenever you use shared hosting, you’re getting bottom of the barrel performance and quality. The web host can’t do any major updates to benefit you without possibly impacting other people negatively, so your website will run forever slow.
Here’s a list of dedicated web hosts that have solid reviews and performance:
• Cloudways – Affiliate Link
• WPX Hosting
• WP Engine
Time To First Byte (TTFB)
The TTFB is the moment a web server returns the first bit of data when the browser makes a request. Ideally, your TTFB should be 200 to 300 milliseconds. Anything higher than that and you should evaluate what’s happening to cause it to take so long to load. This is where choosing a proper web host comes into play because not all hosts are created equal. Head over to bytecheck and run a test on your site to see what you score.
Caching works a lot like making a peanut butter and jelly sandwich: you go to the store (server) to get the ingredients (files) and keep them in your pantry (browser). Once you have everything you need you can make as many sandwiches as you want until you run out, at which time you’ll return to the store and get more. The cache only changes if the files are updated or the length of time they’re allowed to exist expires (become outdated). You can turn on caching via the server level as well as on your WordPress website via a plugin like WP Rocket.
At the time of writing this article, the current version of PHP is 7.4.3 but unfortunately, not all web hosts upgrade to the latest versions. There are web hosts that are running on PHP 5.6 and have no plans to upgrade or if they do it’s going to be a while since it’ll impact everyone’s website. PHP is continuously updated and improved so that it can run as efficiently as possible and utilize the server technologies that are ever evolving. The jump from 5.6 to 7.0 is night and day and drastically improves performance of your website.
This is often an area that’s frequently overlooked when it comes to websites and applications but the database is critical if you want to have any type of dynamic functionality. Akin to PHP, database versions aren’t kept up to date with shared web hosts. The current version of MySQL to date is 5.7.29, with 8.0 also being released but doesn’t seem to be implemented on Cloudways (my current web host). Older versions of MySQL don’t take advantage of the improvements and handling of data. If you want your site to be fast, you must keep everything updated to the latest version (unless you run a legacy application or software that needs an older version).
Content Delivery Network (CDN)
A CDN copies your website from the original server and mirrors that copy across the world to other servers in the network. The reason it does this is so if someone in London tries to view your website in Atlanta, it doesn’t have to deal with latency (lag) from traveling across the globe. It would pull a copy from the nearest server in London and serve it up to them. If it originally took 10 to 15 seconds without a CDN, it would take 2 to 3 with the CDN.
Website Level Checks
WordPress + Plugins
You’d be surprised how many people don’t update WordPress or their plugins. How do you expect something to work properly if it hasn’t been updated in 2 years? What’s worse is using a plugin for something simple that only needs a code snippet (Google Analytics is a prime example). Don’t be a plugin collector, as it will only lead to the downfall of your website.
From personal experience, Astra has been the best option for my clients and personal projects because it has a feature called Starter Sites that allows you to quickly launch a five-page website in about 30 seconds. Astra also integrates with Lifter LMS as well as WooCommerce to add cohesion between your site’s styling and the plugin’s styling. A lot of people enjoy Hello theme since it’s been stripped down to the bare bones and relies on Elementor to handle 100% of the styling, navigation menu, header, footer, and content.
If an image is 2,000 x 2,000 pixels but the space it goes into is 400 x 400 pixels, the browser is going to resize the image and need to work harder to show the page. This will negatively impact your page performance and load time, especially if you have a lot of images (galleries or otherwise). Ideally, you’d want to properly size your images before you ever upload them to your WordPress media library.
Image Format, File Size, & Quality
If you save an image and it has a transparent background, it’s better to use the png format since it will retain the transparency; however, the adverse is also true: if you save an image as a png and it has a background, you’re going to end up with a 2MB or larger image file size, which is what we don’t want (our image should be as lean as possible).
When saving images as jpg/jpeg you want to make sure the quality is set to medium (options are generally: maximum – best, high – very good, medium – good, low – poor) since we want to keep the file size as lean as possible.
A good rule of thumb is that if a picture is used in a “hero” section (generally the wide-screen images) to keep it around 1,600 x 900 pixels (follows the 16:9 aspect ratio for HD devices). Alternatively, you can save them as 1,920 x 1,080 but you won’t see much difference in quality.
A lot of websites tend to use multiple font families, and that’s okay, but remember that your browser has to request those fonts from Google (assuming you’re using Google Fonts) so if you’re using five different types of fonts, that’s five requests each time the page loads. Our goal is to minimize the number of requests our page makes, so try to stick to one to two fonts for the entire site. You can opt to download the fonts to your site and reference them in your them / page builder.
If you need to add a video, make sure to use a caching plugin (discussed above) that features “lazy loading” i.e. the video isn’t played until the user clicks on it or manually lazy load the image yourself.
This area can be tricky because you want to appeal to your users but you also want to make sure the information is as succinct as possible. Most web pages, specifically the home page, will probably have five or six sections that break up the content into dedicated areas: stats, reviews, brief summaries, etc. Landing pages will have closer to 10 or more sections depending on the copywriting, images and calls to action. If this is the case, remember to keep the sections short and sweet as possible.
Third Party Plugins
I once worked with a client that had TONS of tracking plugins, Google Adsense, heat maps, etc. and wondered why their pages loaded so slow. Yes, it’s good to know how your website visitors interact with the pages but it’s also okay if you don’t track every metric about them. Having excessive plugins and/or software on your web page can severely impact performance and cause users to leave.
What Does This Mean for You?
It takes just as much effort to build a lean and speedy site as it does a large and clunky one. In order to figure out where to start on improving your website performance, head over to GT Metrix’s website and run a speed test on all of your website URLs. If any of them are more than three seconds, look at the suggested fixes as well as the waterfall tab to assess when everything is loaded on the page.
Once you have all your ducks in a row, you should start to see an improvement in page conversions and a lower bounce rate. While the fixes are overnight, the results will take some time to really measure the effectiveness of your hard work.