A Faster Website – It’s not a need. It’s a must!

 

By Danny Kulas

Fast-Internet-stock-photo-2.jpg

More people than ever before are getting online and weaving the world wide web into their daily lives.  From delivering the news to selling that thing on Amazon that your customer will surely only use once, having a reliable website is critical when trying to convert users to loyal customers.  A reliable website is one that provides a great user experience and a fast exchange of information when someone is interacting with your website.  If you click a link, you expect to be taken to that new page in little-to-no-time flat.  In this article I will detail areas of improvement that will bring your website ‘up to speed’ and help you convert those window-shoppers to loyal customers.

Why Does It Matter?

Three seconds.  That is all the time it takes for someone to lose interest in your site and go elsewhere to find what they’re looking for.  You have three seconds to show the user what they want to see, otherwise, you can forget about converting them to a loyal customer.  “A faster website means a better visitor experience.  A slow website will lead to a poor user experience.  Your bounce rate will grow.  Page views will drop.  Most important, you will lost money (Demian Farnworth).”  “If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year (Sean Work).”  That should resonate with anyone who runs an on-line business.  No one talks about a great experience they had on some website, but they will tell their friends and family about a poor experience they had so that they know to avoid it in the future.  This will only compound the trouble because now, even though Mrs. Smith was the one who had the poor experience, she will tell anyone who will listen and now you have a whole bunch of Mrs. Smiths who never came to your website in the first-place nor will they moving forward.  You’ve lost a customer before they even had a chance to check out your site.  Another reason why you should care about the speed of your website “is that Google now uses site speed data to help determine where to list your website in its search engine results (Fred Meyer).”  For companies who have small advertising budgets, the search results page of Google might very well be your best bet for getting your business and services noticed.  I can speak from experience, in that I rarely venture to the 2nd or 3rd page of Google search results.  So, if you want to get noticed, make sure you’re showing up on the first page of results (if possible).

What Can Be Done?

There are several technologies and techniques to consider when looking to improve the speed of your website.  A simple Google search of ‘Make my website faster’ will yield several dozen results.  Some questions you might want to consider are: Do you use a lot of images?  Are you loading several script files?  Is there dynamic content?  Are you compressing your assets?  Answering these questions (and others not mentioned above) will help assist you on what to do regarding the improvement of your website performance.  Being able to identify areas of improvement is a skill that takes a trained eye, so if you’re not sure what you’re looking for, grab someone from your development team, sit down with them and do a website audit to get a better sense of what you’ll be dealing with.

Fake It (Above the Fold)

A website loads from top-to-bottom, so, by placing the specific CSS rules that govern the look-and-feel of the top-half of your website in the head of your HTML document, it will seem as though the website is loading fast and without pause.  The content we’re targeting is often referred to as ‘Above the Fold’ content and it’s what shows up first when a website begins to display it’s page.  What this does is give the user something to look at while the rest of the site is busy loading.  It’s not the most elegant solution and may even feel a bit ‘hacky’  but when used properly it can be of tremendous help.  Perception isn’t always linked with reality and sometimes, especially in this case, that gives you an advantage when trying to deliver an optimal website experience to your users.

Minimize HTTP Requests

You’ve built a website.  It’s very likely you’ve accomplished that by employing the use of several static resources, such as images, CSS files, etc.  Whenever someone visits your website, these files need to be loaded into the browser so that the user can view what they came to see.  The more files your site requires in order to load, the longer time it will take to do so.  This is the scenario we want to avoid and it’s pretty easy to do so.  After you’ve built your website, you might realize that you have three different CSS files, for example.  Each file counts as an HTTP request, which adds time to the page-load speed.  By combining those three files into one, you will increase the speed at which your website loads.  This is called concatenation and can be one of your best friends for increasing site performance.

Pictures and Pixels

If your website requires images, make sure you’re using the best image for the job.  What that means is don’t use a high-resolution, 1200 x 1200 pixel image for a site icon which would be better served using a scaled-down version.  “On top of the extra download time, precious processing power and memory are used to resize high-resolution images (Johan Johansson).”  Whatever you do, make sure to avoid “use of scaling, especially from larger to smaller images.  The image result might look fine on screen but the file size will be the same.  To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly (Nathan Segal).”

