Akselererte mobilsider for WordPress

Surfing og surfing på internett skal være raskt og enkelt. Webmastere prøver hele tiden å gjøre dette mulig ved å optimalisere nettstedets ytelse og forbedre nettstedets hastigheter, og en fin måte å oppnå dette på er med AMP for WordPress.


Nettsteder ble primært designet for større skjerm. Men mindre skjermer øker i antall og overtar til og med bærbare datamaskiner og personlige datamaskiner. Mobiler representerer nå 65% av tiden for digitale medier. Håndholdte enheter trenger sider for å laste like raskt som på større skjermer, om ikke raskere.

For å dekke dette etterspørselen etter hurtiginnlasting av innhold, er apper designet for spesifikke mobilplattformer tilgjengelige på Apple (News), Facebook (Instant Articles) og Snapchat (Discover). Tidlig i år. Google introduserte Accelerated Mobile Page (AMP) for å øke hastigheten på levering av mobilt innhold og gi en bedre brukeropplevelse.

Hva er AMP?

AMP for WordPress: AMP Project

AMP-prosjekt ble kunngjort av Google i oktober 2015, og rullet i februar 2016. Det er et open source-initiativ som gir utgivere mulighet til å lage mobiloptimalisert innhold en gang og få det til å lastes overalt på mobilnettet umiddelbart.

24. februar 2016 begynte Google å distribuere AMP-kompatibelt innhold i en karusell på mobilsøkeresultatsiden. Brukere kan sveipe karusellen og trykke på varen de vil lese. Pinterest rapporterte sidene å være 4 ganger raskere, ved å bruke 8 ganger mindre data enn vanlige mobiloptimaliserte sider. Dette er mulig på grunn av måten sidene er formatert og levert på.

Fra august 2016 har Google Søk over 150 millioner AMP-dokumenter i indeksen og vokser med en hastighet på 4 millioner i uken. Tidlig i august startet Google også en forhåndsvisning av Google-søk etter forsterket innhold. Den regner med å implementere det bredere senere i år.

AMP for WordPress: AMP Search Preview

AMP i forhåndsvisning av søk

Du kan få et glimt av hurtiglastingsidene i det AMP-aktiverte søket her. Sjekk den ut ved å bruke lenken på mobiltelefonen din (fungerer ikke på stasjonære maskiner).

Hvilke nettsteder skal bruke AMP?

I februar ble prosjektet satt i gang for utgivere. Men adopsjon av AMP har spredt seg langt utover forlagsbransjen til underholdning, reise, e-handel og mer.

Gunstige rapporter mottas fra tidlige adoptere. Med en forbedring av lastetiden på 88% for AMP-dokumenter, Det melder Washington Post en økning i antall tilbakevendende brukere fra mobiltelefoner med 23%. eBay er et av de største e-handelsselskapene som bytter til AMP med nærmere 15 millioner AMP-baserte produktsider. Om kort tid forventes det at disse sidene blir rampet opp for å bli oppdaget i et søk.

Så hvilke nettsteder bør bruke AMP? Definitivt de som er veldig avhengige av mobil for trafikk. Men vurderer flere og flere brukere velger å bruke sine mobile enheter for å surfe på internett AMP for WordPress (eller et hvilket som helst nettsted) kan det være et godt tillegg.

Hva er annerledes i AMP?

Dette innholdsleveringssystemet er basert på AMP HTML-rammeverket og er raskere enn vanlig HTML fordi,

  • Det er en mager versjon av det normale HTML-rammeverket, minus alt JavaScript-innhold. For JavaScript er rammen avhengig av det vanlige AMP JS-biblioteket.
  • Innholdet blir bufret og lagret i en vanlig sky, så tiden som trengs for å spørre og hente fra serveren blir eliminert.

Det er mange flere forskjeller, men de nevnte her to skal gi deg en rask, bred forståelse.

Hvorfor utgivere og blogger skal aktivere AMP

Så lenge lesing av sider med langsom lasting på mobiler fortsatt er en nedslående opplevelse for brukere, går utgiverne glipp av inntektene fra annonsering på mobiler. AMP vil bidra til å bringe og beholde en besøkende i lengre perioder på nettstedet og har potensial for inntektsgenererende klikk.

AMP-sidene vises ved siden av et lyn-ikon for å markere dem fra vanlige websider. Seere som klikker på dette alternativet, vil bli ført direkte til AMP-sidene i AMP-visningen. Ikke bare det, innhold vil være umiddelbart tilgjengelig på et Google-søk og tilgjengelig via sosiale plattformer som Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel og Pinterest.

