AMP eli Accelerated Mobile Pages tehostaa mobiilisivuja

AMP eli Accelerated Mobile Pages tehostaa mobiilisivuja

AMP eli Accelerated Mobile Pages on optimoinnin uusi musta – on se toki kuuminta hottia pelkästään web designereillekin, mutta myös hakukoneoptimointia ajatellen puhutaan tehokkaasta trendistä. 17 seo-asiantuntijaa haastateltiin vuoden 2017 hakukoneoptimoinnin trendeistä ja yksi vallitseva teema optimointia ajatellen oli AMP-sivustot.

Mitä on AMP eli Accelerated Mobile Pages?

Pähkinänkuoressa: Accelerated Mobile Pages tekee mobiilisivusta nopeamman ja käyttäjäystävällisemmän. Homma on toki edelleen kehitysvaiheessa, esim. New York Timesin Accelerated Mobile Pages -artikkelit käyttivät vielä vuonna 2016 liikaa resursseja latautuakseen, kuten tästä Forbesin artikkelista käy ilmi. Kuitenkin tarve nopeammille latausajoille mobiilissa tuntuu olevan etenkin uutissivustoilla, joiden on todettu sijoittuvan hakukoneissa huonosti, koska ne vievät niin paljon latausaikaa.

Miksi? AMP-sivuissa design perustuu pyyhkäisyyn, ei skrollaukseen. Eli kaikki sisältö saadaan mobiililaitteessa näkyviin pyyhkäisemällä näyttöä sivuttaissuunnassa. Tämä mm. vähentää sivuston latausaikaa ja on toki käyttäjällekin mukavampi tapa, jos sisältöä on todella paljon. Ei tarvitse vierittää pitkää sisältömassaa edes takas mobiililaitteen näytöllä vaan se on helpommin jäsenneltynä, sivuttaissuunnassa selailtavana puhelimessa tai tabletissa.

eBay testasi vuonna 2016 AMP-sivuston hyödyntämistä

Tässä kuvakaappaus eBayn kokeilusta – tuotteet ovat sivuttaissuuntaan pyyhkäistävissä

AMP on vielä sen verran uusi asia, että ottaa varmasti oman aikansa ennen kuin näemme oikein hyvin suoriutuvia Accelerated Mobile Pages -periaatetta käyttäviä nettisivuja. AMP:n idea on myös vaikea selittää, joten esimerkin kautta ymmärrät varmasti paremmin mistä on kyse.

Katso esimerkki mobiililaitteilla, jotta idea tulee esille:

eBay testasi nettihuutokauppasivuillaan AMP-toimivuutta. Tässä esimerkissä kaikki tuote-ehdotukset eivät ole sivusuuntaan pyyhkäistävissä, vaan sivua pitää myös skrollata. Kannattaa katsoa sivua myös pöytäkoneella, niin näet miten eBayn AMP-kokeilut toimivat tietokoneen isolla näytöllä.

Miten AMP-sivusto käytännössä toteutetaan?

WordPress tarjoaa AMP-tekemiseen jo plugineja eli voit plugarin avulla lähteä testaamaan sivustosi muuntamista Accelerated Mobile Pages muotoon. Toki jos käytössäsi on jokin muu kuin WordPress-julkaisujärjestelmä, kannattaa kääntyä kyseisen alustan kehittämiseen osallistuvien puoleen ja kysellä lisää mahdollisuuksista. Me Digibyråssa voimme auttaa sinua nimenomaan WordPress-toteutusten kanssa, jos haluat apua AMP-tekemiseen.

AMP toimii näin

AMP on teknisesti ajateltuna sovelluskehys (framework) mobiilisivujen luomista varten. Se koostuu näistä kolmesta osasta:

  1. AMP HTML: Kyseessä on HTML:ää rajoittuneempi versio, jossa on toki käytössä muutamia uusia tageja. Vanhoista HTML-tageista osa on kokonaan kielletty ja osa taas korvattu erillisillä AMP-tageilla. Mikäli se perinteinen HTML on sinulla hallussa, ei AMP HTML tuota vaikeuksia, vaan Accelerated Mobile Pagesin vaatimuksiin on helppo mukautua.
  2. AMP JS: AMP-mobiilisivujen JavaScriptille on myös oma sovelluskehys. On hyvä tiedostaa se, että kolmannen osapuolen JavaScript ei ole sallittua AMP:n kanssa.
  3. AMP CDN: Tämä on vapaaehtoinen CDN eli Content Delivery Network. Se optimoi automaattisesti AMP-sivustosi ja cachettaa niitä.

Kuten päätellä saattaa, ”uuden” HTML:n tavoitteena on ollut eroon pääseminen sellaisista elementeistä, jotka normaalisti hidastavat sivujen latautumista mobiililaitteilla. Eli turha javascript tai kolmannen osapuolen skriptit karsitaan.

