What Does a Perfect-Score Landing Page Look Like? | by Gabriyel Wong

Creating a highly usable landing page that Google dotes.

According to web usability research in 2019, only 15% of websites operate at acceptable page loading speed. The Internet, given its birth some 50 years ago lacks no literature on how usable webpages should be as the level of sophistication of both its readers and the technology progressed.

• Google cites 2 seconds as the benchmark for e-commerce websites to load and the ideal to be sub-second.
• Slow websites impact conversion. For every 100-millisecond delay in website loading time, you lose 7% sales.
• Non- mobile-friendly websites suffers poor visibility online. Google’s search engine will make mobile-first indexing the default from 2020 onwards.
• Poorly designed websites lose new visitors and brand equity. 80% of people say they are more likely to revisit or share a website if it is easy to use.

There are many online tools that can be used to measure a website’s usability. Google’s PageSpeed Insights and the Lighthouse project are popular ones that provide the yardstick for a web page’s usabilty — Performance, Accessibility, Best Practices, SEO.

It is amazing that many businesses are oblivious to the impact arising from poor usability of their websites thereby rendering serious inefficiency of their online marketing investments. To illustrate, refer to a property developer’s lead generation page below.

By having such a low landing page performance score, the downside is massive — first, even if the business owner dunks boatloads of money for paid advertisements, visitors will likely bounce from the landing page if it takes over 20 seconds to load.

Moreover, this page is likely to land in the SEO graveyards even though this may not be a concern since property sales are seasonal.

Now is it possible to get perfect scores on Google’s tools for evaluating a website’s page-loading speed and general usability? My goal is to answer this question by unpacking the scoring criteria as much as possible from a technical perspective through a landing page building experiment.

• Adopt common workflow for landing page creation, using typically the no-code (or minimal code) WYSIWYG toolkits that support rapid website creation. Four landing pages were created using two different toolkits and analyzed based on the Lighthouse project’s scoring criteria.
• Each page is built from the ground up, with every content block on the page is evaluated for its potential impact on the usability score before the block is inducted. Any issue is fixed immediately according to the recommendations so as to maintain the highest score possible.
• Instead of setting up a synthetic experiment, build the landing page with common structures such as having content blocks that can be easily configured for hero image, features, benefits, social proofs, social sharing and lead-generation sign-up blocks.

Setting up a cloud web hosting service on Amazon

While toolkits can provide recommendations on how a website may be improved, these suggestions do not solely fall onto the web front-end designer’s lap. Since the Internet is largely dominated still by systems with the client-server architecture, sufficient server-side optimization is necessary for websites to provide a high-quality user experience.

The technical aspects no doubt will be a pain for the non-technical folks. Due to scope of this article, a summary is provided below on the steps with references to the technical documentation useful for this experiment.

1. Set up a cloud-based server with Content Distribution Network (CDN) service. This can be done via an Elastic Computing instance (EC2) from Amazon Web Services (AWS).
2. Install Apache web service at the server for hosting your landing page and upload your landing page with the related assets to the web root.
3. If you need to map your domain name to the EC2 instance in order to use your preferred URL, you will need to perform the following domain administration steps:

Landing page-specific optimization

Once the above has been done, there are two important configurations that need to be set for your landing page to be served expediently to your users’ web browsers.

• Browser caching — by caching objects such as images and scripts into the web browser, there is no need these objects to be downloaded again for every visit. This can significantly improve the speed of the landing page without having the user wait for the page to load.
• Server-side compression — objects required for your landing page to function properly can be compressed for faster downloads. This is especially useful in countries with slow Internet speeds and has the same effect of reducing waiting time for visitors at your landing page.

Most of Lighthouse’s recommendations for fixing issues on the client-side are prescriptive and they provide examples on how to do that. These recommendations range from hygiene improvements such as labeling form elements, better font usage, setting appropriate color contrasts on buttons to removing redundant scripts and using efficient image formats.

Given sufficient attention from the web designer and programmer, most of the common issues can be resolved quite easily.

Progressive Web App

Since 2015 Google has been advocating Progressive Web Apps (PWA) as the next generation web that provides the native app-like experience on mobile devices.

Even though this is not a strict requirement for all existing websites, the benefits of migrating to PWA is pretty substantial and it can be easily seen that Lighthouse registers this in its measurement criteria as well. A tutorial in setting up a basic PWA (as a boilerplate) can be found here.

Even though we managed to achieve near perfect scores from the Lighthouse tests, there are important caveats to note nevertheless.

• Web usability is a broad term with many confounding factors but the test toolkits focus on a specific set of criteria that is measurable.
• For certain websites or landing pages hosted by third-party service providers, there may be restrictions on server-side configurations due to security measures thus restricting the improvements that could be done.
• The test toolkits themselves are challenged by code-level intricacies such as dependencies which cannot be avoided in certain circumstances, e.g. the usage of tracking scripts. Hence there may be trade-offs between the usability scores and the landing page’s functionality.

The landing page was originally hosted at the Amazon cloud as an experiment on optimization. You can get the entire site template here for your enjoyment.