Dessuten vil utgivere ha tilgang til Google Analytics for å observere hvordan sidene deres presterer. De kan utpeke sitt beste innhold og bruke det til å optimalisere nettstedets ytelse og brukeropplevelse.

AMP tilbyr en annen fordel ved at den tar vare på høy ytelse og brukeropplevelse, slik at utgiverressurser kan fokuseres på å tilby stort innhold.

Hvilke optimaliseringer er nødvendige for AMP

AMP er det faktisk en hel masse optimaliseringer til nettstedet gjort på en enhetlig måte som Google krever. De forskjellige optimaliseringene du trenger å utføre for å lage en AMP-kompatibel webside,

  • Tillat bare asynkron JavaScript – for å forhindre at den forsinker gjengivelse av sider. Dette betyr at du ikke kan bruke noe JavaScript som du oppretter, og må stole på AMP-elementer for å håndtere det interaktive innholdet på sidene dine. JS i iframes er tillatt, men bare hvis det ikke hindrer gjengivelse.
  • Størr alle ressursene statisk – AMP laster siden uten å vente på at ressurser som bilder og iframes skal lastes ned. Størrelsen på disse ressursene må oppgis i HTTP, så størrelsen og plasseringen av disse ressursene er kjent før nedlastingen starter.
  • Ikke la utvidelsesmekanismer blokkere gjengivelse – Hvis noen utvidelser skal inkluderes på siden, må det tilpassede skriptet informere systemet om det. Så det opprettes et rom for utvidelsen, selv før AMP vet hva den vil omfatte. Extensions for lightboxes, Instagram embeds and tweets er fine da de ikke blokkerer sidegjengivelse, selv om det krever flere HTTP-forespørsler.
  • Hold all tredjeparts JavaScript utenfor den kritiske banen – tilpasset JavaScript er bare tillatt i sandkasserte iframes. På denne måten hindrer det ikke at hovedsiden lastes inn.
  • All CSS må være inline og størrelse bundet – dette hjelper til med å redusere antall HTTP-forespørsler i den kritiske banen.
  • Fontutløsing må være effektiv– AMP-systemet tillater ikke HTTP-forespørsler før skrifter begynner å laste ned.
  • Minimer omberegninger av størrelse – omberegninger forsinker gjengivelse, så det må holdes på et minimum.
  • Bare kjør animasjoner med GPU-aktivering – alle animasjoner må kunne kjøres på GPU (Graphical Processing Unit).
  • Prioriter ressursbelastning – Bare innhold som trengs, lastes først, med annonser og bilder hentet så snart som mulig, men lastet bare når det er nødvendig. På den måten holdes etterspørselen etter CPU til et minimum.
  • Last inn sider på et øyeblikk – pre-rendering bruker mye båndbredde og CPU. Forhåndsvisning av AMP laster bare nødvendig innhold først, og laster ned tredjeparts iframes og andre ressurser bare hvis nødvendig.

Et standard utvalg av annonseformater, annonsenettverk og teknologier vil være tilgjengelig. Samtidig kan utgivere også velge sine egne formater, så lenge det ikke er en hastighet på dra.

Hvordan legge til AMP for WordPress

Google har en opplæringen som du kan henvise til for å lage grunnleggende AMP HTML-sider, iscenesette dem, validere dem som AMP-kompatible, publisere og distribuere dem. Validerer AMP-sider er viktig, fordi på den måten tredjeparter som Twitter og Instagram er sikre på at sidene vil vises godt på plattformene deres.

Når det gjelder nettsteder som er vert på WordPress.com, støttes de automatisk for WordPress uten å måtte gjøre noe videre. WordPress-nettsteder som er selvhusholdte, kan aktivere AMP for WordPress ved å installere en plugin.

AMP WordPress Plugin av Automattic

AMP WordPress Plugin av Automattic

Når du har lastet ned, installerer og aktiverer du AMP-plugin på WordPress-nettstedet vil innleggene dine automatisk ha en dynamisk generert AMP-versjon. Du kan få tilgang til disse sidene ved å legge ved amp på slutten av nettadressen din (eksempel.com/my-post/amp). Hvis du ikke har pene permalinks aktivert, kan du legge til ?amp = 1 til lenker (som ser ut som eksempel.com/?p=100&amp=1). Det eneste andre trinnet er å teste og validere sidene dine som nevnt ovenfor.