Gifthubissa on tarkat ohjeistukset ja dokumentaatiot kaikesta mainitusta. Sieltä voit ottaa siis kaiken ohjeistuksen AMP:n käyttöönottoon liittyen.

Miten AMP laitetaan sivustolle?

Accelerated Mobile Pages on valitettavasti vielä siinä vaiheessa kehitystään, että sen käyttöönotto vaatii kahta eri versiota artikkeleista. Julkaisijan täytyy säilyttää alkuperäinen versio desktop-käyttöä varten sekä erillinen AMP-versio mobiiliin.

Tämä siksi, että AMP karsii ylimääräisen JavaScriptin pois. Käytännössä siis AMP HTML -sivut eivät voi ladata JavaScriptin avulla toteutettuja osuuksia, kuten kommentointimahdollisuutta, arvosteluosioita, lomakkeita tai muita artikkelin tai sivustosi kannalta tärkeitä elementtejä.

Lisäksi on todennäköistä, että sinun täytyy luoda kaikki sivupohjat melkeinpä alusta asti uudestaan. Esim. kaikki CSS on AMP:ssa pakko ladata ”inline”. Siis suoraan HTML-sivujen elementtien koodista elementtikohtaisesti.

  • Erikoiset fontit ladataan erillisen amp-font -laajennuksen avulla (fonttien käsittely on muutoin raskasta).
  • Kaikki mediatiedostot käsitellään erillisen amp-elementin kautta. Esimerkki: img-tagit korvataan erikseen amp-img -tageilla ja jokainen kuvan korkeus sekä leveys täytyy määrittää tarkasti.
  • Animoidut giffit, YouTube-videot tai karusellibanneritkin pitää merkitä erillisillä amp-tageilla.

Kaksi eri versiota tulee linkittää toistensa sisältöihin eli perinteinen HTML-versio linkitetään AMP HTML -versioon ja toisinpäin.

  • Desktop-sivut linkittävät AMP-versioon tämän koodin avulla:
    <link rel=”amphtml” href=”https://www.esimerkki.fi/url/to/amp/document.html”>
  • AMP-sivut linkittävät perinteiseen HTML-versioon tämän koodin avulla:
    <link rel=”canonical” href=”https://www.esimerkki.fi/url/to/full/document.html”>

Googlen tuen myötä kehitysprojektissa on otettu mainonta huomioon. Siitäkin huolimatta, että mainokset yleensä hidastavat sivujen latautumista. AMP HTML:ssä on erillinen amp-ad -komponentti, joka saa mm. AdSense, Adform, DoubleClick ja Amazon-mainokset ladattua myös AMP HTML -sivuille. Mainokset näkyvät vain HTTPS-suojatuilla sivuilla.

Analytiikka AMP-sivustolla

AMP-sivujen kävijöiden seuraaminen onnistuu kahdella eri tavalla. Usean eri seurantakoodin lataaminen vie turhaan latausaikaa ja kaistaa, joten datan kerääminen on siksi rajoitettu vain kahteen eri tapaan:

  • amp-pixel: kyseessä on simppeli tagi, joka auttaa seuraamaan esimerkiksi sivujen latauksia – pikselin URLiin voi lisätä muutaman eri muuttujan.
  • amp-analytics: kyseessä on erikoiselementti, joka lisätään AMP-sivulle silloin kun halutaan saada Google Analytics toimimaan oikein.
Accelerated Mobile Pages Googlen haussa

Tältä AMP-hakutulokset näyttävät Googlen demoversiossa

Suomenkielisissä hauissa ei Accelerated Mobile Pages vielä näy, mutta isot amerikkalaiset tai kansainväliset mediatalot ovat jo kokeilleet AMP-sivuja. Aivan kuten edellä mainittu eBay. Toinen hyvä esimerkki toimivasta AMP-artikkelista on löydettävissä Washington Postista.

Google kannattaa AMP-teknologiaa

John Mueller Googlelta vastaili Google Webmaster Central office hours hangoutissa AMP:tä koskeviin kysymyksiin. Mueller oli sitä mieltä, että vaikka AMP ei tällä hetkellä tuntuisi omaan nettisivuun hyvin istuvalta toteutukselta, kannattaa sitä silti harkita. Se on oiva tapa tehdä nopeita sivuja mobiilia varten. Tällä hetkellä Accelerated Mobile Pages näkyy Google-haun uutiskarusellissa ylhäällä, mutta se laajentuu varmasti myös muualle Google-hakuun. Alla video Muellerin vastauksista:

Kiinnostaako Accelerated Mobile Pagesin käyttöönotto?

Haluaisitko kokeilla AMP-sivuston tekemistä? Tutustu alla oleviin linkkeihin ja aloita testaaminen. Tai sitten voit olla meihin yhteydessä ja pyytää apua AMP-sivuston luomisessa.

Ampproject.org tarjoaa tutorialin sivuston luomista varten

Täältä näet Google-haun ohjenuorat AMP-sivuston tekemistä ajatellen