Static Site Generation: New front-end strategy based on pre-rendering
The new Static Site Generation technology provides an increase in website performance and loading speed, improving user experience and SEO positioning.
Using this technology has in some cases resulted in an increase of more than 20 points on mobile and more than 60 points on desktop.
Background
In recent years, libraries and front-end development frameworks have emerged that generate a new way of rendering web pages in browsers.
At first, server-side rendering generated the HTML code on the server before sending it to the browser; rendering was automatic and nothing was processed in the browser.
With the rise of frameworks such as Angular or React among others, server-side rendering evolved into client-side rendering. This technology puts a lot of load on the browser, because it works from the HTML template generated on the client side, and fills in the values while running the javascript code of the frameworks. This is what is called the rendering time, that is, the time it takes from the time the request is resolved until the user sees the fully loaded screen.
All pages and applications that use this technology have to be very light and be highly optimised so that Google crawlers capture the information as quickly as possible, since as we all know search engines, and especially Google rewards the pages that load first by showing them in the top positions of its search engine.
How does Google rank the best sites?
Google crawlers are bots or crawlers whose mission is to crawl web pages, read them and take this information to a server. These Google bots take into account 3 metrics when positioning your web page, which is what is called core web vitals:
- Page load: how long it takes to fully “paint” the page.
- Interactivity or speed of user interaction: time that passes from the time it loads until the user interacts with it.
- Visual stability: no flickering or flickering, no skipping of content.
*Fuente: https://developers.google.com/search/blog/2020/11/timing-for-page-experience
These 3 metrics are what determine the UX and SEO of a website or app. So, for example, when you do a report with Lighthouse this is the first thing it analyses and what will help your page to have a good SEO positioning.
It is so important to check the loading time, interactivity and visual stability of the page, that if these metrics are not correctly configured they also affect the Quality Score in Google Ads, damaging the CPC of digital ads. In other words, if you do not offer a good user experience (according to Google’s criteria) your ads will be more expensive, less profitable and less effective.
In short, by perfecting and correctly configuring the metrics that affect the “Core” of your website, you will be able to simultaneously optimise the cost of your Ads campaigns, and thus maximise the performance of your digital marketing campaigns. In other words, you will improve your SEO and also optimise your business’ SEM investment.
The new generation of frameworks: Static Site Generation.
The new generation of frameworks, static site generation, provides a solution to the loading time of websites and apps in browsers to improve the performance and UX of applications, leading to an increase in SEO positioning.
Proposal value
This new front-end strategy, based on pre-rendering guarantees:
- Improve customer experience or UX
- Increase performance
- Reduce abandonment rate
- Increase conversion
- Improve SEO positioning
- Increase inorganic sales
- Reduce SEO investment
- Save on cloud infrastructure costs
- Reduce technology debt
More broadly, these new frameworks are not as such different technologies, but are add-ons to existing pre-rendering frameworks.
Most of these new frameworks do a revamped server side rendering, sending the HTML content in SSR with pre-rendering, i.e. building some parts of that HTML; whereas Client Side sends a template that is completely filled in the web or app.
On the other hand, the web developer or webmaster can decide which part of the code he wants to send and can also reuse it by using caches.
One step further is to implement a CDN so that all static files are cached, which increases the speed even more. So much so that it can even get to the point that if you have the whole static page, you don’t even need to have the page deployed in an environment, you just retrieve it from a CDN.
Applied technology and examples
One of the main technologies used for pre-rendering is Next JS. Framework developed by the creators of the React library.
In this link you can find out which websites already use this technology, among others Netflix, Uber or Starbucks.
Types of target pages to use this technology
This technology is suitable for websites or apps where the content displayed is uploaded by the server and has no interaction with the client. Some types of target audiences could be:
1º Static pages, such as landing pages, blogs or portfolios. Those websites in which the content shown is loaded by the server without content for the client. Even this type of pages can be static and the loading is null (or occurs in very few seconds).
2º Ecommerce. With this technology you can develop a shop with a good UX and SEO, because not all the page is static but there are parts that we are interested in not doing pre rendering. But there is no problem because this technology allows it.
Interested in learning more about Static Site Generation?
Contact the Luce Innovative Technologies team and we will help you to improve your user experience and SEO positioning.
Luce IT, always adding value
“We believe that technology and data could change the world”
The history of Luce is a story of challenges and nonconformity, always solving value challenges using technology and data to accelerate digital transformation in society through our clients.
We have a unique way of doing consulting and projects within a collegial environment creating “Flow” between learning, innovation and proactive project execution.
In Luce we will be the best offering multidisciplinary technological knowledge, through our chapters, generating value in each iteration with our clients, delivering quality and offering capacity and scalability so they can grow with us.
