Accelerated Mobile Page (AMP) is a framework for creating a fast and light-weight mobile website.
There are not many ruby gems for creating AMP pages for the existing Rails website.
We find one like rails_amp. But it doesn't fit our needs. That's why we come up with our solution. It's a simple but powerful one. Here's how we create AMP pages for our Rails website.
Add custom Mime::Type
We add custom Mime at config/initializers/mime_types.rb
It's only one line code. The code registers amp as a new custom format for text/html. This way, we'll be able to handle this format on our controllers. This leads us to the next step.
Add amp format to the controller
There is no need to add this to all of the controllers. We only add it to one of the actions in the controller that serves the article pages.
Here's the explanation of that gist:
- That format.amp will render the AMP pages when the user's browser requested it. So, when Google bots or your user's browser visits your AMP URL handled by that controller, it will serve it. AMP URL is your normal content page URL with .amp at the end. Here's an example from our AMP page
- render amp/samples/show.amp tells it to render this view file: app/views/amp/samples/show.amp.erb
- While that layout: 'amp/layouts/application' tells it to use the layout for AMP page at app/views/amp/layouts/application.amp.erb
Set up the view for the AMP
Since we're calling show.amp.erb on our samples controller above, we'll need to have it on our app/views.
You can put anything there. We'll suggest just add something like <%= render 'samples/show' %> if you don't need to custom many things for the AMP page version. But, you can craft your custom HTML fro AMP page only too.
Set up the layout for the AMP
On this application.amp.erb, we'll have to include some official Javascript for AMP (which are hosted by cdn.amp.project.org). On the gist above, we include
- amp-form - This allows the usage of forms and input fields in an AMP document. You can remove it if your AMP page just contains an article without any form.
- amp-carousel - Well, if you need sliders or carousels to work on your AMP page, you'll need this one.
- amp-iframe - The name explains itself. You must include this if your AMP needs to have an iframe tag.
- amp-youtube - Many people love to display Youtube videos on their web pages. If your AMP page needs to display those Youtube videos too, this script will help.
- amp-instagram and amp-twitter are used for embedding content from Instagram and Twitter respectively.
- amp-analytics is for Google Analytics on your AMP page.
- amp-ad is for displaying Google ads on your AMP page. There are some other ad providers supported by amp-ad as well.
Conclusions
- Our approach for building AMP on Rails websites is extendable. You can extend it to any point in your application needs.
- There is no need to add additional gem for this approach.
- You can include other AMP scripts as you need or remove the ones you don't need.
- Total css needs to be less than 75kb, so you may need to create a minimally sufficient css file for the AMP page. Though,
- Be sure to validate your AMP page.
