Optymalizacja strony z pozoru wydaje się być prosta sprawą a jednak tak nie jest. Co rozumiemy pod pod pojęciem optymalizacja:
[su_blockquote cite="wikipedia"]Optymalizacja stron – dostosowanie (zoptymalizowanie) treści, kodu oraz grafik strony internetowej lub całego serwisu (witryny), pod określonym kątem. Optymalizację witryny można podzielić na optymalizację kodu, optymalizację treści oraz grafik.[/su_blockquote]
Pierwsza rzecz jak już wyżej wspomniał wpis z wikipedii optymalizacje dzielimy na 2 pod punkty według mnie troszkę inne:
- optymalizacja cms'a Joomla (konfiguracja Joomla 2.5.x oraz 3.x plus dodatki JCH Optimize, jBetolo, jotCache)
- optymalizacja kodu grafiki, treści
1. Optymalizacja cms'a Joomla
Zajmując się pierwszym punktem w zasadzie w Joomla możemy zrobić dwie rzeczy na stracie włączyć Cache oraz kompresje stron Gzip
Obie te rzeczy włączymy w konfiguracji globalnej -> System oraz Serwer (Joomla 2.5.x jak i Joomla 3.x)
* Po lewej pliki przed cache a po prawej plik z cache.
Jak widać wyżej na obrazku cache jest wersją wykonaną i zapisaną do pliki tak aby przeglądarka mogła go od razu wykonać bez czekania na serwer i generowania z php.
Joomla potrafi używać pamięci podręcznej (cache w dwojaki sposób) [Opis w J! jest dla mnie nie zrozumiały po niżej trochę inny]
- Konserwatywny - Pokazuje te same buforowane treści do wszystkich użytkowników. Przestrzega ustawień modułów buforowania.
- Progresywny - buforuje zawartość każdego unikalnego użytkownika. Nadpisuje wszystkie ustawienia buforowania modułów.
Trzeba pamiętać jeśli zdecydujecie się na cache to trzeba również włączyć plugin (dodatek) system - pamięć podręczna.
JotCache
Jeśli nie chcemy używać cache który jest w standardzie z J! możemy posłużyć się rozbudowanym pluginem jakim jest JotCache znajdziecie go pod tym linkiem http://www.jotcomponents.net
Jedna uwaga jeśli używamy JotCache wyłączamy całkowicie cache wbudowany w J!. Co wypada lepiej jeśli chodzi o cache minimalnie cache Joomla ale używając JotCache mamy większą kontrole nad tym co robimy chodź by nawet taki bonus jak pomijanie pamięci podręcznej dla google i innych wyszukiwarek nie muszę chyba mówić jakie daje to wymierne korzyści. Do plusów można jeszcze dodać osobne generowanie dla poszczególnych przeglądarek ;)
Joomla 2.5.x
P,G,C - są to ustawienia samego komponentu
Ważne aby zaczął działać JotCache należy odświeżyć wszystkie pozycje używając Rechache Items. U góry po prawej będzie start trzeba to uruchomić, wówczas cała strona zostanie z cachowana.
Joomla 2.5.x
Joomla 3.x
Z dobrych praktyk google zaleca używanie cache i dla elementów statycznych używanie min miesiąca ale nie przekraczać 1 roku!
########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
ExpiresByType application/smil "now plus 1 month"
# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"
# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"
Ten wpis po wyżej odnosi się do samego wykorzystania .htaccess i optymalizacji dla przeglądarki można go dodać do naszego joomlowego htaccess'a trzeba pamiętać o tym aby mieć włączone "Zastosuj przepisywanie URL" oraz zmieniony plik na serwerze z htacess.txt na .htaccess!
Jeśli mamy problem z włączeniem GZIP na stronie możemy spróbować dodać taki wpis do htaccess
# Obsluga GZIP
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.*
NGNIX
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE 6 because thereare some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;
JCH OPTIMIZE
Trzeba powiedzieć jedno żaden dodatek/plugin nie działa OUT OF BOX czyli po zainstalowaniu działa od razu i strona ładuje się 200x szybciej nie to niestety tak łatwo nie jest, chodź jch optimize posiada w wersji pro przedefiniowane ustawienia z których można skorzystać.
Jch optmize pro kosztuje bagatela 5$ nie jest to wydatek duży a przez jeden rok dostajemy wsparcie i przydatne rzeczy jak:
- Włączenie plików zewnętrznych php
- Rozpoznawanie i łęczenie CSS z @import
- Ładowanie asynchroniczne javascript'ów
- Obsługa kilku popularnych dodatkowych komponentów
- Pomoc na forum
Zwykła wersja darmowa ma wiele zalet jedna z nich jest SPRITE generator który może znacząco zmniejszyć wielkość strony przy szablonie który ma dużo obrazków z cieniami.
Kolejna zaleta to prostota i dość jasne rozmieszczenie funkcji.
Joomla 2.5.x
Joomla 3.x
Jedna z ważniejszych opcji którą warto ustawić to Pozycja ładowania javascrpitów i najlepiej jest wybrać na dole. (wówczas cały wygląd się załaduje a na końcu JS)
Życie plików 30 dni jeśli nic często nie zmieniamy możemy śmiało wydłużyć ten czas.
Generalnie te ustawienia prezentowane wyżej będą pasować do 90% stron i nie powinny powodować komplikacji.
Zwróć uwagę czy dodatek/plugin jch_optimize jest ładowano ostatni jest to bardzo ważne w działaniu! (w przypadku używania jotcache będzie przed ostatni)
jBetolo
To również rozbudowany plugin/dodatek do optymalizacji wczytywania strony, na stronie można przeczytać 4 punkty charakterystyczne dla jBetolo:
- Łączenie
- Kompresja
- Minimalizm
- Poprawne generowanie nagłówków dla odwiedzających wasze serwisy
- i wiele innych dodam od siebie których nie sposób wymienić (wspiera CDN)
Trzeba dodać że Jbetolo możne działać i wspierać działanie od frontu czy poprawić czasy ładowania panelu administratora.
Joomla 2.5.x
Joomla 3.x
Nie sposób jest opisać jak skonfigurować taki dodatek ponieważ niema rozwiązania uniwersalnego jedynie co mogę powiedzieć zarówno przy jBetolo jak i JCH Optimize wyłączyć łączenie JS ponieważ większość waszych witryn wykorzystuje Mootools jak i Jquery co powoduje konflikty i może część rzeczy nie działać poprawnie. Jak ktoś niema wiedzy niech korzysta z metody prób i błędów ;) Czasem kompresja JS powoduje również błędy w działaniu.
Jbetolo jest strasznie drobiazgowy i nowy user może zginać w gąszczu opcji przez co może się szybko zniechęcić do tego dodatku.
Zwróć uwagę czy dodatek/plugin jBetolo jest ładowano ostatni jest to bardzo ważne w działaniu!
Posumowanie pierwszej części
Czy opłaca się włączenie na stronie gzip ? odpowiedź jest TAK! zysk rzędu 60%
Różnice widać gołym okiem jest to test na mojej testowej stronie czyli na żywym obiekcie a nie na sample date które jak wiadomo nijak się mają do życia. Swoja drogą jak sprawdzić czy gzip jest obsługiwane można pod tym adresem http://checkgzipcompression.com
W przypadku cache zyskujemy na generowaniu strony, bo strony są już wygenerowane i gotowe do pobrania. Używanie cache odczujemy wchodząc drugi raz na stronę wówczas poczujemy realny zysk, gdzie część będzie pobrana z serwera oraz z naszego dysku. Nie bójmy się cache, nikt z was za pewnie nie aktualizuje tak często strony/treści aby się wgłębiać w szczegóły. Jeśli używasz hostingu dzielonego i twoje zasoby CPU/RAM się kurczą czas najwyższy włączyć cache. Od razu podpowiem jeśli używamy cache i nie widzimy zmian używajcie odświeżania w przeglądarce ctrl+f5 lub jeśli przeglądarka oferuje w ustawieniach cache po prostu wyłączamy. Wówczas za każdym razem będzie pobierać dane na nowo z serwera i nie będzie korzystała z pamięci podręcznej na dysku.
Poniżej macie porównanie Jch Optimize wersja darmowa, jBetolo , Joomla z Cache oraz JotCache wnioski łatwo wyciągnąć. Trzeba dodać że mój szablon którego obecnie używam jest nie wspierany a ma kilka błędów (to nic szykuje już zmianę) Ale ma to doskonałe odzwierciedlenie, bo wiele zwykłych osób stawia stronę i nie patrzy potem na optymalizacje! Optymalizacja jest ważna dla wyników wyszukiwania oraz dla potencjalnych odwiedzających. Panuje przekonanie że jeśli strona ładuje się dłużej niż 5s to użytkownik zamyka okno.
*Pingdom ustawiony był zawsze serwer Dallas
** z Amsterdamu strona ładuje się 2.5s więc wynik bardzo przyzwoity jak na obecną postać rzeczy. Realnie do osiągnięcia jest poniżej 2s a nawet myślę 1.5s
Narzędzia niezbędne do testowania strony:
http://tools.pingdom.com
http://gtmetrix.com
https://developers.google.com/speed/pagespeed/insights/
*GTmetrix daje bardziej porównywalne wyniki za każdym razem (czyt. stabilniejsze)
Pluginy/dodatki:
http://www.jch-optimize.net
http://jproven.com/extensions/jbetolo
http://www.jotcomponents.net/web-programming/jotcache
Z dobrych praktyk!
1. Bądź na bieżąco.
Zwrócicie uwagę na czy aby na pewno wszystkie komponenty są wam potrzebne jak i pluginy każda dodatkowa rzecz może generować dodatkowe zapytanie js czy css. Warto również być na bieżąco z aktualizacjami komponentów oraz pluginów czy samych modułów. Przy aktualizacji warto usnąć cache aby zmiany mogły się zachować. Aktualizacji nie tylko dotyczą bezpieczeństwa czy nowych funkcji ale bardzo często są to poprawki w JS czy CSS.
2. Nie potrzebne rzeczy.
Usuń bądź wyłącz nie używane pluginy/dodatki. Rzeczy których nie używasz tak naprawdę nie zaczniesz kiedyś używać. (Sprawdź bazę danych czy wszystko zostało usunięte.)
3. Baza danych
Użyj optymalizacji bazy danych z to z poziomu PHPMyAdmin czy korzystając z takich dodatków jak Akeeba Tools (Optymalizacja i naprawa działa tylko na MySQL).
Drobna uwagą dlaczego niema porównania do Joomla 3.x dlatego z mój szablon nie obsługuje Joomli w wersji 3 a więc porównanie było by nie miarodajne. Jednakże wszystkie opisy i pluginy są zgodne z wersją J3 Jedynie JotCache jest w wersji jeszcze RC dla Joomla 3.3 pobrać można stąd http://www.jotcomponents.net/web-programming/jotcache/download/pre-release/jotcache-pre-release-download-jotcache-5-0-rc
Podsumowanie
Myślę że w tej części na tym zakończymy w drugiej opiszę trochę więcej o formatach kompresji czyli jpeg, gif, png czy też webp lub jpeg-xr. Jak ułatwić sobie życie i jakich narzędzi używać. Poruszymy temat CDN, nigxa oraz lighttpd.
Drugą część artykułu znajdziesz tutaj https://joomlaguru.pl/joomla/209/optymalizacja-wczytywania-joomla-2-5-oraz-joomla-3-x-czesc-2
[su_calltoaction align="center" title="KURS 'Optymalizacja ładowania stron'" button_text="ZAKUP!" button_link="https://szkola.joomlaguru.pl/product/joomla-optymalizacja-ladowania-stron/" button_background="#f00000" color="#787878"]Opanuj techniki optymalizacji Joomla! Zapoznaj się z przykładowymi darmowymi lekcjami.[/su_calltoaction]