Předností nástroje PageSpeed Insights je, že zároveň vyjede seznam doporučení, která by měla vést ke zvýšení výkonu daného webu. Tento seznam byl v tomto případě nehezky dlouhý.
Nejlepším řešením se tak jevilo vytvoření frontendu webu úplně znovu od nuly. Mým úkolem bylo navrhnout šablony pro homepage a produktové stránky.
Účelem webu calorie-charts.info je prezentace nutričních hodnot všech možných druhů potravin a nápojů. Jeho hlavní součástí jsou koláčové nebo spíše prstencové grafy. Pro jejich dynamické vykreslování se využívá javascriptová knihovna charts.js.
Můj klient zvažoval, že by se nový web mohl postavit jako AMP neboli Accelerated Mobile Pages. Jak se však oprávněně obával, problémem by mohlo být vykreslování grafů. Custom javascript totiž není v AMP povolen a to se týká i knihoven třetích stran jako je charts.js.
Jelikož jsme si nebyli jisti výsledkem, s klientem jsme se dohodli, že AMP verze bude pouze pro mobilní zařízení, kde se případně grafy oželí. Pro desktopy pak bude non-AMP verze s plnou podporou grafů.
Grafy se nakonec do AMP povedlo dát skrze <amp-iframe>. Je to sice poněkud krkolomné a jsou tam jistá omezení, v našem případě však toto řešení šlo nasadit tak, aby bylo plně funkční a prošlo AMP validací.
Zajímavé je, že ve finále obě šablony jak AMP tak non-AMP prošly testem PSI s naprosto stejným skóre 86 pro mobily a 99 pro desktopy, jak je možné vidět na následujícím videu.
To jen dokládá, že k urychlení webu není nutně potřeba AMP. Stejně dobrých výsledků lze dosáhnout pouhou optimalizací kódu CSS, JavaScript, HTML a v neposlední řadě také úpravou velikosti obrázků.
Když jsem testovala PSI později po zapracování mých šablon na ostrý web, tak mi skóre nevyšlo až tak dobře jako u mých šablon. Předpokládám, že je to právě tím, že nebyla ještě optimalizovaná velikost obrázků tak, jak jsem doporučovala. Ostré stránky navíc obsahují reklamní bannery, které na rychlosti také nepřidají.