Businesses looking for a local web design agency will often view the company’s portfolio and make a business decision based upon what they see. We totally appreciate that because a good-looking website design is the perfect opportunity to make a great first impression for both your brand and your services.

There is, however, a small but vitally important step before visitors see your website: how quickly did the website load?

On a desktop PC (Or Mac) with a wired broadband or WiFi connection, site speeds will tend to be fast and page speed isn’t usually an issue for the user.

Mobile devices are another thing altogether – phone hardware has slower processing power, and if there’s no WiFi they may have 4G or even just 3G connectivity.

For this reason, designers have to consider mobile devices when creating websites, making sure they look good but also load quickly too. Google’s “mobile first” policy was key in pushing developers into considering the user experience on phones and tablets and has been in place since 2018.

At the same time, internet speeds have increased over the years, in line with the capabilities of web technology. “Brochure websites” are a thing of the past, with both users and clients expecting evermore useful web experiences as standard.

Now, twenty-one years into the twenty first century, web design is about more than just a logo, text and pictures. The web has become a world of subtle but sophisticated experiences, with audio, video, and multiple interactions becoming standard.

Current users expect fast-loading websites, with the option to call you at the press of a button, open chat windows, “see buy now” buttons, view Instagram feeds, etc. all of these features adding to the user experience.

Rendering and Overhead

All these functions and features however, come at a price.

Back in 1996 a web page would have most likely been written in raw HTML as there were no (very few?) Content Management Systems (CMS) in those days. Drupal came first in 2001, with WordPress as a blogging platform in 2003 and Joomla! evolving out of MamboServer in 2005. [Other CMS are available – Ed]

Yet with all the benefits of CMS came converse effects such as “code bloat”. With a custom HTML website, the developer only writes the code they need. CMS tend to deliver a base level of functionality with more code than is necessary to deliver a basic page.

Of course, CMS are infinitely expandable and configurable, but the sheer amount of HTML used to deliver a basic web page saying “Hello World!” is significantly different between a raw code page and a CMS like WordPress.

Even over the past decade, according to the HTTP Archive, in 2010 the average web page size was 481K.

In 2021 that figure has increased to 2204kb, almost four times as much.

Video has played a large part in increasing page weight, with images and JavaScript also becoming increasingly bigger.

All of this extra content and functionality has required more code to handle it. This then places an extra burden upon the device that is rendering the code. Then when you add into the mix, the trend for custom fonts, scripts to handle all the functions and complex stylesheets to help display complicated designs across mobile, tablet and desktop, you have a lot of “overhead” with every page load.

Size Matters, So Does Complexity

When your web designer creates a beautiful set of images to show how your new website will look, they will have considered all the features and functions you need.  A really good web design agency will also consider how all those functions add bloat and overhead to your code. They will tell you too.

Yes, any designer can add video, complex copy, interactive sliders, forms, detailed images, “simple” builders on your website’s dashboard etc.

The best designers are considerate and professional enough to exclaim “caveat emptor” and let you know that they *can* do everything you want but it comes at a price. Quite often that price is page speed. Size matters. So does complexity. A large and complex web page with multiple external resources (Your video, fonts, scripts etc.) will take longer to load and render.

Rendering is the process of your web browser taking all the layout instructions in the code from your website’s server and recreating that layout in your local browser, be it on a desktop machine or a  mobile device. If you want to know, it’s called the Document Object Model (DOM) and it takes up processing power on your server, PC or phone. You want to ensure that your website uses as little CPU as possible because that makes site rendering and website speed fast.

Keep It Simple

When working with your local web design agency, as much as you may wish to add all the latest trends, features and functions, it pays dividends to genuinely keep it simple.

There are two famous tenets that lean toward this:

“Less is more”

And, from the Antoine de Saint Expury quote:

“Perfection is achieved not when there is nothing more to add but when there is nothing more to take away.”

The perfect exemplar of this is the Microsoft Re-Designs the iPod Packaging video from way back in 2006.

Having the insight and discipline to really understand your audience, and then create a webpage experience that caters exactly to their needs is your ultimate goal.

By maintaining a focus on delivering the very best user experience for your website visitors, you will perform optimally on so many levels: creating a great brand experience, fulfilling your customers’ needs and keeping the search engines happy too.

Did We Just Mention the Search Engines?

Your web designer creates a beautiful website, your web developer makes it function flawlessly, the server delivers the perfect experience to your users and the search engines will need to be able to crawl and index your website.

So, as well as satisfying your business and your clients, you must keep the search engines happy too. After all, if you’re relying on Search Engine Optimisation (SEO) to create a fantastic organic traffic channel, then you absolutely must ensure that the search engines have a great experience of your website too.

A recent webinar for the duda CMS had Google’s developer advocate Martin Splitt discussed the topic of rendering for Google search. He highlighted many aspects of the process but standout issues included saying that more execution on a web page is equal to more consumption of resource for server CPU, users’ local processors and for the search engine crawlers too.

He mentioned the complexity of webpages by indicating that keeping the DOM as low as possible is good, and that when Google crawls a web page, the “centrepiece annotation” is key to helping the search engine understand and eventually rank your content.

Basically, Google looks at a web page and using natural language processing (NLP), understands the semantics of your layout tree by separating out components such as menus, body copy, featured links and boilerplate.

This all lends weight to your design phase – your web designers need to have an in-depth understanding of layout and be able to mark-up designs so that they instantly translate to perfect web layouts.

Takeaway

“Beauty is only skin deep” as the saying goes. When specifying and building a website, make sure that your design and functionality takes into account the underlying structure too. As we’ve discussed, codebase with both DOM and rendering are increasingly important considerations when developing a website that needs to be fast as well as beautiful and functional.

Your users expect a fast and smooth user experience plus the search engines will be able to crawl your site with ease. Search engine bots understand speed and structure of web pages, so make it easy for them too and your site will benefit in the organic rankings.

Clever Marketing design beautiful websites, create useful functionality, whilst considering the underlying structure and its effects on speed.

Speak with us about your next website design project and we’ll be the comprehensive developer that you wish you’d dealt with earlier.

Call us on 01276 402 381 or complete the easy contact form.