Ce este AMP? Ghidul complet pentru paginile mobile accelerate

SECȚIUNEA 1: Ce sunt paginile mobile accelerate?

Mentalitatea pentru primul dispozitiv mobil este aici pentru a rămâne - declarația este valabilă atât din partea afacerii, cât și din partea consumatorilor.

Pentru a spune utilizatorilor, consultați-vă telefoanele mobile înainte de a face o achiziție ar fi o subevaluare brută. Utilizarea internetului mobil a depășit utilizarea mobilelor desktop pe tot globul. Chiar și țări precum India, Mexic și Indonezia au mai mult de 4 ori mai mare smartphone față de utilizarea desktopului:

Există 30 de miliarde de momente mobile (momentul în care un client își consultă telefonul și așteaptă un răspuns imediat) în fiecare zi numai în SUA. Aceasta înseamnă că în fiecare zi marca dvs. are 30 de miliarde de oportunități mobile pentru a oferi utilizatorilor ceva ce doresc.

Și totuși, cheltuielile pentru anunțuri mobile rămân în urma consumului de dispozitive mobile:

Există un motiv pentru care utilizatorii petrec mai mult timp răsfoind pe mobil în loc să cumpere - utilizatorii doresc mult mai mult satisfacția instantanee când sunt pe dispozitivele lor mobile.

Răspundeți la această întrebare - cât timp așteptați să se încarce o pagină web mobilă?

Conform datelor colectate de Google și SOASTA, 40% dintre consumatori părăsesc o pagină care durează mai mult de trei secunde pentru încărcare.

Trei secunde.

Este tot timpul pentru a păstra atenția unui utilizator căruia i-a plăcut anunțul și a dat clic pe el. Și dacă pagina dvs. web nu reușește să se încarce în timpul menționat anterior, ați creat anunțul, indiferent de cât de convingător a fost, în zadar. Vestea proastă este faptul că, potrivit datelor, majoritatea site-urilor mobile de vânzare cu amănuntul necesită aproximativ 6,9 secunde pentru încărcare, ceea ce înseamnă mai mult decât dublul timpului, 40% dintre utilizatori așteaptă înainte de a abandona pagina.

Cum afectează viteza paginii web rata de respingere

Viteza este un factor important la măsurarea ratei de respingere pentru paginile web mobile. Înainte de a aprofunda acest aspect, este important să explicăm că viteza este luată în considerare în principal în două fațete pentru ratele de respingere a site-urilor mobile, adică timpul pregătit pentru DOM și timpul de încărcare a paginii complete:

1. Timpul pregătit DOM: timpul pregătit DOM este cantitatea de timp necesară pentru ca codul HTML al paginii să fie primit și analizat de browser - este cel mai mare predictor al ratei de respingere. Chiar dacă este posibil ca utilizatorul să nu fie conștient de momentul în care codul HTML este recepționat și analizat, codul trebuie încărcat înainte de a putea fi încărcate elemente de pagină, cum ar fi imaginile. Dacă codul HTML durează prea mult, timpul de încărcare a site-ului web este lent. Pentru a accelera timpul de pregătire al paginii dvs. web mobile, cel mai bine este să evitați utilizarea JavaScript care blochează și împiedică un browser să analizeze codul HTML. Elementele paginii care utilizează JavaScript includ reclame terțe și widgeturi sociale care trebuie preluate de pe un server extern înainte ca pagina să poată fi încărcată.

2. Timp de încărcare a paginii complete : timpul de încărcare a paginii complete include timpul necesar pentru încărcarea imaginilor, fonturilor, codurilor CSS etc. pe o pagină web. O încărcare mai rapidă a întregii pagini duce la o rată de respingere mai mică:

Pentru a vă asigura că pagina dvs. de web are un timp de încărcare mai mare a paginii complete, ar trebui să optimizați imaginile, fonturile și să evitați fișierele de la terțe părți care au potențialul de a încetini timpul de încărcare.

Timpul de încărcare a paginii este unul dintre cele mai puternice motive de respingere a paginii, ceea ce este mai rău este că utilizatorii nu numai că vor abandona pagina, dar cercetările sugerează că 79% dintre utilizatori nu vor reveni după ce au avut o experiență lentă pe o pagină web.

Luați în considerare aceste dezvăluiri uimitoare despre viteza de încărcare a paginii:

• Încărcarea medie a site-ului mobil durează 19 secunde printr-o conexiune 3G, iar 77% dintre site-urile mobile necesită încărcarea a peste 10 secunde.
• Google a constatat că conversiile scad cu 20% pentru fiecare secundă suplimentară pe care o pagină web o încarcă. Pentru a compara, site-urile care s-au încărcat în 5 secunde au avut de 2 ori mai multe venituri din anunțuri mobile decât site-urile care s-au încărcat în 19 secunde.
• Este puțin probabil ca 61% dintre utilizatori să se întoarcă pe un site mobil pe care au avut probleme de acces.

Ce inseamna asta?

Dacă încărcarea paginii mobile nu este instantanee, nu este suficient de rapidă pentru utilizator, vor sări și probabil că nu vor mai reveni.
Pentru a vă asigura că acest lucru nu se întâmplă cu pagina dvs. web mobilă, este important să vă AMPplificați site-urile mobile și să faceți clic pe paginile de destinație.

Ce este AMP?

