środa, 03 lutego 2016 11:43

site-optimalization

Dlaczego szybkie ładowanie strony internetowej jest tak ważne? Czas ładowania strony oddziaływuje na dwa ważne czynniki, które mogą mieć wpływ na powodzenie Twojej strony: ranking SEO i współczynnik konwersji.

 

Jak można przeczytać w Google Webmaster Guidelines, optymalizacja ładowania strony jest jedną z najlepszych praktyk, aby uzyskać dobry wynik w rankingu SEO.  Z drugiej strony, szybkie ładowanie strony jest bardziej przyjazne dla użytkowników. Założę się, że wyszedłeś z wielu stron internetowych zaledwie po kilku sekundach po prostu dlatego, że ładowały się zbyt wolno. Wierz mi, że nie jesteś jedyny. Czytaj dalej, aby dowiedzieć się, jak przyspieszyć swoją stronę Joomla, poprawić rankingi i zatrzymać odwiedzających na swojej stronie.

 

Zmierz szybkość witryny

Przed rozpoczęciem optymalizacji należy sprawdzić aktualną wydajność witryny. To może być punkt wyjścia, który można porównać do wyników po zakończeniu wprowadzania wszystkich ulepszeń.

Istnieje wiele stron internetowych, które mogą pomóc zmierzyć wydajność witryny. Najbardziej popularne w tej chwili są:

Po przetestowaniu swojej strony narzędziem Google PageSpeed Insights, otrzymasz swój wynik i wskazówki, co może zostać zoptymalizowane:

 

pagespeed

 


GTmetrix testuje stronę internetową za pomocą PageSpeed i YSlow w tym samym czasie, więc mogą pojawić się bardziej złożone sugestie dla Twojej strony:

 

gtmetrix

 

Rzućmy okiem na to, co można zrobić, aby poprawić wydajność strony Joomla.

 

1. Wybierz dobry hosting

Hosting jest najważniejszą rzeczą. Wszystkie inne wskazówki dotyczącwe wydajności mogą być bezużyteczne, jeśli nie masz dobrego i szybki hostingu. Proponuję, aby przeczytać kilka recenzji i przeszukać fora internetowe, aby znaleźć taki, który będzie idealny dla Twojej witryny i potrzeb. Myślę, że nie muszę wspomnieć, że należy unikać darmowych hostingów. To powinno być oczywiste.

WSKAZÓWKA: Joomla-monster poleca hosting Siteground

 

2. Bądź na bieżąco z aktualizacjami dla Joomla i dodatków dla Joomla

Oprócz względów bezpieczeństwa, posiadanie najwnoszej wersji Joomla, wersji rozszerzeń i szablonów jest bardzo ważne dla działania serwisu. Zwykle nowa wersja osiąga kilka ulepszeń kodu i działa lepiej niż stara.

WSKAZÓWKA: Sprawdź aktualizacje naszych szablonów

 

3. Usuń nieużywane rozszerzenia

Każde rozszerzenie instalowane na Joomla jest obciążeniem zasobów systemowych i baz danych. Zazwyczaj istnieją również pewne dodatkowe pliki CSS i JS ładowane do sekcji head szablonu, które mogą zwiększać ogólną wielkość całej strony. Dobrą praktyką jest, aby zachować tylko te rozszerzenia, które są obecnie używane na swojej stronie. Jeśli często testujesz nowe rozszerzenia, należy pamiętać, aby je odinstalować, jeśli z nich nie korzystasz.

 

4. Włącz Joomla cache

Jeśli buforowanie jest wyłączone, gdy użytkownik odwiedza stronę, wszystkie dane muszą zostać załadowane na każde żądanie otwarcia strony. Jak można sobie wyobrazić, taki proces trwa trochę czasu. Włącz Joomla cache i jeśli ktoś odwiedzi witrynę po raz pierwszy, wszystkie dane będą buforowane i przechowywane jako lżejsze i szybsze treści, które zostaną załadowane wszystkim następnym użytkownikom. Istnieją dwa główne ustawienia związane z cache w Joomla.

Ustawienie Cache w Konfiguracji Globalnej

Aby włączyć  Joomla cache przejdź do System → Konfiguracja → System i wybierz rodzaj cache:

 

joomlacache

 

Dostępne rodzaje cache

  • konserwatyna – ta sama zawartość pamięci podręcznej jest załadowany dla wszystkich odwiedzających
  • progresywna – zawartośc jest buforowana oddzielnie dla każdego odwiedzającego


Zaleca się stosowanie metody konserwatywnej. Metoda progresywna może dać efekt odwrotny do zamierzonego, jeśli masz dużo treści i dużo gości.


