Optimalizace rychlosti webových stránek: Jak na to v roce 2020 # Krok za krokem

Přibližně o deset let zpět společnost Google oznámila, že rychlost webu ovlivní hodnocení webového vyhledávání. Přestože příspěvek neobjasnil dopad rychlosti na hodnocení, webmasteři, kteří si přečetli oznámení, pochopili, že optimalizace rychlosti webových stránek by měla být na vrcholu jejich plánů rozvoje..


Navíc Výhody SEO optimalizace rychlosti, doba načítání stránky je důležitá při určování počtu uživatelů na vašem webu. HubSpot to hlásí pokles konverze souvisí s prodlužováním doby načítání stránky – jednosekundové zpoždění v době načítání by mohlo vést ke snížení konverze o ~ 20-30%!

Průvodce optimalizací rychlosti webových stránek

V posledních několika letech došlo ke zvýšení průměrné velikosti stránky. Ve skutečnosti v roce 2018, v průměru byla velikost stránky více než 2 MB! Významnou část tohoto načítání stránky tvoří obrázky, statické soubory a videa.

Minimálně řečeno, na velikosti vašeho webu a jeho celkové rychlosti záleží, hodně! I při neustále se zvyšujícím zatížení stránky můžete udělat několik věcí, abyste vylepšili způsob, jakým váš web věci zpracovává. Tento příspěvek diskutuje o všem.

Optimalizace rychlosti webových stránek: Co potřebujete, než začneme

Tento příspěvek předpokládá, že již máte na starosti dvě klíčové věci:

  • Používáte optimalizované téma, které nezavádí mnoho nadýmání na samotný WordPress.
  • Jste na dostatečně rychlém hostiteli.

Pokud zaškrtnete tato dvě políčka, můžete přejít do následujících oddílů a prozkoumat komplexní seznam úkolů, které můžete provést, abyste zajistili minimální dobu načítání webových stránek.

Začínáme s optimalizací rychlosti webových stránek

Anatomie webové stránky

anatomie

Trik, jak optimalizovat své webové stránky pro rychlost, je pochopit, co se děje na webové stránce. Podívejme se na nejoblíbenější komponenty:

  • HTML kód, který dává webové stránce strukturu a obsah – i když WordPress provozuje párty na vašem webu, stačí vzít to, co je v databázi – veškerý obsah – a převést jej na statický výstup HTML
  • Statické soubory, které pomáhají při navrhování, funkčnosti a interaktivitě (CSS, JavaScript)
  • Obrázky pro pozadí, loga a obsah

Aby bylo možné stránku vykreslit, prohlížeč požaduje pro každý prvek webové stránky – samotnou stránku ve formě HTML, statické soubory, obrázky, externí obsah. Proto počet HTTP požadavky také hraje klíčovou roli v optimalizaci rychlosti webových stránek.

Zjistěte, kde jste: nástroje pro optimalizaci rychlosti webových stránek

Než přejdeme ke konkrétním technikám, které vám pomohou při optimalizaci vašich webových stránek, věnujme chvíli kontrole nástrojů, které pomáhají analyzovat rychlost webových stránek..

Pokud jste začátečník hledající příležitostný testovací nástroj, můžete zvážit jeho použití nástroje Pingdom Tools sada pro rychlé posouzení vašich webových stránek. Pro úplnější řešení se můžete obrátit na Statistiky rychlosti stránky Google.

Pingdom Speed ​​TestNástroje Pingdom pro testy rychlosti

Kromě těch, pokud hledáte rychlou možnost ve formě pluginu prohlížeče, můžete zkusit YSlow, který testuje webové stránky a poskytuje návrhy z prohlížeče. Dále, Nástroj GTmetrix využívá výsledky testů YSlow pro zprávy.

�� Pokud chcete více možností otestovat rychlost vašeho webu, tento seznam příspěvků 5 nejlepších nástrojů pro kontrolu rychlosti.

Předtím, než projdete technikami uvedenými v tomto příspěvku, ujistěte se, že provozujete web pomocí některého z zde uvedených nástrojů, který slouží jako měřítko. Jakmile provedete jakoukoli optimalizaci rychlosti webových stránek, vraťte se do nástroje a zkontrolujte, zda nedošlo ke zlepšení rychlosti.

Krok 1: Optimalizace statických souborů

První krok této příručky se zaměřuje na optimalizaci statických souborů – nejčastěji ve formě stylů (CSS) a skriptů (JS).

(a) Přesuňte CSS na hlavu, JS na dno

