Why a fast loading website is better than a visually impressive one

By Phil Smulian | The 1 Thing

Mar 13
coding-php-with-glasses-on-desk

Have you ever entered a busy room where so much was going on that it overwhelmed your senses & confused you? A similar phenomenon happens to your web browser.

php-code-on-a-desktop

Every time you visit a new web page, your browser – including the one on your mobile – has to download the files that contain the page information. That includes text, images, information about how the page should look & behave, and often much more.

Since you probably want your website visitors to enjoy using your site, and find things quickly and easily, then you don’t want to force their browsers to struggle with loading pages.

Consider these study-supported facts, published on this blog post from ConversionXL:

  • 47% of people expect a web page to load in 2 seconds or less.
  • 57% of visitors will abandon a page that takes 3 seconds or more to load.
  • At peak traffic times, more than 75% of online consumers left for a competitor’s site rather than suffer delays.
  • The average e-commerce website takes 10 seconds to load.

Additionally, Google will factor in the slowness of your website, when deciding where to rank it in search results. How quickly your site responds on a mobile phone is a big consideration for Google search.

“the mobile version of your website becomes the starting point for what Google includes in their index, and the baseline for how they determine rankings” Moz.

e-commerce-mobile-website

What slows down your website, and is it worth it?

Let’s look at some of the common ghouls many site owners inadvertently choose to haunt their websites.

Carousel banners

Carousel banners are very common. They may exist to flip through your services on offer, showcase some of your key projects, or in many cases just to display some impressive imagery.

The truth is, the value that carousels add is questionable. When you add a series of large photos that require special scripts to flick through them, then you are adding complexity to the page that probably doesn’t earn its keep in terms of your load speed budget. Besides, many find them distracting and confusing.

They often just look like adverts, which can trigger banner blindness. Slider banners very infrequently draw clicks, according to some studies.

Only use a slider carousel if you have a very distinct purpose for it. Otherwise just opt for single banners.

carousal-code

Excessive ads

Every website publisher that chooses to advertise will face the temptation at some point to increase the number and size of adverts on their website. More space covered in ads reliably results in more ad revenue in the short term, but there is a catch.

As visitors browse your pages, the ads that they are shown are usually pulled from a separate web server located somewhere else. This means your site sends requests to these external domain names.

The more ads you place, the slower your page becomes as the requests drag it down. If you must show ads, rather use few, and place them strategically to maximise revenue.

One page websites and overly busy pages

These are not always bad, but putting all of your content onto one page can create a much longer, heavier page that will negatively affect the user’s experience.

Some people love them because of the relative ease of setting up a new website, and they can actually work well if you do not have a large amount of content.

There is a further way these sites make you shoot yourself in the foot. Google prefers content that is organised topically across pages. When Google asks of your one pager “what is this page about?”, each page should be able to answer this question simply in one phrase. If all your content is on one page, it dilutes the topical relevance of the page.

crowded-website-example

Parallax background photographs

These have become a common feature in many recent prebuilt commercial website themes. They offer an impressive effect, where the background image appears to move independently of the surrounding content, as you scroll down the page.

In other words, you have a banner, and as the visitor scrolls, it acts like a window, showing only a section of the background photograph, which moves with the scroll. While these look attractive, they also require tall photographs. Larger photos means more bytes that your browser must download.

The wrong type of design for your type of website

ConversionXL talks about prototypical design. What they mean is how certain kinds of websites look a particular way, most often. For example, e-commerce websites generally use a similar templatised layout. They’re not copying each other, but they’re all putting content and links in places where consumers have come to expect them. This reduces the amount of thinking a visitor will have to do to perform common tasks, such as visiting their cart or browsing specials.

The advantage of anticipating and appeasing your visitors expectations is obvious. You want them to convert with as few hindrances as possible.

Web developers may try to wow and impress, adding new flashy features in the wrong places. Following a prototypical design formula can help you to streamline the page loads and improve the experience.

user-experience-wireframe

Conclusion

Website visitors are impatient. Rather choose to provide them with a lightning fast, seamless experience than to WOW them with that heavily laden technology & design.

Extra tips for speeding up your site:

HTTP/2

This is an emerging technology that is destined to speed up the overall web in the future. You can adopt it now if your web host supports it, and if you serve your web pages over the secure HTTPS protocol.

Fewer HTTP requests

Until the above point makes this one moot, you can reduce the sheer number of requests for files & resources that your web page asks of the server. It’s entirely in your control. You can combine and minify files to reduce these requests.

CDNs

Content delivery networks. These are web server machines that host your media content, such as images. The idea is that if I am visiting an American website in South Africa, and they serve their images from a server near to me, then the overall page load time drops.

Browser caching

This is a big one. Provided your site does not have dynamic content that changes as you use the page, then you can run both server and browser caching of pages. The idea is that the server does’t have to recalculate what to show a visitor every time, because the server stores a static copy of each page, which saves time.

Image optimisation

A good SEO company will be able to optimise images so that they slow the site down less.

Discard unused plugins & features

Sounds obvious, but hoards of web developers & digital marketers try out software plugins, only to not delete them after use. So your company website becomes bloated with software that isn’t serving any purpose.

Upgrade to PHP7

PHP is the software that allows your site to serve dynamic (changing content), and the newer version is faster. Your web host will govern this. Some hosts will upgrade automatically, some by request, but generally you will have to find a host that supports the latest technology.

 

x