jak zrychlit váš web

pokud jste začátečník a nový majitel webu, ve většině případů se nebudete starat o rychlost webu.

po vytvoření webu nebo spuštění blogu může mít pocit, že je vše na svém místě. Vaše stránky jsou krásné, takže to musí znamenat, že lidé nebudou mít žádný problém čekat pár sekund více, aby se mohli správně načíst, že jo?

Ne, to není tento případ.

podle výzkumu Google, čím déle trvá načtení stránky, tím více lidí opustí web.

Google také zavedl webové základní životní funkce (které se počítají jako faktor hodnocení pro webové stránky), který jde ještě podrobněji, pokud jde o rychlost načítání webových stránek. Čím rychlejší je váš web, tím větší je vaše šance dostat se na první stránku výsledků vyhledávání Google.

14 kroky ke zlepšení rychlosti webových stránek

• Krok 1: spusťte test rychlosti
• Krok 2: Získejte rychlý a spolehlivý webhosting
• Krok 3: implementujte službu Content Delivery Network (CDN)
• Krok 4: Minifikujte soubory CSS a JavaScript
• Krok 5: Povolit ukládání do mezipaměti prohlížeče
• Krok 6: Optimalizujte a vyčistěte databázi WordPress
• Krok 7: používejte optimalizovaná/prémiová a jednoduchá témata
• Krok 8: Optimalizujte všechny obrázky na vašem webu
• Krok 9: líné načítání obrázků a videí
• Krok 10: zabraňte hotlinkování obrázků
• krok 11: hostujte videa ve službách 3rd party a stahujte velká média
• krok 12: udržujte pluginy na minimu/najděte pluginy, které vás zpomalují
• krok 13: ovládání přesměrování na vašem webu
• krok 14: Optimalizujte obsah (použijte výňatky, rozdělte dlouhé články a komentáře atd)

Krok 1: spusťte test rychlosti

než něco uděláte, je důležité provést správný test. I když můžete udělat hodně i bez jednoho, důrazně doporučuji spustit alespoň jeden rychlostní test, abyste měli měřítko, které vám pomůže pochopit, jak dobře váš web funguje a jak dobrý je výsledek po dokončení všech kroků zlepšení.

volné nástroje

naštěstí jsou k dispozici bezplatné rychlostní testy pro každého. Stačí si vybrat jednu, zadat adresu URL a nechat nástroj provést své kouzlo.

Google PageSpeed Insights

protože většina lidí optimalizuje své stránky pro Google, prvním nástrojem, který zmíním, jsou Google PageSpeed Insights. Je to docela jednoduché a výsledek můžete mít během několika sekund.

1. Otevřete Google PageSpeed Insights.
2. zadejte adresu URL vašeho webu.
3. klikněte na tlačítko“ Analyzovat“.

v mém případě to trvalo jen 10-15sec pro dokončení testu a ukázat mi výsledky sdílené na obrázku níže.

poté, co vidíte zelené číslo nahoře, kde se snažíte získat skóre 100, bude několik dalších segmentů, které chcete prozkoumat. To jsou:

• první Obsahová Barva (FCP)
• největší Obsahová Barva (LCP)
• kumulativní posun rozvržení (CLS)

všechny tři prvky jsou součástí webových vitálů, které jsou nyní zahrnuty v hlavních metrikách společnosti Google, které ukazují, jak rychlý nebo pomalý Je váš web. Další informace o webových Vitálech naleznete v našem průvodci, jak optimalizovat svůj mobilní web.

GTmetrix

jedním z nejpopulárnějších testů rychlosti webových stránek je GTmetrix. Je zcela zdarma a lze jej provést za méně než minutu:

1. přejít na GTmetrix.
2. zadejte úplnou adresu URL vašeho webu.
3. stiskněte tlačítko“ Spustit Test “ a počkejte asi 30 sekund.

poté získáte známku, která vám ukáže, jak rychlý je váš web. Test vám také ukáže podrobnosti, jako je výkon vašeho webu, jeho struktura, stejně jako webové životní funkce, které jsou nyní pro Google klíčovým faktorem hodnocení.

pokud jste ještě aktivně nepracovali na optimalizaci vašeho webu pro rychlost, pak je pravděpodobné, že nebudete mít dokonalé skóre. Ale nebojte se, můžete pracovat na tom, pokud začnete sledovat všechny kroky.

Krok 2: Získejte rychlý a spolehlivý webhosting

