Google Pagespeed optymizacja dla witryny negotiations.com
W połowie grudnia 2017 roku skontaktował się ze mną Calum Coburn z «Negotiation Experts» - firmy międzynarodowej prowadzącej szkolenia pracowników. Z jej usług korzystają tak duże firmy jak British Petroleum, Shell, Mars, Hilton, Unilever, Sisco, Xerox i inne. Bardziej szczegółowa lista firm znajduje się tutaj. «Negotiation Experts» prowadzi biura w Sydney, Nowym Jorku i Londynie.
Calum Coburn koordynuje rozwój strony internetowej negotiations.com. Dla nich wydaje się być niezwykle ważne posiadanie dobrego SEO, w tym i w Google PageSpeed Insights.
Ich strona internetowa to klasyczna witryna WordPress z zakupionym motywem «ElegantThemes Divi». Google PageSpeed Insights miał wiele uwag odnośnie ich witryny. Kompletną listę tych uwag oraz punkty można zobaczyć na poniższych zdjęciach:
Wersja mobilna, do optymalizacji
Wersja desktopowa, do optymalizacji
W sumie średnio 35 punktów za wersję mobilną i 45 punktów za wersję desktopową.
Poczyniłem ogromny wysiłek dla rozwiązania wszystkich wymienionych problemów co zajęło mi w sumie jakieś 3 tygodni. Ale teraz w efekcie - strona posiada 86 punktów za wersję mobilną i 93 punkty za wersję desktopową (na 100 możliwych).
Po optymalizacji:
Strona artykułu. Wersja mobilna
Strona główna. Wersja desktopowa
Strona artykułu. Wersja desktopowa
Najtrudniejszą częścią tej pracy było kształtowanie First Screen CSS Cache. Jest to zestaw stylów CSS, które odpowiadają za wygląd górnej części strony, bez przewijania. W sumie witryna ma 6500 stylów CSS. Używając mojego specjalnego skryptu, wybrałem z nich 650 stylów CSS i umieściłem je w nagłówku HTML. Właśnie to jest First Screen CSS Cache. Wszystkie inne style są teraz ładowane na końcu kodu HTML. Na tym polega rozwiązanie problemu "Eliminate render-blocking CSS". Występowanie First Screen CSS Cache sprawia, że strona wygląda normalnie podczas ładowania, dopóki główne pliki stylów nie zostaną załadowane na końcu kodu HTML.
Tym razem nie doprowadziłem jQuery do końca HTML, ponieważ motyw strony „Divi” opiera się na jQuery. Wynik wydawał się już doskonały. Można go poprawić o kolejne 3 punkty, kupiwszy szybszy serwer i co za tym idzie - skrócić czas odpowiedzi serwera do <0.2 sekundy.
Oto recenzja mojej pracy opublikowana przez Caluma Coburna na upwork.com :
«Ihor delivered as promised. Ihor transformed our slow pagespeed to 93 in the US, and 86 here in Sydney. Ihor is highly communicative, and he worked well with my team. While it took longer, I'm very happy with the result»
«Igor dotrzymał obietnic. Przyspieszyło to nasz pagespeed do 93 punktów w USA i do 86 punktów w Sydney. Igor jest bardzo towarzyski i skutecznie współpracował z moim zespołem. Mimo, że praca trwała dłużej, jestem bardzo zadowolony z efektu»
Wkrótce potem ponownie skonfigurowałem CloudFlare CDN i zwiększyłem prędkość witryny do 93 punktów wszędzie, w tym w Sydney. Po zakończeniu tego projektu Calum zaproponował mi dalszą współpracę stałą w dziedzinie pracy nad Jego witrynami.
