Iesācēja ceļvedis paātrinātām mobilajām lapām (AMP)

Paātrinātas mobilās lapas ir Google iniciatīva, kuras mērķis ir atrisināt lielāko mobilo interneta problēmu - ātrumu. Lieliska lietotāju pieredze, ko mēs projektējam ar lielu piesardzību, mobilajā ierīcē ir sāpīgi lēni.

Lēnums nav tikai UX problēma, bet arī samazina konversijas likmes, un kaitē pieejamībai izslēdzot lietotājus ar lēnāku interneta pieslēgumu. AMP ir komandas darbs, kura mērķis ir atļaut izdevējiem vienreiz izveidojiet optimizētu mobilā satura saturu un vienmēr uzlādējiet to.

Kopš atklāšanas daudzi izdevēji, piemēram, BBC, The Economist, Guardian News un Financial Times, ir īstenojuši šo iniciatīvu, tāpēc līdz šim mēs varam droši pieņemt, ka AMP ir inovācija, kas ir vērts apsvērt ikvienam, kurš vēlas saglabāt konkurētspēju mobilajā tālrunī tīmeklī.

AMP darbībā

Pirms niršanas detaļās, šeit ir AMP demo, tad tu vari redzēt to darbībā. Demo var piekļūt šajā saitē.

Lai redzētu AMP darbībā, jums ir jādara divas lietas:

Skatiet demonstrāciju mobilajā ierīcē vai mobilajā simulatorā, piem. Chrome DevTools mobilās ierīces simulators.
Meklēt meklēšanas vaicājumu meklēšanas joslā. Tā kā Google AMP pašlaik darbojas galvenokārt ar ziņu portālu, labākā izvēle ir svaigs ziņu stāsts.

Tālāk redzamajā ekrānuzņēmumā jūs varat redzēt, ko es saņēmu, lietojot meklēšanas vienumu rio olimpiskās spēles.

Paātrināta mobilās lapas demonstrācija uz IPad

Kā redzams, AMP lapas parādās kā Google bagātinātās kartes, a mobilā optimizētā attēla karuselis, ka Google izlaida 2016. gada maijā.

Ievērojiet, kā Google atšķir AMP lapas no citām optimizētām mobilajām lapām izmantojot 2 dažādas etiķetes: AMP un Mobile draudzīgs. Ir vērts arī noklikšķināt uz dažiem rezultātiem, lai redzētu, kā izskatās AMP tīmekļa lapa, un cik ātri tas darbojas mobilajā ierīcē.

Tehniskais pamatojums

AMP ir a tīmekļa standarts balstās uz esošajām tīmekļa tehnoloģijām un koncentrējoties uz statisko saturu. Tas ir 3 dažādas daļas:

AMP HTML: modificēts HTML ar (1) dažu regulāru HTML / CSS funkciju un (2) jaunu pielāgotu tagu (komponentu) ieviešana
AMP JS: īsteno labāko praksi, lai samazinātu lapas ielādes laiku
AMP CDN: kešatmiņa ar iebūvētu validācijas sistēmu, kas vēl vairāk optimizē jūsu vietni

Ja vēlaties uzzināt vairāk par AMP lapu tehnisko pamatojumu, skatiet tālāk redzamo videoklipu, kurā Google Paul Bakaus sniedz ievadruna par AMP.

Ja vēlaties dziļāk ienirt, ir vērts saprast, kādas optimizācijas metodes AMP izmanto, lai paātrinātu veiktspēju mobilajā ierīcē. Turpmāk redzamajā videoklipā Malte Ubl, AMP Engineering vadītāja, paskaidro AMP anatomija detalizēti.

AMP HTML

Paātrinātās mobilās lapas ir regulāri HTML lapas tas ir nepieciešams ievērot noteikumu kopumu lai lapas tiktu ielādētas ātrāk un nodrošinātu uzticamu veiktspēju.

Apskatīsim svarīgākās lietas, kas jums jāzina. Varat arī apskatīt pilnu AMP HTML specifikāciju.

Izlemiet, vai vēlaties atsevišķu AMP lapu

Vienai un tai pašai statiska satura lapai var būt 2 atsevišķas versijas - viens - AMP un viens - AMP versijai. Varat arī izvēlēties tikai viena versija - AMP lapu un izmantojiet to visur. Attiecībā uz pārlūka atbalsts, AMP Github lapas norādes:

Ja jūs joprojām uztraucaties par pārlūkprogrammas atbalstu, skatiet Google Paul Īrijas amatu Stackoverflow.

Ja vēlaties, lai jums būtu divas lapas (AMP un bez AMP), jums ir nepieciešams saiti uz katru no tiem lai informēt meklētājprogrammas par. \ t divi versijas.

Pievienojiet šādu kodu sadaļā, kas nav AMP lapa:

Pievienojiet arī šādu rindu sadaļā AMP:

Ja jums ir tikai viena AMP lapa, jums joprojām ir nepieciešams saistīt to no sevis šādā veidā:

Sākt katlu plāksni

AMP projekts piedāvā dažādas iespējas sākuma katlu plāksnes varat izmantot, lai sāktu darbu. Apskatiet vienkāršāko AMP HTML boilerplate zemāk:

          Sveika pasaule!

Jūs varat redzēt, ka boilplate savieno regulāro HTML lapu, izmantojot tag. The > tagu pievieno AMP JS bibliotēka.

 The   
