AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers...

AMP-lify your Website with

in 2019

Mukalele Rogerswww.mukalele.net

Accelerated Mobile Pages: Instant, Everywhere

Accelerated Mobile Pages: Instant, Everywhere

Average Web Page (2015)

•2.2Mb

•22 JavaScript Files (363kb)

•8 CSS files (75k)

•18 Different Resource Domains

101 Total HTTP Requests

https://www.sitepoint.com/average-page-weight-increased-another-16-2015/

2

Accelerated Mobile Pages: Instant, Everywhere

“M o re than

53% o f users

wil l a b a n d o n a

webs i te that

takes m o r e

than 3 seconds

to load”- T h i n k w i t h G o o g l e

Fact:

What is Google AMP?

AMP is an open-source library that

provides a way to create web pages

that are compelling, smooth, and load

near instantaneously for users.

Accelerated Mobile Pages: Instant, Everywhere

4

Accelerated Mobile Pages: Instant, Everywhere

Watch these Introductory Videos:https://www.youtube.com/watch?v=PBw5Fel4kCs – First Lookhttps://www.youtube.com/watch?v=objpZqnUoUk – The Story so Far

Accelerated Mobile Pages: Instant, Everywhere

5

Accelerated Mobile Pages: Instant, Everywhere

AMP:

Instant

Google-

Cached

Content

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

6

Accelerated Mobile Pages: Instant, Everywhere

7

AMP pages are stripped down HTML pages

designed to be lightweight and fast

loading.

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

8

Demo in Chrome…

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

9

Desktop >> Mobile (Responsive) >> AMP

Trends of the web

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

10

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

11

Basic AMP HTML Page

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

12

AMP Validator

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

13

Special AMP HTML Elements

a m p - a d a m p - i m ga m p - v i d e o a m p -audio amp -p ixe l a m p - v i d e oamp -carouse l…

See more:https://www.ampproject.org/docs/reference/components

Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere

14

Message from WP founder: https://www.youtube.com/watch?v=TX3sFXHwXjo

AMP Conf 18 on WP: https://www.youtube.com/watch?v=GGS-tKTXw4Y

How to AMP-lify your WP site

Accelerated Mobile Pages: Instant, Everywhere

15

Accelerated Mobile Pages: Instant, Everywhere

Demo of Vital AMP Plug-inshttps://www.youtube.com/watch?v=RV7x6buCrHA

8 AMP Benefits

Accelerated Mobile Pages: Instant, Everywhere

16

Accelerated Mobile Pages: Instant, Everywhere

Click here to read details: 8 advantages of AMP

Are there any limitations with

AMP pages?

Accelerated Mobile Pages: Instant, Everywhere

17

Accelerated Mobile Pages: Instant, Everywhere

When first released, AMP pages were very static with little interactivity beyond AMP’s pre-built components. Recently, several interactive AMP components have been released and allow developers to work around the previous limitations to build interactive and dynamic AMP pages.

Google io18 session on AMP for WP: https://www.youtube.com/watch?v=a8NScvBhVnc

Watch

Find More Tools, Docs at

ampproject.organd

ampforwp.com

Accelerated Mobile Pages: Instant, Everywhere

18

Accelerated Mobile Pages: Instant, Everywhere

Accelerated Mobile Pages: Instant, Everywhere

Thank You!

rogers@mukalele.net www.mukalele.net

Mukalele Rogers

Website designer / webhost manager –center4webpresence.comICT Teacher – Kololo SSSProgrammer / App developer –Makerere Innovation and Incubation Center (MIIC)Startup Lead / Founder – Sharebility Uganda

@mrogers4christ

Accelerated Mobile Pages: Instant, Everywhere

19