Accelerated Mobile Pages (lyhennettynä AMP) on käytännössä vain HTML:ää joka on suunniteltu renderöimään nopeasti. Yksinkertaistettuna AMP-projektissa on otettu nopeiden verkkosivujen suunnittelun parhaat käytänteet ja tehty niistä pakollisia vaatimuksia.
Innota ja AMP html toimivat hyvin yhdessä. Olemme myös lisäämässä Innotaan uusia ominaisuuksia, joiden ansiosta on entistä helpompaa tehdä verkkosivuja, jotka renderöityvät nopeasti.
Mikä ihmeen Accelerated Mobile Pages?
AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages.
Lyhyesti sanottuna AMP projektissa otetaan joitain nopeiden verkkosivujen tekemisen parhaita käytänteitä, ja tehdää niistä pakollisia vaatimuksia. Esimerkiksi AMP HTML -sivulla kaikilla kuvilla pitää olla height ja width attribuutit. Tämä auttaa selainta renderöimään sivun, koska se tietää kuvan mitat jo ennen kuin kuva on ehditty ladata palvelimelta.
Toinen hyvä käytäntö on välttää liiallista CSS:n käyttöä ja välttää joitain huonoja tapoja tyylien määrittelyssä. Esimerkiksi !important -lausekkeen käyttö ei ole sallittua. Kaikki tyylimäärittelyt täytyy myös sisällyttää AMP HTML -sivun head-tagin sisään eikä ulkoisten tyylitiedostojen lataaminen ole sallittua.
Accelerated Mobile Pages on Googlen tukema avoimen lähdekoodin projekti. Jos olet seurannut teknologiauutisia viime aikoina, huomasit varmaan että Google ilmoitti alkavansa korostaa AMP HTML -sivuja hakutuloksissaan.
Verkkosivujen nopea käyttökokemus riippuu kahdesta asiasta, sisällön nopeasta jakelusta ja sisällön nopeasta renderöinnistä. Innota välittää verkkosivut todella nopeasti ja AMP projektissa taas keskitytään renderöinnin nopeuteen. Molemmilla on sama tavoite tehdä verkkosivujen selaamisesta mahdollisimman nopeaa, ja tämän ansiosta Innota ja AMP HTML ovatkin hyvä yhdistelmä.
Innota ja AMP
Innotan näkökulmasta on aivan sama minkämuotoista sisältöä käyttäjillesi toimitat. Innotalla voi helposti tehdä HTML, XML, JSON tai minkä tahansa muun muotoisia sisältöjän.
Olemme myös tekemässä uusia toimintoja, jotka helpottavat AMP HTML -sivujen tekemistä Innotalla. Nämä toiminnot ovat CSS:n sisällyttäminen ja kuvien mittojen hakeminen.
CSS:n sisällyttäminen HTML-sivulle
Myös AMP HTML -sivuilla voi käyttää CSS-tyylimäärittelyjä, mutta niissä on joitain rajoituksia: kaikki tyylimäärittelyt pitää sisällyttää sivun <head>-osioon ja tyylien koko täytyy olla alle 50 000 tavua.
Tietysti tyylimäärittelyt voi kirjoittaa suoraan HTML-tiedoston sisään, mutta kehityksen kannalta on paljon tehokkaampaa käyttää erillisiä tyylitiedostoja ja esimerkiksi SCSS-prosessointia. Jotta tyylien sisällyttäminen head-tagin sisään olisi mahdollisimman helppoa, olemme tekemässä tätä helpottavaa toimintoa Innotaan.
Tyylitiedoston tuominen head-tagin sisälle toimii näin. Tässä esimerkki AMP HTML -sivusta:
<style amp-custom>{{ css_inline('amp.css') }}</style>
Se siitä. Riittää, että luo tyylitiedoston nimeltään amp.css ja kaikki SCSS:n parhaat puolet on hyödynnettävissä tuon tiedoston sisällä. Kun sivuston julkaisee, tyylimäärittelyt jopa minifoidaan, jotta sivu olisi mahdollisimman pieni.
CSS:n tuominen sivun sisälle toimii yhtä helposti muillakin kuin AMP HTML -sivuilla. Tähän tarvii vain käyttää css_inline(filename) -funktiota.
Kuvien mitat
Jotta verkkosivujen renderöiminen olisi mahdollisimman nopeaa, on AMP HTML -sivuilla kaikilla kuvilla oltava height- ja width-attribuutit. Tämä kuulostaa helpolta, mutta jos käyttää kuvien automaattista skaalausta Innotassa, asia voi olla hieman monimutkaisempi.
Tämän takia olemme julkaisemassa kaksi uutta funktiota, image_width() ja image_height(). Arvaatkin varmaan mitä nämä tekevät. Esimerkiksi image_width('vespa.jpg') antaa vespa.jpg-kuvan leveyden ja image_height('vespa.jpg') antaa korkeuden.
Aika yksinkertaista. Jos käyttää kuvien automaattista skaalausta tiettyyn kokoon, voi funktiolle antaa lisäparametrejä. Esimerkiksi image_height('vespa.jpg', { width: 800}) antaa kuvan vespa.jpg korkeuden sen jälkeen kun kuva on ensin skaalattu 800 pikseliä leveäksi.
Yhteenveto
Innota on hyvin joustava eikä Innota ota kantaa siihen missä muodossa julkaiset sivujesi sisältöä. Tämä tekee uusien formaattien kuten AMP HTML:n käyttöönotosta helppoa.
Seuraavassa versiossa olemme julkaisemassa css_inline(), image_width() ja image_height() -funktiot, jotta nopeasti renderöityvien sivujen luominen olisi entistäkin helpompaa.
