Kezdő útmutató a gyorsított mobil oldalakhoz (AMP)

Gyorsított mobil oldalak a Google kezdeményezése, amelynek célja a mobilhálózat legnagyobb problémájának megoldása - sebesség. A félelmetes felhasználói élmények, amelyeket nagy gondossággal tervezünk, a mobilon fájdalmasan lassúak.

A lassúság nem csak egy UX-probléma, hanem az is csökkenti a konverziós arányokat, és akadályozza a hozzáférhetőséget a lassabb internetkapcsolattal rendelkező felhasználók kizárásával. AMP egy csapatmunka, amelynek célja a kiadók engedélyezése egyszerre készítsen mobiloptimalizált tartalmat, és azonnal töltsön be mindenhol.

A bevezetés óta számos olyan kiadó, mint a BBC, a The Economist, a Guardian News és a Financial Times, megvalósította a kezdeményezést, így most már biztonságosan feltételezhetjük, hogy az AMP olyan innováció, amely érdemes megfontolni mindenkinek, aki versenyképes marad a mobilon háló.

AMP akcióban

Mielőtt a részletekbe merülne, itt van a AMP demó, Szóval te meg tudod nézze meg a cselekvést. A demó elérhető ezen a linken.

Ahhoz, hogy az AMP működésben legyen, két dolgot kell tennie:

Tekintse meg a demót egy mobileszközön vagy egy mobil szimulátoron, pl. Chrome DevTools mobileszköz-szimulátor.
Futtassa a keresési lekérdezést a keresősávon. Mivel a Google AMP jelenleg főként híroldalakkal dolgozik, a legjobb választás egy friss hír.

Az alábbi képernyőn látható, hogy mit kaptam, amikor a keresési kifejezést használtam rio olimpia.

Gyorsított mobiloldalak bemutatása az IPad-on

Mint látható, az AMP oldalak megjelennek Google gazdag kártyák, egy mobiloptimalizált képkarusszel, hogy a Google 2016 májusában megjelent.

Figyelje meg, hogyan különbözteti meg a Google az AMP oldalakat más mobiloptimalizált oldalakról 2 különböző címke használatával: AMP és Mobilbarát. Néhány eredményre is érdemes kattintani, hogy megnézze, hogyan néz ki egy AMP weblap, és milyen gyorsan fut a mobil.

Műszaki háttér

Az AMP a webes szabvány a meglévő webes technológiákra épül, és a statikus tartalomra összpontosít. Van 3 különböző rész:

AMP HTML: módosított HTML (1) bizonyos rendszeres HTML / CSS-szolgáltatások korlátozása (2) új egyedi címkék (összetevők) bevezetése
AMP JS: az oldal betöltési idejének csökkentése érdekében érvényesíti a legjobb gyakorlatokat
AMP CDN: egy beépített érvényesítési rendszerrel rendelkező gyorsítótár, amely tovább optimalizálja webhelyét

Ha többet szeretne tudni az AMP oldalak technikai hátteréről, nézze meg az alábbi videót, amelyben a Google Paul Bakaus ad bevezető beszélgetés az AMP-n.

Ha mélyebben akarsz merülni, érdemes megértenünk, hogy az AMP optimalizálási technikái hogyan gyorsítják a mobil teljesítményét. Az alábbi videóban Malte Ubl, az AMP Engineering vezetője elmagyarázza az AMP anatómiája részletesen.

AMP HTML

Gyorsított mobil oldalak rendszeres HTML oldalak ezt meg kell kövesse a szabályokat az oldalak gyorsabb betöltése és megbízható teljesítmény biztosítása érdekében.

Nézzük meg a legfontosabb dolgokat, amiket tudnod kell róla. Tekintse meg a teljes AMP HTML specifikációt is.

Döntse el, hogy szeretne-e külön AMP-oldalt

Ugyanaz a statikus tartalmi oldal lehet 2 külön változat - az egyik az AMP-hez és az egyik a nem AMP változathoz. Azt is választhatja, hogy van csak egy verzió - az AMP oldalt, és használja azt mindenhol. Vonatkozó böngésző támogatása, Az AMP Github oldala azt állítja:

Ha még mindig aggódik a böngésző támogatása miatt, nézze meg a Google Paul ír posztját a Stackoverflow-on.

Abban az esetben, ha két oldalt szeretne (AMP és nem AMP) használni linket mindegyikhez azért, hogy tájékoztatják a keresőmotorokat a két változatok.

Adja hozzá a következő kódot a a nem AMP oldal részén:

Hozzáadjuk a következő sort a az AMP oldal részén:

Ha csak egy AMP oldala van, még mindig szükséged van rá kapcsolja össze magát a következő módon:

A Boilerplate indítása

Az AMP Project különböző indításkor az indításhoz használhatja. Tekintse meg az alábbi legegyszerűbb AMP HTML boilerplate-et:

          Helló Világ!

Láthatjuk, hogy a boilerplate a rendszeres HTML oldalt a címke. A > címke hozzáadja a AMP JS könyvtár.

 A   