Należy pamiętać, że buforowanie Joomla może generować pewne problemy związane z rozszerzeniami. Istnieje dodatkowe ustawienie dostępne dla każdego modułu, które pozwala wyłączyć buforowanie. Aby wyłączyć Joomla cache dla wybranego modułu, przejdź do Rozszerzenia → Moduły i wybierz moduł. Na karcie Zaawansowane w parametrach modułu można wyłączyć cache dla treści modułu:

 

modulecaching

 


Jako alternatywę dla buforowania Joomla, można także spróbować rozszerzenie JotCache, które zapewnia wiele dodatkowych ustawień, które pozwalają kontrolować cache w bardziej zaawansowany sposób.

Wtyczka System Page Cache

Aby włączyć wtyczke przejdź do Rozszerzenia → Menedżer → System Plugin Page Cache i zmień status na Enabled:

 

pagecache

 

5. Włącz kompresję GZIP

Innym sposobem na przyspieszenie witryny bezpośrednio z ustawieniami Joomla jest kompresja. Gdy włączona jest kompresja, strony są pobierane jako plik ZIP i rozpakowywane przez przeglądarkę. W ten sposób możliwe jest zmniejszenie rozmiaru zawartości o 50-70%.

Aby włączyć tę opcję, przejdź do System → Konfiguracja globalna → Server i wybierz Tak dla opcji Gzip Page Compression:

 

gzip

 

INFORMACJA:Twój hosting musi obsługiwać moduł mod_gzip, inaczej kompresja nie będzie działać.

 

Jeśli są Państwo zainteresowani informacją o wielkości oszczędności po włączeniu kompresji, można przetestować swoją stronę tutaj.

 

6. Optymalizacja zdjęć

Zazwyczaj, obrazy zabierają największą część całkowitego rozmiaru strony i to jest główny powód, dla których powinny zostać zoptymalizowane. Spójrz na najważniejsze wskazówek dotyczące optymalizacji obrazu:

  • unikaj używania dużych obrazków na stronie
  • nie skaluj obrazków poprzez HTML lub CSS
  • pamiętaj, aby dodać atrybuty szerokości i wysokości dla każdego obrazu aby przeglądarka znała wymiary obrazków przed ich pobraniem
  • nie upychaj zbyt wiele obrazków na pojedynczej stronie
  • używaj bezstratnej lub stratnej kompresji, aby zmniejszyć rozmiar zdjęć. Zazwyczaj po zapisaniu zdjęcia za pomocą programu Adobe Photoshop lub Gimp, rozmiar obrazu można jeszcze zmniejszyć bez utraty jakości. Zawsze należy pamiętać, że obrazy z aparatu powinien być zmieniane i zoptymalizowane przed wprowadzeniem ich na stronę.

Popularne narzędzia do optymalizacji obrazków:

NazwaObrazek PlatformaDostępnośc
Smush.it (ImgOptim) png/jpeg/gif web darmowe
Kraken.io png/jpeg/gif web darmowe/płatne
TinyPNG png/jpeg web darmowe
PunyPNG png/jpeg/gif web darmowe/płatne
ImageOptim png/jpeg/gif mac darmowe
JPEGmini jpeg mac darmowe/płatne
Caesium png/jpeg windows darmowe
FileOptimizer png/jpeg/gif windows darmowe
OptiPNG png windows darmowe

 

7. Optymalizacja .htaccess

Innym sposobem, aby zwiększyć prędkość strony jest zmienienie pliku .htaccess. Zanim zaczniesz, musisz się upewnić, że zmieniłeś nazwę pliku htaccess.txt na .htaccess i włączone jest przepisywanie URL w System → Global Configuration → Site:

 

urlrewriting

 

Będziemy koncentrować się na następujących zasadach:

  • Etag – mówi przeglądarce czy pobrać plik z serwera czy z lokalnej pamięci podręcznej przeglądarki
  • Expire headers – mówi przeglądarce, gdy plik powinien być odświeżany i zastąpioniony w lokalnym katalogu cache
  • AddOutputFilterByType DEFLATE – zmniejsza wyjściowy kod HTML usuwając niepotrzebne spacje i znaki końca linii

Aby zastosować powyższe zasady trzeba dodać następujący kod na końcu pliku .htaccess:

########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size. This works wonders if you are using rsync'ed
## servers, where the inode number of identical files differs.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
########## End - ETag Optimization
########## Begin - Automatic compression of resources
# Compress text, html, javascript, css, xml, kudos to Komra.de
# May kill access to your site for old versions of Internet Explorer
# The server needs to be compiled with mod_deflate otherwise it will send HTTP 500 Error.
# mod_deflate is not available on Apache 1.x series. Can only be used with Apache 2.x server.
# 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
########## Begin - Optimal default expiration time
## Note: this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines
	# 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"
	# Webfonts
	ExpiresByType font/truetype "access plus 1 month"
	ExpiresByType font/opentype "access plus 1 month"
	ExpiresByType application/x-font-woff "access plus 1 month"
	ExpiresByType image/svg+xml "access plus 1 month"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
