4. modul: Napredne spletne tehnologije

4.1.1 Kaj je AMP?

AMP je način ustvarjanja spletnih strani za statično vsebino, ki se hitro upodabljajo. AMP je v praksi sestavljen iz treh delov:

  1. AMP HTML je HTML z določenimi omejitvami za zanesljivo delovanje in nekaterimi razširitvami za ustvarjanje bogatih vsebin, ki presegajo osnovni HTML.
  2. Knjižnica AMP JS zagotavlja hitro upodabljanje strani AMP HTML.
  3. Googlov predpomnilnik za AMP se lahko uporablja za prikazovanje predpomnjenih strani AMP HTML.

AMP HTML

AMP HTML je HTML, ki je razširjen z lastnostmi AMP po meri. Najpreprostejša datoteka AMP HTML je videti takole:

<!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 amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>


Čeprav gre pri večini oznak na strani AMP HTML za običajne oznake HTML, so določene oznake HTML zamenjane z oznakami za AMP (glejte tudi Oznake HTML v specifikaciji AMP). S temi elementi po meri, ki se imenujejo komponente AMP HTML, je mogoče običajne vzorce preprosto uvesti na učinkovit način.

Oznaka amp-img na primer zagotavlja popolno podporo za atribut srcset tudi v brskalnikih, ki ga še ne podpirajo. Naučite se, kako ustvarite svojo prvo stran AMP HTML.

AMP JS

Knjižnica AMP JS vključuje vse najboljše postopke za učinkovito delovanje strani AMP, upravlja nalaganje virov in prinaša zgoraj omenjene oznake po meri. Vse to pripomore k hitrem upodabljanju vaše strani.

Med največje optimizacije spada dejstvo, da je celotna vsebina, ki prihaja iz zunanjih virov, asinhrona. To pomeni, da noben element strani ne more blokirati upodabljanja vsebine.

Druge tehnike za zagotavljanje učinkovitosti vključujejo preskušanje vseh okvirjev iframe v peskovniku, predhodni izračun postavitve vseh elementov na strani pred nalaganjem virov in onemogočanje počasnih izbirnikov CSS.

Za več informacij o optimizacijah in omejitvah preberite specifikacijo AMP HTML.

Googlov predpomnilnik za AMP

Googlov predpomnilnik za AMP je omrežje za prenos vsebine, ki temelji na strežniku proxy, za prikazovanje vseh veljavnih dokumentov AMP. Pridobiva strani AMP HTML, jih predpomni in samodejno izboljšuje delovanje strani. Pri uporabi Googlovega predpomnilnika za AMP se dokument, vse datoteke JS in vse slike naložijo iz istega vira, ki uporablja HTTP 2.0 za zagotavljanje najvišje stopnje učinkovitosti.

Predpomnilnik ima tudi vgrajen sistem za preverjanje, ki potrjuje, da stran zagotovo deluje in da njeno delovanje ni odvisno od zunanjih virov. Sistem za preverjanje zažene niz izjav in tako potrdi, da so oznake strani v skladu s specifikacijo AMP HTML.

Z vsako stranjo AMP je povezana še ena različica sistema za preverjanje. Ta različica lahko pri upodabljanju strani beleži napake pri preverjanju neposredno v konzolo brskalnika, da si lahko ogledate, kako lahko kompleksne spremembe kode vplivajo na delovanje strani in uporabniško izkušnjo.

Pridobite več informacij o preskušanju strani AMP HTML.

Je bil ta članek uporaben?
Kako lahko to izboljšamo?