Ikyu, an online restaurant and hotel booking service in Japan, leverages AMP to build their fast and user-friendly website. Because they are using AMP across many parts of their website, they also adopted Signed Exchanges to display the original URL to the user.
Ikyu recently launched a new owned media site called KIWAMINO, which aims to help executives find a fancy restaurant for dinner in their business scene. KIWAMINO is a canonical AMP website built with WordPress and the AMP plugin.
How they built their website with the AMP plugin
As everyone knows, building a website with WordPress is easy. Likewise, building a canonical AMP website is quite easy too. Choose the WordPress.org official core theme, from “Twenty Ten” to “Twenty Nineteen”, and then enable the AMP plugin.
Check the “Website” checkbox in Experience section on the AMP settings page, and select “Standard” on Website Mode section. That’s it.
A developer doesn’t need to write HTML for AMP, because AMP plugin automatically converts HTML to make it AMP compatible.
<img src="https://resq.img-ikyu.com/asset/image/about/bn_about.png" alt="About KIWAMINO" >Code language: HTML, XML (xml)This img tag is converted to below `img-img` tags.
<amp-img src="https://resq.img-ikyu.com/asset/image/about/sd_bn_about.png" alt="About KIWAMINO" width="640" height="400" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" layout="intrinsic" i-amphtml-layout="intrinsic"> <i-amphtml-sizer class="i-amphtml-sizer"> <img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height="400px" width="640px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>"> </i-amphtml-sizer> <noscript> <img src="https://resq.img-ikyu.com/asset/image/about/sd_bn_about.png" alt="About KIWAMINO" width="640" height="400" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height"> </noscript> <img decoding="async" alt="About KIWAMINO" src="https://resq.img-ikyu.com/asset/image/about/sd_bn_about.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>Code language: HTML, XML (xml)AMP Stories can just as easily be turned on by checking the “Stories” box on the settings page. The GUI-based editor bundled in the plugin allows you to easily create and publish AMP Stories with no coding required.
The application is running on Docker, PHP on Nginx, and MariaDB for databases. Ikyu developers chose Fastly for CDN and imgix for image serving. To achieve further great UX and productivity, the Ikyu team used these WordPress plugins as well.
By using WordPress, the Official AMP plugin, and the tech stacks mentioned above, they achieved fantastic scores on Lighthouse.
Why Ikyu chose WordPress and AMP plugin
1. AMP constraints make a website fast. Also, they keep it fast
If you are using AMP for a website, the site’s Javascript and CSS resources are small. AMP doesn’t allow custom JavaScript and CSS needs to be kept under 75KB. These constraints keep the website fast for users.
2. Less cost to learn, more productivity
Thanks to AMP plugin, HTML is automatically converted to AMP-compatible HTML. This means designers don’t need to spend extra time learning AMP components. Additionally, by adopting the canonical AMP approach, developers don’t need to maintain a separate default HTML page and AMP page.
3. Leverage the knowledge base of a large community
30% of websites on the internet are running on WordPress, so there is a large knowledge base and developer community available at your disposal. This makes the development process easier since hiring and solving problems can be as simple as turning to the community. By using a plugin, even someone with a non-technical background can add new features or make changes to a website.
Adopting WordPress with AMP makes it easy to create user-friendly websites with blazingly fast user experiences and it’s a great choice from a productivity perspective.
Original version: 一休.com Developers Blog – WordPressで爆速Canonical AMPサイトを構築した方法と3つの理由