Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AMP + WP = błyskawiczny związek?

931 views

Published on

Prelekcja wygłoszona podczas WordUp Kraków, 6.11.2015. Accelerated Mobile Pages to krok w stronę wygodniejszej konsumpcji i monetyzacji treści na urządzeniach przenośnych. Jak ma się to do WordPressa?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

AMP + WP = błyskawiczny związek?

  1. 1. #jesień2015 pawlisiak.com pawlisiak AMP + WP błyskawiczny związek?
  2. 2. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES by
  3. 3. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Projekt pozwalający na błyskawiczne wczytywanie prostych stron tekstowych, na urządzeniach mobilnych. https://www.ampproject.org/
  4. 4. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Kod pseudoHTML, okrojony z funkcjonalności do minimum. AMP nie wspiera JS* AMP kocha CSS! AMP wymusza stosowanie dobrych praktyk.
  5. 5. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Lekka biblioteka JS, zawierająca całą magię, podstawowe komponenty i walidator. <amp-img> <amp-video> https://github.com/ampproject/ amphtml/tree/master/builtins <amp-pixel> <amp-ad>
  6. 6. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html>
  7. 7. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> OPCJONALNIE <HTML AMP>
  8. 8. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> LINK DO PEŁNEJ WERSJI ARTYKUŁU (NIE AMP HTML)
  9. 9. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> STRONA NIE WYŚWIETLI SIĘ DOPÓKI BIBLIOTEKA NIE ZOSTANIE WCZYTANA W CAŁOŚCI
  10. 10. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> ZACIĄGAMY BIBLIOTEKĘ AMP Z CDN
  11. 11. #jesień2015 pawlisiak.com pawlisiak PO CO? Fajnie, ale…
  12. 12. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? 58 procent użytkowników wyłącza strony ładujące się powyżej 10 sekund. HTML AMP zwiększa wydajność strony nawet o 85 procent.
  13. 13. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? Strona jest IDEALNIE dostosowana do odwiedzania jej z urządzeń mobilnych. Jednocześnie rozwiązania mobilne są PROSTE w implementacji.
  14. 14. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? Dostosowanie FORMATÓW REKLAMOWYCH na responsywnych stronach jest problematyczne. AMP HTML umożliwia wrzucenie reklamy za pomocą JEDNEGO TAGA.
  15. 15. #jesień2015 pawlisiak.com pawlisiak KORZYŚCI? MONETYZACJA TREŚCI
  16. 16. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Dodatkowe komponenty AMP ładowane z zewnętrznych JS. <amp-carousel> <amp-lightbox> <amp-iframe> https://github.com/ampproject/ amphtml/tree/master/extensions <amp-anim> <amp-audio> <amp-instagram>
  17. 17. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Cachowanie mediów w chmurze Google. W przyszłości, opcjonalnie, również w innych.
  18. 18. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Cachowanie mediów w chmurze Google. W przyszłości, opcjonalnie, również w innych. Łatwe debugowanie kodu AMP HTML. https://github.com/ampproject/ amphtml#the-amp-validator
  19. 19. #jesień2015 pawlisiak.com pawlisiak AMP + WP
  20. 20. #jesień2015 pawlisiak.com pawlisiak AMP + WP ? WordPress.com zapowiedział natywne wdrożenie AMP Oficjalny plugin AMP w wersji 0.1 https://wordpress.org/plugins/amp/ https://github.com/Automattic/amp-wp https://vip.wordpress.com/ 2015/10/07/mobile-web/
  21. 21. #jesień2015 pawlisiak.com pawlisiak AMP + WP ! PROJEKT _AWP
  22. 22. #jesień2015 pawlisiak.com pawlisiak PROJEKT _AWP W C H W I L I O B E C N E J Skórka do WordPressa napisana w AMP HTML. Domyślne tagi HTML zamieniane na AMP HTML. Shortcode do wstawiania reklamy. Bardzo wczesna faza projektu. https://github.com/pawlisiak/_awp
  23. 23. #jesień2015 pawlisiak.com pawlisiak PROJEKT _AWP W P R Z Y S Z Ł O Ś C I Projekt rozdzielony na skórkę i wtyczki (do dodatkowych komponentów). Personalizacja skórki. Dodatkowa wtyczka do podmiany domyślnej skórki na _awp (na telefonach).
  24. 24. #jesień2015 pawlisiak.com pawlisiak DOŁĄCZ DO PROJEKTU Projekt jest otwarty i chętnie łyknie trochę commitów! https://github.com/pawlisiak/_awp

×