W dzisiejszych czasach sam atrakcyjny wygląd witryny czy idealne przygotowanie treści nie wystarczą aby przyciągnąć użytkowników. Jak wiadomo Google od dłuższego stosuje algorytm w którym prędkość wczytywania witryny jest jednym z czynników wpływającym na pozycję w wynikach wyszukiwania.


Pomimo faktu, że nie jest to kluczowy element a raczej rodzaj kary wymierzonej w źle zaprojektowane i ciężkie witryny to niemniej jednak warto zadbać o ten parametr zwłaszcza, że wyniki można poprawić niewielkim nakładem pracy.

Istnieje wiele technik aby poprawić czas wczytywania witryny. Szczególnie łatwe jest to gdy używa się jednego z popularnych CMS’ów bo gotowe rozszerzenia zapewniają minfikację CSS oraz JavaScript, kompresję Gzip, tworzenie sprite’ów z grafik i wiele innych technik, które pozwalają urwać kolejne milisekundy podczas ładowania strony. Oprócz wspomnianych technik pozostaje nam jeszcze .htaccess, dzięki któremu możemy wprowadzić podstawową optymalizację w kilka minut.

Czym właściwie jest .htaccess?

.htaccess to plik konfiguracyjny, który powinien znajdować się w głównym katalogu Twojego serwera www. Najłatwiej edytować poprzez klasyczne połączenie FTP – i tutaj drobna uwaga bo jako plik systemowy może być ukryty (należy w kliencie FTP znaleźć odpowiednia opcję aby odkryć niewidoczne pliki lub po prostu utworzyć plik o nazwie .htaccess).

Ogólnie mówiąc dzięki .htaccess mamy możliwość kontrolować konkretny katalog czyli w przypadku pliku znajdującego się w głównym katalogu – kawałek serwera. Należy tutaj pamiętać, że zmiany w pliku .htaccess odnoszą się do katalogu w którym się znajduje i wszystkich podrzędnych ale tam również możemy dodawać kolejne pliki .htaccess i nadpisywać ustawienia rodzica. Dzięki plikowi .htaccess możemy nie tylko zoptymalizować witrynę ale również tworzyć przekierowania (wewnętrzne i zewnętrzne), utworzyć hasło na dany katalog czy też zablokować konkretne IP przed wizytami na naszej witrynie. To tylko część funkcjonalności a pełne można sprawdzić na stronie askapache.com

Kompresja Gzip

Użycie kompresji Gzip na naszej witrynie umożliwia skompresowanie każdej odpowiedzi serwera do użytkownika co znacznie zredukuje wagę i przyspieszy wczytywanie. Bez zagłębiania się w szczegóły, strony z włączoną kompresją Gzip są średnio 50–70% lżejsze niż te wczytywane w domyślny sposób. Dla przykładu weźmy stronę joomla.org (jedną z moich ulubionych) i przy użyciu narzędzie o nazwie Check GZIP compression możemy sprawdzić jak przedstawiają się wyniki z włączoną i wyłączoną kompresją.

title

By compressing this page with GZIP, 76.1% bandwidth was saved.

Nie trzeba chyba wspominać, że warto użyć tej funkcji i urwać trochę z czasu wczytywania dzięki dodaniu tego kodu to pliku .htaccess:

<ifModule mod_gzip.c>
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.*
</ifModule>

Zapisanie pliku powinno wystarczyć aby wprowadzić zmiany ale zawsze lepiej upewnić się korzystając z wspomnianej strony i przetestować własną stronę.

.htaccess i kontrola cache’u

Jeśli zdarzyło Ci się sprawdzać stronę za pomocą Google PageSpeed z pewnością pierwszym z komunikatów jaki otrzymałeś była informacja aby wykorzystać cache przeglądarki. Podczas wczytywania każdej strony internetowej wiele elementów takich jak skrypty JavaScript, style CSS, grafiki itd. są pobierane do pamięci przeglądarki. Każda taka operacje to zapytanie do serwera co w przypadku nieskompresowanego CSS czy JS może generować kilkanaście extra zapytań. Problem dużej ilości pobieranych danych można częściowo rozwiązać wykorzystując elementy już zapisane w pamięci przeglądarki, co oznacza, że tylko przy pierwszym wczytaniu witryny pobierzemy wszystkie dane.

Aby skorzystać z pamięci podręcznej przeglądarki należy ustawić nagłówki wygaśnięcia (odświeżenia) pliku. Daty w poniższym kodzie oczywiście mogą być zmodyfikowane i powinny być dostosowane do treści jak i aktualizacji Twojej witryny. Kod prezentowany poniżej pochodzi od Samuel’a Santos i dokładnie jak w poprzedniej modyfikacji pliku .htaccess należy go jedynie skopiować na sam koniec pliku:

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

Jak widać powyżej, każdy typ plików posiada swój własny zapis i prezentowany kod odnosi się do najpopularniejszych formatów takich jak grafiki, skrypty i arkusze styli.

Nagłówek Cache-Control

Nagłówek Cache-Control pozwala na zaawansowane sterowanie tym, które elementy będą cache’owane a, które mają być zawsze pobierane z serwera. Czasem należy wymusić cache dla obiektów, których kontekst wymusza ich pobranie bezpośrednio z serwera. Poniższe ustawienia to standardowe parametry cache’u dla plików graficznych, CSS, JS oraz (X)HTML i PHP :

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Jak zweryfikować ustawienia cache’u przeglądarki?

Ustawienia cache’owania mają to do siebie, że nie pokażą wyraźnej różnicy w narzędziach do sprawdzania witryny z jednej prostej przyczyny – aby wyniki były wiarygodne wszystkie testery pobierają całą witrynę bez względu na ustawienia nagłówków. Istnieje natomiast prosty sposób aby sprawdzić to przy użyciu Chrome i narzędzi webmasterskich. Po otworzeniu narzędzi należy przejść do zakładki Network i pamiętać o wyłączeniu opcji Disable cache, która domyślnie jest aktywna.

Różnica przy wczytywaniu strony (ponownym) powinna być znacząca bo większość elementów zostanie pobrana z pamięci podręcznej bez odwoływania się do serwera. Jeśli spojrzymy na kolumnę Size to wyraźnie widać tam, że część elementów pobrana jest z serwera a przy pozostałych widnieje zapis (from cache) co oznacza, że właśnie oszczędziliśmy kolejne kilobajty i milisekundy.

Chrome Developer Tools

Jak jeszcze można wykorzystać .htaccess?

Jak wspomniałem wcześniej .htaccess daje ogromne możliwości zarządzania serwerem ale dość popularnym jego wykorzystaniem poza optymalizacją jest stworzenia dodatkowego hasła dla katalogu. Jest to szczególnie przydatne gdy używamy Joomla lub WordPress’a i chcemy zabezpieczyć katalog /administrator lub /wp-admin dodatkowym hasłem.

Jeśli nie chcemy aby nasza witryna była widoczna dla pewnej puli adresów IP (lub konkretnego adresu) możemy właściwie jedną linią kodu zupełnie zablokować dostęp. Najpopularniejsze funkcjonalności związane z plikiem .htaccess znaleźć można na witrynie Htaccess file overview.

w dniu .

Category
Back to top