Tutorial on the basics of NextJS for building a website.
Is AMP the web 3.0
Google, the undisputed leader in web services (search, pub, analytics ...), has been offering for over a year a new way of displaying your pages, called the AMP project.
What is that?
If you follow the digital news and use google search a lot, you have very likely already seen the following "cards" in your mobile searches :
Yes, that's AMP. A place of choice in Google search, but also a new way of browsing between websites. Indeed, if you click on one of the cards you will not be on the website that sent the content (you will understand why later) but you will stay at Google's, which will allow you to slide between each page of the search:
Interesting don't you think? But there is more to it, if you look more carefully you will realize that the AMP website is vastly faster than your own.
But how does it work?
The project relies on 3 components allowing to propose this new user experience:
- AMP HTML
AMP is HTML by default, but in some cases new tags are set up to allow an increased speed of execution. For example
<amp-img will allow a faster display of images, even for the non-compatible browsers. AMP Also prohibits the use of specific tags, considered unnecessary or non-performing. You are therefore restricted on the use of the tags such as
<param> , etc...
- AMP JS
- AMP Cache
AMP cache is optional but is still the focal point of AMP. Have you always dreamed of having access to one of the best cache systems in the world? Now it's possible: AMP Cache allows you to store your AMP pages directly in the Google cache. That's why you're no longer on your site but directly on www.google.com. This allows an exponential optimization of the performance of your page.
To go further in the description of the principles of AMP I invite you to read this article https://www.ampproject.org/learn/about-how/ or watch this video:
Create your first page
As AMP is nothing more than some HTML, we will start with the mandatory phase of setting up of the metas of our page.
Begin by create file index.amp, And then put the tag indicating the type of document.
We then open the html tag by adding the AMP option.
We now have to put the meta in order.
As you can see, there are:
- the encoding of your page
- the canonical link that contains either the HTML url of your page, or the AMP url
- the viewport of your page
- the style tag required to use AMP
- the body of the page
We now have a basic page. But is it really AMP? In order to perform an audit, AMP has implemented two systems. The simplest is directly online, at this url https://validator.ampproject.org/. Your second option is to display your page in the browser by adding
#development=1 to your url. In your chrome console you should now see the validation errors.
A web page is good, but you must put some CSS. This is also where AMP is quite restrictive. You can use only one external CSS file, otherwise the CSS must be in a specific tag. You must also explicitly set the size of each item.
To finish our page, we must let Google know that we have made an AMP page, and it's quite simple.
In your HTML you must notify that the page exists by adding the following meta:
In the AMP page you must put your HTML page by adding this tag:
If you only have one page and nothing more, you have to put the canonical link of your page.
And it's done!
Congratulations, you've made a big step in the web performance!
There are many other features available, such as setting up a login system, a live blog but also advertising, analytics ... I invite you to look at the page https://www.ampproject.org/docs/guides/ which will inspire you for your web application.