So, you now have a snazzy new website and it looks good. Great style, color scheme, hot graphics. But there’s one problem: it’s super slow.
So slow it makes the customer want to throw their computer out the window. Or worse, just slow enough to make them click away from your site and over to a business that does the same thing – but without the irritation of a few extra seconds here and there as they cycle through the pages.
Let’s face it: ours is a ridiculously impatient age. The slightest delay annoys people, even when they’re getting something great. Convenience isn’t enough anymore. Your website needs to keep up with a culture based around instant gratification. It’s an addiction, but this is a world of Internet addicts, and you need to treat your target audience accordingly. Pages with slower load times almost always have higher bounce rates and shorter average visitor time per page.
According to one study, just a single second of delay in load time leads to 11% fewer page views, a 16% decrease in customer satisfaction and a 7% loss in conversions.
But there’s more: page speed is one of the measures used by Google’s algorithm to rank websites. So, yes, once again you need this for your SEO. However, if you’re the type who isn’t concerned about the speed of your website and think that, because your product and viewer experience is so great, a little tiny delay here and there won’t matter, think again.
Fortunately for you, Interactive Palette put together a little check list of tips for speeding up your website. There are other, more advanced, things you can do, but these six tips are a great starting point.
1. Check your webpage speed with Google’s PageSpeed Insights
Just type each of your web URLs into the task bar and Google will give you an estimate of how wonderfully fast or unbearably slow they are. The test collects data from your Chrome User Experience Report and offers two key speed metrics: First Contentful Paint (FCP) and DOMContentLoaded (DCL). Don’t worry about the fancy terms: the tool will tell you how things look with a traffic light system.
If you’re green? You’re doing great. Amber, you’re so so. Red? You’re doing badly.
As you scroll down you’ll then see Google has some suggestions for improving speeds on your site. These actually aren’t that helpful usually as there’s no guarantee they’ll affect your performance score. Instead, follow our recommendations below.
2. Use GZIP
GZIP, from GNU Operating system, is a software tool that compresses files, reducing CSS, HTML, and JavaScript file sizes larger than 150 bites. However, do not use GZIP on image files, as it can degrade the quality of the image. For that kind of file, use Photoshop or a similar image editing program.
If you want to see how useful this step can be, try running a compression audit on your web pages using a tool like GIDNetwork. This will tell you the uncompressed size of your page and how much you can tighten u
3. Optimize Your Code
Shrinking unnecessary components of your code – such as removing spaces and commas (everything unnecessary, basically) – will increase your page speed, sometimes dramatically so. Also, keep your code tidy: remove code comments, formatting and unused code.
4. Reduce Redirects
If a page redirects to another page it increases load time for visitors. This is because it lengthens the time needed for the HTTP request-response cycle to complete. You’re basically stacking things up for your viewer.
5. Minimize HTTP Requests
Sometimes people upload images that are larger than they need to be. For the size and quality you need, do you really require that perfect resolution? Often you can get away with a much smaller file size for what you’re doing. Also make sure images are in the best file format too – JPEGs tend to be great for photographs but PNG’s are usually better for simpler graphics. Does it really need to be a JPEG? And be sure to compress all your images.
Then there are CSS sprites for images that you use repeatedly, like buttons and icons: these are wonderful tools that combine those images into one large image, and then loads them all at once, so there are fewer HTTP requests happening on the page. This also saves loading time for the visitor.
You can also combine JavaScript files in the same way to minimize HTTP requests. If you’re using WordPress, for example, you can use plugins like WP Rocket. Have a shop around for some options for minimizing HTTP requests.
6. Load your Files Asynchronously
Scripts like CSS and JavaScript can be loaded either synchronously or asynchronously. Synchronously means they load one at a time, asynchronously means they load simultaneously. Make sure you choose the latter as this can speed up load times.
7. Enable Browser Caching
This is a really basic but really important step. When a user visits your site, elements of the page are stored on their hard drive in a cache. This is so that the next time they visit, their browser will load the page without sending the HTTP request to the server all over again. Be sure to enable caching! You want the first visit to be as quick as possible, but enabling caching means their future visits are even quicker and therefore even more pleasant an experience.
There are many other (and more advanced) techniques for speeding up your pages and optimizing your SEO, but these will get you going. If you’d like more guidance on speeding up your pages, look up Interactive Palette. They can get your site running like a beautifully smooth (and fast) machine.
Do you have questions? Feel free to shoot me an email at kmcnally@interactivepalette.com or check out our blog posts on the topic.
