EasyStore Cloud Intelligent Website Marketing System Platform!
- Independent website construction: why choose us?2025-06-24View Details
- High conversion of foreign trade independent website building case sharing2025-06-24View Details
- Are global buyers abandoning your independent website? Uncover the technical traps that 99% of companies ignore2025-06-19View Details
- Multilingual SEO optimization services help companies expand into international markets!2025-06-19View Details
- AI-driven SEO optimization services can double your website traffic!2025-06-19View Details
- Intelligent website building system + SEO optimization services to create an efficient marketing website!2025-06-19View Details
- Shandong enterprises must see: the five core advantages of independent station construction2025-06-17View Details
- The official agent of Google for foreign trade independent website: authoritative certification, trustworthy2025-06-17View Details
New AMP Website Building Technique: AMP + SSR = Faster Loading
AMP now officially supports a technique called server-side rendering (SSR), which you can apply to your AMP pages to make them load faster. Post-adoption testing has shown increases of up to 50% in the popular FCP metric . Google AMP Cache has been using this technique for a while, but now you can use it on your own domains, too! Installing this additional optimization is especially important if you’re using AMP for your main site experience. Even if you’re using a “paired AMP setup” with AMP and non-AMP pages, this technique ensures that users get the best performance if the AMP Cache isn’t being used, such as those using the Twitter app.
SSR is a technique used to improve the First Contentful Paint time (FCP) of frameworks that render pages client-side, such as React or Vue.js. The downside of client-side rendering is that all the Javascript required to render the page needs to be downloaded first. This delays the time when the user sees the actual content of the page. To alleviate this, both React and Vue.js support pre-rendering the DOM on the server on navigation requests. The rendering is then picked up by the client-side Javascript, a process called (re)hydration. The user will be able to see the content sooner.
AMP SSR works by removing AMP boilerplate code and rendering the page layout on the server. AMP boilerplate code is used to prevent content from jumping around when the page loads. It hides the page content until the AMP framework is downloaded and the page layout is established. As a result, AMP pages suffer from the same problem as other client-side frameworks: rendering is blocked until Javascript is downloaded. By removing the boilerplate code, AMP SSR can result in 50 % faster FCP times . Here’s a diff comparing an AMP file vs. its SSR’d version:
You can identify server-side rendered AMP pages by the transformation attribute in the html element:
<html amp transformed="self; v = 1">
Side note: AMP caches set their own flags, for example, Google AMP Cache adds:
<html amp transformed="google; v = 1">
With this property set, the validator will consider AMP for SSR as valid AMP. The AMP for SSR optimization breaks the rules of the AMP specification and therefore makes the document invalid, which is why it is necessary to indicate this situation with this new flag. With both the flag and the optimization in place, the document is considered valid and you are good to go.
How to SSR AMP?
There’s no point in handwriting SSR-proof AMP. Instead, use a tool to automatically convert your AMP files to SSR versions, like a compiler. Ideally, this conversion happens ahead of time, before a user requests the document. However, you can also run it on demand (make sure to cache the results to avoid running the conversion again and again).
Currently, there are two tools available for AMP SSR:
1. AMP Optimizer : A NodeJs library for generating optimized AMP.
2. AMP Packager : A go command-line tool that works with signed exchanges .
Side note: These tools will not only perform SSR, but also other optimizations like preloading the AMP framework and reordering headers.
Next.js support
We are very excited that the latest Next.js 9 version supports AMP SSR. Next.js 9 now renders optimized AMP by default for AMP-first and mixed AMP pages. This makes Next.js a great choice for building AMP pages.
What's next?
We plan to do two big things in the future:
1. The option to self-host the AMP framework (v0.js). Yes, you did it right, you will no longer need to download AMP from cdn.ampproject.org. This will have two benefits:
· Faster Time-to-Interactive: Downloading the AMP Framework no longer requires a second HTTPS connection to cdn.ampproject.org.
· Easier QA: You control when to switch to a new AMP version.
One thing to note, though: for privacy reasons , the AMP Cache will rewrite AMP script URLs to match the cache origin when serving cached AMP pages.
2. WordPress integration: v1.3 of the official AMP plugin will support AMP SSR out of the box.
AMP SSR is for everyone
If you publish AMP pages, you should publish server-side rendered AMP pages. Similar to minifying HTML or CSS, running the AMP Optimizer or Go transformer should be a normal part of your build/render chain. The improved rendering performance makes a big difference in FCP times, but more importantly in user experience.
You can easily create an AMP mobile website without the above settings. Log in to www.eyingbao.com, the Eyingbao Cloud Intelligent Website Marketing Platform, and you can experience and create it for free. Consultation hotline: 4006552477 Customer service hotline: 15600002121
Similar Recommendations
