AMPifying your Drupal 8 Site : higher performance and higher engagement - Parvateesam

1. AMPifying Your Drupal 8 Site : Higher Performance
And Higher Engagement

2. Who am I?
Parvateesam Konapala
Bangalore, India
Sr.Drupal Developer (TCS)
Twitter : @paru_523

3. Over View
● What is AMP?
● Why is AMP required?
● AMP HTML
● AMP JS
● Google AMP Cache
● Available AMP tags
● Validate AMP pages
● Ampifying your Drupal 8 site
● Pros and Cons of AMP

4. What is AMP?
Accelerated Mobile Pages

5. What is AMP?
It is a method to build mobile-optimized content that
loads instantly.
Components of AMP :
● AMP HTML
● AMP JS
● Google AMP Cache

6. Why is AMP required?

7. AMP HTML?
It is a subset of HTML with some restrictions and custom
tags. This is done for reliable performance.

8. AMP JS
JS library ensures fast rendering of AMP HTML pages.

9. Google AMP Cache
: It is used to serve cached AMP HTML pages.

10. Accelerated Mobile Pages

11. AMP Tags
● A <img> tag is converted to an <amp-img> tag
● A <iframe> tag is converted to an <amp-iframe> tag
● A <audio> tag is converted to an <amp-audio> tag
● A <video> tag is converted to an <amp-video> tag
● Twitter embed code for tweets is converted to an <amp-twitter> tag.
● Instagram embed code for instagrams is converted to an <amp-instagram> tag.
● Youtube embed code for videos is converted to an <amp-youtube> tag
● Dailymotion embed code for videos is converted to an <amp-dailymotion> tag
● Pinterest embed code for pins is converted to an <amp-pinterest> tag
● Soundcloud embed code for audio music is converted to an <amp-soundcloud> tag
● Vimeo embed code for videos is converted to an <amp-vimeo> tag
● Vine embed code for videos is converted to an <amp-vine> tag
● Facebook iframe and Javascript SDK embed code for posts and videos is converted to
an <amp-facebook> tag

13. Validate AMP pages
Append "#development=1" to the URL
Ex : http://localhost:8000/released.amp.html#development= 1

14. Ampifying your Drupal 8 site

15. Projects You’ll Need
https://www.drupal.org/project/amptheme
https://www.drupal.org/project/amp
https://github.com/Lullabot/amp-library

23. Pros of AMP
● Much faster mobile web experience.
● It speeds up website load time.
● It increases mobile ranking.
● It improves server performance.
● Incredibly good distribution (mobile SERPs)

24. Cons of AMP
● Analytics are a bit stripped
● AMP isn't exactly easy to implement
● AMP offers limited functionality

25. Accelerated Mobile Pages
Questions?
Paru_523 parvateesam
paru0523@gmail.com

26. Resources
https://www.ampproject.org/
https://ampbyexample.com/
https://www.drupal.org/project/amptheme
https://www.drupal.org/project/amp
https://github.com/Lullabot/amp-library

27. THANK YOU!