rychlý web začíná dobrým hostingem. Bez ohledu na to, jak tvrdě se snažíte poskytnout nejlepší uživatelský zážitek, pokud váš hosting naštve, rychlost vašeho webu bude trpět.

nejlepší hostingové společnosti se postarají o všechno a není nutné, abyste pochopili, co se děje za zavřenými dveřmi. Od kvalitního a dobře udržovaného hardwaru až po pravidelně aktualizované softwarové komponenty, hostingová služba může udělat hodně pro zlepšení rychlosti vašeho webu.

Chcete-li začít správným způsobem, nechte své stránky hostovat s Bluehost, jednou ze vzácných hostingových společností oficiálně doporučených WordPress.org. díky dlouholetým zkušenostem a milionům hostovaných webových stránek je tato hostingová společnost jednou z nejlepších ve svém oboru-něco, co se snadno promítne do robustního webu.

Krok 3: Implementujte službu Content Delivery Network (CDN)

náš svět je velkým místem. Přestože se rychlost internetu v průběhu let drasticky zlepšila, fyzická vzdálenost mezi počítači a servery stále hraje významnou roli v rychlosti online. To znamená, že načítání informací ze serveru z vaší země bude obecně rychlejší než načítání dat z celého světa, stejně jako je pro vás snazší koupit konferenční stolek od IKEA ve vašem rodném městě místo toho, abyste museli řídit, abyste si jeden v jiné zemi.

Zde přicházejí sítě pro doručování obsahu. Umožňují vám hostovat vaše webové stránky na několika serverech po celém světě. CDN dokáže rozpoznat nejbližší umístění každého jednotlivého načítání vašeho webu a načíst obsah z nejbližšího serveru. Pokud se tedy návštěvník pokusí načíst váš web z USA, získá obsah z jednoho ze serverů USA, zatímco někdo z Evropy načte váš web prostřednictvím serveru umístěného v jejich blízkosti, například v Londýně.

pokud hostujete web na Bluehostu, najdete jejich TrueSpeed CDN uvnitř ovládacího panelu. Pouhým nastavením se váš web stane globálním a rychleji se načítá lidem z celého světa.

můžete také získat služby CDN 3rd party. Nejoblíbenější CDN jsou:

• Cloudflare
• KeyCDN
• StackPath
• Google Cloud CDN
• Rackspace
• CacheFly
• Amazon CloudFront

Krok 4: Minifikujte soubory CSS a JavaScript

moderní webové stránky jsou plné souborů CSS a JavaScript, které spolupracují, aby webové stránky vypadaly hezky a fungovaly ve prospěch uživatelů. Řádek po řádku kódu dělá tyto soubory zbytečně velké, což může rychle zpomalit váš web.

weboví designéři (stejní lidé, kteří vytvářejí šablony, které nakonec zakoupíte) rádi udržují svůj kód čistý. To znamená, že udržují kód, který vypadá hezky a snadno srozumitelný. Nicméně, mít tyto bílé mezery, další řádky a znaky pouze zvyšují hmotnost souboru, což lze snadno snížit minifikací.

zde je příklad jednoduchého kódu CSS:

to může minified do tohoto:

i když tento jednoduchý rozdíl nebude mít významný dopad na vaše stránky, představte si, co se stane, když máte tisíce a tisíce zbytečných bílých mezer a čar.

naštěstí pro minifikaci souborů CSS a JavaScript nemusíte procházet kódem a provádět změny sami. Existují pluginy, které to udělají automaticky za vás a zajistí, že vše funguje správně:

Krok 5: povolit ukládání do mezipaměti prohlížeče

povolením ukládání do mezipaměti prohlížeče povolíte ukládání obsahu do prohlížečů lidí. To znamená, že pokud se návštěvník rozhodne vrátit se na váš web, nebude muset znovu stahovat všechny soubory ze serveru, protože je již mají uložené ve svém prohlížeči.

ukládání do mezipaměti prohlížeče může výrazně zlepšit rychlost vašeho webu pro vracející se uživatele.

Chcete-li to na svém webu Povolit, vše, co potřebujete, je bezplatný plugin WordPress, jako například:

• W3 Total Cache
• WP nejrychlejší Cache
• WP Super Cache

pokud například používáte W3 Total Cache, stačí nainstalovat plugin:

plugin automaticky nastaví nastavení ukládání do mezipaměti a okamžitě začnou pracovat ve váš prospěch. Pokud se rozhodnete jít do více podrobností, můžete otevřít kartu Výkon, která je nyní viditelná na levé straně nabídky WordPress, kde jsou viditelná všechna nastavení pluginu. Zde můžete v případě potřeby změnit další možnosti.

