Being Freed
Being Freed
Being Freed

Page Speed

What’s your page speed? What *is* page speed? It’s how fast your page loads onto your visitor’s device. And it might be the most important thing of all.
Page Speed

Page speed is important because…

The amount of time it takes your pages load is one of the most important factors in getting people to use your website.  If it doesn’t load within a few seconds most people will move on to another site.  When you can’t keep people on your site for those critical first few seconds, you won’t be selling a thing.

Faster speed load rate translates to lower bounce rates and higher conversion rates.  In turn, these factors boost the chances search engines will recommend your site in search results. 

Conversion - marketing term - the point at which a marketing goal is met: a product sale or newsletter sign-up

In this post, I’ll show you how I speed up smaller sites like the ones I design and build.  There are other tools for larger sites, but they’re not generally necessary for my clients.  (Parenthetically, herein lies the importance of choosing the right kind of designer for your site.)

Tools to increase your page speed

Your host is the physical foundation of your speed.  Choosing a host that is reputable, with a robust and dispersed network is paramount to your zippy factor.  See my post on hosting here.

Storing snapshots of your site in multiple locations along the road to delivery goes a long way toward making page load time faster.  See my post on caching here.

Use a lightweight, fast theme.  More code = longer load, so choose one that has the features you want, but not too many more.

Limit the number of plugins you use.  When possible, use plugins that offer multiple functionalities.  Choose reputable, long-standing plugins that have a record of regular updates so you know they will keep up with technology.

Size your images properly.  A good rule of thumb is to size an image to twice the width you’ve designed, so that they are as small as possible but still look good on retina screens.  If your layout calls for a 300px wide image, use a 600px wide image.  See my post on image sizing here.

When uploading images, set them to high compression.  This reduces the files size and speeds up everything.

Use WebP image format when you can.  See my post on image format here.

Use lazy load.  This tool quickens page speeds by only loading the images that the viewer can already see on the screen.  Until the viewer scrolls down, the images are not loaded.  Like in a time-release capsule, content rolls out gradually which results in faster load times.

Don’t load videos via your website database.  Instead, use a platform such as Vimeo or YouTube and embed the link.  Doing this means that you are not storing the data on your site, so your database is smaller and lighter, and loads faster.  The two I’ve mentioned above have excellent integrations with WordPress, and viewers can stay right on your site to watch the videos, like on my client, S*P*M’s site, here.

Keep your pages to bite-sized pieces and, logically, they’ll load faster.  They’ll have fewer images, which keeps them quick.  If you have a long article consider breaking it up into multiple pages, using a navigation widget to move from page to page.  Happily, keeping your message focused is good for SEO, as you can tailor it to one subject. 

A drawing of the continents with dots scattered around it
A robust Content Delivery Network (CDN) has servers scattered far and wide so they can feed data quickly around the globe

SiteGround tools

How do I keep track of all this?  Front end tasks like image sizing, are done as I build the site, but for the back end I use SiteGround’s optimization and security tools.  Available in conjunction with their hosting, these tools help me quickly see how whether I’m doing everything I can for caching, malware detection, image optimization, etc. 

SiteGround uses a CDN, or Content Delivery Network.  This is a network of databases that are scattered geographically, and its infrastructure ensures lightning-fast delivery.  They have a speed optimization toolkit that includes caching, environment, frontend, and media panels so you can see at a glance whether your settings need updating.

Regular website checks

WordPress, themes, plugins, page builders: you can set them to update automatically, but I find it’s best to update monthly by hand.  Backing up the site before I begin, I update everything that needs it then test the site in an incognito window in a different browser on desktop, then on tablet and mobile.  If everything still looks right, I’m good to go.  If not, I can revert to the backup then update piece by piece until I find the culprit.

Keeping everything updated regularly assures you don’t get gaps between versions of software.  If your WordPress is out of date, your page builder may not work with it or the theme may go sideways.  Software developers keep an eye on each other so they can remain in synch, and if you make a habit of updating your site monthly it’s more likely to stay happy.

Accessed from the WordPress Dashboard, go to Tools >> Site Health.  Here you’ll find a list of tasks that need doing.  If everything’s ok, you’ll get a smiley face.  If there is something you need to address, WordPress is kind enough to give you a link that’ll take you to the appropriate menu.  Familiarize yourself with both tabs (Status and Info) so you can see when something looks off.

Page speed testing tools

How do you know how fast your site is?  Unfortunately, you’ll get inaccurate results from your own devices.  Remember my post about caching?  You probably visit your own site with some frequency and as a result your data is cached in your browsers, giving you a quick page load time.  Not so for the first-time visitor.  They have to wait for your whole page to load into their device so depending on their geographical location and your optimization, everyone will get a slightly different page load speed. 

A good load time is under two seconds but of course if you can make it faster that’s better.  Here, we use the term Largest Contentful Paint (LCP), which indicates the time it takes for the main content of a web page to load. 

The best way to know how long it actually takes for your pages to load is by using a speed test tool.  I’m not going to go into how to use these in this post, but I’ll list a few of the most common ones, so you can poke around them if you want: Google Page Speed,  GTMetrix, and Pingdom.

A screenshot of Google PageSpeed Insights for https://beingfreed.com/
Google's PageSpeed Insights report for my home page. It could be better, but it's all in the green and that's the goal.

Vocabulary

Backend performance – the time it takes the server to deliver your files

Bounce – to leave a website without taking action

Conversion – the point at which a marketing goal is met, i.e., a product sale or a newsletter sign-up

Frontend performance – how much optimization you build into your site by making choices during your build

Largest Contentful Paint (LCP) – the time it takes for the main content of a web page to load

Lazy load – this tool speeds up page load speeds by only loading the images that the viewer can see on a screen.  Until the viewer scrolls down, the images are not loaded.  Like a time-release capsule, content rolls out over time, which results in faster load times.

Like my posts? Toss me a tip!

digital nomad hiker drysuit diver queer woman sober ukulele player scorpio Tough Mudder goofball

Freed scuba diving with her ukulele

All content © by Freed

Want to know more about what I do?  When I have a new post?  Where I’ve been lately?  (I do get around.)  Sign up for my mailing list below.  I promise to not fill your inbox with junk.