Jak uzyskać 100 punktów w Twojej witrynie Joomla?

Jak uzyskać bardzo wysoki wynik 100/100 w narzędziu Google PageSpeed Insights? 

 Jest to bardzo proste, wymaga spełnienia przynajmniej dwóch warunków:

1. Optymalizacji Twojej strony internetowej - w tym celu użyjemy kilku dodatków które nam w tym pomogą.
2. Bardzo dobrego serwera hostingowego - w celu uzyskania jak najkrótszego czasu odpowiedzi serwera

Cel jest prosty. Stawiamy prostą stronę opartą na Joomla!. Optymalizujemy ją w jak najszybszy sposób by po analizie przez Google PageSpeed Insights osiągnąć wynik 100/100 punktów. 

Ogólne informacje

Co daje nam wykonanie testu Google PageSpeed? 
Dla samej strony internetowej wykonanie testu daje nam ogólną informację o szybkości wczytywania się strony i jej użyteczności (mobile) dla użytkowników. Szybkość strony wpływa przede wszystkim na jej odbiór wśród użytkowników przeglądających zawartość tej witryny. Im dłużej strona internetowa jest wczytywana tym większe prawdopodobieństwo rezygnacji użytkownika z dalszego przeglądania innych podstron, co za tym idzie mniejsza szansa na sprzedaż naszego produkty albo inną oczekiwana konwersję. Nieoficjalnie mówi się też że wysoki wynik tego testu ma realny wpływ na pozycję witryny w wyszukiwarce Google. Jednak nikt nie jest wstanie określić jak duży i na ile jest to prawdą. Możemy jednak jednoznacznie stwierdzić (samo Google oficjalnie o tym informowało) iż negatywny wpływ na pozycję ma brak strony responsywnej - nie dostosowanej do urządzeń mobilnych.

Na wynik testu w Google PageSpeed Insights mają wpływ rożne elementy strony, na przykład:

• Optymalizacja obrazów na stronie internetowej
• Pamieć podręczna przeglądarki
• Czas odpowiedzi serwera
• Kompaktowość kodu CSS, JS i HTML
• Blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

Wszystkie powyższe elementy (i nie tylko) mają realny wpływ na wynik testu. Mówi się że wynik 85/100 jest już dobrym wynikiem który pozytywnie wpływa na pozycjonowanie. 

Na naszej stronie została zainstalowana najnowsza wersja Joomla! CMS w wersji 3.7.3 (najnowsza stabilna wersja na dzień 5 lipca 2017). Wykorzystany został standardowy szablon "Protostar", który został dostosowany - dostylowany według własnego uznania. Dodatkowo zostało zainstalowanych kilka dodatków które pomogą nam w dobrej optymalizacji naszej strony:

• JCHOptimize w wersji darmowej - istnieje możliwość skorzystania z wersja płatnej(JCHOptimize PRO), która pozwoli nam zrobic pewne rzeczy szybciej i automatycznie.
• Easy jQuery

1 etap – wybór hostingu i instalacja

Jednym z najczęstszych błędów po wykonaniu testu Google PageSpeed jest długi czas odpowiedzi serwera. Wpływ na ten parametr mamy z reguły przy wyborze hostingodawcy lub poprzez zmianę parametrów samego serwera hostingowego.

W naszym tescie został wybrany hostingodawca Smarthost.pl i został zakupiony pakiet hostingowy base-www w cenie 99pln/netto/rok.

Standardowe ustawienia takiego serwera to PHP5.6 i wyłączony moduł memcacheD który jest dostępny w wersji PHP7.1. W takim środowisku czysta zainstalowana Joomla, osiąga wynik w Google PageSpeed na poziomie 86/100 punktów dla komputerów oraz 76/100 punktów dla mobilnych urzadzeń.

 Jeśli chodzi o powyższy wynik jest on całkiem niezły dla komputerów, jednak nie jest on wystarczający dla potrzeb tego testu. A i test dla mobilnych urządzeń pozostawia trochę do życzenia…