Krok 6: Optimalizujte a vyčistěte databázi WordPress

váš web WordPress nemůže fungovat bez databáze. Tam je uloženo vše, co děláte a máte na webu. Jak si dokážete představit, témata a pluginy ne vždy udržují čistotu, takže i když odinstalujete konkrétní plugin, zanechá některá data ve vaší databázi. Přesčas, databáze bude přeplněná a neefektivní, což povede k pomalému webu.

i když je možné vyčistit databázi ručně, to by znamenalo, že musíte pochopit, jak to funguje. A i když ano, je pravděpodobné, že byste to mohli ještě pokazit.

naštěstí jsou k dispozici bezplatné pluginy WordPress, které pro vás optimalizují a vyčistí databázi. Než však něco uděláte, ujistěte se, že jste vytvořili úplnou zálohu svého webu nebo máte způsob, jak zrušit změny. Přestože je wp-Optimize známým a bezpečným pluginem, přímá úprava databáze se někdy může pokazit.

takže v případě, že se něco pokazí, navrhuji Reset WP. Tento plugin vytvoří snímek vašeho webu a umožní vám rychle vrátit zpět všechny provedené změny. Takže v případě, že se něco pokazí, můžete obnovit databázi za pár minut, na rozdíl od obnovení úplné zálohy, která může trvat déle.

Krok 7: používejte optimalizované / Prémiové a jednoduché motivy

šablony a motivy nejsou pouze vizuální. Chcete-li je vytvořit, musí weboví návrháři kódovat funkce, možnosti a vkládat obrázky, které se spojí do jediného pracovního tématu.

jak si dokážete představit, šablona, která načte například pět souborů a tři obrázky, se načte mnohem rychleji než šablona, která je dodávána s deseti soubory a dvaceti obrázky. Pouhé číslo není jediným důležitým faktorem, ale jak dobře je vše Optimalizováno, přichází v úvahu také.

vzhledem k tomu, že je k dispozici tolik témat a šablon WordPress, je těžké určit ty nejlepší. Zde jsou některé z populárních témat WordPress, které jsou navrženy tak, aby vypadaly dobře a rychle se načítaly:

• Dobrý den Elementor
• Astra
• GeneratePress
• OceanWP
• Sydney

Krok 8: optimalizace všech obrázků na vašem webu

obrázky se mohou snadno stát jedním z hlavních problémů s rychlostí vašeho webu. Neoptimalizované obrázky zůstanou zbytečně velké a těžko se stahují. Pokud jich použijete příliš mnoho, uživatelé budou mít potíže s načtením celé stránky vašeho webu a pravděpodobně skončí dříve, než uvidí obsah.

naštěstí není tak těžké udržet Obrázky optimalizované. Je důležité, abyste prozkoumali své téma / šablonu a zjistili, jaké velikosti obrázků potřebujete. Poté se můžete o obrázek postarat před jeho nahráním změnou velikosti a změnou nastavení kvality.

pokud potřebujete optimalizovat pouze několik obrázků, můžete použít službu 3rd party, jako je TinyPNG. Tento nástroj pro optimalizaci obrázků vám umožní nahrát zdrojové obrázky a poté bude automaticky optimalizován. Stačí přetáhnout & drop obrázky, a nechat Panda pracovat své kouzlo. Poté si můžete stáhnout optimalizované verze svých obrázků, které můžete bezpečně umístit na svůj web.

pokud již máte aktivní webové stránky a nemáte čas optimalizovat obrázky jeden po druhém, existuje plugin freemium, který vyřeší všechny vaše problémy. Shortpixel Image Optimizer se postará o všechny vaše obrázky, které jsou k dispozici ve vaší knihovně médií. To také funguje skvěle s NextGEN, Foo galerie, stejně jako další galerie a posuvník pluginy.

bezplatná verze umožňuje zpracovat až sto obrázků. Některé funkce zahrnují:

• optimalizace velikosti a kvality obrázků.
• převod formátů do jiného.
• pracuje s WebP a AVIF.

Jediné, co musíte udělat, je nainstalovat plugin a přizpůsobit nastavení tak, jak chcete. Vyberte kompresi, kterou potřebujete, nastavte velikost obrázků a stiskněte tlačítko, až budete připraveni, aby plugin zahájil proces optimalizace.

