- Edited
In 2017, China Literature’s overseas platform, Webnovel was released. Ever since then, it has received good reviews from international readers. As developers, we naturally spare no effort to improve our platform to give the user a more pleasant experience.
Qidian International’s mobile site is an important search engine entry point. We have recently been tweaking how search engines view us. We began using Google’s initiative, Accelerated Mobile Pages (AMP) technology. It greatly improves the experience users go from search engine results to our page.
The picture below is the process depicting a search of one of our books on Google Mobile before entering our page that provides the detailed information of a book. One can see the entire process is very streamlined. The click from Google’s search results to our page is nearly instantaneous with no lag at all. And our detailed book webpage applies Google’s AMP technology.
▲ Qidian International’s Mobile site listed on Google’s search.
Those well-versed in frontend technology are probably no stranger to AMP. Google, which recently organized a conference in Shanghai, used AMP as an important promotional point. There, they shared in detail the progress of AMP. China Literature was honored to be one of the first few companies in China to have fully embraced AMP technology. Google is also advocating the AMP standards in China. It is already supported by mainstream search engines. Similarly, Baidu Search has also begun supporting its own Mobile Instant Pages (MIP) and AMP.
▲ China Literature’s AMP live demo
▲ Overseas sites employing AMP
Why Choose AMP
No optimization is done just for the sake of optimization. The reasons why Qidian International uses AMP technology is as follows:
1.Qidian International’s business model suits AMP technology very well.
After all, the original goal for AMP was to provide it as a technology for publishers, such as CNN, Washington Post, etc.
2. Google’s global CDN cache.
The Chinese Qidian website uses Tencent’s cloud computing capabilities which provides extremely fast speeds across the country. However, our rollout overseas is slightly limited. Users from different regions experience great differences in speed; therefore, it is an excellent choice to use Google’s global CDN to accelerate our site.
3. Better user experience.
Everyone can probably see from the animated image posted that the download experience achieved after using AMP technology is much better.
4. SEO ranking optimization.
Another benefit of using AMP allows for SEO ranking optimization. Having faster access speeds is an important factor in raising our search engine rankings.
How we do AMP optimization
There is no need to provide more introduction to the rationale behind AMP. Everyone can read and learn from the official AMP site. Here, I’ll mainly share with you some of the problems we encountered while putting AMP into practice, as well as giving a summary. The main points are divided as follows:
1. How do we choose the pages that need AMP technology
The official developers of AMP naturally wish that all pages will be made into AMP pages but we chose to convert some of our pages while maintaining our original. In the animated image above, it shows how one goes from Google’s search results into our AMP. However, you can see a bar at the top of the page that allows one to return to the original search results. The two pages are slightly different.
While choosing the pages requiring AMP, we first used Google Analytics to find out the keywords users use most frequently when searching. After our analysis, we confirmed that users needed detailed information about our books. Therefore, our first step was to choose the book’s detailed page as candidates for being optimized as AMP. In fact, we were determining the landing page from search engines.
2. How do we optimize the original page into an AMP
The reason why AMP is so popular now is mainly that it is FAST. To achieve the necessary speed, AMP structures and resources required have exceeding high requirements. And all of this is done to shorten the Critical Render Path, allowing users to see our pages as quickly as possible.
AMP Requirements：
No self-defined JS, be it external or internal ones. This is because JS can block the DOM structure.
No external CSS because of performance implications. All CSS must be done inline with a style tag. Furthermore, there can only be one style tag. The inline CSS cannot exceed 50K.
The images, audio, and video cannot be done using traditional HTML tags but with the custom tags provided by AMP—amp-img , amp-audio , amp-video. AMP will choose the best period of time to download the additional resources to enhance the user’s download of the first page.
Although not recommended by AMP, it provides an amp-iframe element. It allows the developer display more advanced items in the iframe. However, the placement of the iframe has to be 2/3 the way of the first page.
Due to the four limitations, there are many rare and complicated interactions between our pages after the AMP optimization. Most of it pertains mainly to the display of information.
Back when we first launched the international site, we tried our best to use pure CSS and not JS to achieve the interaction between our pages. Now, having moved to AMP, we discovered that our pages can be converted seamlessly from the pure CSS page from before to AMP. It was quite a pleasant surprise.
The conversion of pages to AMP basically changes the interactive process of the page. Under the premise that we can ensure the basic functionalities for users, we tried our best to lead our users to canonical pages and not do overly complicated activities on AMP.
After affirming this basic direction, the rest was tedious work. According to AMP’s requirements, we deleted and changed the necessary tags. Combined with our own automatic conversion tools project, we automatically generated the corresponding AMP. Google has recently acquired RelayMedia, a professional startup that focuses primarily on converting pages to AMP. We believe that there would be more mature tools for developers to use in the future.
3. How to make Google quickly index AMP
After converting our pages to AMP and testing them with AMP tools, it was time for the pages to go online. The problem faced after putting them online was to make Google quickly index the AMP. Only by indexing AMP would users see the lightning-labeled AMP through a Google search. To ensure that the crawlers are able to recognize the canonical pages of AMP, the developer needs to add a link tag on the AMP to link to the canonical page. Furthermore, the canonical page must have a link pointing to the AMP.
<link rel="amphtml" href="URL-TO-YOUR-AMP-HTML">
▲ Canonical page
<link rel="canonical" href="URL-TO-YOUR-CANONICAL-HTML">
▲ AMP
In fact, we encountered a huge pitfall here. That was because our site：
Desktop: [https://www.webnovel.com]
Mobile: [https://m.webnovel.com]
uses two different subdomains. We obviously wanted our mobile site’s original site to point to the AMP site. About a month after it was put online, Google only managed to index a few of our AMP. Furthermore, they would be frequently purged from the index. The search results would end up extremely unstable.
▲ The wrong AMP and canonical page’s linkage
Later, after consulting Google experts, we realized there was a problem with it. We later changed the pages into such a format. We pointed www.webnovel.com to the canonical m.webnovel.com page and the m.webnovel.com AMP. This resolved the problem. In less than half a day, all the AMP were indexed by Google.
▲ Correct linkage for AMP
4.The effects of AMP quantified
a) Optimized speed
How much faster were pages after AMP was put in use? We checked the before and after data from Google Analytics. In general, the loading time of a document went from the global average of 2.5s to about 1s. The optimization is obvious.
▲ Canonical Average Page Load Time
▲ AMP Average Page Load Time
However, there is something to be pointed out. This is the time it takes for Google to preload the page. In the actual loading process, from the moment the user obtains the results from Google’s search to the moment they click it, Google has already silently downloaded our page. As the image below indicates, users would pre-download the image resources on our page after Google provides the search results. Through the Developer Tools in the Elements tab, one can see that Google has created the already downloaded iframe tag.
▲ Google Preloading of Qidian International’s AMP Example 1
▲ Google Preloading of Qidian International’s AMP Example 2
In this case, when a user clicks on the link, Google Search would directly switch to our page. There is no download needed in the process, so this optimization was, in fact, going from 2.5s to 0s.
▲ Actual Optimization Results
b) Search Engine Optimization
As search rankings are affected by the loading speed, a page using AMP technology will naturally have its loading speed improved. Therefore, it would influence the page’s SEO to a certain extent. Under equal conditions, our rankings will improve. However, it must be pointed out that speed is only one element out of the many important elements to influence SEO rankings. There are naturally other elements at play.
Our ranking for most of our keywords on Google’s site before and after AMP was improved. But with the concept of AMP becoming more entrenched, users would be more inclined to click on the search results with the lightning label which provides a better experience. In that case, it will have a better effect on SEO.
▲ The change in popular books and new books ranking on Google search rankings.
Further Improvements
Through AMP technology, users can rapidly reach our AMP through search engines from Google’s cache. However, if our own page experience is relatively bad, the user bounce rate will be higher. And to solve this problem, Google has provided a service called amp-install-serviceworker, which installs a Service Worker (a web worker provided by Google PWA) on the AMP. It pre-downloads all the required resources of future pages ahead of time. When that happens, users can go from AMP to our non-AMP at a much faster rate, making it an excellent experience. And this improvement is currently in the works. We look forward to sharing our experiences with you in the future.
Translated by CKTalon
