Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
2.2Mb
22 JavaScript Files (363kb)
8 CSS files (75k)
18 Different Resource Domains
101 Total HTTP Requests
Average Web Page...
More than
40% of users
will abandon a
website that
takes more
than 3 seconds
to load
3 Second Rule:
Accelerated Mobile Pages
“AMP is a way to
build web pages for
static content that
render fast”
Google Says...
“We found that AMP pages
load four times faster,
and use eight times less
data than traditional
mobile optimized pages”
AM...
“After the successful
rollout of AMP for
news sites, it is now
ready for more.”
Beyond Publishers
Rudy Galfi (AMP Team Pro...
600 million AMP Pages
700,000 Domains
100+ Languages
AMP in Google Index
John Mueller
Webmaster Trends Analyst at Google
75% Aware of AMP
18% Have Researched AMP Deeply
23% Currently Implementing AMP
49% Expect AMP to have significant
effect o...
1. AMP HTML
AMP HTML Components
amp-ad
amp-img
amp-video
amp-audio
amp-pixel
amp-video
amp-carousel
amp-lightbox
amp-anim
amp-iframe
a...
2. AMP JS
3. AMP CDN
No 3rd party
Javascript
External
resources must
define static
dimensions
All CSS Must
be inline
(50k Max)
Only GPU-
Accelerated
animations
Prioritize
Resource
Loading
• Can modify template/CSS
• Use custom template
• Apply to custom post types
• AMP hooks and filters
AMP Plugin Customizat...
https://fewerthanthree.com/tutorial/customizing-google-amp-for-wordpress/
https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/
Iniative being pushed by Google
Loads pages fast on mobile devices
Does not replace responsive design
Restricts HTML, CSS ...
About Me
Mike Hale
Developer
Rainmaker Digital
@MikeHale
www.mikehale.me
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Lessons Learned from Launching a New Podcast
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

0

Partager

Télécharger pour lire hors ligne

Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

Télécharger pour lire hors ligne

Google is pushing Accelerated Mobile Pages (AMP) in a big way. AMP pages restrict what you can do all for the sake of performance on mobile devices. In this talk we’ll cover the basics of AMP, how it’s different than mobile-ready and responsive design, and the plugins you’ll need to take advantage of AMP on your WordPress site.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

  1. 1. 2.2Mb 22 JavaScript Files (363kb) 8 CSS files (75k) 18 Different Resource Domains 101 Total HTTP Requests Average Web Page (2015) https://www.sitepoint.com/average-page-weight-increased-another-16-2015/
  2. 2. More than 40% of users will abandon a website that takes more than 3 seconds to load 3 Second Rule:
  3. 3. Accelerated Mobile Pages
  4. 4. “AMP is a way to build web pages for static content that render fast” Google Says...
  5. 5. “We found that AMP pages load four times faster, and use eight times less data than traditional mobile optimized pages” AMP in Action Jon Parise (Product Engineer, Pinterest)
  6. 6. “After the successful rollout of AMP for news sites, it is now ready for more.” Beyond Publishers Rudy Galfi (AMP Team Product Manager, Google)
  7. 7. 600 million AMP Pages 700,000 Domains 100+ Languages AMP in Google Index
  8. 8. John Mueller Webmaster Trends Analyst at Google
  9. 9. 75% Aware of AMP 18% Have Researched AMP Deeply 23% Currently Implementing AMP 49% Expect AMP to have significant effect on Page Rankings SEO Professionals Survey http://www.link-assistant.com/news/amp-survey.html
  10. 10. 1. AMP HTML
  11. 11. AMP HTML Components amp-ad amp-img amp-video amp-audio amp-pixel amp-video amp-carousel amp-lightbox amp-anim amp-iframe amp-instagram amp-twitter amp-youtube amp-accordian
  12. 12. 2. AMP JS
  13. 13. 3. AMP CDN
  14. 14. No 3rd party Javascript
  15. 15. External resources must define static dimensions
  16. 16. All CSS Must be inline (50k Max)
  17. 17. Only GPU- Accelerated animations
  18. 18. Prioritize Resource Loading
  19. 19. • Can modify template/CSS • Use custom template • Apply to custom post types • AMP hooks and filters AMP Plugin Customizations
  20. 20. https://fewerthanthree.com/tutorial/customizing-google-amp-for-wordpress/
  21. 21. https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/
  22. 22. Iniative being pushed by Google Loads pages fast on mobile devices Does not replace responsive design Restricts HTML, CSS & JavaScript Install the AMP Plugin and experiment What We Learned About AMP
  23. 23. About Me Mike Hale Developer Rainmaker Digital @MikeHale www.mikehale.me

Google is pushing Accelerated Mobile Pages (AMP) in a big way. AMP pages restrict what you can do all for the sake of performance on mobile devices. In this talk we’ll cover the basics of AMP, how it’s different than mobile-ready and responsive design, and the plugins you’ll need to take advantage of AMP on your WordPress site.

Vues

Nombre de vues

1 419

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

14

Actions

Téléchargements

12

Partages

0

Commentaires

0

Mentions J'aime

0

×