Cache! Cache! Cache!

“Browser-caching stores cached versions of static resources (such as images or CSS files, for example), a process that quickens page speed tremendously and reduces server lag.  When a user visits a page on your website, the cached version will usually be served unless it has changed since it was last cached; this saves a lot of [HTTP] requests to your server and as a result makes it [your website] faster (Morgan Davis).”  Caching is a great technique for improving your page-load speed, but keep in mind that “the thing with caching, though, is that in most cases it only works for repeat visitors.  First-time site visitors won’t have the site cached yet, since the page needs to load files at least once before it stores them (Laurence Bradford).”  There are two types of caching to be aware of and those are Broswer Caching and Server Caching.  “Browser caching allows your browser to store static files for a while, so it doesn’t need to retrieve them every time you visit the site (Daniel Pataki).”  In terms of server caching, “instead of processing every request, the server takes the results of the these requests and stores them.  It then serves these saved results instead – making everything much faster (Daniel Pataki).”  Learn the art of caching and let your website benefit from that knowledge!

Consider Using a CDN

CDN stands for Content Delivery Network.  “A CDN takes a website’s static files – such as CSS, images and JavaScript – and delivers them on servers that are close to the user’s physical location.  Because servers are closer to the user, they load more quickly.  Larger websites implement CDNs to make sure their visitors from around the world have as fast an experience as possible (Morgan Davis).”  While using a CDN is a great option, it’s also an expensive one.  Make sure your company needs a CDN before handing over the cash to implement one.

Conclusion

Website speed matters, tremendously, to your customers and your bottom line.  Don’t be foolish by ignoring it, otherwise you may be left scratching your head wondering why your monthly revenue keeps falling.  Take the time to audit your website, identify areas of improvement and employ the use of any of the options I detailed above.  Your customers will thank you.

Speed Matters

SpeedMatters

By Danny Kulas

Website speed matters.  To the user, to the company, to the bottom line.  At least, it should.  With the pace at which technology has been evolving, you might expect website performance to follow a similar pattern, only that hasn’t quite been the case.  In today’s day-and-age, a good majority of people want things yesterday and become annoyed when instant gratification is anything but instant.  For example, when you’re surfing on-line for some specific piece of content and the website you visit to locate said-content takes longer than 4 seconds to load, chances are you aren’t hanging around for the hare to cross the finish line and have already navigated to another site in search of that treasured article, hand-bag, video, etc.  You aren’t alone.  People are beginning to flex their click-muscles and bounce-rate-ability more than ever in defiance of poor performing websites and that does affect any business’ bottom-line.  What are symptoms of a slow website?  Is anything being done?  These questions (and more) will be answered in the text that follows.

What, exactly, is the issue?

Websites are getting slower and users are becoming increasingly frustrated.  As the web has evolved and become more interactive, filled with all sorts of bells and whistles, so too have websites.  The issue, although, is that with these new ‘bells and whistles’, there have been little-to-no checks-and-balances on how that would affect overall website performance and because of that oversight, companies and users alike are suffering.  I will go out on a limb and say, with 100% confidence, that you have experienced a slow-loading website, sometime in your life, and became annoyed by the delay it caused.  That experience is what I am trying to dissect with this post.  And believe me, speed is user experience.

“It’s all about the user!” shouts your project manager, as they neglect performance and push libraries and shiny solutions into your workspace.  For a long time, user experience meant how a user interacts with your website once they’ve navigated to it, and that still (to a large degree) holds true.  But theres something more that dictates how positively (or negatively) a user experiences your website and that is website speed performance.  Now, it isn’t just about how the components of your website function and serve the user, its about how fast they can do it as well as how fast your website takes to load on the initial visit.  Website and network speeds don’t just affect user experience, they also have a severe affect on education!  When someone ventures out on the web in search of whatever they’re looking for, they don’t want to wait seconds (yes, seconds) for it to load, they want it instantaneously.  And making your user wait longer than 4 seconds can have devastating results on your bottom-line.