První optimalizace, která se má provést, je zajistit, aby šablony stylů procházely v části struktury stránky, zatímco všechny skripty jsou přesunuty těsně nad závěrečnou značku na stránce. Logika za tím je jednoduchá:

  • Obecně jsou šablony stylů menší než skripty
  • Jakmile jsou styly načteny do značky před tím, než prohlížeč vykreslí tělo stránky, všechny prvky, které jsou vykresleny na stránce, budou mít správný styl
  • Funkčnost skriptů se obecně spustí po načtení obsahu stránky, takže skripty lze obecně umístit dole

Tato praxe zajišťuje, že návštěvníci vašeho webu neopouštějí stránku frustrovaně, zatímco čekají na její načtení.

Chcete-li rychle zpracovat část skriptů, můžete nainstalovat plugin Skripty do zápatí pro WordPress. Funguje to na autopilotu a funguje dobře.


Skripty do zápatí Skripty do zápatí

Autor: Joshua David Nelson

Aktuální verze: 0.6.4.1

Poslední aktualizace: 15. dubna 2020

scripts-to-footerphp.0.6.4.1.zip


Hodnocení 94%


20 000 instalací


3.1.0 Požadavky

(b) Nastavení minifikace

Minifikace je proces odstranění těch částí souboru, které nejsou nezbytné pro jeho provedení. Například ve vašich seznamech stylů nebo skriptech nejsou pro provedení nutné následující:

  • mezery pro odsazení
  • komentáře
  • dlouhé názvy funkcí a proměnných
  • nepoužitý kód

Minifikace výrazně pomáhá zmenšením velikosti statických souborů. Soubory můžete minifikovat pomocí služby jako Minifikujte, nebo instalaci jednoho z nich minifikační pluginy ve WordPressu.

(c) Použít asynchronní načítání

Webový prohlížeč vykresluje a požaduje zdroje postupně, jak se objevují na webové stránce. Toto se nazývá synchronní načítání. Tuto výchozí funkci prohlížeče však můžete změnit pomocí atribut async načíst zdroje, jakmile jsou k dispozici. Například můžete načíst skript asynchronně takto:

Tady je seznam pluginů, které vám pomohou s asynchronním načtením do WordPress.

(d) Použijte kompresi GZIP

Komprese GZip je technika komprese zdrojů prostřednictvím požadavků HTTP. S kompresí GZip server odešle soubory se zdroji ZIP, které prohlížeč rozbalí při vykreslování webové stránky.

Čas a prostředky potřebné ke kompresi a dekompresi zdroje jsou vyváženy časem a šířkou pásma uloženou při přenosu menšího souboru ze serveru na klienta. Tato technika nejenže načítá stránky rychleji, ale také šetří náklady na server.

Komprese GZip je součástí několika pluginů pro ukládání do mezipaměti WordPress, jako je WP Fastest Cache.

(e) Používejte Google CDN pro oblíbené knihovny

Konečná optimalizační technika v tomto kroku je používat při načítání všech běžných knihoven, které se používají na vašem webu, Google nebo Microsoft CDN. Důvod pozadu je jednoduchý – z důvodu popularity těchto CDN je pravděpodobné, že návštěvník již má v prohlížeči uloženou verzi zdroje v prohlížeči.

Krok 2: Optimalizace obrázků

Jak bylo uvedeno výše, primárním zdrojem rostoucích velikostí webových stránek v průběhu let jsou obrázky.

Dokonce se podívejte na vlastní čísla CodeinWP:

načtení obrázku

Proto, řešení obrázků by mělo vést k nejvýznamnějším zlepšením rychlosti vašeho webu, a to ano.

Obrázky jsou pro web zásadní, ale použití obrázků v plné kvalitě pro web se opravdu nedoporučuje. Obrazy byste měli komprimovat do takové míry, aby se drasticky zmenšila velikost, a zároveň by měla být zajištěna přiměřená vizuální kvalita.

Můžete tak učinit několika způsoby a mít na paměti optimalizaci rychlosti webových stránek:

(a) Nahrajte obrázky správné velikosti

Váš aktuální motiv má pravděpodobně maximální velikost obrázku, který dokáže zobrazit – rozměrově. Zjistěte, co to je, a pak nahrajte pouze obrázky, které jsou maximálně dvakrát tak velké.

Proč dvakrát? To také umožní, aby téma zobrazovalo verze obrazů v kvalitě sítnice.

(b) Použijte správný typ obrazu

Dva nejčastěji používané typy obrázků na webu jsou JPG a PNG.