Google a lansat proiectul open-source Accelerated Mobile Pages pentru a se asigura că paginile web mobile funcționează la viteză optimă.

Proiectul AMP își propune să „construiască viitorul web împreună”, permițându-vă să creați pagini web și reclame care sunt în mod constant rapide, frumoase și performante pe toate dispozitivele și platformele de distribuție.

AMP a fost construit în colaborare cu mii de dezvoltatori, editori, site-uri web, companii de distribuție și companii de tehnologie. Până în prezent au fost create peste 1,5 miliarde de pagini AMP și peste 100 de furnizori de analiză, tehnologie publicitară și CMS acceptă formatul AMP.

Când creați pagini mobile în format AMP, veți obține:

1. Performanță și implicare mai ridicate: paginile create în proiectul open source AMP se încarcă aproape instantaneu, oferind utilizatorilor o experiență lină și mai captivantă, atât pe mobilele, cât și pe desktop.

2. Flexibilitate și rezultate: Întreprinderile au posibilitatea de a decide cum să își prezinte conținutul și ce furnizori de tehnologie să utilizeze, menținând și îmbunătățind KPI-urile.

Probabil că ați făcut clic pe o pagină AMP înainte, pur și simplu nu v-ați dat seama. Singurul lucru pe care l-ați fi observat a fost cât de instant pagina după ce ați făcut clic. Paginile web construite AMP au un indicator fulger în rezultatul căutării.

Iată cum puteți recunoaște AMP în rezultatele căutării:

Iată ce arată o pagină AMP în comparație cu o pagină web normală:

Motivul pentru care paginile AMP se încarcă instantaneu este că AMP restricționează HTML / CSS și JavaScript, permițând redarea mai rapidă a paginilor web mobile. Spre deosebire de paginile mobile obișnuite, paginile AMP sunt memorate automat în cache de Google AMP Cache pentru timpi de încărcare mai rapide în căutarea Google.

Utilizatorii au anumite așteptări atunci când sunt pe dispozitivele lor mobile, doresc experiențe semnificative, relevante și mai rapide - pentru a vă asigura că așteptările publicului dvs. țintă sunt îndeplinite AMP sunt cel mai bun pariu.

Acest ghid vă va conduce prin tot ce trebuie să știți despre proiectul open source AMP. Vom trece prin procedura exactă a modului de funcționare a AMP-urilor și a ceea ce face ca paginile să se încarce atât de repede.

Ghidul va conține, de asemenea, studii de caz despre modul în care utilizarea AMP-urilor a contribuit la creșterea conversiilor pentru companii din diferite industrii și a beneficiilor pe care le veți obține atunci când vă AMPlificați paginile. Ultima secțiune va discuta ce sunt paginile de destinație post-clic Accelerated Mobile și de ce ar trebui să creați paginile pentru a oferi vizitatorilor o pagină de destinație post-clic mai rapidă și mai relevantă.

SECȚIUNEA 2: Cum funcționează AMP?

Google a lansat cadrul open-source Accelerated Mobile Pages (AMP) în februarie 2016. Cadrul a fost construit deoarece era nevoie de crearea unor experiențe de utilizator optimizate, bine integrate, în loc de experiențele mobile incomode și lente cu care utilizatorii se ocupă zilnic. bază.

Google a început proiectul AMP pentru a crea un cadru care să ofere o cale exactă către crearea de experiențe optimizate de pagini web mobile. Proiectul open-source AMP este bine documentat, ușor de implementat, validabil și avizat cu privire la plasarea primului utilizator în proiectarea paginilor web.

De la lansarea sa în urmă cu aproape doi ani, 25 de milioane de domenii au publicat peste 4 miliarde de pagini AMP:

De la lansarea sa nu numai că numărul de pagini AMP a crescut, dar și viteza acestora, timpul mediu de încărcare a unei pagini AMP din căutarea Google este acum mai puțin de o jumătate de secundă.

AMP duce la o creștere de 10% a traficului site-ului web, cu o creștere de 2 ori a timpului petrecut pe pagină. Site-urile de comerț electronic care utilizează AMP experimentează o creștere cu 20% a vânzărilor și a conversiilor în comparație cu paginile non-AMP:

AMP ajută companiile să creeze versiuni simplificate, curate și relevante ale paginilor lor web, oferindu-le utilizatorilor o experiență web mobilă mai rapidă.

Chartbeat a analizat datele de la 360 de site-uri web care utilizează AMP din iunie 2016 - mai 2017 pentru a afla că un editor tipic care folosește pagini AMP a văzut 16% din tot traficul mobil pe conținutul lor AMP.

Paginile AMP se încarcă de aproximativ patru ori mai rapid decât paginile web standard, plus utilizatorii se angajează cu 35% mai mult cu paginile AMP decât cu paginile web standard mobile:

Acum, că știm de ce ar trebui să utilizați paginile AMP, să aruncăm o privire la modul în care funcționează AMP, cum se compară cu designul web receptiv, articolele instantanee Facebook și aplicațiile web progresive.

Cele 3 componente de bază ale AMP

Paginile AMP sunt construite cu următoarele trei componente principale:

HTML AMP

HTML AMP este în esență HTML doar cu câteva restricții pentru performanțe fiabile. Cel mai simplu fișier HTML AMP arată astfel:

