WordPress a rychlost?
Ne, není to oxymoron. I přesto, že se o WordPressu a rychlosti příliš pozitivně nemluví, tak po splnění určitých kroků umí být také dostatečně rychlý. Po správném vyladění se můžete s klidem dostat pod 0.8 vteřiny. AMP stránky na mobilech můžou načítat ještě mnohem rychleji. Více o AMP si můžete přečíst v mém dalším článku. V následujícím textu se nyní dozvíte jaké techniky používám pro optimalizaci rychlosti načítání webových stránek já.
Rychlost je důležitá nejen pro SEO
Při tvorbě webových stránek bychom měli myslet především na naše budoucí návštěvníky. Proto je důležité jim naservírovat nejen designově přívětivé a intuitivní prostředí, ale webovky by také měly dosahovat určitých standardů co se rychlosti načítání týče. Pokud rychlost Vašich budoucích webových stránek nebudete brát na lehkou váhu, Google vám to krásně oplatí v předních pozicích ve vyhledávačích. To znamená vyšší návštěvnost a menší míru okamžitého opuštění Vaší webové prezentace. A to je přesně to, co potřebujete. Více o SEO si můžete přečíst v mém dalším článku.
1) Kvalitní hosting s HTTP/2
Kvalitní hosting je alfou a omegou rychlého webu. Můžete mít sebelíp optimalizovaný web, ale pokud pojedete na hostingu, který svoje servery provozuje na bramboře, vždycky budete ztrácet.
Co je to HTTP/2?
HTTP/2 je hrozně skvělá věc. Ne ale opravdu. Je to nástupce původního HTTP/1.1 a jednoduše řečeno jde o protokol, který obstarává přenos webových stránek mezi webovým klientem a serverem. V čem je tento protokol tak super? Protokol HTTP/2 data přenáší paralelně. To je ten hlavní rozdíl od dědečka HTTP/1.1, který přeposílá data sériově. Rozdílů a vylepšení je mnoho, avšak nejpodstatnější věc z hlediska rychlosti je právě ten způsob přenosu dat.
Na obrázcích níže můžete vidět pořadí všech prvků, které webový prohlížeč stahuje ze serveru k Vám do počítače. První obrázek zobrazuje sériové stahování pomocí HTTP/1.1 a druhý obrázek paralelní stahování pomocí HTTP/2. Roli v rychlosti samozřejmě hraje i fakt, že každý web je na jiném hostingu a na jiné šabloně. Také má každý web různou velikost. Důležitý na této ukázce je rozdíl přenosu dat. Špatně optimalizovaný web na HTTP/2 může být pomalejší než dobře optimalizovaný web na HTTP/1.1.
Dovolím si ukrást jednoduchý popis protokolu HTTP/2, který koluje po internetu. Představte si, že sedíte hladoví v restauraci a čekáte na jídlo. Najednou dveře z kuchyně rozrazí číšník a přinese vám vidličku. Poté se vrací do kuchyně a přináší nůž a až v poslední řadě vyráží pro talíř s jídlem. Mrzuté že? Přesně takhle funguje protokol HTTP/1.1, který využívá většina dnešních webových stránek. Protokol HTTP/2 je už spolehlivější číšník, nedělá scény a přinese Vám vše najednou.
Má aplikace protokolu HTTP/2 háček?
Pár háčků je, ale vše se dá řešit. Všechny webové prohlížeče sice HTTP/2 již podporují, ale s poskytovateli hostingu je to trochu horší a ne každý podporu nabízí. Další nutností je instalace SSL, neboli šifrování přenosu dat. Laicky řečeno je to takový ten zelený zámeček vedle adresního řádku webu. Bez SSL nebude možné HTTP/2 implementovat. Ovšem to je také závislé jen na tom, zdali daný hosting podporuje aktivování nějakého bezplatného SSL certifikátu. Pokud certifikát zdarma hosting nenabízí, nezbývá než si ho zaplatit.
Pokud už u nějakého poskytovatele internetu Vaše webovky fungují, můžete mě kontaktovat a společně zjistíme, zdali je možné přejít na HTTP/2 na daném hostingu nebo Vám pomůžu přesunout web na jiný hosting, který HTTP/2 podporuje.
Vlastní test rychlosti protokolu HTTP/2 můžete vyzkoušet na webových stránkách. http://www.http2demo.io/
2) Rychlá a čistá šablona
Za druhou nejdůležitější věc považuji samotnou šablonu, na které je web postavený. Osobně si při stavbě webových stránek nemohu vynachválit šablonu GeneratePress. Opravdu jde o jednu z nejrychlejších šablon, která je v nabídce. Její kód je tak čistý, že v základu nemá více než 30kb a doba načítání v kombinaci s HTTP/2 a kvalitním hostingem byla okolo 0.2 vteřiny. Samozřejmě po vybudování nějaké designově přívětivé webové stránky tohle číslo bude o něco vyšší, ale pořád lepší začínat od 30kb, než začít stavět web na nějaké přeplácané, těžké a zabugované šabloně. Tento web mimochodem také funguje na GeneratePress šabloně.
3) Optimalizace obrázku do formátu MozJPEG
Optimalizace obrázků pomáhá značně zmenšit objem webové stránky a tím zrychlit načítání. Nebudu tu popisovat jak tato magická komprese funguje. Postačí snad vizuální příklad. Oba obrázky jsou v rozlišení 600 x 412 pixelů. Jeden z nich zabírá 513 kb, druhý 52 kb. Nebudu psát jaký je jaký. Tipněte si, stáhněte si je a ověřte sami. K optimalizaci využívám nástroj squoosh.app. Osobně si myslím, že toto je lepší způsob optimalizace, než stahovat pluginy do WordPressu, které to stejně pořádně neumí. Jediný, který za něco stojí je Shortpixel. Ten je ovšem v neplacené verzi velmi omezený.
4) Cachování
Cache vám také pomohou web pekelně zrychlit. A to díky tomu, že si pamatují co bylo již staženo. Každá stránka a obrázky na ni mají nastaveno kdy se mohou smazat (expirovat), a kdy se mají do vašeho prohlížeče stáhnout znovu. Během první návštěvy se to tolik nemusí projevovat, ale během dalších návštěv webových stránek může být díky cachování doba načítání zkrácena klidně i o 90%. Cachování aplikuji na každý vytvořený web.
5) A hromada dalších drobností
V článku jsem stručně rozepsal dle mého názoru 4 nejdůležitější kroky k rychlejšímu webu. Níže ještě přidávám další techniky, které používám. Některé dané výrazy nelze doslovně přeložit do češtiny, proto používám jejich anglický tvar.
Lazy load
Načítání JS, obrázků a CSS asynchronně až dodatečně poté, co uživatel provede nějakou interakci na webu. Aplikaci tohoto řešení je třeba promyslet. V určitých případech může zhoršit dobrý dojem doskakováním elementů.
Prefetch DNS
Přednačítání odkazů předtím, než na ně uživatel klikne. Super věc.
Normalizace statických zdrojů
Odstraní nepotřebné řetězce z CSS, JS a obrázků. S tímto je nutné si vyhrát. Může způsobovat problémy se styly.
Načítání Google měřícího kódu pomocí AJAX
Na web Vám nainstaluji měřící kód Google analytics, aby jste mohli sledovat návštěvnost. Tento měřící kód ale bohužel lehce zatěžuje web a zpomaluje načítání. Naštěstí to jde vyřešit přes AJAX požadavky narozdíl od původního Google analytics scriptu.
Minifikace HTML, CSS a JS
Proces, který umí zmenšit velikost kódu například tím, že se odstraní zbytečné mezery.
Kombinace HTML, CSS a JS
Tato praktika spojí Vaše CSS, HTML a JS požadavky do jednoho. Tím se enormně sníží počet požadavků na server. Používat tuto techniku je ale nebezpečné, protože je zde vysoké riziko, že se web sesype. Navíc v kombinaci s HTTP/2 se tato technika ani nedoporučuje, protože protokol data přenáší přece paralelně a tak mu více vyhovuje více menších požadavků. Osobně tuto techniku spíše nepoužívám.
Generování kritického CSS
Vygenerují se základní CSS soubory, které web potřebuje pro načtení. Zbytek se neřeší. Zde je taky riziko, že se něco pokazí, proto je nutné pořádně otestovat.
GZIP komprese
Komprese souborů pro rychlejší přenos.
Zanechte mi na Vás kontakt
Navrhnu Vám bleskurychlé webové stránky, které Google odmění.
SEO na pensionhelenahones.cz
Obsah Co je to SEO? SEO na pensionhelenahones.cz Analýza stránky a definování klíčových slov Onpage faktory Kvalitní obsah s klíčovými slovy Maximalizace dwell time Nastavení
Co je to WordPress?
Obsah Co je to WordPress? Jak to vypadá v administraci WordPressu? Výhody a nevýhody WordPresu Co je to WordPress? WordPress je redakční systém sloužící k
Optimalizace webu pro mobily
Co je to “mobile first index”? Mobile first index jednoduše znamená, že Google už nebere tolik v potaz to, jak se vaše webová prezentace zobrazuje