Nejsou podobní.

  • Obrázky JPG jsou určeny pro fotografie a další komplexní obrázky s mnoha barevnými informacemi
  • Obrazy PNG jsou ideální pro grafiku, která má málo barevných informací, jako jsou snímky rozhraní.

Příklad obrázku PNGtémata

(c) Před nahráním lokálně optimalizujte obrázky

Před nahráním obrázků na svůj web můžete použít různé nástroje.

tinypng
imageoptim

(d) Lazy načte své obrázky

Další technikou pro optimalizaci obrázků je líné načítání, což je postup, kdy se obrázek nestáhne, dokud ho návštěvník neposune dolů, aby ho viděl.

lazyload demoDemonstrace líného načítání na CodeinWP

Zde je kompletní průvodce líným načítáním obrázků na váš web.

(e) Získejte plugin pro optimalizaci obrázků

V neposlední řadě byste měli pro svůj web WordPress získat kvalitní plugin pro optimalizaci obrázků. V závislosti na tom, který z nich nakonec použijete, můžete na autopilotu udělat většinu potřeb pro optimalizaci obrázků.

Tady jsou 6 nejlepších pluginů pro optimalizaci obrazu v porovnání.

Pokud potřebujete rychlé doporučení, podívejte se na naše vlastní Optimole. Poskytuje vysoce efektivní kompresi obrazu, navíc k CDN ve volném plánu! Optimole také přináší některé hvězdné výsledky, když je postaven proti svým hlavním konkurentům:

Výsledky optimalizace PNG

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88,7%Ztráta a ztráta
Představte si301 KB67 KB77,7%Lossy
TinyPNG301 KB79,7 KB73,5%Lossy
ShortPixel301 KB90,4 KB69,96%Lossy
Smush301 KB247 KB17,9%Bezeztrátová
EWWW301 KB257,4 KB14,6%Bezeztrátová

Výsledky optimalizace JPG

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%Lossy
TinyPNG518 KB248,6 KB52%Lossy
Optimole518 KB274 KB47%Ztráta a ztráta
Představte si518 KB338,7 KB34,64%Lossy
EWWW518 KB488,9 KB5,7%Bezeztrátová
Smush518 KB493 KB4,9%Bezeztrátová


Optimalizace obrazu & Lazy Load by Optimole Optimalizace obrazu & Líné zatížení Optimole

Autor: Optimole

Aktuální verze: 2.3.1

Poslední aktualizace: 21. dubna 2020

optimole-wp.zip


Hodnocení 96%


50 000 + instalace


WP 4,7 + vyžaduje

Krok 3: Optimalizace požadavků HTTP

Dříve v příspěvku jsme diskutovali, že když uživatelský prohlížeč začne načítat webovou stránku, skutečné přenosy se provádějí prostřednictvím individuálních požadavků HTTP. Každý zdroj načte každý zdroj. Zvýšení počtu takových požadavků tedy zvyšuje dobu načítání vaší webové stránky.

požadavky na webHTTP požadavky webové stránky

(a) Kombinovat soubory

Prvním úkolem minimalizovat zatížení požadavků HTTP je kombinovat podobné zdroje. Když minimalizujete zdroje, můžete kombinovat podobné soubory dohromady. Například všechny stylové listy (soubory CSS) a všechny vlastní soubory JavaScript lze kombinovat do jednoho souboru. Tím se sníží počet požadavků, které musí klient provést, aby načíst všechny prostředky.

Opět tyto minifikační pluginy pro WordPress vám to pomůže.

(b) Minimalizujte vyhledávání DNS

Když je požadavek HTTP podán do domény, jako je www.codeinwp.com, provede se vyhledávání DNS (systém názvů domén), aby se našla IP adresa serveru. V důsledku toho by vaším cílem mělo být také minimalizovat počet vyhledávání DNS ve všech požadavcích, aby se urychlilo načítání webových stránek.

Tady je skvělý průvodce Kinstou jak na to.

(c) Povolit udržování naživu

Prohlížeč bez jakékoli optimalizace odešle jeden požadavek HTTP pro každý zdroj. Po dokončení stahování se toto připojení ukončí. Prohlížeč poté odešle serveru nový požadavek na nový prostředek. Zachovat naživu je technika, která neukončí požadavek po dokončení stahování prostředků.

Můžete udržovat naživu následujícími způsoby:

d) Minimalizace přesměrování

Přesměrování je instrukce k automatickému převedení klienta z jednoho místa na jiné místo zdroje. Každé přesměrování prodlužuje dobu načítání vaší webové stránky a pokud to není nezbytně nutné, měli byste se vyhnout přesměrování v kódu.

