AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers...
Transcript of AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers...
![Page 1: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/1.jpg)
AMP-lify your Website with
in 2019
Mukalele Rogerswww.mukalele.net
Accelerated Mobile Pages: Instant, Everywhere
![Page 2: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/2.jpg)
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
![Page 3: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/3.jpg)
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:
![Page 4: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/4.jpg)
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
![Page 5: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/5.jpg)
Accelerated Mobile Pages: Instant, Everywhere
5
Accelerated Mobile Pages: Instant, Everywhere
AMP:
Instant
Google-
Cached
Content
![Page 6: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/6.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
6
![Page 7: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/7.jpg)
Accelerated Mobile Pages: Instant, Everywhere
7
AMP pages are stripped down HTML pages
designed to be lightweight and fast
loading.
![Page 8: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/8.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
8
Demo in Chrome…
![Page 9: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/9.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
9
Desktop >> Mobile (Responsive) >> AMP
Trends of the web
![Page 10: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/10.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
10
![Page 11: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/11.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
11
Basic AMP HTML Page
![Page 12: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/12.jpg)
Accelerated Mobile Pages: Instant, EverywhereAccelerated Mobile Pages: Instant, Everywhere
12
AMP Validator
![Page 13: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/13.jpg)
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
![Page 14: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/14.jpg)
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
![Page 15: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/15.jpg)
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
![Page 16: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/16.jpg)
8 AMP Benefits
Accelerated Mobile Pages: Instant, Everywhere
16
Accelerated Mobile Pages: Instant, Everywhere
Click here to read details: 8 advantages of AMP
![Page 17: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/17.jpg)
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
![Page 18: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/18.jpg)
Find More Tools, Docs at
ampproject.organd
ampforwp.com
Accelerated Mobile Pages: Instant, Everywhere
18
Accelerated Mobile Pages: Instant, Everywhere
![Page 19: AMP-lify your Website with - Mukalele Rogers...AMP-lify your Website with in 2019 Mukalele Rogers Accelerated Mobile Pages: Instant, Everywhere Accelerated Mobile Pages: Instant, Everywhere](https://reader033.fdocuments.in/reader033/viewer/2022060416/5f141f6aa3177336b360abfd/html5/thumbnails/19.jpg)
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