Majoritatea etichetelor din AMP HTML sunt etichete HTML obișnuite, cu toate acestea, unele etichete HTML sunt înlocuite cu etichete specifice AMP. Aceste etichete personalizate se numesc componente HTML AMP și fac modele de etichete comune ușor de implementat într-un mod performant. Paginile AMP sunt descoperite de motoarele de căutare și alte platforme prin eticheta HTML.

Puteți alege să aveți o versiune non-AMP și o versiune AMP a paginii dvs. sau doar o versiune AMP.

JavaScript AMP (JS)

Biblioteca AMP JS asigură redarea rapidă a paginilor HTML AMP. Biblioteca JS implementează toate cele mai bune practici de performanță ale AMP, cum ar fi CSS inline și declanșarea fontului, aceasta gestionează încărcarea resurselor și vă oferă etichete HTML personalizate pentru a asigura o redare rapidă a paginii.

AMP JS face ca totul din resursele externe să fie asincron, astfel încât nimic din pagină să nu poată bloca nimic de la redare. JS folosește, de asemenea, alte tehnici de performanță, cum ar fi sandboxing-ul tuturor iframe-urilor, precalcularea aspectului fiecărui element de pagină înainte ca resursele să fie încărcate și dezactivarea selectorilor CSS lent.

Cache AMP

Google AMP Cache este utilizat pentru a difuza pagini HTML AMP cache. Memoria cache AMP este o rețea de livrare a conținutului bazată pe proxy, utilizată pentru livrarea tuturor documentelor AMP valide. Cache preluează pagini HTML AMP, le cache și îmbunătățește automat performanța paginii.

Pentru a menține o eficiență maximă, AMP Cache încarcă documentul, fișierele JS și toate imaginile din aceeași origine care folosește HTTP 2.0.

AMP Cache vine cu un sistem de validare încorporat care confirmă că o pagină este garantată să funcționeze și că nu depinde de forțe externe care ar putea încetini pagina. Sistemul de validare funcționează pe o serie de afirmații care confirmă că mărirea paginii respectă specificațiile AMP HTML.

O versiune suplimentară a sistemului de validare este disponibilă alături de fiecare pagină AMP. Această versiune poate înregistra erorile de validare direct în consola browserului atunci când pagina este redată, permițându-vă să vedeți modificările complexe din codul dvs. care pot avea un impact asupra performanței și experienței utilizatorului.

Cele trei componente de bază ale AMP funcționează la unison pentru a face posibilă încărcarea rapidă a paginilor. Următoarea secțiune va evidenția cele șapte tehnici de optimizare care se combină pentru a face paginile AMP atât de rapide.

Toate JavaScript AMP sunt executate asincron

JavaScript poate modifica fiecare aspect al paginii, are puterea de a bloca construcția DOM și de a întârzia redarea paginii - ambii factori duc la încărcarea lentă a paginii. Pentru a vă asigura că JavaScript nu întârzie redarea paginii, AMP permite numai JavaScript asincron.

Paginile AMP nu includ JavaScript scrise de autor, în schimb toate caracteristicile paginii interactive sunt gestionate de elemente AMP personalizate. Aceste elemente AMP personalizate pot include JavaScript, dar sunt atent concepute pentru a se asigura că nu inițiază nicio degradare a performanței.

AMP realizează JavaScript de la terți în iframe, dar nu poate bloca redarea paginilor.

Toate resursele sunt dimensionate static

Toate resursele externe, cum ar fi imaginile, iframe-urile și anunțurile, trebuie să precizeze dimensiunea lor HTML, astfel încât AMP să poată determina dimensiunea și poziția fiecărui element înainte ca resursele paginii să fie descărcate. AMP încarcă aspectul paginii fără să aștepte descărcarea resurselor.

AMP are capacitatea de a separa aspectul documentului de aspectul dimensiunilor, doar o singură cerere HTTP este necesară pentru aspectul întregului document. Deoarece, AMP este optimizat pentru a evita orice aspect costisitor de stil și recalculări în browser, nu există nici o reproiectare la încărcarea resurselor paginii.

Mecanismele de extensie nu blochează redarea

AMP nu permite mecanismelor de extensie să blocheze redarea paginilor, acceptă extensii pentru elemente precum lightbox-urile și încorporările în rețelele sociale și, deși acestea necesită cereri HTTP suplimentare, nu blochează aspectul și redarea paginii.

Dacă o pagină folosește un script personalizat trebuie să spună sistemului AMP că va avea în cele din urmă o etichetă personalizată, AMP creează eticheta necesară, astfel încât pagina să nu încetinească. De exemplu, dacă eticheta amp-iframe spune AMP că va exista o etichetă amp-iframe, AMP creează apoi caseta iframe înainte de a ști ce va include.

Toate JavaScript de la terțe părți sunt păstrate în afara căii critice

JavaScript terță parte folosește încărcarea sincronă JS, aceasta tinde să încetinească timpul de încărcare. Paginile AMP permit JavaScript de la terțe părți, dar numai în iframe-uri cu sandbox, prin aceasta, încărcarea JavaScript nu poate bloca executarea paginii principale. Chiar dacă JavaScript-ul iframe cu sandbox declanșează recalculări de stiluri multiple, iframe-urile lor mici au un DOM foarte mic.

