Obsah
- 01. Otestujte aktuální rychlost
- 02. Zkontrolujte výsledky
- 03. Určete největší soubory
- 04. Komprimujte média a zmenšete velikost
- 05. Změna velikosti obrázků
- 06. Minifikace CSS, JS a HTML
- 07. Kombinujte soubory CSS a JS
- 08. Odložit externí JavaScript
- 09. Prohlédněte si doplňky
- 10. Zkontrolujte napájení webového serveru
- 11. Povolte kompresi Gzip
- 12. Upgradujte na PHP 7
- 13. Nastavte ukládání stránek do mezipaměti
- 14. Foton
- 15. Nastavte ukládání do mezipaměti prohlížeče
- 16. Testování zátěže s virtuálními uživateli
- 17. Znovu zkontrolujte výkon
WordPress začínal jako jednoduchá blogovací platforma, ale vyvinul se do systému správy obsahu, který nyní ovládá velké procento webových stránek. Jako nejpopulárnější CMS je jeho rychlý úspěch pravděpodobně způsoben fantastickým univerzálním nástrojem ve světě vývoje webových aplikací.
Nízká bariéra pro vstup a velký ekosystém pluginů a bezplatná témata WordPress umožňují méně technicky zdatným uživatelům vytvářet složité systémy. Může to však být meč s dvojitým ostřím, pokud web WordPress získá trakci, rozšiřuje se mimo příležitostného návštěvníka a vede k problémům.
Nejste si jisti WordPress? Prozkoumejte další možnosti s naším seznamem nejlepších poskytovatelů webhostingu. A pokud chcete snadno navrhnout web, vyzkoušejte tyto skvělé tvůrce webových stránek.
První známky potíží se objeví, když na web přistane nový uživatel: časy načítání mohou být nesnesitelné a prvky po stránce skákají po samostatném načítání stylů. Netrvá dlouho a serveru dojde nedostatek paměti, což způsobí zhroucení databáze, což vyžaduje restartování serveru, aby se web znovu spustil.
Ve výchozím nastavení, když uživatel přistane na stránce poskytované webem WordPress, back-end před vykreslením stránky prochází tématem a všemi doplňky. Pokud je použito mnoho pluginů nebo je téma špatně napsáno, může to vést k dlouhým databázovým dotazům a zahrnutí JavaScriptu a CSS tam, kde to není potřeba.
Naštěstí lze vyřešit mnoho hlavních problémů způsobujících pomalou rychlost a v tomto tutoriálu se podíváme na to, jak můžete optimalizovat i ty nejchytřejší weby WordPress. Chcete-li své dovednosti dále prohloubit, vyzkoušejte naše shrnutí výukových programů WordPress.
01. Otestujte aktuální rychlost
Prvním krokem k urychlení webu je zjistit, jak dobrý je jeho výkon. K tomu vám pomůže řada nástrojů, včetně Google Pagespeed Insights a kontroly načítání stránek Pingdom. Budeme používat GTmetrix, protože kombinuje několik kontrol; přejděte na web a zadejte adresu URL webu.
02. Zkontrolujte výsledky
Po krátké prodlevě zobrazí GTmetrix výsledky kontroly a dá několik skóre od A do F. Poskytne také plně načtený čas a celkovou velikost stránky. Pod tímto je uveden rozpis několika prvků.
03. Určete největší soubory
Jednou z nejdůležitějších metrik je celková velikost stránky. Toto je velikost souboru všech načtených prvků na stránce, jako jsou obrázky, video, CSS a všechny skripty, které jsou na stránce obsaženy. Pomocí GTmetrix otevřete kartu Vodopád a seřaďte tabulku podle velikosti, abyste našli největší prvky na stránce.
04. Komprimujte média a zmenšete velikost
Obrázky a videa jsou obvykle největšími položkami na stránce. Eliminujte zbytečná videa na pozadí a zajistěte kódování videa s nízkou přenosovou rychlostí, pokud se přehrává automaticky. Nainstalujte si plugin EWWW Image Optimizer. Z knihovny médií je k dispozici nová možnost hromadné optimalizace. Spusťte to.
Pokud máte mnoho médií k uložení, bezpečně je uložte v těchto vynikajících možnostech cloudového úložiště.
05. Změna velikosti obrázků
Někdy jsou obrázky přidané na stránku ve vysokém rozlišení a poté zmenšeny pomocí CSS. Tím se ztrácí šířka pásma, protože větší velikost se nikdy nepoužívá. Přejděte na hlavní panel> Nastavení> Ewww Image Optimizer a vyberte změnu velikosti. Zaškrtněte „Změnit velikost detekce“. Nyní stránky prohlížené správcem zvýrazní obrázky, u kterých je třeba změnit velikost. Tento problém vyřešíte změnou velikosti těchto obrázků v editoru obrázků nebo pomocí sítě CDN s automatickým nastavením velikosti.
06. Minifikace CSS, JS a HTML
Toto je proces odstraňování znaků v kódu, díky nimž je čitelný pro člověka, aby se zmenšila velikost stránky. Při použití motivu třetí strany je k tomu ideální plugin, jako je Autoptimize. Nainstalujte jej, přejděte do nastavení> Automaticky optimalizovat> přejděte dolů na možnosti CSS a zaškrtněte „optimalizovat kód CSS“. Při práci s tématem, které bylo vytvořeno na zakázku, se minifikace provádí pomocí nástrojů pro vytváření, jako je například gulp.
CSS: {-webkit-box-shadow: none; textová výzdoba: žádná; } Minified: a {-webkit-box-shadow: none; text-decoration: none;}
07. Kombinujte soubory CSS a JS
Při použití motivu třetí strany může modul Autoptimise pokrýt většinu scénářů povolením možnosti „Agregovat soubory CSS“. To kombinuje všechny CSS pro každou stránku do jednoho souboru namísto mnoha menších.
08. Odložit externí JavaScript
Živé chatové, analytické a sledovací nástroje mohou sdružovat velké soubory JavaScriptu, které přidávají celé sekundy na čas, než se stránka stane interaktivní. Přidejte k těmto skriptům atribut odkladu, aby se nespustily, dokud DOM nedokončí načítání.
script src = "cesta k souboru.js" odložit> / script>
09. Prohlédněte si doplňky
Příliš mnoho pluginů může WordPress ochromit. S tolika pluginy, které jsou zdarma, jsou vývojáři pod tlakem, aby tlačili prémiové verze svého softwaru a zahrnovali zbytečné, nafouklé funkce, jako je zasílání oznámení na řídicí panel správce. Deaktivujte a odeberte všechny pluginy, které se nepoužívají - v případě potřeby je lze znovu nainstalovat později.
10. Zkontrolujte napájení webového serveru
Motorem webové stránky je server, na kterém běží. Pokud je levný, nedostatečně napájený a špatně udržovaný, bude fungovat špatně. Přejděte na stránku Google PageSpeed Insights a zadejte adresu URL webu. Ve výsledcích hledejte „zkrátit dobu odezvy serveru“. Pokud se to v sestavě objeví, je pravděpodobné, že za výkon může vina pomalý server.
11. Povolte kompresi Gzip
Gzip může zmenšit velikost vašeho webu před odesláním uživateli. Webový prohlížeč uživatele poté automaticky dekomprimuje data a zobrazí jim je. Bez nevýhod je důležité zajistit, aby byl povolen Gzip. Existuje několik nástrojů ke kontrole, zda je povolen Gzip; zkuste GiftOfSpeed.
12. Upgradujte na PHP 7
Na panelu WordPress otevřete Nástroje> Stav webu a klikněte na kartu s informacemi. Otevřete akordeon "Server" a zkontrolujte hodnotu verze PHP. Pokud je to méně než 7.x.x, důrazně doporučujeme upgradovat alespoň na PHP 7.1. Testy ukazují, že tato změna umožňovala manipulaci s více než dvojnásobkem simulovaných návštěvníků.
13. Nastavte ukládání stránek do mezipaměti
Přejít na pluginy> Přidat nový plugin a hledat „cache enabler“. Tento odlehčený plugin ukládá stránky do mezipaměti, takže návštěvník procházející současně s jiným nezpůsobí, že web stránku vykreslí dvakrát. Místo toho modul plug-in vykreslí stránku do statického souboru HTML a poté tento soubor zobrazí dalším uživatelům.
14. Foton
Různá zařízení vykreslují obrázky v různých velikostech, takže je obtížné měnit velikost obrázků přesně tak, jak se zobrazují. Pomocí bezplatné služby „fotonů“, která je součástí Jetpacku, se obrázky automaticky zobrazují ve správné velikosti.
15. Nastavte ukládání do mezipaměti prohlížeče
Ukládání do mezipaměti prohlížeče říká prohlížeči uživatele, že některé prvky není nutné znovu stahovat pokaždé, když znovu načtou stránku na webu nebo se vrátí a navštíví ji znovu. To lze provést ručně v souboru .htaccess, nebo můžete použít plugin, jako je „Využití mezipaměti prohlížeče“.
16. Testování zátěže s virtuálními uživateli
Abychom simulovali skutečné uživatele používající web a dostali web do stresu, mělo by se provést zátěžové testování. Při monitorování dopadu zatížení serveru použijte k odesílání provozu na web službu, jako je Loader. CPU a paměť serveru by měly zůstat v bezpečných mezích.
17. Znovu zkontrolujte výkon
Jakmile jsou optimalizace provedeny, měli byste otestovat a změřit zlepšení na webu. Spusťte znovu GTmetrix a na kartě historie uvidíte rozdíl v době načítání stránky. Pokud bylo povoleno ukládání do mezipaměti, ujistěte se, že jste web navštívili alespoň jednou, aby se mezipaměť „připravila“ před provedením testování.
Tento článek byl původně publikován v čísle 292 časopisu Creative Web Design Webový designér. Koupit číslo 292.
Připojte se k nám v dubnu 2020 a podívejte se na naši sestavu superhvězd JavaScriptu na GenerateJS - konferenci, která vám pomůže vytvořit lepší JavaScript. Zarezervovat nyní na generateconf.com
