Optimalizace webu a PWA

Začátkem roku jsem provedl řadu aktualizací a úprav redakčního systému webdilna | com. Změny se týkaly především front-end kódu a optimalizace pro Google Lighthouse.

Asi největší částí optimalizace a doplnění kódu bylo z hlediska tzv. Progresivních Webových Aplikací (PWA). Někdo píše, že je to hit roku 2020 ale byli zde již dříve, jen jim nikdo nevěnoval pozornost. Současně jsem aktualizoval všechny používané knihovny v systému a provedl aktualizaci na novější PHP7 a upravil nastavení pro striktní nastavení Maria DB.

Jelikož chci, aby každý web vytvořený na webdílně, měl již v samotném základu vysoké hodnocení v Google Lighthouse (což kontroluji při spuštění nového webu), doplnil jsem kód generovaný redakčním systémem o všechny náležitosti pro PWA. Což je pro mě už takový standard, kdy každý web má validní HTML kód, manifest, je dostupný přes https atd.

Podle vývojářů mají Progresive Web App tyto charakteristiky: (zdroj: wikipedia)

• Progresivní – pracuje pro každého uživatele bez ohledu na použitý prohlížeč nebo operační systém.
  (všechny dokončené weby kontroluji na několika prohlížečích a systémech)
• Responzivní – přizpůsobí se jakémukoli zařízení, kde se bude aplikace používat, tedy PC, mobilní telefon nebo tablet.
• Nezávislé na připojení – Service workers umožňují práci offline.
  (v případě webdílny se nabídne jednoduchá stránečka informující o tom, že je uživatel offline.)
• App-Like – uživatel má při interakci pocit, jako by používal nativní aplikaci.
  (nedovedu posoudit, převážně to tvořím stále jako webovou stránku)
• Aktuální
• Bezpečné – obsluha pouze pomocí HTTPS.
  (celý redakční systém generuje validní HTML, bez mixed content)
• Dohledatelné – jsou identifikovatelné jako "aplikace" díky manifestu W3C a rozsahu registrace poskytovatelů služeb, díky kterým je vyhledávače mohou nalézt.
• Instalovatelné – bez stahování z App Store nebo Google Play.
  (každý nově web postavený na webdílně, si lze přidat na plochu mobilního telefonu)
• Dostupné – snadno se sdílejí prostřednictvím adresy URL.

Jedna z prvních realizací nových webových stránek, po této optimalizaci, je například web HS-Interiery. Stránky mají vysoké hodnocení v Lighthouse. Jedinou položkou s nižším hodnocením je tzv. Performace, toto položku však omezuje využití Google Analytics, případně jiných externích služeb. Také záleží na rychlosti webhostingu.

U přístupnosti (Accessbility), zase záleží na velikosti, či kontrastním poměru jednotlivých prvků stránky. Zjednodušeně řešeno, černobílý web bude mít nejlepší hodnocení, a to celkem bez námahy. Problém nastává, když grafika webu používá např. jemné odstíny, barvy nebo prvky, které nejsou v dostatečně kontrastním poměru, vůči sobě nebo pozadí. V tom případě se musí jednotlivé prvky ručně doladit nebo najít kompromisní řešení. Částečně se tomu dá předejít při návrhu grafiky. Pokud máte nějaké „korporátní barvy“, které mohou být sice čitelné, ale může se stát, že nejsou dostatečně kontrastní i vůči bílému pozadí (příkladem může být světlejší odstíny žluté, modré pod.).

Optimalizaci pro Google Lighthouse, jsem prováděl kvůli e-shopu, který může být součástí webdílny. Především optimalizaci jednotlivých stránek produktů. Jak jsem dříve psal, kód webdílny má zakomponované Rich Snippets od Google, a to především pro produkty či blogové příspěvky, které lze v systému tvořit.

Tip na odpoledne: Na mobilním telefonu si můžete zkusit otevřít tento web v prohlížeči (Android / Chrome – iPhone / Safari) a vybrat v menu prohlížeče - přidat na plochu - vašeho telefonu. Po přidání, zkuste ikonku spustit. Stránky se vám otevřou podobně jako nainstalovaná aplikace v telefonu.

Sečteno podtrženo, jsem věnoval hodně času optimalizaci celého systému webdilna | com tak, aby mnou dodané weby byli zase o kus dál před konkurencí. Každý web je tvořený ručně. Cílem není naklikat stránky a neřešit optimalizaci nebo validnost kódu. Tohle všechno byste měli chtít i od svého dodavatele webu. Máte to na svém webu v pořádku?