Recalcularile iframe sunt executate foarte rapid în comparație cu recalcularea stilurilor și aspectului pentru pagină.

CSS trebuie să fie în linie și mărime

CSS blochează redarea, blochează tot încărcarea paginii și are tendința de a provoca balonare. HTML AMP permite doar stiluri în linie, aceasta elimină 1 sau mai multe solicitări HTTP multiple din calea de redare critică către majoritatea paginilor web.

Foaia de stil în linie ar trebui să aibă o dimensiune maximă de 75 KB, deși aceasta este suficient de mare pentru pagini foarte sofisticate, totuși necesită autorului paginii să practice o bună igienă CSS.

Declanșarea fontului este eficientă

Optimizarea fonturilor web este esențială pentru încărcarea rapidă, deoarece fonturile web au de obicei dimensiuni mari. Pe o pagină tipică care include câteva scripturi de sincronizare și câteva foi de stil externe, browserul așteaptă să descarce fonturile până când toate scripturile sunt încărcate.

Cadrul AMP declară zero cereri HTTP până când toate fonturile încep să se descarce. Acest lucru este posibil doar deoarece toate JavaScript-urile din AMP au atributul async și sunt permise doar foile în linie, nu există cereri HTTP care blochează browserul să descarce fonturile.

Recalculările stilului sunt reduse la minimum

În paginile AMP, toate citirile DOM apar înainte de toate scrierile, acest lucru asigură că există un singur recalcul de stiluri pe cadru - deci nu există niciun efect negativ asupra performanței de redare a paginilor.

Rulează numai animații accelerate de GPU

Pentru a rula optimizări rapide trebuie să le rulați pe GPU. GPU funcționează în straturi, știe cum să efectueze unele lucruri pe aceste straturi - straturile pot fi mutate și decolorate. Cu toate acestea, atunci când GPU nu poate actualiza aspectul paginii, aceasta oferă browserului această sarcină și acest lucru nu este bun pentru timpul de încărcare a paginii.

Regulile pentru CSS legate de animație se asigură că animația poate fi accelerată GPU, ceea ce înseamnă că AMP permite doar animarea și tranziția la transformare și opacitate, astfel încât aspectul paginii să nu fie necesar.

Încărcarea resurselor este prioritară

AMP controlează încărcarea tuturor resurselor, acordă prioritate încărcării resurselor și încarcă doar ceea ce este necesar și pre-preia toate resursele încărcate leneș.

Când AMP descarcă resurse, acesta optimizează descărcările, astfel încât cele mai importante resurse să fie descărcate mai întâi. Toate imaginile și anunțurile sunt descărcate numai dacă este probabil să fie văzute de utilizator, dacă sunt deasupra plăcii sau dacă este probabil ca vizitatorul să le deruleze.

AMP are și capacitatea de a prelua resurse încărcate leneș, aceste resurse sunt încărcate cât mai târziu posibil, dar sunt pre-preluate cât mai devreme posibil. În acest fel, lucrurile se încarcă foarte repede, dar procesorul este utilizat numai atunci când resursele sunt afișate utilizatorilor.

Încărcați instant paginile

Noul API de preconectare AMP este utilizat intens pentru a se asigura că solicitările HTTP sunt cât mai rapide posibil de îndată ce sunt făcute. Din această cauză, pagina este redată înainte ca utilizatorul să declare în mod explicit că ar dori să navigheze către ea, pagina poate fi disponibilă până când utilizatorul o vede, făcând pagina să se încarce instantaneu.

AMP este optimizat pentru a nu folosi o mulțime de lățime de bandă și CPU atunci când pre-redarea conținutului web. Când documentele AMP sunt pre-redate pentru încărcare instantanee, resursele de deasupra pliantei sunt de fapt descărcate și resurse care ar putea consuma o mulțime de CPU, cum ar fi iframe-urile terților nu sunt descărcate.

De asemenea, puteți utiliza următorul videoclip pentru a afla „cele 7 moduri în care AMP vă face paginile rapide”:

Acum, că știm cum funcționează AMP, haideți să vedem cum se compară AMP cu articolele instantanee de la Facebook, Responsive Web Design și Progressive Web Apps.

Articolele instantanee AMP vs. Facebook

Facebook a lansat Instant Articles în 2015 pentru a ajuta editorii să ofere o experiență de citire incredibil de rapidă și captivantă pentru persoanele de pe Facebook. Articolele instantanee Facebook sunt:

• De 10 ori mai rapid decât articolele web mobile standard
• Cu 20% mai multe articole instant sunt citite în medie
• 70% dintre cititori au mai puține șanse să abandoneze un articol instant

Articolele instant ajută editorii să creeze articole rapide și interactive pe Facebook. Acestea vă oferă următoarele avantaje:

• Rapid și receptiv: articolele instant se încarcă instantaneu, indiferent de conexiunea sau dispozitivul pe care este conectat utilizatorul. Articolele sunt ușor de utilizat, deoarece se transformă pentru experiența de povestire mobilă.
• Interactiv și captivant: experiența captivantă a articolelor le face mai interactive, motiv pentru care articolele instant sunt distribuite cu 30% mai des decât articolele web mobile. Ajutorul amplifică acoperirea poveștilor dvs. în fluxul de știri.
• Generare de bani ușoară și flexibilă: generarea de bani este o parte integrantă a articolelor instant. Pentru a vă dezvolta afacerea cu articolele, puteți extinde anunțurile vândute direct și puteți completa inventarul de anunțuri disponibile cu Rețeaua de audiență a Facebook și chiar puteți crea conținut de marcă nativă.

