Zrychlené mobilní stránky: AMP pro optimalizaci mobilních aplikací WordPress

Zrychlené mobilní stránky pro WordPress

Surfování a prohlížení internetu by mělo být rychlé a snadné. Webmasteři se neustále snaží, aby to bylo možné, optimalizací výkonu webových stránek a zlepšením rychlosti webu, a skvělý způsob, jak toho dosáhnout, je s AMP pro WordPress..


Webové stránky byly primárně určeny pro větší obrazovku. Počet menších obrazovek se však zvyšuje a dokonce předjíždí notebooky a osobní počítače. Mobily nyní představují 65% času digitálních médií. Ruční zařízení musí načítat stránky tak rychle, jako je tomu na větších obrazovkách, ne-li rychlejší.

Abychom vyhověli této poptávce po rychlém načítání obsahu, jsou aplikace navržené pro konkrétní mobilní platformy k dispozici na serverech Apple (News), Facebook (Instant Articles) a Snapchat (Discover). Začátkem tohoto roku. Google představil Accelerated Mobile Page (AMP), aby urychlil poskytování mobilního obsahu a poskytoval lepší uživatelský dojem.

Co je AMP?

AMP pro WordPress: Projekt AMP

Projekt AMP bylo oznámeno uživatelem Google v říjnu 2015, a byla spuštěna v únoru 2016. Jedná se o iniciativu open source, která vydavatelům dává prostředky k vytvoření mobilního optimalizovaného obsahu a okamžitému načtení všude na mobilním webu..

24. února 2016 začala společnost Google na své stránce s výsledky mobilního vyhledávání nasazovat obsah kompatibilní s AMP v karuselu. Uživatelé mohou kolotoč posunout a klepnout na položku, kterou si chtějí přečíst. Pinterest ohlásil stránky jako stránky 4krát rychlejší, používá 8krát méně dat než normální mobilní optimalizované stránky. To je možné kvůli způsobu formátování a doručování stránek.

Od srpna 2016 má Vyhledávání Google ve svém indexu přes 150 milionů dokumentů AMP a roste rychlostí 4 miliony týdně. Začátkem srpna začal Google také náhled vyhledávání Google pro obsah s tlumeným obsahem. Očekává se, že bude implementovat v širším měřítku později v tomto roce.

AMP pro WordPress: Náhled hledání AMP

AMP v náhledu vyhledávání

Při vyhledávání aktivovaném pomocí AMP můžete zahlédnout stránky rychlého načítání tady. Vyzkoušejte to pomocí odkazu na vašem mobilním telefonu (na stolních počítačích nefunguje).

Které webové stránky by měly používat AMP?

V únoru byl projekt zahájen pro vydavatele. Přijetí AMP se však rozšířilo daleko za hranice vydavatelského průmyslu až po zábavu, cestování, elektronický obchod a další.

Od prvních adoptivních uživatelů jsou přijímány příznivé zprávy. Díky 88% zlepšení doby načítání dokumentů AMP, Zprávy Washington Post nárůst počtu vracejících se uživatelů z mobilních telefonů o 23%. eBay je jednou z hlavních společností elektronického obchodování přecházející na AMP s téměř 15 miliony stránek pro procházení produktů založených na AMP. Očekává se, že tyto stránky během krátké doby budou ve vyhledávání objeveny.

Které webové stránky by tedy měly používat AMP? Rozhodně ti, kteří se silně spoléhají na mobil pro provoz. Ale vzhledem k tomu, že se stále více uživatelů rozhoduje používat svá mobilní zařízení k prohlížení internetu, může být AMP pro WordPress (nebo jakýkoli web) dobrým doplňkem.

Co se liší v AMP?

Tento systém pro doručování obsahu je založen na AMP HTML rámci a je rychlejší než obvyklý HTML, protože,

  • Je to štíhlá verze běžného rámce HTML bez veškerého obsahu JavaScriptu. Pro JavaScript se rámec spoléhá na společnou knihovnu AMP JS.
  • Obsah je uložen do mezipaměti a uložen do společného cloudu, takže čas potřebný k dotazování a načtení ze serveru je eliminován.

Existuje mnoho dalších rozdílů, ale zde uvedené dva by vám měly poskytnout rychlé a široké porozumění.

Proč by vydavatelé a blogy měli povolit AMP

Dokud čtení pomalého načítání stránek na mobilech zůstává pro uživatele odrazující, vydavatelé přicházejí o příjmy z reklamy na mobilech. AMP pomůže přivést a udržet návštěvníka na delší dobu na webu a má potenciál pro kliknutí generující příjmy.