########## End - Optimal expiration time

 

8. Optymalizacja CSS, JS i HTML

Każdy szablon oraz rozszerzenie wczytuje pliki CSS i JS, które mogą blokować renderowanie treści ponieważ przeglądarka przetworzyć wszystkie pliki dla bieżącej strony w pierwszej kolejności. Wytwarzają one także wiele zapytań HTTP.

Jeśli używasz Frameworka EF4 możnesz łatwo użyć kompresji i optymalizacji dla plików CSS / JS , a także HTML. Jak to działa?

  • łączy wszystkie pliki CSS i JS, więc zmniejszy się liczba zapytań

  • usuwa wszystkie niepotrzebne spacje, podziały wierszy i komentarze w celu zmniejszenia rozmiaru pliku

Aby włączyć kompresję w Frameworku EF, przejdź do Extensions → Template Manager → [nazwa szablonu] → Advanced Features i uruchom następujące opcje:

 

compression

 

Jeśli szablon i Framework nie pozwala na zoptymalizowanie plików, można wziąć pod uwagę inne rozszerzenia. Sprawdź następny punkt i poznaj więcej szczegółów.

 

9. Narzędzia do optymalizacji strony internetowej Joomla

Joomla Extensions Directory można znaleźć szereg rozszerzeń służących do optymalizacji. Możesz być zainteresowany następującymi:

JCH Optimize

Prawdopodobnie najlepsze rozszerzenie optymalizacji dla Joomla. Pozwala na:

  • łaczenie plików CSS i JS w jeden
  • zmniejszenie łącznonych pików
  • łaczenie obrazków tła w tzw sprite
  • kompresja kodu HTML
  • wsparcie CDN (wersja pro)
  • asynchroniczne ładowanie JS  (pro version)
  • oraz wiele więcej

JBetolo

Jest to alternatywa dla rozszerzenia JCH Optimize. Zapewnia on bardzo podobne funkcje, ale ma pewne zalety w stosunku do JCH optymalizacji np Zapewnia wsparcie CDN w wersji darmowej, podczas gdy JCH Optymalizacja zapewnia tę opcję tylko w wersji płatnej.

ScriptMerge

Kolejne rozwiązanie, o którym warto wspomnieć. Pozwala skompresować kod CSS, JS i HTML . Istnieje również wiele innych opcji, które warto przetestować na swojej stronie.

 

10. Zastosowanie Content Delivery Network

CDN jest to duża sieć serwerów rozmieszczonych w wielu centrach danych w Internecie. Korzystając z CDN cała zawartość statyczna strony ( skrypty, zdjęcia, pliki wideo, muzyka) dostarczana jest użytkowników z serwera, który jest w najbliższej lokalizacji.

CDN można skonfigurować za pomocą rozszerzenia JCH optimize i JBetolo wspomnianych w poprzednim punkcie. Jest też dużo więcej rozszerzeń dla CDN dostępnych w Joomla Extensions Directory.

 

11. Optymalizacja przyjazna urządzeniom mobilnym

Minęło już sporo czasu, odkąd Google uruchomił nowy algorytm mobilny. Oznacza to, że strony internetowe przyjazne dla telefonów uzyskują wyższą rangę w wynikach wyszukiwania na urządzeniach mobilnych. Nie jest to jest zaskoczeniem, ponieważ ponad 50% ruchu internetowego pochodzi z urządzeń mobilnych i tabletów.

Używając Mobile Friendly Test -  można sprawdzić, czy witryna jest przyjazna użądzeniom mobilnym. 

Jeśli chcesz poprawić szybkość ładowania strony swojego serwisu dla urządzeń mobilnych, można użyć Google Insights PageSpeed sprawdzić listę problemów, które trzeba rozwiązać.

 

mobiletest

 

Ostateczny rezultat

Jeśli wykonałeś wszystkie powyższe wskazówki, to najwyższy czas, aby ponownie sprawdzić wyniki dla swojej strony. Mamy nadzieję, że Twoja strona będzie ładować się teraz znacznie szybciej niż wcześniej.

W naszym przykładzie zastosowaliśmy darmowy szablon JM Services i udało nam się poprawić swój wynik Google PageSpeed Insights o ponad 70%!

 

finalresult

 

Życzymy wszystkim samych zielonych rezultatów ;)