Embed Size (px)
Citation preview
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!
[email protected] 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