Jums var būt tikai vienu iegultā stila lapa, un ir arī daudz neatļautie stila noteikumi, piemēram, jūs nevarat izmantot !svarīgs kvalifikators, @import un pseido klasēm.
 Neaizmirstiet pārbaudīt stilu lapas ierobežojumus, pirms sākat rakstīt CSS jūsu AMP lapām.
 Ir vēl viena lieta, kas ir svarīgi zināt par AMP stila noteikumiem: jūs nevar izmantot nevienu vēlamo izkārtojumu - kā tas ir viens no AMP principiem, lai ļautu pārlūkam aprēķināt katra elementa telpu lapā iepriekš.
 Apskatiet atbalstītos un neatbalstītos izkārtojumus.
 AMP JS
 AMP dokumenti var ietvert ne autoru rakstīts, ne trešās puses JavaScripts, tomēr tas nenozīmē, ka paātrinātās mobilās lapas vispār neizmanto JavaScript. AMP JavaScript bibliotēka (AMP izpildlaiks) ir atbildīga par AMP lapu ielādi un atveidošanu labākās darbības prakses īstenošana.
 AMP komponenti
 AMP komponenti ir nosaka AMP izpildlaiks. Tie ir iepriekšminētie AMP specifiski HTML tagi jums ir jāizmanto sava parastā partnera vietā, piemēram,  nevis  tag.
 Katrs AMP komponents satur īpaši ārējiem resursiem (attēlu, video, iegultu utt.). Ārējiem resursiem ir tendence palēnināt tīmekļa vietnes. Šā risinājuma galvenais mērķis ir pārvaldīt ārējo resursu iekraušanu saprātīgā veidā, darbinot tos iekšpusē smilšu kastes.
 AMP sniedz jums 2 veidu komponenti:
 Iebūvētie komponenti: viņi vienmēr ir pieejami katrā AMP dokumentā uz AMP izpildlaika. Pašlaik ir pieci no tiem:  reklāmu rādīšanai
  attēliem tas tiek izmantots nevis  tag
  sekošanas pikseļiem (izmanto lapu skatījumu skaitīšanai)
  tiešo HTML5 video failu iegulšanai, aizstāj  tag
  iegulto elementu gadījumā (var izmantot. \ t  noteiktos gadījumos)
 
 Paplašināti komponenti: Jums ir vajadzīgi papildu komponenti skaidri iekļaut tos AMP dokumentā. Ir daudz noderīgu, piemēram,  un , skatīt pilnu sarakstu. Daudzas no tām var tikt izmantotas iegult saturu no trešo pušu pakalpojumiem, piemēram, no čivināt vai Instagram.
 
Ņemiet vērā, ka visi ārēji ielādētie resursi, piemēram,  un  jābūt zināmam  un  atribūts lai iespējotu pārlūku aprēķināt izkārtojumu iepriekš.
 AMP CDN
 The AMP CDN būtībā ir kešatmiņa, ko sauc par Google AMP kešatmiņa. Tā ielādē derīgus AMP dokumentus, glabā un ielādē tos. AMP CDN ir arī iebūvēta validācijas sistēma.
 Tas ir vērts pārbaudīt savas AMP lapas pirms ļaut viņiem doties tiešsaistē, lai droši nodot validatoru. To var izdarīt dažādos veidos.
  IMAGE: AMP projekts
Ir labi zināt, ka AMP CDN izmanto HTTP / 2 protokolu, lai panāktu labāko iespējamo veiktspēju.
 AMP rīki
 Ir daži lieliski rīki, kas var palīdzēt jums īstenot paātrinātās mobilās lapas, aplūkosim dažus no tiem.
 Google nodrošina tīmekļa pārziņiem ērtu lietošanu AMP statusa atskaites rīks kas parāda veiksmīgi indeksēto AMP lapu skaitu un arī ar AMP saistītās kļūdas.
 Lullabota AMP PHP bibliotēka ļauj pārvērst HTML lapas uz AMP HTML, kā arī ziņo par jebkura HTML dokumenta atbilstību AMP standartiem.
 Ja vēlaties izmantot AMP savā WordPress vietnē, izlasiet Yoast pamācību par to, kā izveidot WordPress AMP, un kā AMP darbojas ar Yoast SEO spraudni.
 Jūs varat arī apskatīt Automattic AMP spraudnis kas ļauj iespējot paātrinātās mobilās lapas savā WordPress vietnē.
  IMAGE: WordPress.org
Citi apsvērumi
 Ja jūs joprojām neesat pārliecināts, apskatiet video par a ātra ātruma pārbaude zemāk.
 
 Džonatans Abrams, Nuzzel dibinātājs, pat vēl labāk apgalvo, ka viņš apgalvo, ka pat mobilās optimizētās vietnes, piemēram, New York Times, ielādējas ievērojami ātrāk - nevis trīs sekundes, lai ielādētu vidējo lapu, tiek ielādēta lapa mazāk par pusi sekundes kad ir iespējota Google paātrinātās mobilās lapas.
 Varat arī izlasīt interesantu rakstu Verge par Google AMP un Facebook tūlītējo rakstu konkursu. Ja jūs joprojām meklējat atbildi par "kas ir nozveja?", Pārbaudiet Yoast amatu, kurā minētas bažas, ka AMP pamatā mūs atgriezīs interneta laikā pirms 2000. gada, un apšauba, vai tas tiešām ir atvērts standarts.
 .