Ozy Web Design - Designing & Building Quality Business Websites
Menu
Page Speed vs Design Aesthetics
For a long time, it was believed that the speed of the page on Page Speed tests were calculated based on the speed of the whole page. Well, as it turns out, those speed test results are based on the part of the web page that is displayed above the fold.
We redesigned it. Made it simple, uncluttered and faster download for our mobile users.
This article is written to relieve the frustration for all those who are trying to improve their mobile page speed test loading time. And, by the way, mobile speed test is based on 3g download speeds as apposed to 4g or 5g speeds that are more common on many telecommunications providers. So, for all intents and purposes, the 3g technology is the baseline used for the mobile speed tests. Rest assured your clients are getting fast downloads here in Australian cities because 3g is being phased out by my many telcos.
Designing a page (specially the home page) for speed is our concern here in this article. Without too much alteration of the design aesthetics of a webpage, one can increase ones own web page speed tests for mobile devices. Of course, there are many factors that must be factored in before changes are made to the top of the page in question.
The good news is that most of the work is simple, as long as you are fluent in web design principles. For example, this site is designed and built using WordPress technology together with a page builder that allows one to manipulate the page ever so easily without wasting too much time to achieve that goal.
Factors That Can An Effect Page Speed Score
We use WordPress along with Elementor to achieve our end results. Other page builders also have similar functionality to achieve the same goals. This article is not about how to technically edit the page, but rather the outlaying structure of the page itself and the how-to’s of getting there.
These are the main culprits that will give you a slow speed. These will have a great impact on the page speed score for that page.
Let’s discover what factors have an effect on page speed.
- The page elements that are on the page, showing above the fold. In other words, the part of the page you will see when visiting that page on a full screen, either on a desktop (laptop included) or on a mobile device (also tablets).
- Images,
- The quantity of images,
- Moving images,
- Lazy loading of images,
- Image sizes and resolution,
- moving text,
- media that plays a video,
- animation of any sort,
- the size of these media
- JavaScript,
- background videos,
- background loading
- Delayed column, row loading
- and others.
Test it out! Add text only to the top of the content of the page, and test the speed of that page at https://pagespeed.web.dev/. I guarantee you that you will see greens.
Speed It above the fold
The design above the fold is the only part of the webpage we are concerned with. The rest of the page is irrelevant for the scorecard for now.
The changes above the fold should be handled with care as it will have some effect of changing the aesthetics (design features) of the page.
So, one needs to weigh out the consequences of having a fast page score versus eye-catching page design.
But, these days, if you’re the only competitor in your niche, then you would obviously do away with page score and give a higher priority to the aesthetics and design feature of the page.
However, most businesses whether small or medium size need to pay attention to the page score because these businesses have many competitors that are competing to appear high on search engine search results. Thus, they may have to play around with the design features to best accommodate for fast page loads. In this case, the design features take second precedence over page speed criteria when it comes to competing on search engines.
Page Speed and Page RanK
However, page speed is not the only criteria that determines the ranking of a page on search engine search results. There are many factors involved together with page speed, design aspects and search engine optimisation (on site and off site inclusive).
This particular site had a speed score of around 50 for page load at https://pagespeed.web.dev/. Today it is getting a speed score of 89 for mobile devices.
We had 3 images loading as a background slider on the top of the page. We also had some basic animation of text and lazy loading of rows and titles etc. Nothing really fancy. The standard glitter. We redesigned it. Made it simple, uncluttered and faster download for our mobile users.
Not only that, but we also eliminated the following to achieve a better speed score:
We’ve done away with some aesthetics and
- Removed the slider and included only one background image,
- Optimised the images,
- removed all animation above the fold,
- removed lazy loading for images above the fold,
- We then redesigned above the fold for the mobile version as well as the desktop version.
- With some care, we got good design aesthetics and great page load speed too without using any content delivery network.
Other main factors that help give better speed score are:
- Code minimised.
- Page Cache.
- Optimised image sizes.
Hope this helps clear the understanding with page speed score. One can clearly increase page speed score at pagespeed.web.dev with a little bit of work.
