Static web: back to basics?
- Transfer
We will turn to the early years of the Internet to understand the current popularity of dynamic sites. Then we’ll look at the benefits of static sites in terms of performance, editing speed, and search engine optimization.
At first there was static.
In the early days, the Internet was a society of enthusiasts, developers, and engineers. Despite the frequent comparisons between MySpace and Facebook, the two services are fundamentally different. They also demonstrate well the difference in the “Internet paradigm” of the respective time .
Both are social networks, but creating a page on MySpace required a basic understanding of HTML and CSS. In the end, the site opened in 2003. Facebook’s easy-to-use interface, on the other hand, has helped expand its reach to over two billion users.
The antagonism of MySpace / Facebook is the critical point of tension on the Internet: how to interact with the content that we are editing? There are two main ways.
WordPress has quickly taken over the Internet: it currently has about 60% of the CMS market . It is so widespread that it can be considered as a global web platform: about a third of all sites on the Internet use WordPress .
Success does not mean relevance. In fact, experienced users give up WordPress for various reasons:
When WordPress came out in 2003, it had almost no competitors. But that was 15 years ago. Later, interesting tools and frameworks appeared for formatting texts, as well as for publishing and rendering. Development went in parallel, paving the way for a static web.
Let's start by editing and focus on Markdown.
While WordPress was getting fatter and fatter, the popularity of alternatives for both publishing sites and formatting content grew.
New lightweight markup languages such as Markdown offer a solid alternative to content editing. They are suitable even for non-technical users. It is enough to spend an hour studying the cheat sheet - and you will reduce the time for formatting texts to almost zero.
Indeed, Markdown is quite simple, quick to learn, and incredibly powerful. Using Markdown and some keyboard shortcuts, an author can write and format his content at the same time. Markdown also offers many export options (HTML, PDF, LaTex, doc ...) and ensures that formatting is preserved regardless of format.
Finally, Markdown allows you to work with text objects (footnotes, tags, section links, table of contents, graphs and charts) at the document level instead of introducing another layer of abstraction. This greatly improves the maintainability and portability of content.
JAMstack Architecture Example
Version control and development on Git quickly spread to the software world - and for good reason. This increases the reliability and security of the entire development process. In addition, the user permissions management system, branch logic and access to the full file history, as well as the ability to compare files between versions are incredibly useful features to avoid incorrect changes or fix them.
While the developers got all these fancy tools, the writers still edited their articles in Word to copy them into the WYSIWYG WordPress editor, and then start fighting the formatting. Why not share the goodies?
In the end, paradoxically, the Github repositories are a pretty compelling CMS:
So far, we have looked at the benefits of static websites in a very pragmatic way: in terms of performance or efficiency. Let's go back a bit and appreciate the big picture.
The average site size now far exceeds 3 MB , as of 2017. But much more important is changing the structure of the web page . For reference, here is the evolution of the middle page from 2011:
Inflating the middle web page. Source: Speed Matters
For comparison, on our blog the main page weighs 10 KB, and the average page (including images) is about 400 KB.
We probably have modern laptops and smartphones with decent access speeds. What about those who live in countries with poor internet? Most of the internet consists of text: it should be easy.
This may seem like a first-world problem; but it’s actually a terrible problem in poor countries. Poorly designed sites limit people's access to useful services . In addition, unnecessary traffic overloads the network, and higher requirements push the cost of the service up.
Ultimately, we come to this conclusion: the creation of an unnecessary dynamic website in 2019 is harmful to society . The Internet is a shared resource. Why do not we try to avoid another tragedy of the communities, because for this you do not need anything but common sense?
Let's just ask site developers that are 12 times more massive than they should be: where do you get so much hatred from? Under ideal conditions, an average user with an average connection of 7.2 Mbps needs more than three seconds to load one page .
What is the effect? Neil Patel, a well-known figure in the SEO community, made very detailed infographics on this subject . According to his estimates, 40% (on mobile devices 53%) of users leave the page, loading of which exceeds three seconds . Thus, an absurd situation arises:
News, display and other sites lose up to 40% of the audience due to poor performance due to the unreasonable choice of dynamic rendering. This figure does not include search engine traffic due to deterioration in SEO.
So let's take off the fat. Why so many scripts? Is it really so difficult to implement the correct image processing in 2019 (resizing, compression, loading order)?
We are convinced that soon static sites will become commonplace. At the same time, a static site easily defeats a bloated dynamic competitor in an SEO game: it's time to play!
We chose the Hugo framework for our blog , it helped optimize the content editing process and achieve impressive organic search results:
Transitions from search engines (organic)
Fortunately, since the release of Jekyll in 2008, there have been many more static website generators and other related services .
If you are considering a static engine for your site, read our next article with a description of the main frameworks and tools, as well as some tips and tricks for developing great static sites.
At first there was static.
In the early days, the Internet was a society of enthusiasts, developers, and engineers. Despite the frequent comparisons between MySpace and Facebook, the two services are fundamentally different. They also demonstrate well the difference in the “Internet paradigm” of the respective time .
Both are social networks, but creating a page on MySpace required a basic understanding of HTML and CSS. In the end, the site opened in 2003. Facebook’s easy-to-use interface, on the other hand, has helped expand its reach to over two billion users.
The antagonism of MySpace / Facebook is the critical point of tension on the Internet: how to interact with the content that we are editing? There are two main ways.
- WYSIWYG (What You See Is What You Get) - as the name suggests, in this paradigm, the goal is for the editor to show the final rendering as accurately as possible. One of the first proponents of this approach was WordPress, others later joined. The TinyMCE -based Medium online editor (shown below) is considered one of the best WYSIWYG editors on the Internet.
Medium Editor Preview - Efficiency comes first . Beginners like WYSIWYG editors, but usually they are limited in functionality or inconvenient. Ultimately, adding some syntax increases complexity, but also allows you to better control the final rendering of content. In addition, formatting is still performed using a specific syntax (HTML, CSS, Markdown ...), so it does not depend on the editor used.
Sunrise WordPress
WordPress has quickly taken over the Internet: it currently has about 60% of the CMS market . It is so widespread that it can be considered as a global web platform: about a third of all sites on the Internet use WordPress .
Success does not mean relevance. In fact, experienced users give up WordPress for various reasons:
- Editing : working with WP, even with the new Guttenberg, is a real torment. The editor is slow, awkward and comes with confusing block logic. Trying to format and edit the content is a waste of time and looking for alternatives. In addition, it does not by default support any “smart features,” such as footnotes or tables. They require an absurdly complex workflow or another plugin.
- Security : Because of its success, WordPress has become the main target of hackers. Any major WP site should implement additional security measures (plugins?) To handle various types of attacks. In addition, WordPress supports all versions of PHP from 5.2.4 (released 12 years ago) to 7.2. Add all the plugins and themes and you get an endless list of attacks. Here is an overview of the most common .
- Performance : Out of the box, WordPress has terrible performance. With some plugins (cache, CDN ...) and other settings, you can speed it up - but do you want to do this? Isn't the point of the web framework to minimize optimization efforts?
- Plugin bloat : due to all the plugins required by WordPress, it ultimately slows down the site and impairs security. A fresh installation of WP requires 5-10 plugins to work and 10-15 plugins for “optimization” : caching / minification, CDN, image compression, SEO (YoastSEO, RankMath), redirects, security, anti-spam comments, formatting (code syntax, external links, etc.). Any additional function requires the installation of another plugin: multilingualism, social network buttons, Markdown import, footnotes, content generation, carousels ...
Let's make it static!
When WordPress came out in 2003, it had almost no competitors. But that was 15 years ago. Later, interesting tools and frameworks appeared for formatting texts, as well as for publishing and rendering. Development went in parallel, paving the way for a static web.
Let's start by editing and focus on Markdown.
Sunrise Markdown
While WordPress was getting fatter and fatter, the popularity of alternatives for both publishing sites and formatting content grew.
New lightweight markup languages such as Markdown offer a solid alternative to content editing. They are suitable even for non-technical users. It is enough to spend an hour studying the cheat sheet - and you will reduce the time for formatting texts to almost zero.
Indeed, Markdown is quite simple, quick to learn, and incredibly powerful. Using Markdown and some keyboard shortcuts, an author can write and format his content at the same time. Markdown also offers many export options (HTML, PDF, LaTex, doc ...) and ensures that formatting is preserved regardless of format.
Finally, Markdown allows you to work with text objects (footnotes, tags, section links, table of contents, graphs and charts) at the document level instead of introducing another layer of abstraction. This greatly improves the maintainability and portability of content.
JAMstack Architecture Example
Version control is liked not only by programmers, but also by writers!
Version control and development on Git quickly spread to the software world - and for good reason. This increases the reliability and security of the entire development process. In addition, the user permissions management system, branch logic and access to the full file history, as well as the ability to compare files between versions are incredibly useful features to avoid incorrect changes or fix them.
While the developers got all these fancy tools, the writers still edited their articles in Word to copy them into the WYSIWYG WordPress editor, and then start fighting the formatting. Why not share the goodies?
In the end, paradoxically, the Github repositories are a pretty compelling CMS:
- Easy access control . Branch logic is suitable for editing and publishing texts. For example, if you need to strictly control the publication of content, then the authority to merge into the main branch can only be given to the main editor.
- The logic of the branches . When using the repository as a CMS, branches can serve different purposes. You can use one branch as an intermediate environment so that authors can evaluate the final rendering of content on their machine.
- File history . With GitHub repositories, you get access to the entire history of files and easily compare versions. This is convenient, especially if the blog has many different authors.
- No installation required . The repository can be opened with one click. In a service like Netlify , one more click - and the blog is online.
Bold pages cut off the audience
So far, we have looked at the benefits of static websites in a very pragmatic way: in terms of performance or efficiency. Let's go back a bit and appreciate the big picture.
The average site size now far exceeds 3 MB , as of 2017. But much more important is changing the structure of the web page . For reference, here is the evolution of the middle page from 2011:
Inflating the middle web page. Source: Speed Matters
For comparison, on our blog the main page weighs 10 KB, and the average page (including images) is about 400 KB.
We probably have modern laptops and smartphones with decent access speeds. What about those who live in countries with poor internet? Most of the internet consists of text: it should be easy.
Why should I download the entire bloated page for more than three megabytes in order to read only the text, where there can be only a few words?
Remember users
This may seem like a first-world problem; but it’s actually a terrible problem in poor countries. Poorly designed sites limit people's access to useful services . In addition, unnecessary traffic overloads the network, and higher requirements push the cost of the service up.
Ultimately, we come to this conclusion: the creation of an unnecessary dynamic website in 2019 is harmful to society . The Internet is a shared resource. Why do not we try to avoid another tragedy of the communities, because for this you do not need anything but common sense?
Users leave slow sites
Let's just ask site developers that are 12 times more massive than they should be: where do you get so much hatred from? Under ideal conditions, an average user with an average connection of 7.2 Mbps needs more than three seconds to load one page .
What is the effect? Neil Patel, a well-known figure in the SEO community, made very detailed infographics on this subject . According to his estimates, 40% (on mobile devices 53%) of users leave the page, loading of which exceeds three seconds . Thus, an absurd situation arises:
News, display and other sites lose up to 40% of the audience due to poor performance due to the unreasonable choice of dynamic rendering. This figure does not include search engine traffic due to deterioration in SEO.
So let's take off the fat. Why so many scripts? Is it really so difficult to implement the correct image processing in 2019 (resizing, compression, loading order)?
“How did a dynamic engine that constantly re-generates the same static content become the Internet standard?” - Florent Chauau
We pass to statics
We are convinced that soon static sites will become commonplace. At the same time, a static site easily defeats a bloated dynamic competitor in an SEO game: it's time to play!
We chose the Hugo framework for our blog , it helped optimize the content editing process and achieve impressive organic search results:
Transitions from search engines (organic)
Fortunately, since the release of Jekyll in 2008, there have been many more static website generators and other related services .
If you are considering a static engine for your site, read our next article with a description of the main frameworks and tools, as well as some tips and tricks for developing great static sites.