Krok 9: Lazy load obrázky a videa

obvykle, když uživatel otevře web, celý obsah, který by měl být zobrazen, se automaticky načte. Takže i když uživatel potřebuje pouze výše uvedený obsah skládání, stále by měl na této stránce načteno vše, co je k dispozici.

namísto líného načítání obrázků a videí můžete uživatelům načíst pouze obsah viditelný na obrazovce. Jakmile uživatel začne posouvat, začnou se načítat obrázky a videa, která se přesunou do viditelné oblasti obrazovky. Tímto způsobem se celý web načte rychleji a umožní lepší uživatelský dojem.

jak povolit lazy loading v WordPress:

Krok 10: zabránit hotlinking obrazu

Hotlinking je akce, která zahrnuje kopírování zdroje obrázku z jedné webové stránky a jeho použití na jiné. Zatímco se obrázek zobrazí bez problémů, ve skutečnosti se nenačte ze serveru. Místo toho využívá všechny zdroje původního webu a je to skutečně považováno za nezákonné.

tím, že zabráníte hotlinkingu, můžete zabránit ostatním lidem v krádeži vašich obrázků. Tímto způsobem šetříte zdroje na vlastní hostingové službě, což znamená, že váš web bude jediný, kdo tyto zdroje používá, což má za následek rychlejší web pro vaše návštěvníky.

existuje několik způsobů, jak zabránit hotlinkování:

• použití CDN: nejoblíbenější CDN jako Cloudflare a KeyCDN již mají zapnutou ochranu hotlinking.
• použití bezpečnostních pluginů: vše v jednom WP Security & Firewall plugin vám umožní mít kontrolu nad hotlinking.
• zakázání kliknutí pravým tlačítkem myši na obrázky: použijte plugin, jako je zabránit krádeži obsahu .
• úprava .htaccess soubor: pokročilejší uživatelé mohou zakázat hotlinking přímo úpravou kódu v .soubor htaccess.

krok 11: hostujte videa ve službách třetích stran a stahujte velká média

při spuštění webové stránky má smysl mít všechna vaše videa a velké mediální soubory na svém vlastním serveru. Co vám však může chybět, je to, že ukládání a reprodukce velkých souborů zabírá zdroje serveru. Pokud jde o rychlost vašeho webu, je mnohem pohodlnější stahovat videa a velké mediální soubory ve službách 3. strany, abyste ušetřili šířku pásma.

video načtené z YouTube bude fungovat stejně dobře (ne-li lépe) než načtené ze serveru. A pokud máte vyšší provoz, znamená to menší dopad na šířku pásma, což má za následek rychlejší web.

pokud jde o videa, můžete je hostovat na:

• YouTube;
• Vimeo; nebo
• Wistia.

krok 12: Udržujte pluginy na minimu / najděte pluginy, které vás zpomalují

každý plugin vylepšuje vaše webové stránky. Každá nová funkce však také znamená nové soubory, které zabírají místo a šířku pásma. Také ne všechny pluginy jsou kódovány stejně, takže je pravděpodobné, že máte plugin, který zpomaluje váš web načtením nepotřebných prvků, o kterých možná ani nevíte.

než začnete deaktivovat všechny pluginy, doporučuji provést test rychlosti.

tento plugin spustí některé testy na vašem webu a ukáže vám graf a podrobnosti. To, co vás zajímá, je karta „Runtime by Plugin“, která nakreslí graf zobrazující všechny vaše aktivní pluginy a jejich dopad na web.

zkontrolujte největší „kousky dortu“ v grafu, který zobrazuje pluginy, které jsou nejpomalejší na vašem webu. Všimněte si, že to neznamená, že se musíte zbavit tohoto konkrétního pluginu.

tento test vám umožní analyzovat všechny vaše doplňky, abyste mohli zvážit výhody a nevýhody a rozhodnout se, které pomalé pluginy můžete odinstalovat nebo najít alternativu.

krok 13: ovládání přesměrování na vašem webu

přesměrování zlepšuje uživatelský dojem a může dokonce zlepšit vaše SEO, pokud je provedeno správně. Aktivní přesměrování nebude mít negativní dopad na váš web. S každým přesměrováním se však váš web trochu zpomalí. Pokud tedy skončíte s příliš mnoha přesměrováními (vytvoření takzvaného řetězce přesměrování), milisekundy se sčítají a váš web se zpomalí.

jedním z nejpopulárnějších nástrojů pro zpracování přesměrování je Screaming Frog. Můžete se také podívat:

