Tenhle článek je schválně přeplněný. Má třináct obrázků, dvě galerie, tabulku, ukázky kódu i poznámky pod čarou, tedy všechno, co může běžný článek zatížit. Slouží jako měřítko: když rychle načte tenhle, načte rychle i ty ostatní.
Běžný článek na webu s Mundana Reworked má jeden nebo dva obrázky a pár odstavců. Měřit rychlost jen na takovém by bylo pohodlné, ale moc by to neřeklo. Proto je tu tenhle, kde se sejde všechno najednou. Každá část zároveň vysvětluje, co se na ní zkouší, takže se dá číst i jako průvodce tím, jak šablona s obsahem zachází.
Obsah
Co se tu měří
Při každé návštěvě musí prohlížeč stáhnout stránku, styly, písmo a obrázky. Statický webWeb složený z hotových souborů. Server je při návštěvě jen pošle, nic nepočítá a nic se neptá databáze, proto je rychlý a skoro nemá co napadnout.Podrobnosti o hesle Statický web, otevře se v novém okně má výhodu, že server nic nepočítá a jen posílá hotové soubory. O tom, jak rychle se stránka zobrazí, pak rozhoduje hlavně to, kolik toho prohlížeč stahuje a v jakém pořadí.
| Co je v článku | Kolik | Co se na tom ověřuje |
|---|---|---|
| Úvodní obrázek | 1 | Načte se hned a přednostně |
| Samostatné obrázky | 2 | Zmenšení na šířku sloupce |
| Galerie | 2 (4 a 6 obrázků) | Malé náhledy místo plných obrázků |
| Ukázky kódu | 3 | Obarvení při sestavení webu |
| Poznámky pod čarou | 2 | Blok poznámek na konci článku |
Měří se v PageSpeed Insights1, na telefonu i na počítači. Telefon je přísnější, protože nástroj simuluje pomalé připojení a slabší procesor.
Velký obrázek hned na začátku
První obrázek v textu je schválně jeden z největších, které šablona má. Originál je široký 2210 bodů, ale do sloupce článku se nikdy nevejde víc než zhruba 750. Prohlížeč proto dostane nabídku několika zmenšenin a stáhne si tu, která odpovídá šířce displeje.
Zmenšeniny nikdo nevyrábí ručně. Šablona je připraví při sestavení webu a do repozitáře se nahrávají jen originály. Kdo píše článek v MarkdownJednoduchý způsob zápisu textu, ve kterém se nadpisy, odkazy nebo seznamy píšou obyčejnými znaky. Generátor z něj udělá HTML.Podrobnosti o hesle Markdown, otevře se v novém okně, nemusí o velikostech vůbec přemýšlet.
Proč se nenačítá všechno najednou
Obrázky, které při otevření stránky nejsou vidět, se stahují až ve chvíli, kdy se k nim čtenář přiblíží. Tomu se říká líné načítání. Výjimkou je jen úvodní obrázek, protože ten je vidět hned a prohlížeč ho naopak dostane s přednostním právem.
První galerie: čtyři obrázky
Obrázky napsané hned za sebou se složí do mřížky. Čtyři obrázky dají dva řádky po dvou. Každý náhled je malý, a tak si prohlížeč stáhne malou zmenšeninu, ne obrázek na celou šířku sloupce.
Kliknutím na kterýkoli náhled se otevře prohlížeč obrázků. Listovat se v něm dá přes všechny obrázky článku, nejen přes jednu galerii, a popisky se ukážou až tam.
Kód obarvený předem
Ukázky kódu se obarví už při sestavení webu. Prohlížeč tedy nemusí stahovat žádnou knihovnu na zvýrazňování syntaxe a nic se na stránce nespouští. Tady jsou tři ukázky ve třech jazycích.
Hlavička článku v YAML:
layout: post
title: "Článek plný obrázků"
image: /assets/images/1.jpg
Obrázek v HTML, zjednodušeně tak, jak ho šablona vydá:
<img src="/assets/images/3.jpg" alt="Košík s vajíčky"
loading="lazy" decoding="async" width="2210" height="1473">
Spuštění měření z repozitáře v PowerShellu:
cd tests
.\Invoke-PageSpeedReport.ps1
Rychlý web nevznikne tak, že se na konci něco zrychlí. Vznikne tak, že se do něj zbytečnosti vůbec nedostanou.
Obrázek hluboko pod okrajem
Až sem většina čtenářů na telefonu doroluje teprve po chvíli. Následující obrázek se proto při otevření stránky vůbec nestahuje. Prohlížeč si o něj řekne až ve chvíli, kdy se k němu čtenář přiblíží.
Rozměry má každý obrázek zapsané předem. Prohlížeč díky tomu ví, kolik místa mu má nechat, a text pod ním neposkočí, když se obrázek dotáhne. Tomuhle skákání se říká posun rozvržení a PageSpeed Insights ho přísně hlídá.2
Druhá galerie: šest obrázků
Šest obrázků dá tři řádky po dvou. Je to nejtěžší místo článku: šest souborů, které se načtou až při rolování, každý ve velikosti náhledu.
Kdo chce vidět, jak se obrázky chovají samy o sobě, bez ostatního obsahu, najde to v článku Ukázka práce s obrázky.
Co z toho plyne
Pokud tahle stránka v měření dopadne dobře, pro běžný článek to platí tím spíš. Pokud ne, je tu dost obsahu na to, aby se dalo najít, co ji brzdí. Výsledky měření se proto ukládají do souborů a dají se porovnat verzi od verze.
Odkazy
Reference
-
PageSpeed Insights (anglicky), nástroj Googlu na měření rychlosti a přístupnosti webu ↑
-
Měří se jako Cumulative Layout Shift, tedy součet všech posunů obsahu během načítání stránky ↑