Csak lehet egy beágyazott stíluslap, és sok is van tiltott stílusszabályok, például nem használhatja a !fontos minősítő, a @import szabály és pszeudo-osztályok.
 Ne felejtse el ellenőrizni a stíluslap-korlátozásokat, mielőtt elkezdené írni a CSS-t az AMP oldalakhoz.
 Van egy másik dolog, ami fontos az AMP stílus szabályairól: te nem tudja használni a kívánt elrendezést - az AMP egyik elve, hogy engedélyezze a böngészőt kiszámolja az egyes elemek helyét az oldalon előre.
 Tekintse meg a támogatott és nem támogatott elrendezéseket.
 AMP JS
 Az AMP dokumentumok tartalmazhatnak sem a szerző által írt, sem harmadik fél JavaScriptei, ez azonban nem jelenti azt, hogy a gyorsított mobil oldalak egyáltalán nem használják a JavaScript-et. Az AMP JavaScript könyvtára (az AMP futásideje) felelős az AMP oldalak gyors betöltéséhez és megjelenítéséhez a legjobb teljesítmény-gyakorlatok érvényesítése.
 AMP komponensek
 Az AMP komponensek az AMP futási ideje határozza meg. Ezek a fentiek AMP-specifikus HTML-címkék a szokásos társaik helyett használnia kell, például  ahelyett, hogy  címke.
 Minden egyes AMP komponens a külső erőforrás (kép, videó, beágyazás stb.). A külső források hajlamosak lelassítani a weboldalakat. Ennek a megoldásnak a fő célja az, hogy a külső erőforrások betöltésének kezelése ésszerű módon, futtatásukkal belül homokozó.
 Az AMP biztosítja Önnek 2 féle komponens:
 Beépített komponensek: mindegyik AMP dokumentumban mindig rendelkezésre állnak az AMP futási idejére épült. Jelenleg öt van:  a hirdetések megjelenítéséhez
  képek esetén a helyett a  címke
  a nyomkövetési pixelek számára (az oldalmegtekintések számításához)
  a közvetlen HTML5 videofájl beágyazása esetén a  címke
  a beágyazott elemek esetében (használható ahelyett, hogy. \ t  bizonyos esetekben)
 
 Bővített összetevők: Kiegészítő komponensek kifejezetten tartalmazza őket AMP dokumentumba. Sok hasznos is létezik, mint például  és , lásd a teljes listát. Sokan közülük használhatók beágyazni a tartalmat harmadik fél szolgáltatásaiból, például Twitter vagy Instagram.
 
Ne feledje, hogy minden külső terhelésű erőforrás, például  és  ismertnek kell lennie  és  tulajdonság a böngésző engedélyezéséhez kiszámítsa az elrendezést előre.
 AMP CDN
 A AMP CDN alapvetően egy gyorsítótár, az úgynevezett Google AMP gyorsítótár. Érvényes AMP dokumentumokat gyűjt, tárolja és betölti őket. Az AMP CDN-nek is van egy beépített érvényesítési rendszer.
 Megéri AMP oldalainak tesztelése mielőtt elengedné, hogy biztonságosan menjenek el online adja át az érvényesítőt. Ezt sokféle módon teheti meg.
  KÉP: AMP projekt
Jó tudni, hogy az AMP CDN a HTTP / 2 protokollt használja a lehető legjobb teljesítmény elérése érdekében.
 AMP eszközök
 Néhány nagyszerű eszköz segít a gyorsított mobil oldalak megvalósításában, nézzük meg néhányat.
 A Google kényelmes webmestereket biztosít AMP állapotjelentés eszköz amely sikeresen indexelt AMP oldalak számát és az AMP-vel kapcsolatos hibákat is mutatja.
 Lullabot a AMP PHP könyvtár lehetővé teszi, hogy a HTML-oldalakat AMP HTML-re konvertálja, és jelentést tesz a HTML-dokumentumok AMP-szabványoknak való megfeleléséről.
 Ha szeretné használni az AMP-t a WordPress webhelyén, olvassa el a Yoast bemutatóját arról, hogyan állíthatja be a WordPress-et az AMP-hez, és hogyan működik az AMP a Yoast SEO pluginnel.
 Megnézheti az Automattic-t is AMP plugin amely lehetővé teszi a gyorsított mobil oldalak engedélyezését a WordPress webhelyén.
  KÉP: WordPress.org
További megfontolások
 Ha még mindig nem vagy meggyőződve róla, nézd meg a videót a Gyors sebesség teszt lent.
 
 Jonathan Abrams, a Nuzzel alapítója még jobb állításokat tesz, mivel azt állítja, hogy még a mobiloptimalizált webhelyek, mint a New York Times is jelentősen gyorsabban töltődnek be - ahelyett, hogy három másodpercet töltött be az átlagos oldal betöltésére, az oldal betöltődik kevesebb mint fél másodperc amikor a Google gyorsított mobil oldalai engedélyezve vannak.
 Elolvashat egy érdekes cikket a Verge-ben a Google AMP és a Facebook Instant cikkek versenyéről. Ha még mindig keres választ a "mi a fogás?" Kérdésre, nézd meg Yoast posztját, amely rámutat arra, hogy az AMP alapvetően visszavezet minket egy internetes időre 2000 előtt, és megkérdőjelezi, hogy valóban nyitott szabvány.
 .