• Redirect Checker
• Sitebulb
• Deepcrawl

instalací softwaru nebo spuštěním online skenování (v závislosti na zvoleném nástroji) budete moci skenovat své webové stránky. Ukáže Vám podrobnou analýzu webu a rychle vám ukáže přesměrované adresy URL. Vzhledem k tomu, pouze s vědomím, že URL je přesměrován nebude moc smysl, budete milovat funkci, která vám ukáže zdroj přesměrování. To vám pomůže porozumět vašemu webu a umožní vám jednat o přesměrování odstraněním těch, které nejsou nutné.

pokud najdete řetězec přesměrování, který zpomaluje váš web, řešení je jednoduché-místo přesměrování z odkazu a na odkaz B, který jde na odkaz C, stačí změnit přesměrování na poslední odkaz v řetězci.

pro zpracování přesměrování v aplikaci WordPress můžete použít bezplatný plugin WP 301 Redirects, který vám pomůže spravovat všechna přesměrování.

krok 14: Optimalizujte obsah (použijte výňatky, rozdělte dlouhé články a komentáře atd.)

někdy můžete udělat hodně změnou malých věcí. Pokud píšete blog, můžete dosáhnout rychlejšího webu ovládáním obsahu. Při zobrazování nejnovějších článků z blogu použijte výňatky místo načítání celého článku.

pokud používáte klasický editor, zobrazení vlastního výňatku je relativně snadné:

nyní zobrazení výňatku na domovské stránce závisí na vašem tématu. Může být již zapnutá nebo možná budete muset tuto možnost zkontrolovat někde ve svém motivu. Doporučuji zkontrolovat dokumentaci nebo kontaktovat podporu, protože každé téma je jiné.

pokud máte tendenci psát dlouhé články, můžete je rychle rozdělit na dvě nebo více částí. Pokud používáte blokový editor, nepotřebujete externí pluginy. Jednoduše upravte dlouhý příspěvek, klikněte na symbol „plus“ a najděte blok „přerušení stránky“, který váš článek rozdělí na polovinu.

a konečně, pro ty, kteří mají spoustu komentářů, můžete zvolit stránkování komentářů místo načítání všech najednou:

pokračujte v testování rychlosti vašeho webu

i když uděláte každý krok z tohoto tutoriálu a úspěšně zrychlíte svůj web, neznamená to, že jste hotovi. Věci se mohou rychle změnit a nikdy nevíte, jak dobře se vaše stránky budou chovat zítra nebo za měsíc. To je důvod, proč je důležité, abyste pravidelně prováděli testy rychlosti a pravidelně vylepšovali své stránky.

tento tutoriál si můžete uložit do záložek v případě, že zapomenete, kde a jak otestovat svůj web,a také si pamatujete, jaké kroky byste měli projít, abyste jej urychlili.

jak vám pomalý web může ublížit

i když vám nevadí čekat na načtení stránek, většina lidí s tím má problém. A pokud zanedbáte problém, může vám to z dlouhodobého hlediska ublížit. Jak?

• vyšší míra okamžitého opuštění-i když se váš návštěvník rozhodne počkat na načtení stránky, neznamená to, že bude během celé návštěvy trpělivý. Riskujete vyšší míru okamžitého opuštění, díky níž lidé opustí váš web poté, co navštíví první stránku.
• ztráta peněz – pokud prodáváte produkty nebo služby na svém webu, pomalý web odrazí potenciální kupce a budoucí klienty.
• ztráta provozu-chcete více provozu, který bude pohánět vaše stránky vpřed? V takovém případě si nemůžete dovolit ztratit návštěvníka, protože váš web není správně optimalizován.
• nižší hodnocení SERP-Google a další vyhledávače berou v úvahu rychlost načítání. Pomalejší Stránka může mít za následek posunutí stránky s výsledky vyhledávače dále dolů, i když je váš obsah dobrý.

stále si nemyslíte, že rychlost je důležitá? Doufám, že vás tyto čtyři důvody přesvědčí, jak je rychlost webu zásadní, a že jste připraveni vylepšit svůj.

závěr

každý má rád krásné a dobře navržené stránky. Pokud to však znamená čekat na několik sekund navíc, než se web načte, je pravděpodobné, že ztratíte určité procento návštěvníků.

takže bez ohledu na to, co děláte, neobětujte rychlost pro estetiku. Je možné mít obojí; stačí být trpělivý a pracovat na svém webu, abyste jej vylepšili.