Tak więc zacznijmy od odpowiedniego skonfigurowania serwera. Jak możecie się domyślać należy ustawić na serwerze wersję PHP7.1, która jest zdecydowanie wydajniejsza od starszych wersji PHP, nie wspominając już o tym, że jest po prostu o wiele bezpieczniejsza. Dodatkowo należy włączyć moduł PHP o nazwie memcacheD, który jest polecany przez smarthost.pl do buforowania pamięci podręcznej. W efekcie znacznie przyspiesza on pracę serwera na którym jest umiejscowiona strona internetowa. Po tym zabiegu test wyniku powinien wypaść trochę lepiej.

2 etap – wstępna optymalizacja

Joomla! sama w sobie posiada obsługę pamięci podręcznej, jeśli komponenty czy moduły zostały napisane przez developerów w sposób prawidłowy to nie są potrzebne żadne dodatkowe zabiegi zmian w kodzie i poprawiania. Większość tego procesu można po prostu skonfigurować w zapleczu administratora.

Zacznijmy od zmiany nazwy pliku htaccess.txt na .htaccess w głównym katalogu Joomla!. Zmiana nazwy pliku pozowli na uruchomienie prostych adresów w witrynie oraz umożliwi nam włączenie kompresji. Do tego standardowego pliku należy dopisać kilka linijek, które pozwolą rozwiązać problemy w Google PageSpeed związane z pamięcią podręczną  przeglądarki brakiem włączonej kompresji. Należy dopisać na samej górze .htaccess następujące linijki kodu:

Pierwsza część kodu jest odpowiedzialna za włączenie kompresji GZip a druga część za pamięć podręczną przeglądarki. Aby w pełni korzystać z dobrodziejstwa .htaccess w konfiguracji Joomla należy włączyć „Proste adresy” od razu można zastosować przepisywanie URL.

Następnie trzeba przejść w zapleczu strony do „Konfiguracja globalna” -> „Serwer” -> „Ogólne” i włączyć ustawienie „Kompresja stron”.  Po otworzeniu karty „Konfiguracja globalna” -> „System” -> „Pamięć podręczna” możemy skonfigurować korzystanie z pamięci podręcznej. Mamy do dyspozycji obsługę pamięci podręcznej opartej o pliki oraz o moduł PHP Memcached – trzeba zaznaczyć, że jest to opcja eksperymentalna.

Konfigurując ustawienia pamieci podręcznej, niezależnie czy obsługa będzie oparta o pliki czy o memcached należy ustawić na „tak” opcję „Platforma pamięci podręcznej” oraz wybrać ustawienie dla „Pamięć podręczna”. To ostatnie można włączyć w dwóch trybach „konserwatywny” i „progresywny” w zależności od potrzeb. W naszym przypadku zostało wybrane ustawienie „Włącz – poziom progresywny”. 

Należy również pamiętać o włączeniu pluginu pamieci podręcznej, który domyślnie w Joomla jest wyłączony. W zapleczu administratora przejdźmy do „Rozrzeszenia” -> „Dodatki” wyszukaj na liście dodatek o nazwie „System - Pamięć podręczna strony” który po pierwsze należy włączyć, a po drugie ustawić parametr „Pamięć przeglądarki” na włączoną opcje "Tak".

 3 etap – dodatkowe pluginy

Ten krok można wykonać całkowicie ręcznie, przeglądając kod plików szablonu i rozrzeszeń, przenosząc deklaracje plików JS i CSS z sekcji <head> do sekcji <body> zaraz przed znacznik </body>. Taka operacja wymaga minimum dobrej znajomości całego CMS Joomla!. Jedno jest pewne, bez programisty będzie to bardzo ciężkie… ale jest możliwość skorzystania z przedstawionych powyżej pluginów. Dzięki instalacji dodatków jesteśmy w stanie praktycznie wyklinać większość ustawień na których nam zależy.