Paginile AMP și articolele instant oferă utilizatorilor un timp de încărcare rapid, ceea ce ajută la scăderea ratei de respingere a paginilor și la creșterea gradului de implicare. De fapt, articolele instant ale Facebook se încarcă chiar mai repede decât paginile AMP:

Cu toate acestea, rata de adoptare a paginilor AMP este mult mai mare decât Instant Articles și asta se datorează în mare măsură faptului că Facebook prioritizează din ce în ce mai mult videoclipurile decât articolele text din News Feed-ul său. Acest lucru a făcut ca mai mulți editori să nu mai folosească Instant Articles, inclusiv New York Times și The Guardian.

Potrivit lui Parsley, Google a depășit Facebook-ul ca fiind principala sursă de trafic extern pentru editori. Google reprezintă acum 42% din traficul extern al editorilor:

Când Facebook a lansat Articole instantanee, Google a depășit ca sursă dominantă de trafic către site-urile media și de conținut, totuși, odată cu lansarea și succesul AMP, Google a revenit în frunte.

Succesul proiectului AMP constă în faptul că este o inițiativă open-source, nu un parteneriat de afaceri. În loc să mențină utilizatorii limitați la o anumită aplicație, așa cum a făcut Facebook cu Instant Articles, proiectul AMP vizează schimbarea modului în care editorii creează pagini web mobile.

AMP vs. Responsive Web Design (RWD)

Crearea de site-uri web prietenoase cu dispozitivele mobile a fost o prioritate pentru specialiștii în marketing de când Google a lansat Mobilegeddon la începutul anului 2015. Proiectarea web receptivă a avut drept scop contribuirea la crearea de pagini web axate pe flexibilitate. O pagină web receptivă a funcționat pe orice dispozitiv sau ecran, oferind o experiență web mobilă mai bună și mai implicată.

La baza lor, AMP și Responsive Web Design folosesc ambele aproape aceleași blocuri de bază pentru a crea o pagină mobilă, adică HTML și JavaScript. Cu toate acestea, ei au setul lor de diferențe care îi diferențiază, cum ar fi:

1. RWD se concentrează pe flexibilitate: Designul web receptiv adaugă flexibilitate site-ului dvs. web. Puteți crea o pagină care răspunde automat la dimensiunea ecranului vizitatorilor, ceea ce permite paginii dvs. să ajungă și să ofere utilizatorilor o experiență mobilă bună pe o gamă largă de dimensiuni de ecran. Designul web receptiv nu se concentrează doar pe dispozitive mobile, ci funcționează pentru toate dispozitivele și toate experiențele utilizatorilor.

2. AMP este axat pe viteză: cadrul AMP open-source este axat pe viteza specific vitezei paginii mobile. AMP a introdus redarea instantanee a conținutului web mobil. Prin utilizarea foilor de stil în linie, încărcarea leneșă, preluarea resurselor și alte tehnici de optimizare, cadrul poate încărca instantaneu paginile mobile.

3. AMP funcționează cu o pagină web, RWD înlocuiește o pagină web: Deși este posibil să utilizați AMP exclusiv pe paginile dvs., AMP poate fi adăugat și la un site web existent care nu răspunde sau este receptiv, fără o reproiectare a site-ului web. Cu toate acestea, pentru a face o pagină web receptivă, trebuie să reproiectați pagina.

4. AMP oferă o experiență mai bună a utilizatorului: există doi factori principali care determină experiența utilizatorului mobil, adică elementele paginii fiind mobile friendly și viteză. Deși proiectarea web receptivă funcționează bine cu scalarea elementelor de pagină pentru a se potrivi cu ecranul utilizatorului, eșuează teribil la viteză în comparație cu paginile AMP.

5. AMP are restricții JavaScript: Responsive Web Design favorizează toate scripturile și bibliotecile media ale unor terți, nu același lucru se poate spune pentru paginile AMP. Pentru a face încărcarea rapidă a paginilor, cadrul AMP are funcționalități JavaScript și CSS foarte limitate.

AMP funcționează bine pentru paginile statice - pagini care nu conțin mult conținut dinamic, în timp ce RWD poate fi utilizat pentru orice tip de pagină. Cu toate acestea, paginile web receptive durează puțin prea mult pentru a fi încărcate, ceea ce determină vizitatorii să sară, probabil să nu se mai întoarcă niciodată. Dacă doriți să oferiți utilizatorilor o experiență de reacție rapidă și mobilă, ar trebui să luați în considerare utilizarea paginilor AMP.

Aplicații web AMP vs. Progressive Web (PWA)

Aplicațiile web progresive este o aplicație web mobilă livrată prin web, se comportă ca o aplicație nativă, principala diferență între aplicațiile native PWA și nativele este că PWA nu trebuie să fie descărcate de pe Google sau din magazinul de aplicații.

Aplicațiile web progresive funcționează în browserul web, ceea ce o face să se încarce instantaneu, chiar dacă conexiunea dvs. la internet nu este foarte puternică. PWA folosește pre-cache pentru a se asigura că aplicația rămâne actualizată, astfel încât utilizatorul să poată vedea doar cea mai recentă versiune.

