35 optimalizací výkonu pro váš web WordPress
Stránka vytvořená pomocí Canvas načte CSS a JavaScript pouze těch bloků, které vykresluje, a nic dalšího. K tomu se přidává 35 optimalizací, každá je přepínač, který máte pod kontrolou, s konzervativním výchozím nastavením a srozumitelným popisem, co dělá.
Aktualizováno
Načítání prostředků podle bloku
Většina šablon obsahuje jeden velký soubor stylů a jeden velký skript a každá stránka zatěžuje každou funkci šablony. Canvas přiřazuje každý ze svých 314 bloků CSS a JavaScript, které daný blok potřebuje, a poté načte jen sjednocení toho, co stránka skutečně vykreslila.
- Stránka s cenami nikdy nestahuje skript posuvníku
- Stránka bez formuláře nikdy nenačte zpracovatel formuláře
- Editor načítá styly bloků stejným způsobem
- Nic nevyžaduje nastavení a nelze to omylem vypnout
Deklarované, ne odhadované
Každý blok si deklaruje vlastní soubory. Mapa je součástí bloku, takže neexistuje žádný centrální seznam, na jehož aktualizaci by někdo mohl zapomenout.
Funguje se základními bloky
Základní bloky a bloky od jiných autorů si zachovávají vlastní způsob načítání. Canvas jejich soubory nepřebírá a kvůli nim nebojuje s WordPressem.
Počítají se i předlohy
Hlavičky, patičky, titulky stránek a slidery jsou také bloky, takže stránka s jednoduchou hlavičkou nenačítá kód mega menu.
Nic k nákupu
Podmíněné načítání není prémiová funkce ani doplněk. Takto knihovna funguje na každém tarifu i při vypršelé licenci.
35 optimalizací seskupených podle toho, na co působí
Žádná z těchto věcí není magie a žádná není skrytá. Každá provede konkrétní, ověřitelnou úpravu stránky, kterou WordPress odešle.
Načítání 7
Zabraňte tomu, aby CSS a JavaScript blokovaly první vykreslení, a předem načtěte další stránku.
- Asynchronní načítání nekritických stylů
- Odložit načítání nekritického JavaScriptu
- Odložit JavaScript až do první interakce
- Předem načíst největší obrázek nad záhybem
- Předběžné připojení ke zdrojům, které stránka použije
- DNS prefetch pro hostitele třetích stran
- Předběžné načítání, takže se další stránka načte dřív, než na ni kliknete
Písma 3
Text zůstane čitelný, zatímco se ještě načítá webové písmo, a fonty Google nemusí vyžadovat žádný požadavek na třetí stranu.
- Přidejte do svých webových písem font-display swap
- Předem načtěte písma, která první obrazovka potřebuje
- Načítat písma Google z vlastního serveru
Média 6
Obrázky bývají na většině stránek nejtěžší součástí a zároveň se s nimi nejsnáze udělá chyba.
- Líné načítání obrázků mimo viditelnou část stránky
- Líné načítání iframů a vložených médií
- Nastavte kvalitu JPEG, kterou WordPress generuje
- Omezit maximální šířku nahrávaných obrázků
- Ovládejte responzivní sady obrázků, které WordPress vytváří
- Určete, které velikosti obrázků se vůbec generují
Úklid 8
WordPress přináší funkce, jejichž režii nese každý web, ale využívá je jen málo webů.
- Odstranit parametry dotazu ze statických zdrojů
- Vypnout skripty a styly pro emoji
- Vypněte zjišťování oEmbed a skript pro vkládání
- Vypnout Dashicons na frontendu
- Vypnout XML-RPC
- Vypnout RSS kanály
- Odebrat jQuery Migrate
- Vypnout vlastní pingbacky
Databáze 5
Administrační část pomalého webu: revize, automatická ukládání a Heartbeat, který nikdy nepřestane.
- Omezte počet revizí, které příspěvek uchovává
- Nastavte interval automatického ukládání
- Omezit nebo vypnout heartbeat v administraci
- Čištění revizí, dočasných dat a spamu z databáze
- Omezit REST API jen na přihlášené uživatele
WooCommerce 5
Obchod načítá své skripty na každé stránce webu, včetně těch, které nic neprodávají.
- Odebrat JavaScript WooCommerce na stránkách bez obsahu obchodu
- Vypněte sledování atribuce objednávek
- Zastavit dotazování skriptu cart fragments na každé stránce
- Vyřazení knihovny pro kontrolu síly hesla mimo stránky účtu
- Vyřaďte přibalenou knihovnu Select2 mimo pokladnu
Přepisování pro síť CDN 1
Nasměrujte stylopisy, skripty, obrázky a písma na síť pro doručování obsahu, za kterou už platíte, tak že při vykreslování stránky přepíšete jejich adresy. Canvas vám žádnou síť neprodává a váš provoz neprokládá přes naše servery.
Celkem jde o 35 přepínačů, a pět přepínačů pro WooCommerce se zobrazí jen tehdy, když je WooCommerce aktivní. Více o integraci s obchodem.
Každá z nich je přepínač a výchozí hodnoty jsou opatrné
Canvas zapíná to, co je bezpečné pro jakýkoli web, a zbytek nechává na vás, přičemž důvod je napsán přímo vedle ovládacího prvku. Jedno nastavení, které je obvykle špatný nápad, to v panelu přímo říká, tedy v místě, kde právě rozhodujete.
Základy SEO a přístupnosti
Rychle načtená stránka, kterou nelze číst, procházet vyhledávači ani ovládat klávesnicí, není hotová. Všechno to je přímo v šabloně a v každém tarifu, bez jakýchkoli úrovní skrytých za upgradem.
Metadata z vašeho obsahu
Titulky, popisy, sociální karty, kanonické URL, pravidla robots a mapa webu, vše odvozené ze stránky tak, jak se vykresluje. Neexistuje žádná druhá kopie vašeho obsahu, kterou by bylo třeba aktualizovat.
16 typů schémat
Organization, WebSite, WebPage, Person, drobečková navigace, Product, Brand, Offer, recenze a hodnocení, adresa, geografické souřadnice, otevírací doba a vyhledávání na webu, vydávané tam, kde jsou relevantní.
Sémantické orientační prvky
Orientační prvky pro hlavičku, navigaci, hlavní obsah a patičku, odkaz pro přeskočení na obsah, nadpisy ve správném pořadí a viditelné zaměření u všeho, na co lze přejít.
Menu ovládaná klávesnicí
Menu, mega menu, boční panely a modální okna se otevírají, posouvají a zavírají pomocí klávesnice a animace respektují nastavení omezeného pohybu, které návštěvník zvolil.
Přístupnost, zabezpečení a export dat nikdy nejsou prémiové funkce. Zůstávají dostupné i s vypršenou licencí, protože web, který přestane být použitelný, je problém podpory, nikdy ne rozhodnutí o licencování.
Jak to ověřujeme
Tvrdit něco o rychlosti a přístupnosti je snadné a ověřit to je stejně snadné. Ty naše ověřujeme, a tady je, jak na to.
Stránky se porovnávají s jejich návrhy v reálném prohlížeči
Každá stránka dema se vykreslí v prohlížeči a porovná s návrhem, ze kterého vychází: výška dokumentu, šířky sekcí, vypočtené odsazení a vše, co řídí JavaScript, se měří až poté, co se spustí, nikdy ne při prvním vykreslení.
Tento web se kontroluje ve třech šířkách
Každá stránka zde je prověřena nástrojem axe-core podle WCAG 2.1, úrovní A a AA, při šířkách 1 440 pixelů, 1 024 pixelů a 390 pixelů, spolu s kontrolami, které axe neprovádí: jeden h1, úrovně nadpisů bez přeskakování, čtyři orientační body, funkční odkaz pro přeskočení obsahu, žádné vodorovné přetečení, žádný text menší než 12 pixelů, odkazy s popisným textem a dotykové cíle o velikosti alespoň 24 pixelů.
Co Canvas potřebuje ke spuštění
WordPress
Canvas je postaven na editoru bloků, takže potřebuje WordPress s Editorem webu. Verze 7.1 nebo novější.
PHP
PHP 7.4 nebo novější. Aktuální verze PHP je většině webů nejlevnějším zrychlením.
Testováno až do verze
Canvas je testován na WordPressu 7.1 a při každém vydání WordPressu vychází aktualizace.
O výkonu
Včetně otázky, kterou dostáváme nejčastěji, a proto na této stránce nejsou žádná skóre.
Potřebuji ještě plugin pro cachování?
Pravděpodobně ano, a to je upřímná odpověď. Canvas ovládá to, co ovládá šablona a WordPress: které zdroje se na stránce načtou, jak se chovají písma a obrázky a kolik práce provádí databáze. Cachování stránek, cachování objektů a doručování z edge sítě patří hostingu nebo cachovacímu pluginu. Jsou to různé úkoly, takže běžné je používat obojí.
Rozbije zapnutí těchto funkcí můj web?
Každý přepínač lze vrátit zpět a ty, které se nejspíš střetnou s jiným pluginem, jsou ve výchozím stavu vypnuté. Každý přepínač vysvětluje, co dělá a kdy ho nechat být, a nastavení, které je skutečně rizikové, to v panelu uvádí. Zapínejte je jeden po druhém a po každém zapnutí znovu načtěte web.
Musím nastavovat načítání assetů pro každý blok zvlášť?
Ne, není co hledat ani co zapínat. Takto funguje knihovna bloků. Každý blok deklaruje CSS a JavaScript, které potřebuje, a stránka načte sjednocení toho, co skutečně vykreslila.
Jsou dema optimalizovaná?
Import dema pro celý web převezme možnosti šablony dema a patří k nim i přepínače výkonu, takže dema začíná s nastaveními, se kterými bylo vytvořeno a ověřeno. Kteroukoli z nich můžete později změnit.
Proč tato stránka nezveřejňuje skóre rychlosti?
Protože skóre ze syntetického testu na našem hardwaru vám nic neřekne o vašem hostingu, pluginech, obrázcích ani návštěvnících. Co publikujeme, je přesně to, co každá optimalizace dělá, takže ji zapnete a změříte si vlastní web na vlastní infrastruktuře.
Rychlý web, který stále můžete upravovat
Všechny tarify obsahují stejnou knihovnu bloků, 35 stejných optimalizací a stejné podmíněné načítání assetů. Neexistuje žádná výkonnostní úroveň.