Du vil ikke merke noen innstillinger eller funksjoner for denne plugin-en. Det er ett ekstra instrumentpanelalternativ for AMP Analytics der du kan lime inn din egen JSON-konfigurasjonskode, men det er alt for folk.

Denne plugin er den offisielle plugin-en fra Automattic-stallen, og for øyeblikket støtter den ikke sider og arkiver, og du kan heller ikke tilpasse sidene. Men det er et veldig enkelt og brukervennlig alternativ, og du kan finne litt veiledning via dokumentasjon på Github for tilpasning.

AMP for WP – akselererte mobilsider

AMP for WP gratis WordPress-plugin

Et annet flott gratis alternativ er AMP for WP. Denne gratis WordPress-plugin-en tilbyr rask og enkel konfigurering – bare installer, aktiver innstillinger og begynn å generere AMP-en automatisk for nettstedet ditt. Bonus – denne pluginen er også kompatibel med flere sider.

Det er innebygde innstillinger for å aktivere AMP (innlegg, sider, arkiver), legge til mobile annonseområder, strukturerte data (en viktig del av SEO), Yoast SEO metatagintegrasjon, avanserte indeks / ingen indeksalternativer, pushvarsling, innfødt AMP-kommentarer, tilpassede AMP-oversettelser (hvis du bruker et annet språk enn engelsk, vil du oppdatere dette) og mer. Innstillingene er veldig omfattende for en gratis plugin som er fantastisk.

Det beste av alt, denne plugin-en tilbyr designalternativer, slik at du kan tilpasse utseendet og følelsen til AMP-utgangen. Bruk inkluderte standard AMP-temaer, eller bruk deres AMPs temaramme å lage ditt eget unikt design.

AMP for WP tilbyr også premium utvidelser for å legge til funksjoner (som en oppfordring eller AMP-hurtigbufring) og støtte for populære plugins inkludert WooCommerce, Advanced Custom Fields og Contact Form 7.

Flere måter å legge til AMP for WordPress

Dette er selvfølgelig ikke den eneste måten å legge til AMP til ditt WordPress-drevne nettsted. Andre plugins som kan hjelpe deg med AMP for WordPress nettsteder inkluderer:

  • WP AMP – for å lage tilpasset AMP-design uten koding og øke SEO. Du kan lese mer om det her.
  • Accelerated Mobile Pages (AMP) for WordPress – for å lage et AMP-tema for nettstedet ditt.
  • Tilpasset AMP – for å tilpasse AMP-innholdet.
  • Direkte artikler fra Facebook og Google AMP-sider – å publisere og administrere innholdet ditt direkte fra WordPress til Google AMP Pages med støtte for annonser og analyse.
  • Lim for Yoast SEO & AMP – for å sikre at standard WordPress AMP-plugin bruker riktige Yoast SEO-metadata og tillater endring av AMP-sidedesign.

Bør du legge til AMP for WordPress?

Selv om AMP ikke er obligatorisk for at websider skal oppdages av Google, er det ganske åpenbart at Google vil ta sikte på å implementere AMP-prosjektet på en mer bred basert måte etter hvert. For tiden er det ikke en egen faktor å være AMP-kompatibel søke rangering av Google. Selv om det er rimelig å anta at det vil være viktig på et tidspunkt,

Hvis du husker at sidehastighet er en faktor i rangeringen av søkemotorer, har du virkelig ikke så mye valg om du vil være en del av det mobile internett. Hvis rangeringen av søkemotorer er viktig for deg, kan alle andre tanker om å gå AMP-veien forsvinne.

Men å være en del av prosjektet trenger streng overholdelse av formateringen som kreves av Google, og det er ikke sikkert at det er alles kopp te. Det begrenser hva du kan legge ut på nettstedet ditt, og kan få alle blogger til å virke noe ensartede og mangler individualitet. Noen animasjoner er ikke tillatt, og skjemaer støttes ikke. Og så langt landingssider går, er det kanskje ikke bra med AMP. Dessuten kan det være nettsteder som stresser estetikk og merkevarebygging over hastighet, som AMP kan vise seg å være en demper.

Imidlertid, hvis du ønsker å skape en rask og engasjerende opplevelse for brukerne dine og få dem til å feste seg lenger, må du vurdere seriøst AMP for WordPress (eller en hvilken som helst annen type nettsted du kan kjøre). Hvis det er et sted på AMP-karusellen på Googles søkesider som du vil legge til hjørne, hopp videre til AMP-bandwagon.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me