Stránky AMP se objevují vedle ikony blesku a označují je na běžných webových stránkách. Diváci, kteří kliknou na tuto možnost, budou přesměrováni přímo na stránky AMP v prohlížeči AMP. Nejen to bude, obsah bude okamžitě k dispozici ve vyhledávání Google a bude přístupný prostřednictvím sociálních platforem, jako jsou Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel a Pinterest.

Majitelé stránek budou mít navíc přístup ke službě Google Analytics, aby mohli sledovat výkonnost svých stránek. Mohou si vybrat svůj nejlepší obsah a použít jej k optimalizaci výkonu webových stránek a uživatelského dojmu.

AMP nabízí další výhodu v tom, že se stará o vysoký výkon a uživatelský dojem, takže prostředky vydavatele mohou být zaměřeny na poskytování skvělého obsahu.

Jaké optimalizace jsou vyžadovány pro AMP

AMP je ve skutečnosti spoustu optimalizací pro web provedeno jednotným způsobem podle požadavků společnosti Google. Různé optimalizace, které musíte provést, aby webová stránka byla kompatibilní s AMP, jsou,

  • Povolit pouze asynchronní JavaScript – zabránit zpoždění vykreslování stránky. To znamená, že nemůžete použít žádný vytvořený JavaScript a při zpracování interaktivního obsahu vašich stránek se musíte spoléhat na prvky AMP. JS v prvcích iframe je povoleno, ale pouze pokud nebrání vykreslení.
  • Velikost všech zdrojů staticky – AMP načte stránku bez čekání na stahování zdrojů, jako jsou obrázky a prvky iframe. Velikost těchto zdrojů musí být uvedena v HTTP, takže velikost a pozice těchto zdrojů je známa před zahájením stahování.
  • Nedovolte, aby mechanismy rozšíření blokovaly vykreslování – má-li být na stránce zahrnuta jakákoli přípona, musí vlastní skript o tom informovat systém. Takže pro rozšíření je vytvořen prostor ještě předtím, než AMP ví, co to bude zahrnovat. Rozšíření pro lightboxy, vložení Instagramu a tweety jsou v pořádku, protože neblokují vykreslování stránky, přestože to vyžaduje další požadavky HTTP.
  • Uchovávejte veškerý JavaScript třetích stran mimo kritickou cestu – vlastní JavaScript je povolen pouze v karanténách iframe. Tímto způsobem nebrání načítání hlavní stránky.
  • Všechny CSS musí být vložené a vázané na velikost – to pomáhá snížit počet požadavků HTTP v kritické cestě.
  • Spouštění písma musí být efektivní– AMP systém nepovoluje HTTP požadavky, dokud se písma nezačnou stahovat.
  • Minimalizujte přepočty velikosti – přepočítá zpoždění vykreslování, takže se musí minimalizovat.
  • Spouštějte pouze animace s povoleným GPU – všechny animace musí být možné spustit na GPU (Graphical Processing Unit).
  • Upřednostňování načítání zdrojů – Nejprve se načte pouze potřebný obsah, přičemž reklamy a obrázky se načtou co nejdříve, ale načtou se pouze v případě potřeby. Tím je minimalizována poptávka po CPU.
  • Načtěte stránky okamžitě – předběžné vykreslování využívá velkou šířku pásma a CPU. Předběžné vykreslování AMP nejprve načte pouze požadovaný obsah a stáhne iframe třetích stran a další zdroje pouze v případě potřeby.

K dispozici bude standardní řada formátů reklamy, reklamních sítí a technologií. Vydavatelé si zároveň mohou vybrat své vlastní formáty, pokud to není přetahování rychlostí.

Jak přidat AMP pro WordPress

Google má tutorial na které můžete odkazovat při vytváření základních stránek HTML AMP, jejich rozdělování, ověřování, že jsou kompatibilní s AMP, publikování a distribuce. Ověření stránek AMP je důležité, protože tak si třetí strany, jako jsou Twitter a Instagram, věří, že se stránky budou dobře zobrazovat na jejich platformách.

Pokud jde o webové stránky hostované na webu WordPress.com, jsou pro WordPress automaticky podporovány, aniž by bylo nutné dělat cokoli dalšího. Webové stránky WordPress s vlastním hostitelem mohou povolit AMP pro WordPress instalací pluginu.

AMP WordPress Plugin od Automattic

AMP WordPress Plugin od Automattic

Po stažení, instalaci a aktivaci AMP plugin na webu WordPress budou mít vaše příspěvky automaticky dynamicky generovanou verzi AMP. K těmto stránkám můžete přistupovat připojením amp na konci vaší adresy URL (example.com/my-post/amp). Pokud nemáte povoleno pěkné permalinky, přidejte ?amp = 1 na odkazy (které by vypadaly jako example.com/?p=100&amp=1). Jediným dalším krokem je testování a ověření stránek, jak je uvedeno výše.

