L ANDING
PAGE

tl;dr

A brief overview of this site's specifications.

Features:

• Static site, PWA in connection with AMP
• Minimized codebase for maximized performance
• Structured data to increase the chance of search results being displayed as rich snippets
• Lazy loaded images, WebP format with JPEG as fallback
• Low hosting costs for high traffic projects
• Cookie handling according to EU-GDPR law

Suitable for:

• Organizations or individuals advertising their services, products or ideals
• Paid ad campaigns that require high visibility
• Campaigns targeting organic traffic via search engine results

why!

Landing pages are often the first contact someone has with a specific product, company or organization. These first impressions matter in respect of conversion rates and the effectiveness a online presence in general. A clear and fast presentation of the content is what visitors expect when they browse the web. Meeting those expectations is a key factor for turning visitors into customers or clients.

Ecommerce is competitive since the next competitor is just a click away. It's a race for attention in which innovative solutions and small advantages can determine the success of campaigns.

images

Images are an important part of the message - and one of the main reasons for the slow page load of many websites.

For this site three techniques have been implemented to overcome this issue: responsive images, lazy loading and the usage of WebP, an alternative image format. The three strategies are briefly explained.

The next generation image format: WebP

• WebP is a image format developed for the internet with a higher compression rate as JPEG. Due to the higher compression rate compared to JPEG, less data has to be transmitted and the images are displayed faster.
• For browsers that don't support the WebP format, the images are served in the JPEG format as fallback.

Responsive images

• Different sizes of the same image are served; the browser chooses the one which fits best, depending on bandwidth and the size of the browser window. If too small images would be displayed, it would be bad in respect of quality, too large ones would increase the transmitted data (and loading time). Responsive images ensures that those images are downloaded and displayed which fit to the user's device.

Lazy loading

• Lazy loading is a technique to load images (or any other resources) after site's the main content has been rendered in the browser window; as a result the page is rendered much faster - most of all in pages containing many images.
• While a user scrolls down the page, the browser detects when certain elements come into view and starts loading the image in the right size and format; this reduces the amount of transmitted data and costs - for the site owner and visitor.

performance

Performance in respect of page speed matters. The less data has to be transmitted and the less the browser has to calculate and re-render the window, the faster visitors see the final content of a page and the lower the drop-off rate. For this site, no libraries or frameworks were used in order to keep it lightweight and fast.

In order to further increase the speed of on-site navigation, the HTML files are preloaded and cached as soon as the home or any other page has finished loading. When visitors navigate from the landing page to other pages of the site, those pages are displayed instantly since no additional loading is required.

This site meets the requirements of progressive web app (PWA) and as such, the content also can be displayed in offline-mode. Users are asked to install a button on their home screen to load the site.

Fonts are inlined as woff2/base64 in the CSS (with a fallback if this format is not supported by the visitor's browser). While this results in a delay of rendering time, it prevents a flash on unstyled text and saves one HTTP request.

seo

User interactions measured by tracking users' behaviour and page speed are crucial for on-page SEO since they are considered as important ranking factors in search engine results. Considering the trend to more sophisticated tracking technologies, this seems become even more crucial for the time to come.

Another strategy to improve visibility in search results is to enable search engines to display part of the content as rich snippets by the usage of structured data. The use of structured data has no direct impact on the ranking itself, but search results are displayed as rich snippets and gain visibility. For campaigns with the goal of generating organic traffic from search engines, the use of structured data makes highly sense.

The third element of this site's search engine optimization is to serve its pages as accelerated mobile pages (AMP). AMP pages are stripped down versions of the original pages. Due to the high page speed and Google's ability to cache those pages on its content delivery network, such sites are prioritized in mobile search results. This feature is useful for campaigns aiming to generate traffic from mobile search.