Why your great looking website may be causing you problems… Seems a rather counter-intuitive statement? As an active website designer and developer, the number one question potential clients ask is ‘can you build me a website that looks great?’ Sometimes they can be more specific: ‘Can you build me a website that looks like my competitor’s website?’ Clients are often keen to take heed of what their main competition is doing, hoping that they can achieve the same level of success by replication or duplication of a website they assume is working well.
On rarer occasions, I talk with clients who have done their own research on WordPress and specifically on themes. They may have been recommended a theme or have simply been blown away by the demo or ‘showcase’ webpages these themes use to sell their product. Big, impressive hero sections or mastheads, huge, high resolution imagery, embedded video running at 1920 pixels wide, interactive sliding carousels of infographics and elegant scroll based animations that convey the sense this website ‘means business and was expensive’. Hopefully you get the picture I’m painting here.
The hidden cost of great looking website theme demos
As a designer first and foremost, I’m intrinsically attracted to great looking website design. I’m always inspired creatively by others’ elegant implementation of imagery, great use of colour and the use of animations or interactions that make a webpage ‘pop’ off the screen. This is what I indulge myself in when I sit at my desk and turn on my computer every morning.
Given the level of creative freedom a print designer has when planning and constructing a company brochure, nothing is off the table, almost. As long as the product is legible, intelligible, the client approves the work and it satisfies all the technical requirements for the printer… go for it! There’s no hidden cost to looking good in print design. This is not true for looking good on the web. Not by a long way!
Great looking website design can be frustrating for your viewers
To me, pushing the design boundaries on your webpage and employing every whizz, bang and pop offered by the most popular commercial WordPress themes may leave your viewers with a headache. If every interaction they have with your webpage is punctuated with animations, movement and actions that may be disorientating at best and nauseating at worst, we enter into a form over function issue.
I remember when Apple introduced the first version of OS X (renamed MacOS), which was very much form over function. In addition to a new look, all interactions were punctuated with animations, swipes, squeezes and slides. For someone with years of experience using Mac OS 9 and used to its instantaneous execution of tasks with no animation at all, OS X seemed slow, wasteful, inefficient and, dare I say, totally ‘unproductive’ for professional use. Over time Apple speeded up and economised on the animations in OS X. But even today, more than 25 years since the shift away from Mac OS 9, I have been known to use terminal commands to remove or speed up Finder’s animations. And with Apple’s recent Liquid Glass redesign drawing plenty of ‘form over function’ criticism of its own, it’s clearly a debate that hasn’t gone away.
If we apply this within the context of a webpage, it’s becoming clear that making your viewer wait for an action, even if it’s a few milliseconds, can become frustrating. This is even more true if multiple animations, transitions and fades one after the other compound the experience. There are also technical usability considerations when using animations and motion graphics on webpages too.
Some people find on-screen motion genuinely uncomfortable, and for anyone with a vestibular condition it can trigger dizziness or nausea. Most phones and computers now have a ‘reduce motion’ setting, and a well-built website should respect it by toning down or switching off its animations for anyone who has turned it on.
I would say that motion really doesn’t offer any benefit to users viewing your website on smartphones. Even today’s 6 inch plus, 120Hz, high resolution smartphone screens are no place for multiple sliding banners, fading buttons (there’s no hover state on mobiles anyway) or scroll based animations. On a mobile device, the majority of users will be on the move and need that information fast and with minimal fuss. Beyond delivering requested video or audio content, this is not the place to impress your viewer with webpage motion virtuosity.
Tablets and iPads arguably have more success with this due to their larger screen real estate. This is especially true for recent iPads, which actively try to deliver the ‘desktop’ version of your webpage to the user, not the simplified one-column ‘mobile’ experience. That said, form should follow function for business orientated websites, irrespective of the device they are viewed on. Great looking web design should not come at this cost.
Impressive looking web design can be slow… Why?
How fast your website performs is based on a number of factors, including how it is designed and what technologies it uses.
A few factors that can affect website performance:
Website hosting
Server response time is vitally important in delivering your content to your viewer in a timely manner. Low cost shared hosting is great for the wallet but may be costing your business lost revenue, as viewers get fed up waiting for your website to load and click off to a competitor’s website with better server response times.
No caching or poorly configured caching
Caching, either at server level or browser level, can speed up webpage load times for your viewers by only loading what needs to be loaded every time they view your website. The server or browser stores, or ‘caches’, elements of your webpage for use later so they do not need to be reloaded every time.
So for business orientated ‘brochure’ style websites that don’t update content on a regular basis, caching can make a huge difference to performance. However, poorly configured or implemented caching can actually be more detrimental to webpage load performance than having none at all. It’s important to research the various caching options open to you and follow the instructions fully when applying them to your website.
Server based caching like SiteGround’s SuperCacher is a real peace of mind option, as it takes away the responsibility of caching from you or your developer and provides an ‘out of the box’, ‘just works’ solution that will instantly improve Time to First Byte (TTFB) loading speeds.
And finally, those design indulgent ‘bad’ choices…
Image optimisation
There’s a rogues’ gallery of the usual suspects that can make WordPress or any CMS run slowly. The first is the use of an image size or resolution that is far too large for the web. Depending on your hosting, WordPress will happily accept images many megabytes in size. Since version 5.3 it automatically scales very large uploads down to 2560 pixels and creates smaller versions for different screen sizes, but that’s a safety net, not a substitute for preparing images properly. An uncropped, uncompressed photo can still drag a page down.
How does this happen? Well, often users will upload images taken directly from a smartphone or digital camera to a website. Often over 5000 pixels in size, they are simply far too big for website use. Images intended to span the full width of a page rarely need to be wider than 1920px.
Colour, complexity and choice of image format are important too. JPEGs are perfect for photographs or images that are quite complex in colour or detail. PNGs, or ‘pings’, are suitable for more graphical style images like infographics or areas that use flat colour. Really it’s a suck it and see approach, but ideally you want to keep larger images below 200 kilobytes and smaller ‘editorial’ style images below 150kb. An image right out of a modern digital camera can easily run to 30+ megabytes. That’s 30,000 kilobytes, 200 times bigger than a well web-optimised 150kb image!
How do you create these web optimised images?
There are a number of plugins for WordPress and other platforms that will automatically perform optimisation for you. Smush is a popular image optimisation plugin for WordPress, with the free tier usually offering enough scope for most websites’ needs. However, as an old-school graphic designer, I prefer to perform the optimisation myself BEFORE I upload the image to a website. Doing the optimisation yourself also allows for other choices such as cropping and colour correction.
There are many options for optimising your images yourself. Free online tools like Squoosh (from Google), Compressor.io or Kraken.io will allow you to resize and optimise your images and prepare them for fast download on your webpage. Traditional desktop solutions like Photoshop or the excellent and free GIMP are big favourites too, offering far more control over colour, cropping and resizing. However, they are more complex beasts and may need more time to master.
Optimising your images well for web delivery doesn’t have to be difficult or time consuming, but it continues to be one of the most overlooked aspects of creating great looking website design.
Consider using a modern image format like WebP or AVIF. When I first wrote this article, WebP support was still patchy, but every modern browser now supports both and WordPress handles them natively. Boy… do they shave off those kilobyte pounds, especially for images with transparency, which used to be the wheelhouse of 24-bit PNGs. Just keep an eye on artwork with subtle gradients, as banding can creep in at higher compression.
Animations, scrolling and motion effects
Many commercial WordPress themes and page builders showcase a multitude of options to add motion, interaction and excitement to a web page design. Although this looks impressive, behind the glitz there’s boat loads of additional code running to make it happen. JavaScript libraries such as jQuery and GSAP are commonly used to deliver this animation in real time.
These and similar technologies are usually well written and as efficient as possible, but at the end of the day the browser has to load and execute additional code in the background to allow for this. If, on a slower system, an older browser or a dog-slow internet connection, this causes the webpage to render slower or not at all, we are presented with the form over function dilemma again.
Mobile page speed and Google’s Core Web Vitals
As the proportion of worldwide webpage views skews towards mobile, Google now indexes and ranks websites based on their mobile version. Sure, the usual suspects such as HTTPS matter, but if your website performs badly in mobile speed tests, it can count against you.
Historically, it’s safe to say that the big name WordPress themes have not focused on good scores for mobile. They are usually significantly worse than equivalent desktop results, throwing up ‘render blocking JavaScript’ or ‘unused CSS’ warnings in the results. Google is stricter with these on mobile, as it considers download time more vital and the bandwidth of mobile users critical. They may be paying for the privilege of loading your huge 5000px hero image out of their data allowance.
In 2021 Google introduced Core Web Vitals, a set of measurements based on real visitors’ experience of your pages: how quickly the main content loads (LCP), how quickly the page responds when someone taps or clicks (INP, which replaced the original FID measurement in 2024), and how much the layout jumps around as it loads (CLS). Heavy themes and stacks of animation scripts tend to hurt all three, especially on mobile.
Theme makers can no longer ignore page speed, and many have improved. The shake-up turned out to be a steady nudge rather than the upheaval GDPR caused in May 2018, but websites that perform badly on mobile are still at a disadvantage in search.
Philosophical dilemma of great looking website design and finding rational ways forward
Is it worth potentially losing a visitor for this extravagance? Maybe I’m being over dramatic, but the cost of great web design over usability needs to be weighed up objectively. A fade here or a scroll there may not add much weight to a webpage, but it needs to be considered, and we as web developers need to avoid throwing everything but the kitchen sink at a website just to impress our clients and seal the deal.
If you pushed it even further, could it be said we are actually deceiving the client by giving them something they love at a superficial level but that ultimately won’t deliver for their business? Do we need to talk about the caveats of wanting that ‘showcase’ commercial theme demo page up front, before commissioning? Possibly, but could we simply be shooting ourselves in the proverbial professionally and losing jobs by being too transparent?
I didn’t mean for this article to become so critical of my own profession, and I can own up to astonishing clients with heavy, overweight but beautifully impressive and immersive webpage experiences. Did I do the wrong thing? Maybe. But moving forward I find myself always asking the question ‘is this form over function?’ When a client asks why they shouldn’t have a video hero section on their homepage or scrolling animations with parallax effects abound, I take time to explain why it may not be necessary. They can then choose to agree or disagree, but the choice is given, not hidden away or assumed irrelevant.
Interaction and animation have their place. My own website, the one you are reading this article on, has a variety of movement, scrolling effects and transitions. However, I’m constantly reassessing the need for such visual indulgences. Checking engagement in Google Analytics, and looking at page speed results in Lighthouse, PageSpeed Insights and GTmetrix, along with the Core Web Vitals report in Google Search Console.
These days I’ve moved away from commercial themes altogether. I build sites from scratch in Bricks, so every element is there because the site needs it, not because it came bundled with a demo. That’s not to say looks no longer matter to me, but it’s a balance of form and function I find myself looking for. With a slight lean to function, without a doubt.
If you would like to discuss any aspects of website design or page speed, get in touch with me and I’ll be only too happy to see if I can help out.