JCHOptimize jest dodatkiem, który jest w stanie zrobić bardzo dużo. W wersji darmowej możemy przyspieszyć cachowanie, włączyć minifikację plików HTML, usprawnić kompresję plików CSS i JS. Wersja Pro dodatkowo pozwala włączyć wsparcie CDN czy optymalizować obrazy.

Easy jQuery pozwala na rozwiązanie konfliktów w skryptach JS. Skąd one się biorą? Instalując różne dodatkowe elementy w witrynie, możesz spotkać się z sytuacją w której konkretny moduł i konkretny komponent będą używały innych wersji jQuery. Nie będą używały reguły jQuery.noConflict() itd. Taka sytuacja najczęściej prowadzi do błędów w konsoli w przeglądarce i błędnego wczytywania się elementów strony.

 

 

Oba dodatki trzeba włączyć, i odpowiednio skonfigurować. Dla Easy jQuery jest to dość banalne, bo wystarczy wybrać wersję jQuery i ewentualnie włączyć dodatkową bibliotekę jQuery UI. Plugin sam będzie sugerował wybranie najnowszych wersji tych bibliotek. W przypadku JCHOptimize konfiguracja wymaga od użytkownika drobnego zainteresowania się tematem. Odpowiednie ustawienie JCHOptimize będzie zależało od ilości elementów, których używamy na stronie, od frameworka używanego szablonu i dodatkowych rozszerzeń. Każdy z tych elementów musi być napisany przez developera w sposób prawidłowy aby JCHOptimize był w stanie poradzić sobie z zastosowaniem wymaganych przez nas ustawień.

Powyżej możesz się zapoznać z najważniejszymi ustawieniami w zakresie optymalizacji. Połączenie CSS i JS do pojedynczych plików, wpływa pozytywnie na ilość wykonywanych requestów do serwera. Dzięki czemu Google PageSpeed nie będzie nas informowało o konieczności „Kompaktowości CSS i JS”. Włączenie tej opcji w pluginie jest banalne, poniżej są dodatkowe ustawienia umożliwiające minifikację samego HTMLa czy użycie „Try-catch” dla ewentualnych błędów skryptów JS.

Powyżej na screenie przedstawione zostały sugerowane ustawienia, w zależności od witryny musisz pamiętać o kilku dodatkowych elementach:

1. Każda witryna wymaga wstępnej analizy przed optymalizacją.
2. Jeśli korzystasz z JCHOptimize w wersji Free i nie ma efektów w optymalizacji przyczyną mogą być źle napisane rozszerzenia z których korzystasz. Możesz spróbować skorzystać z JCHOptimize w wersji Pro, ale najbezpieczniej jest zmienić źle napisane rozszerzenie.
3. Musisz zwrócić uwagę jakiego szablonu używasz, korzystanie z popularnych frameworków szablonów umożliwia łatwiejszą kontrolę nad minifikacją plików CSS które są kompilowane przez framework z plików LESS. 

 

 4 etap – dostosowanie obrazków

Jednym z najczęściej popelnianych błędów jest brak optymalizacji obrazków w witrynie. Google PageSpeed bierze pod uwagę w teście obrazy o dużej rozdzielczości wyświetlane na urządzeniu mobilnym. Na szczęście z pomocą przychodzi nam standard HTML5, w którym możemy korzystać ze znacznika <img /> z odpowiednimi atrybutami, dzięki czemu zdołamy dostosować grafikę do RWD. Jak się za to zabrać? Dodając obrazki w artykule należy trzymać odpowiednią składnie HTML. Przykład:

 

 5 etap – podsumowanie

Po wykonaniu prawidłowo wszystkich powyższych czynności w zainstalowanej Joomla! uzyskaliśmy wynik 100/100 w teście Google PageSpeed. 

 

Powyższy test to przykład pokazujący jak prawidłowo przeprowadzić optymalizację witryny internetowej opartej o CMS Joomla!. Jednak każda witryna wymaga indywidualnego podejścia i odpowiedniej analizy. 

Sprawdź wynik przeprowadzonego testu dla tej witryny opartej na CMS Joomla!

 

 

Proces optymalizacji został opracowany przez Norasa