Paste Link

Title:

Tag:

Images (separated by semicolon):

Constrain by tag Link
 

How I Made our Website Load Speed 81Xs Better

by Lindsey Winsemius


Posted 2 weeks ago




In a previous blog a few years ago I wrote about the importance of loading speed on your website. At the time, I recommended a load speed of 8 seconds or less.

Forget everything I told you then. Now, you need a 3 seconds or less loading speed, or users will leave.

Not only that, but over half (64%) of online shoppers will abandon your online store and take their business elsewhere if they are unhappy with the loading time and store experience.

In a time when reviews and brand advocates are essential to digital success, you can’t afford to give people a bad digital experience. 

How can you get a faster-loading website?

If you’re using a DIY service like Weebly or Wordpress, your options might be limited to what the platform allows. However, there are always ways to improve the loading speed of your website. I'll talk about those ways, but first let's go over how to determine if your site needs help.

How do you know how fast your website loads?


One way is to just do a quick audit yourself. Basically, just view your site as a new visitor would.

Visit your website from a device you’ve never used to access the site or in “incognito” mode. The reason for this is because web browsers, such as Internet Explorer, Firefox, Safari, or Chrome, will create a “cache” for your site if you’ve already visited it, making it load faster than it would for other first time visitors.

What is a cache and why do browsers use it? A browser cache improves performance of frequently accessed webpages. When you visit a webpage, the requested files are stored in your computing storage in the browser's cache.

Clicking back and returning to a previous page enables your browser to retrieve most of the files it needs from the cache instead of having them all resent from the web server. This approach is called read cache. The browser can read data from the browser cache much faster than it can reread the files from the webpage.

Visiting your site from a browser that has not cached the page will give you an accurate view of how fast your website is loading. Consider: How does it compare to competitor sites? Would YOU want to stay and wait for it to load?

Another way to check your website load speed is by using a free testing tool. I like Google’s speed test tool, PageSpeed Insights. You may have heard me talk about this one before.

I love this tool. I use it all the time to show the development and design team where we can improve for our websites. It grades like my tenth grade Honors English teacher – very harsh. But, like she would always claim, better to be hard on me now so I can improve and become the best at what I did later. The same goes for your website. If your webpage is optimized more than the competition, per Google’s standards, Google will probably look more favorably on your page when ranking results.

If you're looking for a teacher that grades a little easier, try Pingdom or Think With Google test specifically for mobile.

Go to the Page Speed Insights webpage. Just enter your URL into the search bar and click “Analyze”. In a few moments, the program will generate a report that tells you how your website is doing on desktop and on mobile, and ways you can improve.

Go and give it a try. I’ll wait.

Ok, now that you’ve got your page speed report in your hot little hands, let’s talk about what you can do to improve performance. Unless, of course, your report is practically perfect, in which case maybe you can drop me a comment on how you did such a fabulous job increasing the load speed of your site.

We recently updated our website, as you may have noticed. It is still under construction, but it's "mostly" done. I ran a speed test on it right after it was published and it scored a big fat 0 for desktop load speed.

Yikes.

Load speed test before

We obviously had some work to do. Thankfully, Google and other tests provide tips on what is causing the slow load speed, and what we could do to fix it.

Here are some things my team worked on to improve the load speed of our website on mobile and desktop.

1. Compress images.

Images can be one of the major things slowing down the load speed of your website. One way to fix this problem is to use compressed or smaller images. I don’t mean the actual size of the image, but rather the file size of the image.

Chris Jackson, CEO of our subsidiary Auto Search Technologies, spends a lot of his time focusing on load speed. He knows how important it is to people shopping for cars, and so it is very important to our Auto Dealer clients.

He immediately identified several images on our homepage that were huge file sizes, like our logo, and uploaded smaller sizes that stay retained good resolution.

How can you compress your images?

This depends a little on the photo editing software you have access to, and where you’re getting your images from.

Many image editing software, like Photoshop or Paint, will allow you to Save an Image for Web, or save as a compressed image. This will reduce the size of the image while still keeping a good quality for your website.

There are also image compressing apps you can try:

·         TinyJPG | TinyPNG

·         Compressor.io

·         Kraken

·         ImageOptimizer

·         ImageOptim


