Jak jsem dosáhnul 100% v PageSpeed Insights

Webová stránka IsMyWebsiteWellDone je ukázkou, jak bych si představoval ideální výsledek své práce. Nejde jenom o výsledek testu, ale také o ideální responsivitu a dodržení všech pravidel akcesibility, zároveň s příjemným uživatelským prostředím WordPressu, který mohu vysvětlit klientovi během 5 minut.

Responsibility

Jak můžete vyzkoušet, web se perfektně zobrazuje na jakékoliv šířce displeje. A upravují se nejenom velikosti fontů, ale i paddingy a marginy, včetně všech sloupců. A nejvíce neuvěřitelné na tom je, že v celém CSS není jediná zmínka o media-query.

Hlavní inspirací pro CSS systém je pro mě Andy Bell a jeho Progressive enhancement. V jednoduchosti jde o to, že web bude alespoň nějakým způsobem fungovat i na tom nejhorším a nejpomalejším zařízení a čím lepší zařízení bude, tím lepší bude výsledek. Výstižně řečeno Andym: “Be the browser’s mentor, not its micromanager.”

Rychlost

Největší zásluhu na rychlosti má starter theme Flynt. Absolutně fantastický WP starter theme, který využívá metody JS islands / Partial Hydration, a tedy načítá javasripty pouze, pokud jsou třeba. Například javascript pro mobilní menu se načte jen na mobilech, js pro slider se načte jen, pokud uživatel slider reálně vidí.

Současně theme kombinuje ACF plugin, pro jednoduché vytváření bloků pro stránky a Gutenberg editor pro příspěvky. Mohu tedy web odevzdat klientovi, bez jakékoliv obavy, že by šlo nějak celý web rozhodit.

Akcesibilita

V poslední době jsem se začal více zajímat o tuto často opomíjenou stránku tvorby webových aplikací a vlastně se trochu stydím, že jsem tento aspekt nezačal řešit už dávno. Je to dle mého absolutně zásadní a paradoxně to má daleký přesah za hranice uživatalského prostředí pro handicapované, jelikož obecná pravidla akcesibility jsou velmi často aplikovatelná i pro celkové UX.

Web, kde jsem si vyzkoušel svojí novou workflow
https://ismywebsitewelldone.eu/