Nevoia de aplicații web progresive a apărut din faptul că primele 1.000 de site-uri mobile ajung la 4 ori mai multe persoane decât primele 1.000 de aplicații native. Cu toate acestea, aceste site-uri web atrag utilizatorii cu 20 de minute mai puține minute, în medie, decât aplicațiile mobile.

Ceea ce înseamnă, în esență, în timp ce site-urile mobile sunt capabile să atragă vizitatori, dar să nu îi atragă.

PWA sunt concepute să arate, să simtă și să funcționeze așa cum fac aplicațiile mobile native. Utilizatorii îi întâlnesc într-un browser așa cum ar face orice site web mobil. După ce se angajează cu acel site, utilizatorul este solicitat să instaleze aplicația web pe dispozitivul său. Dacă aleg să instaleze, aplicația se descarcă pe dispozitivul lor așa cum ar face o aplicație nativă.

PWA sunt:

• Fiabile - Se încarcă instantaneu chiar și în condiții de rețea slabe.
• Rapid - Răspundeți rapid la interacțiunile utilizatorilor cu animații fluide și fără derulare deranjantă.
• Implicare - Se simt ca o aplicație nativă pe dispozitiv, oferind o experiență de utilizator captivantă.

Atunci când o aplicație web mobilă îndeplinește cerințele necesare subliniate de Google, aplicația web mobilă poate fi oferită ca descărcabilă utilizatorilor.

Acestea sunt diferențele cheie dintre AMP și PWA:

Puteți alege să utilizați AMP numai pentru a crea o experiență rapidă, dar simplă. Vă puteți baza pe o aplicație web progresivă pentru a crea o experiență de utilizator dinamică, dar mai lentă. Sau, ați putea începe rapid și rămâne rapid prin încorporarea ambelor în designul dvs. web.

Astăzi, utilizările AMP împreună cu aplicațiile web progresive devin din ce în ce mai răspândite, dezvoltatorii folosind ambele în trei moduri.

1. AMP ca aplicație web progresivă

Dacă conținutul dvs. este în principal static și vă puteți mulțumi cu funcționalitatea limitată a AMP, această opțiune vă permite să creați experiențe fulgerătoare ca aplicație web progresivă. AMP, de exemplu, este construit astfel - o aplicație web progresivă în întregime încărcată de AMP. Are un lucrător de service, care permite accesul offline, precum și un manifest, care solicită bannerul „Adăugați la ecranul de start”.

2. AMP la o aplicație web progresivă

O altă modalitate de a utiliza împreună AMP și o aplicație web progresivă este gândirea la pagina AMP ca la cârligul site-ului dvs. web. Prinde utilizatorul cu o încărcare instantanee, apoi îl rulează în aplicația dvs. web progresivă. Acest lucru vă permite să combinați paginile AMP cu încărcare rapidă cu un PWA mai dinamic decât prima opțiune.

3. AMP într-o aplicație web progresivă

Așa cum a fost cazul AMP vs. PWA, nu trebuie să fie totul sau nimic. Nu este nevoie să vă construiți toate paginile cu AMP; de asemenea, nu este nevoie să separați AMP și PWA ca cârlig și tijă. Acum, puteți AMP doar o mică subsecțiune dintr-o singură pagină, reducându-i astfel dimensiunea și scăzând timpul de încărcare fără schimbul complet de funcționalitate dinamică.

Aceasta implică utilizarea unei alte forme de AMP numită „Shadow AMP”, care permite AMP să se cuibărească într-o zonă a unei pagini web. Rezultatul este AMP în cadrul unei aplicații web progresive.

Washington Post prezintă un exemplu ideal de PWA și AMP care lucrează împreună pentru a aduce un angajament mai bun și timpi de încărcare mai rapizi. Când Washington Post a inițial răspuns site-ului web, viteza lor a fost de 3500 ms. Când au adoptat AMP, timpul de încărcare a paginii a fost redus la 1200 ms, apoi a fost redus în continuare la 400 ms cu ajutorul tehnologiei AMP CDN.

După ce au adoptat PWA pentru a reduce povara site-ului web, utilizatorii s-au putut bucura de viteze de încărcare fulgerătoare a paginii fără nicio întrerupere și o experiență mai bună a utilizatorului.

Proiectul Accelerated Mobile Pages vă permite să creați pagini mobile care se încarcă instantaneu, ajutând vizitatorii să interacționeze mai bine cu pagina în loc să sară. Tehnicile de optimizare implicate în crearea paginilor AMP nu numai că accelerează timpul de încărcare a paginii, dar oferă și vizitatorilor o experiență bună de utilizare.

Următoarea secțiune se va concentra pe beneficiile exacte pe care le obțineți atunci când utilizați cadrul AMP pe paginile dvs.

SECȚIUNEA 3: Beneficii și restricții AMP

AMP asigură încărcarea mai rapidă a paginilor web, ceea ce ajută la experiența utilizatorului și menține vizitatorii să rămână mai mult pe pagină. AMP folosește HTML AMP care ajută încărcarea mai rapidă a paginilor mobile. De fapt, potrivit Gary Illayes de la Google, timpul mediu de încărcare pentru paginile AMP este de 1 secundă, care este de 4 ori mai rapid decât media paginii HTML standard.

