Tym wpisem chciałbym przybliżyć troszkę zagadnienia związane z optymalizacją strony internetowej pod kątem wyszukiwarek i wydajności.
Główny spis czynności, które podlegają optymalizacji. Poszczególne czynności zostaną dokładnie opisane wg podanej tutaj kolejności.
Arkusze stylów to lista reguł ustalających w jaki sposób ma zostać wyświetlona nasza strona internetowa.
Np. wielkość/szerokość/rodzaj czcionki/dołączone obrazki.
Bardzo ważnym jest unikanie zbędnych dyrektyw w stosowanym arkuszu stylów.
Arkusz stylów CSS powinien być umieszczony w sekcji HEAD jako dołączony plik lub opisany bezpośrednio w kodzie XHTML.
Umieszczenie stylów na końcu kodu powoduje opóźnienie ładowania strony i efekt białego ekranu. Taka sytuacja ma miejsce, bowiem przeglądarka nie wyświetla strony do momentu aż przeczyta informacje związane z jej formatowaniem.
Jeżeli naszą stronę użytkownik odwiedza raz nie dokonując odwiedzin kolejnych podstron to style można zdefiniować w samym dokumencie XHTML. Będzie miało to wpływ na szybkość ładowania strony.
Inaczej sytuacja wygląda gdy użytkownik przegląda nasz serwis dokonując odwiedzin więcej niż jednej podstrony. W takiej sytuacji style należy zdefiniować w pliku co znacznie redukuje wielkość kodu XHTMLi przy odwiedzinach kolejnych podstron pobierany jest tylko dokument XHTML, bowiem arkusz stylów znajduje się już na dysku odwiedzającego. W celu redukcji żądań warto zdefiniować Expires na odpowiednio długi czas, tak by przy kolejnych wizytach przeglądarka nie dokonywała żądań kierowanych do serwera.
Ważne!
Arkusz stylów powinien znajdować się na początku dokumentu
Unikaj wielu plików arkusza stylów w jednym dokumencie XHTML
Przeanalizuj ruch i zachowanie użytkowników swojej strony internetowej. Tylko przy więcej niż jednej odsłonie strony przez użytkownika warto zastosować zewnętrzny plik arkusza stylów.
Dodatki: mini kurs CSS pojawi się w kategorii kursy.
Ilość żądań kierowanych do serwera..
Wiele osób posiadających stronę internetową nie zastanawia się nawet co się dzieje ze stroną internetową gdy odwiedza ją użytkownik.
W celu przedstawienia sposobu optymalizacji ilości żądań posłużę się ciekawym dodatkiem do Firebuga o nazwie Yslow, dodatek ten powinien być zainstalowany u każdego seomastera i webmastera tworzącego stronę internetową.
W pierwszym przykładzie pokaże jak zachowuje się strona bez optymalizacji żądań.
Na obrazku poniżej przedstawiony jest sposób zachowania przeglądarki podczas odwiedzin użytkownika.
Korzystając z wcześniej wspomnianego dodatku Yslow sięgamy po szczegóły dotyczące zachowania przeglądarki podczas 1 i kolejnych wizyt. Obrazek poniżej przedstawia nam dane na temat ilości żądań kierowanych do serwera z rozbiciem na obrazy/dokument xhtml/js/css.
Można zwrócić uwagę, że jest ich aż 34 tak podczas pierwszej wizyty jak i kolejnych.
34 żądania to stanowczo zbyt wiele i na pewno ma to znaczący wpływ na czas ładowania strony.
Mimo że na dysku twardym są zapisane informacje i jak widać na obrazku pobierany jest tylko dokument XHTML to ilość żądań nie spadła. Wynika to z faktu, że przeglądarka sprawdza czy dane nie zostały zmodyfikowane. Jeżeli nie zostały, otrzymuje kod 304 ? nie zmodyfikowano.
Jest to sytuacja zupełnie zbędna, dla takich plików jak css,js czy obrazy związane z szablonem strony powinny być opatrzone nagłówkiem Expires.
Z raportu wyżej widzimy, że strona zupełnie zbędnie pobiera 2 arkusze stylów, 2 wewnętrzne kody JS, wiele plików graficznych.
Dzięki połączeniu 2 plików css redukujemy 1 żądanie do serwera, połączenie 2 plików javascript redukuje kolejne żądanie. Jednak nadal zostaje nam ich ogromna ilość bo aż 32 żądania.
Na pomoc przychodzą nam arkusze stylów dzięki którym dołączone do strony grafiki możemy połączyć w jeden plik i przez odpowiednie dyrektywy w CSS wyświetlać tak jakby były to zupełnie osobne pliki. Technicznie nazywając sprawę stosujemy CSS Sprite.
Dzięki zastosowaniu CSS Sprite, połączeniu plików JS i CSS zredukowaliśmy ilość żądań do 6, oczywiście można było do 4, robiliśmy to na potrzeby tego wpisu, więc na szybko.
Performance Grade ? ocena strony wg Yslow przed optymalizacją była na poziomie D-61, po optymalizacji osiągnęliśmy poziom A-91, dla przykładu jedna z lepiej zoptymalizowanych stron Google.com posiada Performance Grade na poziomie A-96 a ilość kierowanych żądań do serwera wynosi 3.
To jeszcze nie koniec optymalizacji żądań, jak widzimy na obrazku wyżej, ilość żądań do serwera podczas kolejnych odsłon serwisu będzie taka sama jak podczas pierwszej wizyty. Użycie nagłówka Expires znacznie zredukuje tą ilość dla kolejnych odsłon co można zobaczyć na obrazku niżej.
Żeby dostrzec zalety optymalizacji żądań wystarczy krótka analiza ruchu. Zakładajmy, że nasz serwis generuje 10 tysięcy odsłon miesięcznie, z czego każdy użytkownik dokonuje 10 odsłon.
Bez optymalizacji ilość żądań wyniesie 10 tysięcy x 34 = 340 tysiące żądań
Po optymalizacji i zastosowaniu CSS Sprite, połączeniu JS i CSS ilość żądań wyniesie 60 tysięcy, jak widać różnica jest ogromna.
Dodajmy do tego użycie nagłówka expires a ilość żądań przy 10 tysiącach odsłon z czego 10 przypada na jednego użytkownika to ilość żądań wyniesie – 1 odsłona 6 żądań, 9 odsłon x 1 żądanie = 7 żądań na 10 odsłon co daje w sumie 7000 tysięcy żądań kierowanych do serwera.
Dzięki zastosowaniu Expires, optymalizacji grafiki, css i js zmniejszyliśmy ilość żądań o 333 tysiące a to tylko przy 10 tysięcy odsłon miesięcznie.
Ilość żądań można zmniejszyć jeszcze bardziej, np. osadzając grafikę w pliku arkuszów stylów. Z uwagi na to, że przeglądarka IE7 nie radzi sobie z tym rozwiązaniem, nie stosowałem go tutaj. Można jednak przygotować odpowiedni CSS dla innych przeglądarek i umieścić grafike wewnątrz pliku CSS. W takiej sytuacji z serwera zostanie pobrany tylko plik CSS bowiem same pliki graficzne będą w nim osadzone. Ogólna wielkośc pobieranych plików nie zwiększy się o ile oczywiście zastosujemy odpowiednio dobrane reguły styli i użyjemy techniki CSS Sprite.
Znaczniki meta znajdują się w sekcji HEAD. Te opisujące zawartość strony to tytuł i opis.
Podstawą podczas przygotowywania znaczników jest jak najlepsze dopasowanie ich do treści znajdującej się na poszczególnej podstronie.
Tytuł traktując jak tytuł artykułu w gazecie a opis jak zajawkę treści.
Każda podstrona powinna zostać opatrzona indywidualnymi znacznikami, należy unikać duplikowania opisów.
Tytuł można stworzyć na dwa sposoby. Każdy będzie indywidualny i opisujący zawartość lub każdy będzie indywidualny, opisujący zawartość a do tego zawierający tytuł główny.
Jak wyglądają przykładowe indywidualne tytuły:
Optymalizacja znaczników meta
Jak dobrze opisać stronę internetową
Znaczenie tytułu dla wyszukiwarek
Przykładowe tytuły zawierające tytuł główny i podtytuły.
Tytuł główny znajdujący się na stronie głównej:
Pozycjonowanie i Optymalizacja
Przykładowe podtytuły:
Pozycjonowanie i Optymalizacja >> Optymalizacja znaczników meta
Pozycjonowanie i Optymalizacja >> Jak dobrze opisać stronę internetową
Pozycjonowanie i Optymalizacja >> Znaczenie tytułu dla wyszukiwarek.
W drugim przypadku wyszukiwarka Google rozpozna i rozdzieli Tytuł główny od podtytułów i jako tytuł podstrony będzie traktować elementy znajdujące się za >>.
W wynikach wyszukiwania nie jest to zauważalne, jednak osoby korzystające z narzędzi dla webmasterów zauważą, że wyszukiwarka doskonale sobie z tym radzi. Szczególnie gdy podtytuł strony jest taki sam jak tytuł tematu podstrony.
Podtytuły, stała struktura linków wewnętrznych, linki przychodzące wpływają na budowa i wygląd dodatkowych linków przy wynikach.