U tohoto pluginu si vůbec nevšimnete žádné nastavení ani funkce. Pro AMP Analytics je přidána jedna možnost dashboardu, kde můžete vložit svůj vlastní konfigurační kód JSON, ale to jsou všichni lidé.

Tento plugin je oficiální plugin z Automatického stáje a v současné době nepodporuje stránky a archivy, ani je nemůžete přizpůsobit. Je to však velmi jednoduchá a snadno použitelná možnost a pomocí ní můžete najít nějaké pokyny dokumentace o Githubu pro přizpůsobení.

AMP pro WP – akcelerované mobilní stránky

AMP pro WP zdarma WordPress Plugin

Další skvělá možnost je AMP pro WP. Tento bezplatný plugin WordPress nabízí rychlé a snadné nastavení – stačí nainstalovat, povolit nastavení a začít automaticky generovat váš AMP pro váš web. Bonus – tento plugin je také kompatibilní s více servery.

Jsou zde zabudovaná nastavení pro povolení AMP (příspěvky, stránky, archivy), přidávání mobilních reklamních oblastí, strukturovaná data (důležitá součást SEO), integrace metaznaček Yoast SEO, pokročilé možnosti indexu / no-indexu, oznámení push, nativní Komentáře AMP, vlastní překlady AMP (pokud používáte jiný jazyk než angličtinu, budete chtít aktualizovat) a další. Nastavení jsou velmi komplexní pro bezplatný plugin, který je úžasný.

Nejlepší ze všeho je, že tento plugin nabízí možnosti designu, takže si můžete přizpůsobit vzhled a dojem vašeho AMP výstupu. Použijte zahrnutá výchozí témata AMP nebo použijte jejich AMP Theme Framework vytvořit si svůj vlastní design.

AMP pro WP také nabízí prémiové rozšíření přidávat funkce (jako je výzva k akci nebo ukládání do mezipaměti AMP) a podpora populárních pluginů včetně WooCommerce, Advanced Custom Fields a Contact Form 7.

Další způsoby, jak přidat AMP pro WordPress

To samozřejmě není jediný způsob, jak přidat AMP na vaše webové stránky podporující WordPress. Mezi další doplňky, které vám mohou pomoci s webovými stránkami AMP pro WordPress, patří:

  • WP AMP – vytvoření vlastního designu AMP bez kódování a posílení SEO. Více se o tom dočtete zde.
  • Accelerated Mobile Pages (AMP) pro WordPress – vytvoření motivu AMP pro váš web.
  • Vlastní AMP – pomoc při přizpůsobování obsahu AMP.
  • Okamžité články na Facebooku a stránky Google AMP – publikovat a spravovat svůj obsah přímo z WordPressu na stránky Google AMP s podporou reklam a analýz.
  • Lepidlo pro váš SEO a AMP – zajistit, aby výchozí plugin WordPress AMP používal správná metadata Yoast SEO a umožňoval úpravu designu stránky AMP.

Pokud přidáte AMP pro WordPress?

Ačkoli AMP není povinné pro webové stránky, které mají být objeveny společností Google, je zcela zřejmé, že Google bude usilovat o implementaci projektu AMP v širším smyslu. V současné době není kompatibilní s AMP samostatným faktorem vyhledávací hodnocení Google. Ačkoli je rozumné předpokládat, že to bude v určitém okamžiku důležité,

Pokud si pamatujete, že rychlost načítání stránek je faktorem v hodnocení vyhledávačů, nemáte opravdu na výběr, pokud chcete být součástí mobilního internetu. Pokud pro vás jsou žebříčky vyhledávačů důležité, mohou všechny ostatní myšlenky na postup AMP zmizet.

Ale být součástí projektu vyžaduje přísné dodržování formátů vyžadovaných společností Google a nemusí to být šálek čaje každého. Omezuje to, co můžete umístit na svůj web, a může způsobit, že všechny blogy vypadají poněkud jednotně a postrádají individualitu. Některé animace nejsou povoleny a formuláře nejsou podporovány. A pokud jde o vstupní stránky, nemusí být AMP vůbec dobrý nápad. Kromě toho mohou existovat webové stránky, které zdůrazňují estetiku a branding nad rychlost, pro které se AMP může ukázat jako tlumič.

Pokud však chcete vytvořit rychlý a poutavý zážitek pro své uživatele a přimět je, aby se drželi déle, musíte vážně zvážit AMP pro WordPress (nebo jakýkoli jiný typ webových stránek, které byste mohli provozovat). Pokud se jedná o místo na karuselu AMP na vyhledávacích stránkách Google, které chcete zatáčet, přejděte na rozjetý vůz AMP.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map