Am discutat deja legătura dintre rata de respingere a paginii și viteza paginii și am văzut un cont detaliat al modului în care funcționează AMP și cum se compară cu PWA, RWD și articolele instantanee ale Facebook.

Această secțiune a ghidului se va concentra pe beneficiile și restricțiile AMP, ajutându-vă să obțineți un cont detaliat despre ceea ce sunteți în magazin atunci când creați pagini AMP.

Avantajele AMP

Când pagina dvs. web mobilă se încarcă mai repede, îmbunătățiți automat experiența utilizatorului și indicatorii KPI. Datorită încărcării instantanee a paginilor AMP, puteți oferi utilizatorilor dvs. o experiență web constantă și rapidă pe toate dispozitivele și platformele precum Google, LinkedIn și Bing.

AMP oferă următoarele avantaje paginilor dvs. mobile.

Implică publicul

Timpul mediu de încărcare pentru paginile AMP este mai mic de o secundă, ceea ce înseamnă că, atunci când un utilizator aterizează pe o pagină AMP, obține instantaneu ceea ce căutau. Deoarece pagina se încarcă instantaneu, se interacționează cu pagina mai mult timp și sunt mai deschiși să afle despre oferta dvs., ceea ce face să fie mai probabil să efectuați acțiunea pe care ați dorit să o facă.

Maximizează veniturile

Fiecare secundă suplimentară necesară paginii dvs. pentru a vă încărca conversiile scade cu 12%. Aceasta înseamnă că, dacă doriți să atrageți publicul și să vă sporiți rentabilitatea investiției, trebuie să vă asigurați că pagina dvs. mobilă îndeplinește așteptările de viteză ale vizitatorilor dvs.

Cadrul AMP vă permite să oferiți utilizatorilor o experiență mai rapidă peste tot - inclusiv reclame, pagini de destinație post-clic și site-uri web.

Mențineți flexibilitatea și controlul

Când adoptați formatul AMP, aveți capacitatea de a vă păstra propria marcă în timp ce profitați de componentele web optimizate AMP. Puteți utiliza CSS pentru a personaliza stilul paginii dvs. web și puteți utiliza conținut dinamic pentru a prelua date acolo unde este necesar.

De asemenea, puteți utiliza testarea A / B pentru a testa și a crea cea mai bună experiență posibilă de utilizator mobil pentru clienții dvs.

Reduceți complexitatea operațiunilor dvs.

Procesul de creare a paginilor AMP este destul de simplu și simplu. Aveți capacitatea de a vă converti întreaga arhivă, mai ales dacă utilizați CMS, inclusiv Drupal și WordPress.

Nu trebuie să aveți nicio abilitate specială setată pentru a optimiza codul pentru fiecare pagină AMP, formatul AMP este complet portabil, iar paginile AMP sunt constant rapide, indiferent de modul în care utilizatorul ajunge la ele.

Maximizați rentabilitatea investiției

Odată create paginile AMP pot fi distribuite simultan pe o mare varietate de platforme de distribuție. Acest lucru vă permite să difuzați anunțurile atât pe paginile AMP, cât și pe cele care nu sunt AMP, ceea ce înseamnă că vă puteți crea anunțurile o singură dată și puteți oferi o experiență de marcă memorabilă peste tot.

Creați un viitor durabil

Proiectul AMP este o inițiativă open-source care protejează viitorul web, ajutând pe toată lumea să ofere o experiență mai bună și mai rapidă a utilizatorului mobil. Vă puteți alătura proiectului AMP și puteți construi un viitor durabil pentru afacerea dvs. pe un web deschis și mai rapid, alăturându-vă proiectului AMP.

Oferiți o experiență de utilizare mai bună

Desigur, cel mai evident avantaj al utilizării paginilor de destinație accelerate mobile după clic este că acestea vor oferi o satisfacție mult mai mare a utilizatorului. Atunci când una din două persoane nu poate fi deranjată să aștepte doar 10 secunde pentru încărcarea unui site web, accelerarea procesului cu 15-85% poate avea un impact uriaș asupra fericirii vizitatorilor.

Obțineți un impuls SEO

Algoritmul Google ia în considerare viteza paginii și capacitatea de răspuns mobilă. Cu cât pagina dvs. se încarcă mai repede pe mobil, cu atât va fi clasată mai sus pe paginile cu rezultatele motorului de căutare.

Toate paginile compatibile AMP vor apărea într-un format carusel chiar și deasupra anunțurilor plătite, în rezultatele căutării având un fulger verde sub titlu.

Deși utilizarea paginilor AMP vă oferă multe avantaje, există și unele dezavantaje ale AMP.

Fără JavaScript terță parte

Deoarece nu aveți capacitatea de a utiliza JavaScript de la terțe părți, trebuie să vă luați rămas bun de la capabilități de analiză și urmărire care vă permit să oferiți experiențe publicitare foarte direcționate.

Nu numai atât, dar cu versiunea mai ușoară de JavaScript a Google, elementele de pagină care necesită transferul de date nu pot fi utilizate pe paginile AMP.

Fără urmărire Google Analytics

Google utilizează o versiune cache a paginilor AMP pentru utilizatori în loc să vă acceseze serverele, acesta este unul dintre motivele pentru care paginile AMP se încarcă atât de repede. Deși memoria cache permite încărcarea mai rapidă a paginilor dvs., Google Analytics nu urmărește vizitele utilizatorilor decât dacă faceți configurații în GA și aplicați coduri de urmărire separate paginilor dvs. AMP.