As well as picking the right file size for your images, you do want to get the correct pixel size. Try to choose images, or resize using a simple image editor like Canva, to get the pixel size to fit the space on your site. Just be sure you have a responsive site that will automatically adjust the image size to fit the page.


The less resizing that needs to happen, the quicker your site can load.

2. Use a good web host.

Your website needs to be hosted on a server. All servers are not created equal. The speed of your server depends on a number of things, such as how many sites are hosted on that server and the amount of traffic they get, routing, frameworks, database queries…

Odds are, you aren’t going to have any control over the server speed. But you can find a good hosting company or choose a website service that has a good reputation. I don’t know much about server management and set up, but Joe, our CEO, is an expert. He manages all our servers and I know he is constantly working to improve the performance of our servers for both our personal site, and for our clients.

If you think your website is loading slowly because of server issues, talk to your web service about what server host they use, and ways they can optimize their servers (or even switch to another host).

If you have a high-traffic site or include tools that require a lot of bandwidth, consider purchasing a dedicated server for your website. 

What is the difference between shared hosting and a dedicated server? You can probably guess from the names. Shared hosting means multiple websites are hosted on the same server, and you are sharing the bandwidth. If another site is getting a lot of traffic, this could make your site run slower.

A dedicated server, on the other hand, is an entire server dedicated solely to your site. That means it won’t slow during peak periods of the day or week, and allow your site to function better when getting high loads of traffic (like on Black Friday or Cyber Monday.). 

A dedicated server is going to be quite pricey compared to a shared server, but something worth considering if you rely on your website for a bulk of your sales. If you think a dedicated server might be something your business could benefit from, talk to your hosting provider. We manage several shared servers, as well as dedicated servers, for our clients, and we would be happy to offer our opinion. Just drop your questions in the comments, or shoot us an email. 

3. Choose your Apps and Widgets wisely.

Some apps or plugins can benefit your site. They can help increase site performance and provide a place to host large files (like video).

It might seem like a great idea to try every newfangled app or plugin on your site. Just to see if it helps. But some of these nifty little features can have a hugely detrimental affect on your load speed.

Each of these plugins or apps needs to load along with your site, and often your site will need to connect with the site hosting the plugin before it can load.

How do you know if plugins are slowing down your site?

Your Page Speed insights might indicate certain script that is slowing down your site. This is a great place to start in identifying possible culprits.

What should you do if a plugin or app is slowing down your load speed?

Remove any apps or widgets that you don’t use. 

Check periodically that they’re working. If you find one that malfunctions or doesn’t load properly, get rid of it. 

If you add a plugin and notice a decrease in your website speed, that might be another sign you shouldn’t be using that plugin.

Every time you add a new plugin or app to your site, consider that value versus the cost. Is it worth slowing your site down to have this feature on your website? Sometimes, the answer might be yes. 

We’ve really stripped down the plugins and social widgets that used to be one our site. We tend to build most of our own software, so this helps in reducing the need to use a bunch of outside apps that we don’t have any control over. Some of the old social media widgets would really slow down the old site, and so we’ve scrapped those. It isn’t worth getting a few extra Facebook page likes, and engagement on Facebook from our website wasn’t really our goal, anyway.

Set clear conversion goals on your website. Then only pick plugins or apps that are definitively helping your visitors towards that goal.

4. Fancy features might not be worth the cost.

Just like Apps and plugins might not be worth a slow down on your load speed, the same goes for design elements.

Some CSS (Cascading Style Sheets: design style sheets that tell the page what colors, fonts, etc to display) can take longer to load, slowing down the overall loading speed of the site. We had a few such elements on our new homepage design, including a neat moving font (my idea), and several layers of images to create the overall parallax scrolling affect.

Our creative director Andrew came up with a great solution. Instead of using layers of images and the moving font, he is going to change it all to a simple looping video, which will hopefully help improve the load speed.

Here is our speed test after Andrew spent some time doing the things I mentioned above, like stripping out widgets, design elements, and and compressing images, and Joe ensured our server was optimized.

Page speed test example


83 is significantly better than 0. We can still improve our website more, and we will continue to refine it. The important thing to keep in mind is the user experience. Create a balance between offering the tools your users need to have a good experience on your website, and your website loading fast enough to keep users from leaving before they even have a chance to appreciate how great your website is.


Did you check your website speed? Tell me what your score is in the comments below, and if you have a plan to improve that score. Or any questions.