Poniżej przedstawiamy wyniki sklepu hiphopshop.pl przed i po optymalizacji szybkości działania. W przypadku hiphopshop.pl udało nam się uzyskać 15-krotny krótszy, średni czas operacji na bazie danych podczas przeglądania sklepu przez odwiedzających.
Największym problemem sklepu Hiphopshop.pl był szablon grafiki (html+css+js). Szablon został zakupiony przez hiphopshop.pl jako "gotowiec", z jednej z najbardziej popularnych stron z gotowymi szablonami sklepów internetowych. Niestety jakość kodowania szablonu była poniżej jakiejkolwiek krytyki. Zachowaliśmy grafikę, jednak kodowanie zostało wykonane od zera w technologii react. W wersji mobilnej dodatkowo wprowadziliśmy szereg ulepszeń, które poprawiły user expirience.
Dzięki tym zabiegom ponieśliśmy ocenę z 3 do 72 w wersji mobilnej.
Przykład hiphopshop.pl daje do myślenia wszystkim osobom, które zamierzają kupić "gotową" grafikę, z portali, które przejadą masowo swoje „wyroby”. O ile sama grafika może być ładna, to jej kod już nie koniecznie. Przed zakupem gotowej grafiki sprawdźmy ją sami używając narzędzi typu google insights, lighthouse. Jeśli uzyskujemy niskie wyniki to musimy liczyć się z tym, ze grafika powinna zostać zakodowana ponownie przez profesjonalistę.
|
Przed optymalizacją |
Po optymalizacji |
|
| Średni, sumaryczny czas wykonywania wszystkich zapytań SQL przy wywołaniu losowych podstron sklepu. |
~ 0.12 s | ~ 0.008 s |
| średni czas ładowania się DOM | ~ 1 s | 0.0 s |
| średni czas ładowania strony | ~ 1.5 s | ~ 0.2 s |
| developers.google.com Pierwsze wyrenderowanie treści |
~ 8,4 | 2 s |
| developers.google.com |
3%
Mobile 15%
Desktop |
72%
Mobile 100%
Desktop |
| * Lighthouse performance - Simulated Slow 4g, 4x CUP slowdown |
5%
Mobile 13%
Desktop |
75%
Mobile 80%
Desktop |
* Lighthouse - open sourcowy projekt, który umożliwia automatyczne testowanie witryn pod kątem dostępności, progresywności oraz szybkości działania.
Więcej informacji: https://developers.google.com/web/tools/lighthouse/