What To Do?

Surely there must be something that can be done to help mitigate these nasty by-products of surfing the web, right?  Well, yes!  In fact, there are plenty of techniques and practices (pre-fetching resources, reducing HTTP requests, image optimization, and so on) developed by the web community to deal with this very problem.  The only issue is that it seems companies are a bit slow at adopting these best-practices.  Have no fear, for Google has risen to the challenge in hopes of ‘nudging’ companies in the right direction.  And let’s be honest, it’s quite concerning when the top 10K websites have an average load time of 9.5 seconds when users are only willing to wait around for 4 seconds for your content to load.  Many people will simply navigate to a different website to find what they’re looking for, even though that detour will certainly have added more time to their browsing experience.  At least the user is still required to be active during their search, which leads me to the idea of ‘Active’ and ‘Passive’ waiting.

An airport in Houston was constantly receiving complaints from their travelers that their luggage was taking incredibly too long to reach the baggage-claim area.  In the end, they rectified the problem by moving the arriving flights to a terminal on the opposite side of the airport from that of the baggage-claim area.  The thought behind this (and it was a correct one, complaints dropped to zero after the implementation) was that customers were initially being subjected to a passive wait, meaning that when they left the plane they were able to get to the baggage-claim area quickly (due to proximity) and left waiting several minutes (which can feel like an eternity when you’re just standing around) for their bags to arrive.  So, by moving the flight-arrivals terminal to the opposite side of the airport, thus subjecting their travelers to an active wait (making them take several minutes to walk instead of standing around), by the time the passengers reached the baggage-claim area, their bags were sitting there waiting for them.  Even though the entire process of de-boarding the plane and getting their bags still took the exact same amount of time, it was perceived as shorter because the passenger was engaged in an activity that took their mind off of the wait.  It’s all about perception and that isn’t just meant for airports, it goes the same for websites, too.  Even loading portions of your website at a time (giving the user something to look at/interact with while the entire of your site is still loading) will pay dividends.

Timing is Everything

Now, I’m going to sound crazy with what I’m about to say, especially in light of how this post has been going, but here goes…“Sometimes, having a website that is really fast can be a poor user experience.”  Let me explain before you call for my head!  There are edge-cases in web development (and iOS/Android/etc) where you would want your website to respond slower, in game settings, for example.  If there is a game that you’ve invested a lot of time into playing, you may not want the game-winning move/play/strategy/results/etc to be calculated and displayed instantaneously.  Delaying the game-play results can build the suspense and create a more emotional experience for the user that they are more likely to remember and may even continue playing the game.  In game development, for example, I can remember playing the championship cup races in Mario Kart and after the last race, there is an elaborate ceremony announcing the winners of the circuit, one by one, with balloons falling and music going off.  It was a nice touch (albeit it was a video game from the 90s) that stuck with me some twenty years later, evidenced by my writing of it in this article (you’re welcome, Nintendo).  The way you manipulate speed in the design of your website or native application can have profound, positive results.

Conclusion

Understanding how your website works under the hood, beyond the glitz and glamour, is so important and can save you loads of money and time (no pun intended) that it should never be an afterthought when designing a website or application.  The process in identifying your weak spots can be a labour-intensive undertaking and require some technical know-how, but if it were easy it wouldn’t be fun.  I encourage you to visit the links that are littered throughout this post (they are NOT clickbait, I promise) as they all will take you to great resources on the web containing information about this very topic.  There is a wealth of knowledge out there that when equipped by the right mind, can really give your website or application a complete makeover in the speed and responsiveness departments.  “For some reason business owners’ website speed seems like a strange thing to worry about.  What I can tell you though is that your website speed affects every metric that you care about.  Search engine ranking, bounce rate, conversions, user retention, and most importantly your revenue (Syed Balkhi).”  If that doesn’t make you want to care about website speed then you’re out of luck (and likely more than that).