(e) Použijte CDN

CDN (síť pro doručování obsahu) je kolekce webových serverů přítomných na rozsáhlých geografických místech, které dodávají obsah rychle a efektivně klientům.

Klientovi, který požaduje zdroj, bude zdroj doručen ze serveru, který je geograficky nejblíže k jeho umístění. Tím je zajištěno, že se požadovaný obsah dostane ke klientovi v nejkratším možném čase!

Máme samostatný zdroj, který porovnává nejlepší řešení CDN pro weby WordPress, spolu s informacemi o tom, jak začít hledat.

Krok 4: Ukládání do mezipaměti

Bez oddílu o ukládání do mezipaměti nemůže existovat žádný průvodce optimalizací rychlosti webových stránek. Některé techniky, o nichž jsme diskutovali dříve, jako je komprese GZip a minificaiton, jsou dnes součástí mnoha řešení pro ukládání do mezipaměti.

Ukládání do mezipaměti označuje fenomén ukládání zdroje do dočasného úložiště, aby se v případě potřeby rychle získal. Existují různé formy ukládání do mezipaměti:

  • Ukládání do mezipaměti: Statická verze HTML stránky uložené na serveru
  • Ukládání do mezipaměti databáze: Výsledky běžných databázových dotazů (například 10 nejvýznamnějších příspěvků na vašem webu) uložených na serveru
  • Ukládání do mezipaměti prohlížeče: Ukládání částí stránky do prohlížeče

V tomto příspěvku jsme porovnali nejoblíbenější pluginy pro ukládání do mezipaměti WordPress. TL; DR: Podívejte se WP Rocket pokud hledáte kompletní řešení. Pokud dáváte přednost něčemu, co je zdarma, zde je průvodce jak konfigurovat W3 Total Cache.

Krok 5: Optimalizace pro mobilní zařízení

V předchozích částech tohoto článku jsme diskutovali optimalizační techniky, které jsou relevantní jak pro stolní, tak pro mobilní zařízení. Spotřeba obsahu v mobilních zařízeních však roste a menší obrazovka přináší nové výzvy. Tato část se tedy zabývá metodami optimalizace rychlosti webových stránek pro mobilní zařízení.

Mobilní optimalizace se týká praxe, která zajišťuje, aby mobilní návštěvníci vaší webové stránky měli stejnou funkčnost a účinnost jako jejich protějšky v počítači. Následující seznam obsahuje určité hygienické faktory pro správu webového obsahu pro mobilní zařízení:

  • Pomocí responzivního webového designu zajistěte, aby různá zařízení získaly různé verze webové stránky
  • Nepoužívejte blesk a vyskakovací okna, protože mobilní zařízení je nemusí podporovat
  • Nevkládejte interakce, jako jsou odkazy, příliš blízko u sebe

Kromě těchto faktorů je AMP (Accelerated Mobile Pages) projekt zaměřený na vytváření obsahu, který je rychlý a konzistentní napříč zařízeními..

Zde je průvodce, jak začít s AMP ve WordPressu.


AMP

Autor: Přispěvatelé projektu AMP


Hodnocení 74%


500 000 + instalace


WP 4.9 + Vyžaduje

Více informací

amp.1.5.3.zip

Aktuální verze: 1.5.3

Poslední aktualizace: 15. dubna 2020


Hodnocení 74%


500 000 + instalace


WP 4.9 + Vyžaduje

Stránka pluginu WordPress.org


AMP

Závěr

Doufám, že vám tento průvodce poskytl několik tipů, jak byste měli udělat, abyste zlepšili celkovou úroveň optimalizace rychlosti svého webu.

Jen pro shrnutí; Nejprve jsme se podívali na anatomii webové stránky, abychom se zabývali konkrétními oblastmi, které je třeba zlepšit. Poté jsme přistoupili ke konkrétním krokům pro optimalizaci:

  • Krok 1 zahrnoval optimalizaci statických souborů ve formě stylů stylů a skriptů
  • Krok 2 řeší obrázky a jejich optimalizaci
  • Krok 3 byl hlavně o technikách pro optimalizaci požadavků HTTP
  • Krok 4 diskutoval několik populárních technik ukládání do mezipaměti
  • Krok 5 zahrnoval optimalizaci pro mobilní zařízení

Existuje něco, s čím bojujete, pokud jde o optimalizaci rychlosti webových stránek? Dejte nám vědět v komentářích níže.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení, prezentace a úpravy Karol K.

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