Główna » mobilny » 10 ważnych przyspieszonych komponentów mobilnych (AMP), które powinieneś znać
10 ważnych przyspieszonych komponentów mobilnych (AMP), które powinieneś znać
Przyspieszone strony mobilne lub AMP jest inicjatywą Google przyspieszyć mobilną sieć. Aby osiągnąć ten cel, standardy AMP ograniczają sposób korzystania z HTML, CSS i JavaScript oraz zarządza ładowaniem zasobów zewnętrznych, takie jak obrazy, filmy i reklamy poprzez własne środowisko wykonawcze.
Oznacza to, że ty nie można użyć dowolne niestandardowe (napisane przez autora lub strony trzeciej) JavaScript lub dowolne elementy HTML związane z zasobami, takie jak obrazy i filmy w dokumentach AMP.
Aby wypełnić lukę między potrzebami użytkowników a najlepszymi praktykami wydajnościowymi, AMP ma określone komponenty możesz używać zamiast tych wykluczonych elementów.
Komponenty AMP są konkretne znaczniki HTML. Zachowują się podobnie do zwykłych znaczników HTML: mają znaczniki otwierające i zamykające, atrybuty, a większość z nich może być stylizowana za pomocą CSS. Można je łatwo rozpoznać, tak jak oni zawsze zaczynaj od wzmacniacz- prefiks.
Istnieją dwa typy komponentów AMP: wbudowany i rozszerzony składniki.
Wbudowane komponenty AMP
Wbudowane są wbudowane w środowisko wykonawcze JavaScript AMP, więc nie musisz ich oddzielnie dołączać.
1. amp-img
zastępuje etykietka w dokumentach HTML AMP. Musisz dodać src i alt atrybuty takie jak podczas pracy ze zwykłymi element.
ma również dwa inne wymagane atrybuty: zawsze musisz określić szerokość i wysokość atrybuty w wartościach całkowitych pikseli, ponieważ pozwala to na środowisko wykonawcze AMP oblicz układ z wyprzedzeniem.
Jeśli chcesz spraw, by obraz był responsywny, Dodaj layout = "responsive" atrybut. The układ atrybut kontroluje układ w dokumentach AMP i można go dodać do dowolnych komponentów AMP (dowiedz się więcej na ten temat w systemie AMP Layout).
Możesz także użyć srcset atrybut na tag do określ różne obrazy dla różnych rzutni i gęstości pikseli. Działa tak samo jak w przypadku obrazów innych niż AMP.
2. amp-wideo
może być użyte do bezpośrednio osadzaj filmy HTML w dokumentach HTML AMP. Zastępuje w plikach AMP. The etykietka leniwe ładuje filmy w celu optymalizacji wydajności.
Źródło wideo musi być obsługiwany za pomocą protokołu HTTPS. Musisz dodać szerokość i wysokość atrybuty, tak jak w składnik.
The tag ma wiele opcjonalnych atrybutów, takich jak Automatyczne odtwarzanie i plakat które możesz określić, aby dostosować sposób wyświetlania wideo HTML5.
obsługuje mp4, webm, ogg i wszystkie inne formaty obsługiwane przez HTML5
Jeśli chcesz, możesz również dodaj filmy rezerwowe dla użytkowników z przeglądarkami, które nie obsługują filmów HTML5, używając powrócić atrybut i Tag HTML.
Twoja przeglądarka nie obsługuje filmów HTML5.
3. amp-ad i amp-embed
zapewnia piaskownice iframe w którym możesz wyświetlaj swoje reklamy. Musisz wyświetlać swoje reklamy za pomocą protokołu HTTPS.
Nie możesz samodzielnie uruchamiać skryptów dostarczonych przez sieć reklamową. Zamiast tego środowisko wykonawcze AMP wykonuje JavaScript danej sieci wewnątrz obszaru izolowanego. ty wystarczy określić, której sieci używasz, i dodaj swoje dane.
The komponent wymaga dodaj wymiary reklamy używając szerokość i wysokość atrybuty.
Możesz zdefiniować sieć reklamową, z której korzystasz rodzaj atrybut. Zobacz listę obsługiwanych sieci reklamowych.
Każda sieć reklamowa ma swoją własną dane-* atrybuty, które również musisz dodać. Aby zobaczyć, którego potrzebujesz, kliknij sieć reklamową na powyższej liście.
jest pseudonimem , dokumentacja nie mówi wiele na ten temat poza tym, że można go użyć zamiast Kiedy jest semantycznie dokładniejszy. Ponieważ Google obiecuje z czasem rozwijać komponenty AMP związane z reklamami, może się to zmienić w przyszłości.
4. amp-piksel
Z , możesz dodaj piksel śledzenia do dokumentów HTML AMP do liczyć odsłon strony. Ma tylko jeden atrybut, wymagany src atrybut, w którym musisz określ adres URL należący do piksela śledzenia.
The tag pozwala standardowe podstawienia adresu URL, co oznacza, że możesz wygeneruj losową wartość URL śledzić każde wrażenie.
Patrz Przewodnik zastępowania adresów URL AMP, jeśli chcesz użyć tego komponentu. Pamiętaj, że nie możesz stylizować składnik.
Rozszerzone komponenty AMP
Jako rozszerzone komponenty AMP nie są częścią środowiska wykonawczego JavaScript, ty zawsze trzeba je importować w sekcji strony AMP, na której chcesz ich użyć.
Uwaga: wersje komponentów mogą się zmienić w przyszłości, więc nie zapomnij o sprawdź aktualną wersję w dokumentacji.
5. amp-audio
zastępuje Tag HTML5 i umożliwia bezpośrednio osadzać pliki audio HTML5 na stronach AMP.
Aby go użyć, musisz podać src, szerokość i wysokość atrybuty, a także możesz dodać trzy opcjonalne atrybuty: Automatyczne odtwarzanie, pętla i wyciszony.
Może to być również dobry pomysł dodaj rezerwowe pliki audio dla użytkowników z przeglądarkami, które nie obsługują HTML5. Możesz to zrobić za pomocą powrócić atrybut i tag, tak jak w przypadku wyżej wspomnianego składnik.
The Komponent AMP obsługuje te same formaty audio, co Tag HTML5.
Twoja przeglądarka nie obsługuje dźwięku HTML5.
Używać , dołącz następujący skrypt do sekcja twojego dokumentu AMP:
6. amp-iframe
wyświetla ramkę iframe w dokumentach AMP. został bardziej bezpieczny niż zwykłe ramki iframe HTML. Dlatego są domyślnie piaskownica.
Istnieją pewne zasady dotyczące musisz postępować, aby przejść walidację.
Musisz określić szerokość, wysokość, i piaskownica atrybuty. The piaskownica atrybut jest domyślnie pusty, ale możesz mu nadać różne wartości zmodyfikuj zachowanie ramki iframe, na przykładsandbox = „zezwalaj na skrypty”pozwala iframe uruchomić JavaScript. Możesz również użyć atrybutów standardowych ramek iframe.
Podczas gdy wymiary są predefiniowane przez szerokość i wysokość atrybuty, istnieje sposób na zmianę jego rozmiaru w czasie wykonywania. Aby użyć komponent, dodaj następujący skrypt do strony AMP:
7. amp-akordeon
Akordeony stanowią częsty wzór interfejsu użytkownika w projektowaniu mobilnym, ponieważ oszczędzają miejsce, ale nadal wyświetlają treść w przystępny sposób. daje możliwość szybko dodaj akordeony na strony AMP.
Sekcje akordeonu muszą używać Tag HTML5 i musi być tagiem bezpośrednie dzieci z etykietka.
Każda sekcja musi mieć dwoje bezpośrednich dzieci:
jeden dla nagłówka
jeden dla treści (treść może być również obrazem)
Użyj rozszerzony atrybut w dowolnej sekcji, którą domyślnie chcesz rozwinąć.
Sekcja 1
Treść sekcji 1
Sekcja 2
Treść sekcji 2
Sekcja 3
Zdjęcie dla sekcji 3
Aby użyć komponent w dokumencie AMP, zawiera następujący skrypt:
8. amp-lightbox
dodaje lightbox do różnych elementów (w większości przypadków obrazów) w Accelerated Mobile Pages.
Gdy użytkownik wchodzi w interakcję z elementem, na przykład dotykając go, lightbox rozwija i wypełnia całą rzutnię. Musisz dodaj przycisk lub inną kontrolkę który użytkownik może dotknąć.
Zauważ to amp-lightbox może być używany tylko z nodisplay układ.
Aby użyć komponent, musisz go zaimportować za pomocą następującego kodu:
9. amp-karuzela
Karuzele są często używane w projektowaniu mobilnym, na co pozwalają wyświetlać wiele podobnych elementów (najczęściej obrazy) wzdłuż osi poziomej. Wyniki AMP są również prezentowane w formacie karuzeli w wyszukiwarce Google.
The komponent umożliwia dodawanie karuzel do swojej witryny. The bezpośrednie dzieci z komponent będzie uważany za elementy karuzeli. Musisz określić wymiary karuzeli za pomocą szerokość i wysokość atrybuty.
Możesz użyć opcjonalnego rodzaj atrybut do określenia jak wyświetlić elementy karuzeli. Jeśli rodzaj atrybut przyjmuje "karuzela" wartość, elementy zostaną wyświetlone jako ciągły pasek (jest to domyślne), podczas gdy „slajdy” wartość wyświetli elementy w formacie slajdów.
The tag ma także inne opcjonalne atrybuty, które mogą pomóc w dostrojeniu wyniku.
W poniższym przykładzie zauważ, że zarówno karuzela, jak i wszystkie jej elementy użyj tego samego szerokość i wysokość wartości.
The komponent wymaga dodania następującego skryptu:
10. amp-analytics
może być użyte do zbierać dane analityczne na stronach AMP. W tej chwili, obsługuje cztery typy zdarzeń śledzenia, jednak może się to zmienić w przyszłości:
Widok strony
Kliknięcia kotwicy
Regulator czasowy
Przewijanie
Używać , musisz dodaj obiekt konfiguracyjny JSON wewnątrz a
Dodaj następujący skrypt do sekcji strony HTML AMP, aby zaimportować składnik:
Ostatnie słowa
W tym poście przyjrzeliśmy się wszystkim wbudowanym komponentom AMP i niektórym rozszerzonym. Ponieważ Accelerated Mobile Pages jest wciąż nowa, wiele rzeczy może się zmienić w przyszłości, więc warto mieć na oku dokumentację na Github lub na oficjalnej stronie AMP.
Ponieważ te komponenty AMP są open source, możesz nawet przyczynić się do rozwoju tworzenie własnego komponentu. Jeśli chcesz zobaczyć, jak wygląda kompletna strona AMP z różnymi komponentami, możesz sprawdzić te kilka przykładów na Githubie.