Iată cum puteți urmări paginile AMP în Google Analytics cu Google Tag Manager.

Paginile AMP vin cu setul lor de avantaje și dezavantaje, cu toate acestea, dacă doriți să oferiți vizitatorilor dvs. o experiență mobilă rapidă și optimizată, profesioniștii AMP depășesc cu siguranță contra.

Următoarea secțiune va evidenția studiile de caz ale companiilor care au folosit AMP pentru a îndeplini KPI-urile și pentru a spori rentabilitatea investiției.

SECȚIUNEA 4: Povești de succes AMP

Când vorbim despre pagini web mobile, viteza este egală cu veniturile. Cercetările efectuate de SOASTA arată că chiar și întârzierea cu 100 ms a timpului de încărcare a paginii poate duce la conversii mai mici:

Pentru a evidenția impactul pe care îl poate avea AMP asupra paginilor web mobile, Google a comandat Forrester Consulting să efectueze un studiu total asupra Impactului Economic ™ între editori și site-uri web de comerț electronic care utilizează AMP.

Cercetarea evidențiază 4 companii web care au folosit formatul AMP. Privind rezultatele celor 4 companii, Forrester a creat un model pentru a prognoza rentabilitatea așteptată de la implementarea AMP pe o perioadă de trei ani.

Utilizând acest model, un site web cu un număr lunar de vizite la site de 4 milioane și o marjă de profit de 10% s-ar putea aștepta să recupereze costurile de implantare a paginilor AMP și să înceapă să vadă câștiguri pozitive într-o perioadă de mai puțin de 6 luni:

Acestea sunt principalele rezultate obținute din studiu:

• Creșterea cu 20% a ratei de conversie a vânzărilor. Testarea A / B efectuată de cele două site-uri web de comerț electronic intervievate pentru acest studiu a demonstrat o creștere cu 20% a ratei de conversie pe paginile lor AMP, ceea ce ar genera un profit anual de peste 200.000 de dolari, pe baza modelului Forrester.
• Creștere de 10% de la an la an în traficul site-ului AMP. O creștere a traficului site-ului are ca rezultat vânzări suplimentare și afișări de anunțuri, care ar genera un profit anual de peste 75.000 USD pentru un site în primul an, pe baza modelului.
• Creștere cu 60% a paginilor pe vizită. Paginile AMP au avut un rezultat pozitiv pentru comerțul electronic și editorii de știri, care amândoi au spus că a existat o creștere cu 60% a numărului de persoane care au venit pe site, iar acei oameni au petrecut de două ori mai mult timp pe site, cu o mică creștere a vizitatorilor retur de 0,3%.

AMP este un format relativ nou și, evident, trebuie să suportați unele costuri odată cu adoptarea acestuia. Cu toate acestea, beneficiile implementării formatului AMP depășesc costul inițial.

Gizmodo folosește paginile AMP pentru a deveni de 3 ori mai rapide pe mobil

Gizmodo se concentrează pe experiența utilizatorilor, jumătate din traficul lor provenind de pe site-ul lor mobil, asigurându-se că site-ul web era rapid și clar, era esențial dacă doreau ca cititorii să interacționeze cu conținutul lor pe mobil.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

Paginile de destinație post-clic construite de AMP sunt proiectate cu cadrul pentru a continua experiența mobilă simplificată pe care utilizatorii o inițiază atunci când fac clic pe un anunț AMP mobil.

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

După ce terminați și faceți clic pe Publicați, veți fi notificat dacă depășiți limita de 75 KB:

După validare, pagina dvs. este gata de publicare.

Pasul 5: publicați

WordPress și domeniile personalizate pot publica pagini de destinație AMP după clic în Instapage. Puteți selecta oricare dintre metode după ce faceți clic pe butonul albastru de publicare:

Pentru WordPress, instalați și conectați-vă la pluginul Instapage de pe site-ul dvs. și publicați noua dvs. pagină de destinație AMP după clic pe WordPress:

În caz contrar, introduceți domeniul și subdomeniul:

De îndată ce pagina este activă, veți vedea sigla AMP lângă pagină în tabloul de bord:

Dacă paginile dvs. mobile se confruntă cu rate de respingere ridicate și implicare scăzută a vizitatorilor din cauza vitezei lente de încărcare a paginii, atunci crearea de pagini AMP este o soluție excelentă.

Cadrul AMP implementează tehnici de optimizare care ajută nu numai la viteza paginii, ci oferă utilizatorilor o experiență mobilă încântătoare. Crearea paginilor de destinație post-clic ale anunțurilor AMP vă ajută să oferiți vizitatorilor dvs. pagini de destinație post-clic optimizate, rapide și relevante.

Instapage este în prezent singura platformă de pagină de destinație post-clic care vă permite să creați pagini de destinație post-clic optimizate pentru mobil utilizând cadrul AMP Google. paginile de destinație post-clic create cu AMP au încărcare aproape instantanee și derulare netedă.

Începeți să creați pagini AMP cu Instapage astăzi pentru a crea o experiență de navigare mobilă mai bună, pentru a vă îmbunătăți scorurile de calitate și pentru a genera mai multe conversii.