Obal alba má 3000 pixelů na šířku, v článku se ale zobrazí sotva na třetině. Pokud se i tak načítá originál, čtenář stahuje data, která na obrazovce neuvidí. U hudebního blogu plného obalů, koncertních fotografií a vložených přehrávačů je to dobré místo, kde se zrychlováním začít.
Nejdřív zjistěte, co stránku brzdí
Rychlost není jen čas, za který prohlížeč dokončí všechny požadavky. Záleží na tom, kdy se objeví hlavní obsah, zda stránka reaguje na klepnutí a jestli při načítání neposkakují odstavce a tlačítka. Nadpis se může ukázat rychle, ale čtenáři to moc nepomůže, když menu ještě několik sekund nereaguje.
Otestujte konkrétní adresy, ne jen titulní stránku: dlouhý článek s fotografiemi, archivní výpis i stránku s vloženým přehrávačem. Nástroje pro měření výkonu ukážou velikost stažených souborů, pořadí požadavků a prvky, které zdržují vykreslení. Zaměřte se také na mobilní zobrazení a pomalejší připojení. Jediný výsledek berte jako vodítko; až opakovaná měření napoví, zda úprava skutečně pomohla.
Obrázky: největší úspora bez ztráty obsahu
Velikost souboru přizpůsobte tomu, jak se obrázek na stránce zobrazuje. Má-li fotografie v článku na běžném notebooku šířku 900 pixelů, nemusí každý návštěvník stahovat originál široký několik tisíc pixelů. Pro displeje s vyšší hustotou pixelů se hodí i větší varianta. Atributy srcset a sizes pak prohlížeči pomohou vybrat soubor podle prostoru, který má obrázek zabrat.
Fotografie a složitější grafiku zkuste ukládat jako WebP nebo AVIF, pokud je váš publikační systém dokáže bezpečně vytvářet a podávat. U obalu s drobným písmem po kompresi zkontrolujte čitelnost. Má-li grafika průhlednost nebo ostré hrany, porovnejte výsledek s PNG. Rozhoduje konkrétní obrázek, ne jediné pravidlo pro celý web.
Obrázky hluboko v článku se mohou začít načítat až ve chvíli, kdy se k nim čtenář přiblíží. U hlavní fotografie nahoře odložené načítání obvykle smysl nemá: právě na ni čtenář čeká. Všem obrázkům nastavte rozměry nebo poměr stran, aby prohlížeč vyhradil místo ještě před stažením souboru. Text pak při načítání neodskočí pod prstem.
Co se načítá ještě před článkem
Šablona, styly a skripty
Šablona může na každou stránku přidávat funkce, které se používají jen někde: animace, galerii, formulář nebo složité menu. Podívejte se, které skripty a styly se stahují u běžného článku. Nepotřebné doplňky odstraňte, ostatní načítejte jen tam, kde mají práci. To často ušetří víc než kosmetické zásahy, třeba zkrácení několika vět textu.
JavaScript, který není potřeba pro první zobrazení obsahu, lze načíst později. Po změně ale vyzkoušejte navigaci, přehrávač, vyhledávání i ovládání na mobilu. Zmenšení souborů odstraněním nadbytečných znaků omezí přenos dat, nenahradí však odstranění kódu, který stránka vůbec nepotřebuje. Upravujte vždy jednu skupinu souborů; když se něco pokazí, snáz najdete příčinu.
Písma bez zbytečného čekání
Vlastní písmo může znamenat několik souborů pro různé řezy a znakové sady. Na českém webu ověřte, že obsahuje diakritiku, a nenačítejte řezy, které šablona nepoužívá. Vhodné nastavení dovolí prohlížeči zobrazit text náhradním písmem, než se vlastní soubor stáhne. Zkontrolujte také, zda se po výměně písma výrazně nezmění zalomení nadpisů.
Přehrávače a další vložený obsah
Vložený přehrávač nebo video může kontaktovat cizí servery dávno předtím, než k němu čtenář dojde. V článku o nahrávce má být ukázka snadno dostupná, nemusí však zatěžovat hned úvodní obrazovku. Pokud to použitý systém umožňuje, načtěte ji až při přiblížení k danému místu, případně po kliknutí na jasně popsaný náhled. Ověřte, že přehrávač půjde ovládat i klávesnicí a že je z náhledu patrné, že se dá spustit.
Podobně prověřte měřicí, reklamní a sociální skripty. Každý může přidat další síťové požadavky. U každé služby se zeptejte, zda její výstup používáte natolik, aby se vyplatilo načítat ji na každé stránce. Odstranění nepotřebného vloženého prvku pomůže i přehlednosti článku.
Server, mezipaměť a přenos souborů
Čeká-li prohlížeč dlouho už na první odpověď serveru, komprese fotografií to nespraví. Na vině může být přetížený hosting, pomalá databáze nebo publikační systém, který při každé návštěvě sestavuje stránku znovu. U převážně statického kulturního blogu pomůže ukládat hotové stránky do mezipaměti. Po vydání nebo úpravě článku se však musí obnovit, jinak čtenáři uvidí starou verzi.
Prohlížeč může uchovávat také soubory, které se mění zřídka, například obrázky a styly, a při další návštěvě je nemusí znovu stahovat. Serverová komprese obvykle zmenší přenos textových souborů; ověřte ji v nastavení hostingu nebo ve výsledcích testu. Distribuční síť souborů může pomoci návštěvníkům vzdáleným od serveru. Pro menší web s místním publikem ale nemusí být první volbou.
Pořadí práce, které šetří čas
- Uložte výchozí měření jedné typické mobilní stránky. Poznamenejte si největší soubory a nejpomalejší požadavky.
- Opravte zjevně nadměrné obrázky a zkontrolujte je na mobilu i větší obrazovce.
- Projděte doplňky a vložený obsah; vypněte to, co stránka nepotřebuje k zobrazení a ovládání.
- Nastavte mezipaměť podle možností hostingu a ověřte, že se po publikaci obsah aktualizuje.
- Zopakujte stejné měření a vyzkoušejte stránku ručně na telefonu, včetně menu, obrázků a přehrávače.
U článku s deseti koncertními fotografiemi začněte přehledem síťových požadavků: seřaďte stažené obrázky podle velikosti a otevřete ten největší. Zobrazuje se na šířku přibližně 700 pixelů, ale server posílá několikatisícový originál? Připravte menší varianty. Pak znovu porovnejte velikost přenosu a zkontrolujte, zda na fotografii zůstaly čitelné důležité detaily.
