Whether you want to sell your products online, present your services to a potential client, create multimedia content or write blog posts, your company needs a website, regardless of its size or sector.
But, as soon as you talk about it with your teams, your brain starts to heat up like a poorly ventilated computer! HTML files, CSS stylesheet, SEO, dynamic sites based on a server solution, CMS, programming, computer code, PHP, jQuery, and more; there are just so many technical terms that make you lose your mind and, above all, lose contact with your future visitors. So when we tell you that static sites are making a comeback …
Don’t panic! In this article, we will offer you a short crash course. Follow the guide! Xavier-Philippe Tulenew, the CTO of Wemanity, explains everything you always wanted to know about static websites to help you make your choice.
1. Static site: what does it mean?
At first glance, it is difficult for a user to differentiate between static and dynamic websites on their computer screen. But, thanks to Xavier, the border between the two becomes less fluid. ‘A static site,’ he explains, ‘is composed, as its name suggests, of static pages, that is to say pages visible as they were designed’.
However, this definition should not give you the impression that nothing is moving on your web page! ‘You can of course integrate images, videos or music, says Xavier, but they will always be the same’. In other words, these multimedia animations will be presented the same way regardless of the user. On a dynamic site, conversely, ‘information varies depending on the interaction with visitors’.
What you have to remember: ‘A static site is made up of static pages, that is, pages visible as they were designed.’
Magical? Not really. This of course assumes some knowledge of code and programming languages. But you don’t have to be a computer whizz to experience it! All you have to do is open a page in your favourite web browser and surf to an e-commerce site. Its content comes from a database, according to the criteria that you have defined to find the articles you are looking for. This content will then undergo real-time layout. Unlike a static site, HTML files are not stored on a server that would simply serve them in your browser when requested. ‘Pages,’ Xavier sums up, ‘are built “on the fly” thanks to programming designed by your webmaster or your team of developers’.
And therein lies the rub: creating a new web page every time a user requests it takes time. As they get bigger, dynamic websites have become not only heavy but, above all, slow. Too slow even for computer code experts! Another problem? SEO As the site is generated on the fly by JavaScript, it is impossible for a search engine to retrieve the content. Flaws have allowed static websites to return to the forefront of the Internet scene and to mark their difference.
2. The winning return of statically generated websites
‘This was made possible by the Jamstack’, a set of technologies that includes JavaScript, APIs and markup. If we take the example of your shopping spree on the Internet, what does that give? ‘The catalogue will be pre-built in advance in the form of static HTML pages, but the items in your cart will be dynamic elements written in JavaScript and relying on APIs to provide functionalities such as the payment system for example’. In short, the creation of web pages precedes your desires since it takes place upstream of your request thanks to static site generators.
These tools behave a bit like content management systems, CMS like WordPress which can use the PHP language and the MySQL database. With one difference, however: they ‘compile’ files after modifying them, to serve only static resources. In this sense, they are more like caches of a dynamic site than CMS.
The key figure: ‘More than 70% of visitors leave an e-commerce site if they have to wait more than 3 seconds for a page to load…’
‘Once generated,’ continues Xavier, ‘static pages are often deployed on content delivery networks’ (CDN) . Thanks to these CDN infrastructures, like Netlify, management is fluid. ‘Above all, we free ourselves from the complexity caused by caches’. Indeed, when the site contains tens of thousands of pages, ‘you have to develop generation strategies which can quickly become very difficult’.
CDNs play a bit the role of ATMs! They cache content on servers located near your computer or smartphone. ‘You can then watch your film, download a text, check your bank accounts, publish a post on your blog or make the sales, without having to wait for the multimedia contents to load in your browser’. A major challenge when we know, thanks to Xavier, that ‘more than 70% of visitors leave an e-commerce site if they have to wait more than 3 seconds for a page to load…’
3. 5 reasons to adopt them
- Combine performance and safety
But, performance is not the only asset that argues in favour of static site generators. ‘With a statically generated site, the risk of a cyberattack is drastically reduced’. Why? Quite simply, because there is ‘no need to access a database at all’. Don’t think, however, that a static site generator will make yours invulnerable! If it uses APIs, it needs to be.
On the other hand, there are many safeguards such as the implementation of ‘tokens to ensure that the site which consumes the API is indeed authorised to do so’. Xavier also recommends the application of protocols such as HTTPS or the use of CORS headers. ‘These security mechanisms verify that the information provided by the APIs to the site are indeed legitimate applications for the use of its data’. And if your site is damaged, nothing prevents you from removing the cache and re-generating the whole static site two minutes later and with all the information. How? Ideally using a site generation strategy such as SSQG (Site Site Generation), SSR (Server Site Rendering), CST (Client Site Rendering) or a particular type of generator such as ISR (Incremental Static Regeneration). Thus, ‘each time new content is modified, you will only have to generate the static file corresponding to the modified content and not the entire content’.
Why switch to a static site? ‘With a statically generated site, the risk of a cyberattack is drastically reduced.’
- Bandwidth improvements: music to your ears.
For this is another advantage of the generated static websites: their robustness. ‘The extremely sophisticated caching mechanisms make it possible to generate information several times without having to ask the machine to do so’. Static site generators will therefore represent valuable allies for managing requests flowing in large numbers to your web pages. More broadly, they improve bandwidth conditions and reduce the weight of the infrastructure. Xavier remembers for example that, for a client working in the real estate sector, the implementation of a generated static site had made it possible to go from 10 web servers to 2, from 5 application servers to 1, from 5 licences per content management tool to 1…
- … as well as lower costs and consumption
‘It is estimated’, confirms Xavier, ‘that statically generated websites allow costs to be reduced by at least 75%’. A saving not to be sniffed at, and which comes with the added benefit of a positive ecological impact. Of course, not everything is ideal yet. But, because it allows significant energy savings, the use of CDN marks considerable progress. ‘It resonates perfectly with the vision we have at Wemanity by offering the customer the greenest possible solution’.
4. Technology for teamwork
Guaranteed security, technological performance, reduced costs, positive impact: the statically generated websites therefore have many arguments to put forward. And, with the new headless architectures, their strength is even greater. ‘In older generations, we had to have a web or application server,’ explains Xavier, ‘which very often meant being dependent on a server language’. With headless, this addiction has completely disappeared. ‘We only need to use a template engine that can adapt to your needs, the requirements of the teams or the market’.
Which means …? This makes it possible to capitalise on business components. ‘An API can thus be used on a site but also on its mobile version or in a smart watch application’. We are therefore multiplying the number of channels on which our application can be used. On all levels, headless is therefore synonymous with greater freedom! Front, react, angular, PHP, JSP, and more: ‘your teams can indeed use the technologies and languages they want’.
Bonus point: ‘Your teams can, in fact, use the technologies and languages they wish’.
This makes work and teamwork easier! Because, while developers will appreciate working according to their own language, content creators will be delighted not to have to abandon their favorite CMS to publish a text. As for the marketing function of your company? It will be delighted by the idea of boosted natural referencing!
In short, everyone will be happy! All that’s left is to ask if you are too? Has this blog post managed to provide a good definition of static websites? Has this text played its part in providing training and answering, as promised, all your questions?
