Dzisiaj omówimy zagadnienia związane z optymalizacją serwisu opartego na Joomla..

W sieci jest wiele artykułów związanych z optymalizacją stron internetowych opartych na systemie Wordpress, dużo mniej o optymalizacji serwisów z Joomla, a konkretniej Joomla 3.5.

Nagłówki na stronie artykułu.

284291060Jeżeli otworzysz artykuł w Joomla! Zauważysz, że tytuł artykułu jest przedstawiony jako nagłówek H2, jeżeli nie wyświetlasz na stronie nagłówka wyższego rzędu to tytuł artykułu powinien prezentować się jako H1. Aby zmienić to ustawienie wystarczy edytować widok znajdujący się katalogu components/com_content/article/default.php. Jednak ta zmiana jest krótkotrwała, będzie działać jedynie do kolejnej aktualizacji systemu. Aby utrwalić nasz trud możemy nadpisać plik komponentu. Skopiuj plik widoku. W głównym katalogu aktywnego szablonu utwórz taką strukturę folderów html/com_content/article/ skopiowany plik default.php wklej do katalogu article. Edytuj go, przejdź do linii ok 46. Tagi H2 zamień na H1. Nadpisanie widoku pozwoli zachować naszą zmianę bez względu na ilość aktualizacji strony internetowej i ich zasięg.

.htaccess

W tym magicznym pliku również jest kilka rzeczy do zrobienia. Po pierwsze dopilnuj aby strona zawsze wyświetlała się z przyrostkiem www lub bez przyrostka. W tym celu należy wykonac przekierowanie w tę lub drugą stronę :).

Edytujmy zatem plik .htaccess, znajdź linie gdzie zostaje uruchomiony moduł rewrite, w linii tej będzie taka komenda RewriteEngine On. Pod nią dopisz takie reguły:

RewriteCond %{HTTP_HOST} ^domena.pl [nc]
RewriteRule ^(.*)$ http://www.domena.pl/$1 [r=301,nc]

Reguły sprawią, że adres domena.pl, będzie automatycznie przekierowywany na adres www.domena.pl.

Kolejną rzeczą która powinniśmy wykonać w tym pliku to okiełznanie pamięci podręcznej przeglądarki. Dokładnie informacje o czasie przechowywania pełnych obiektów w pamięci przeglądarki. W tym celu korzystamy z modułu, który posiada prawie każdy serwer. Konfigurujemy go za pomocą takiego kodu:


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

W htaccess mamy dostęp do jeszcze jednego ciekawego narzędzia. Jest to kompresja gzip. Dzięki niej nasza strona zajmie nieco mniej miejsca i będzie się szybciej ładować. Moduł ustawiamy w ten o to sposób:


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Powyższy kod również wklej do pliku htaccess.

Kolejne etapy optymalizacji będziemy wykonywać w panelu administratora. W tym celu wykorzystamy bardzo funkcjonalne i proste w użyciu narządzie jakim jest plugin Jch-optimize. Wtyczka jest wydawana w dwóch wersjach, płatnej oraz pro. Osobiście korzystam z wersji Pro, ponieważ za pomocą tego jednego narzędzia można bardzo skutecznie przyśpieszyć serwis. Cena za plugin jest zdecydowanie niska, a sama wtyczka pozwala na wykonanie zadań do których trzeba by było użyć kilku innych, mniej skutecznych rozwiązań.

Joomla ma to do siebie, że wszystkie skrypty, arkusze stylów ładuje w sekcji head strony. Ma to swoje minusy podczas ładowania strony i jeżeli ktoś chce uzyskać dobry wynik w teście szybkości strony internetowej od Google.

Za pomocą jednego kliknięcia Jch-optimize, połączy nasze skrypty w jeden plik oraz podobnie zrobi to w przypadku arkuszy CSS. Darmowa wersja pozwala jedynie na użycie wersji Average. Pełna moc jednak widoczna jest w opcji Optimum. Nasza strona internetowa dalej będzie ładowała plik w nagłówku, jednak tym razem będą to tylko dwa, skompresowane. Jeden od CSS dygi od JS. Kolejną ważną opcją, którą zaleca się użyć jest minifikacja HTML. Plugin wytnie nam wszystkie spacje, tabulacje itd., znacząco zmniejszając objętość kodu a tym samym przyśpieszając wczytywanie się strony WWW. Jeżeli ktoś z Was w teście PageSpeed Insights, miał wskazane by zmniejszyć kod HTML, to ta opcja pozwoli rozwiązanie tego problemu.

Screen Shot 04 22 16 at 06.48 PM

A więc tak: mamy połączone pliki JS oraz CSS, załadowany moduł gzip, pamięć podręczną to wszystko znacząco wpływa na przyśpieszenie strony, jednak największy wpływ na prędkość wczytywania mają obrazy. W zakładce Darmowe funkcje mamy możliwość łączenia części obrazów, tak by ładowały się jako jeden.

Rozmiar jednego pliku graficznego będzie mniejszy niż ładowanie wszystkich z osobna. Ograniczymy również liczę zapytań do strony WWW, co też będzie miało wpływ na prędkość serwisu internetowego.

Screen Shot 04 22 16 at 06.58 PM

Ostatnią omawianą funkcją pluginu jest optymalizacja obrazów na stronie. Ta opcja jest dostępna tylko w wersji Pro wtyczki. Pewne jednak jest to, że obrazy zawsze najbardziej spowalniają stronę. W celu optymalizacji obrazów wchodzimy w zakładkę „Optymalizacja obrazów”, Wybieramy katalog z naszymi obrazkami i klikamy przycisk „Optymalizacja obrazów”. Proces przemiany potrwa w zależności od ilości i rozmiarów plików graficznych. Jednak gdy system skończy odczujemy zmiany w postaci znacznego przyśpieszenia naszej strony WWW.

Ostatnią rzeczą jest włączenie pamięci podręcznej Joomla. Pozwala to na jeszcze dodatkowe skrócenie czasu odpowiedzi serwera.

Poniżej przedstawiam punkty testowe PageSpeed Insights, oraz które z nich pozwoli Ci rozwiązać ten artykuł.

Nadaj priorytet widocznej treści - Jch-optimize, jeżeli to możliwe próbuje ładować js asynchronicznie. Problem jednak nie zawsze może być rozwiązany.

Wykorzystaj pamięć podręczną przeglądarki – nasz moduł z .htaccess mod_expires.c

Włącz kompresję – nasz moduł z htaccess gzip

Zmniejsz CSS - Jch-optimize, włączenie opcji od Average, do Optimum

Zmniejsz HTML - Jch-optimize, minifikacja HTML, najlepiej Ultra

Zmniejsz JavaScript - Jch-optimize, włączenie opcji od Average, do Optimum

Zoptymalizuj obrazy – Jch-optimize w wersji Pro → Optymalizacja obrazów

Skróć czas odpowiedzi serwera – Pamięć podręczna Joomla. Jeżeli nie pomoże, należy skupić się na samy serwerze jaki mamy wykupiony (w większości przypadków)

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie - Jch-optimize, zmniejszy ilość plików do dwóch, problem według PageSpeed Insights, nie zniknie, ale i tak znacznie wzrośnie punktacja.