ZAGADNIENIE:
I. OPTYMALIZACJA STRONY (część pierwsza)
CEL:
Celem tego pro "tricka" będzie w głównej mierze uświadomienie Was jak ważne jest poprawne przygotowanie strony do jej publikacji w Google i doszlifowanie właściwych elementów.
Wielu z Was jest webmasterami i na co dzień spotykacie się z ciężarem i wysiłkiem jaki należy unieść na swoich barkach w trakcie przygotowań strony pod nową niszę, nową grupę odbiorców. Ciężar ten dodatkowo się zwiększa gdy jesteście także (tak jak np. ja) programistami i sami tworzycie sobie własny CMS. Droga od zamysłu do wykończeń graficznych jest długa, ale i często okazuje się zabójcza dla projektu. Niestety nasze zmęczenie projektem sprawia, że kwestie optymalizacyjne są często pomijane...
Czekamy na ruch 1,2,3 miesiąc i nic !...
Znalazłeś się kiedyś w takim położeniu ? To może być (może !== musi) przyczyna niepowodzenia Twojej strony.
* W języku PHP użycie znaku !== w instrukcji warunkowej ( IF ) oznacza "nie jest równe". Za pomocą jakiego wyrażenia uzyskalibyśmy taki sam efekt w języku C i co zatem oznacza wyrażenie !=== ?
NARZĘDZIA:
W tym poradniku swoją pracę będę opierał o kilka podstawowych, ogólnodostępnych narzędzi:
DZIAŁAMY?!
Jako, że do prezentacji całego procesu nie mogę wykorzystać strony, której używam w swoim dzienniku, dlatego postanowiłem użyć mojego portfolio jako domeny analizowanej. Domena ta wypadła w testach dość dobrze, dlatego początkowy wskaźnik czasu wczytywania strony jest u mnie na dość wysokim poziomie.
W informatyce i nie tylko OPTYMALIZACJA to bardzo szerokie pojęcie. By używać tego określenia poprawnie muszę zaznaczyć iż w tym poradniku chodzi mi o optymalizację czasu wczytywania strony oraz wyniku/pozycji w organicznych wynikach wyszukiwania Google. Podsumowując więc, mamy tutaj dwie
funkcje celu z których jedna polega na minimalizacji czasu wczytywania strony a druga na osiągnięcie maksimum pozycji (TOP 1). Dążymy więc do osiągnięcia OPTYMALNEGO wyniku ( UWAGA! Nie ma czegoś takiego jak najbardziej optymalny. Wynik z założenia optymalny jest bowiem wynikiem najlepszym ).
Listę wykorzystanych narzędzi nie przedstawiłem w takiej kolejności przypadkowo. Pierwszy poczyniony krok z naszej strony to analiza witryny dzięki narzędziom udostępnianym przez Google. Zapytacie może czy należy im wierzyć ? Powiem tak - jak nie im to komu ?
1. Wchodzimy na stronę
PageSpeed Insights i w pole tekstowe wpisujemy adres analizowanej przez nas strony, a następnie klikamy Analizuj.
2. Po krótkim okresie oczekiwania naszym oczom powinien ukazać się mniej więcej podobny obraz:
No i co my tutaj widzimy ?
Hmm... Trzy sekcje:
- Należy poprawić,
- Warto poprawić,
- Przestrzegane reguły,
I:
Zajmijmy się sekcją
Należy poprawić. Rozwijamy pierwszą pozycję (akurat w tym konkretnym przypadku już pierwszy czynnik jest dość trudny do poprawy gdyż trzeba wiedzieć co w naszym skrypcie oznaczają poszczególne linie kodu).
Jak widzimy Google chce od nas byśmy naprawili blokujące
renderowanie (czyli generowanie/wczytywanie) strony skrypty JS oraz CSS.
Trzeba zaznaczyć, że chodzi tutaj o wczytywanie się skryptów w sposób liniowy nie zaś asynchroniczny - równoległy. Skomplikowane ?
Już spieszę z dokładnymi wyjaśnieniami o co chodzi.
Załóżmy, że jesteśmy w sklepie. Wybraliśmy tylko jednego małego Żubra i idziemy do kolejki, która okazuje się większa niż normalnie. Badamy sytuację i okazuje się, że przed nami pewna starsza Pani nie może zdecydować się na zakup właściwych cukierków, a w dodatku płaci samymi monetami 1gr i wstrzymuje całą kolejkę. Jak widzicie szybko naszego Żubra nie wypijemy
... Ale co jeżeli ustawilibyśmy babcię na końcu kolejki ?
Mogłoby się okazać iż w czasie gdy my kupilibyśmy i natychmiast skonsumowaliśmy naszego Żubra, babcia miała już czas na zastanowienie się i policzenie pieniążków. Hura ! Czas odpowiedzi kasy jest mniejszy
. Niby super ... Ale co jak nie mamy 18 lat a babcia obiecała poświecić za nas dowodem ? Musimy czekać ...
Podobnie należy rozumieć sytuację z skryptami które umieszczamy w kodzie naszej strony. Każdy dołożony skrypt zwiększa nasz czas oczekiwania na odpowiedź (bo każdy z nich jest taką staruszką w kolejce) i niestety niektórych nie możemy przerzucić w dalszą część kodu strony.
Często jednak wszystkich skrypów nie potrzebujemy mieć dołączonych do źródła zaraz w sekcji <head> strony, gdyż mogą być one odpowiedzialne za mniej istotne rzeczy tj. przerzucanie slajdów czy wczytywanie nowych czcionek.
Co muszę zrobić ?
Postaraj się przenieść wszystkie zbędne elementy z sekcji
<head> do sekcji <footer>
Jeżeli chcesz przykładu u mnie wygląda to następująco:
Kod:
<!-- Czcionka -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!-- Wsparcie JQuery oraz JS -->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<!--[if lt IE 9]>
<script src="js/respond-1.1.0.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/html5element.js"></script>
<![endif]-->
Cały ten kod przenoszę z sekcji head do sekcji footer. Dlaczego akurat ten ? Dlatego iż wiem, że np. jquery i tak czeka aż cały html zostanie wczytany. Wiem też, że od początku renderowania strony nie potrzebne mi będą specjalistyczne czcionki, natomiast potrzebne mi będzie zdefiniowanie jak konkretnie wygląda styl strony (dlatego zostawiłem plik style.css w nagłówku).
Zapisujemy, wgrywamy plik na serwer i sprawdzamy wyniki
SUPER ! Aż o 6 punktów zwiększyliśmy szacun u Google!
II.
Sekcja
Zoptymalizuj obrazy.
Punkt ten jest u mnie co prawda zaznaczony jako wykonywany w stopniu dopuszczalnym, lecz jest bardzo częstym problemem długo wczytujących się witryn.
Aby go poprawić będziemy posługiwać się 2 narzędziami.
Pierwszym z nich jest
GIMP, natomiast drugie o nazwie
jpegoptim jest przeznaczone tylko dla użytkowników
Linuxa, który uważam powinien być obowiązkowym systemem dla developerów w dzisiejszych czasach.
Instalacji GIMPA pod Windą nie muszę tłumaczyć, natomiast dla dystrybucji Linuxa opartych o Debiana wygląda to tak:
Natomiast jpegoptim-a tak:
Po zainstalowaniu niezbędnego oprogramowania, popatrzmy na jakie obrazki Google zwraca nam uwagę:
Kod:
Kompresja i zmiana wymiarów obrazów na stronie
Co to oznacza ? Często na stronach internetowych wykorzystujemy obrazki o zwiększonych rozmiarach i jakości niż jest to potrzebne. Każdorazowe otwarcie strony wiąże się tutaj z odpowiednim wczytaniem i przeskalowaniem przez przeglądarkę obrazków o dużej jakości i wielkości co z kolei wiąże się z bardzo dużym opóźnieniem wyświetlania, wzrostem transferu a czasem nawet z zajechaniem serwera.
1. Pobieramy wszystkie pliki graficzne które zostały wymienione na liście,
2. Przechodzimy na naszą stronę internetową i prawym przyciskiem myszy klikamy w interesujący nas aktualnie element graficzny, który oznaczony jest jako "Kompresja i zmiana wymiarów obrazów na stronie ..."
Sprawdzamy tym samym rozmiary jaki dany element wykorzystuje w rzeczywistości.
3. Otwieramy obraz za pomocą GIMPA i z menu wybieramy kolejno
Obraz ->
Skaluj obraz a następnie dokonujemy przeskalowania obrazu do pożądanego rozmiaru (w moim przypadku 180x172)
4. Klikamy
Plik ->
Wyeksportuj jako .... Następnie potwierdzamy nazwę pliku, klikamy
Zastąp i naszym oczom powinno pojawić się okno z możliwością wyboru kompresji pliku (wybieramy najlepszą) oraz poszczególnymi ustawieniami (odznaczamy wszystko za wyjątkiem zapisanie wartości kolorów dla przezroczystych pikseli).
Generalnie wszystkie elementy graficzne Google zaleca by były .png. W przypadku natomiast wykorzystania pliku .jpeg powinieneś w tym kroku ustawić także kompresję stratną na poziomie około 78%.
Ponadto na temat obrazków i ich rozszerzeń Google wypowiada się następująco:
Cytat:Musisz sprawdzić, który format będzie najlepiej odpowiadał Twoim obrazom. Poniżej znajdziesz kilka ogólnych zaleceń:
Pliki PNG są niemal zawsze lepsze od plików GIF, jednak niektóre starsze wersje przeglądarek mogą tylko częściowo obsługiwać pliki PNG.
Plików GIF możesz użyć w przypadku małych i prostych grafik (o rozmiarze nieprzekraczającym 10 x 10 pikseli lub palecie kolorów składającej się z mniej niż 3 barw), a także dla obrazów z animacją.
Formatu JPG użyj w przypadku wszystkich plików w stylu fotograficznym.
Nie używaj formatu BMP ani TIFF.
5. Kolejnym krokiem jest przejście do konsoli a następnie nawigacja do folderu w którym znajdują się pobrane przez nas zdjęcia. Przypominam, że w systemach UNIX-owych przeskakiwanie po katalogach możemy uzyskać za pomocą komendy
cd /dana/sciezka
Po przejściu w odpowiedni katalog wywołujemy następującą komendę:
I pozostaje nam tylko załadować pliki z powrotem na serwer ...
Oczywiście jeżeli mamy do czynienia na przykład ze sklepami internetowymi, to cały proces optymalizacji kompresji oraz wielkości wszystkich obrazków za pomoca GIMP-a mógłby być zabójczy. W takich przypadkach wykorzystuje się takie narzędzia jak
Gregwar's Image class, które wykonuje wszystkie te działania "w locie" po stronie serwera. Serdecznie polecam tą klasę osobom, które wiedzą jak jej użyć.
III.
Jeżeli chcemy poprawić sekcje
Zmniejsz JavaScript oraz
Zmniejsz CSS to nie ma większego problemu. Wystarczy, że pobierzemy pliki, które skompresował dla nas Google.
1. Kliknij w link umieszczony w zdaniu: "
Pobierz zoptymalizowane obrazy oraz zasoby JavaScript i CSS dla tej strony."
2. Pobierz i rozpakuj paczkę,
3. Podmień pliki stylu oraz JS na te przygotowane przez Google,
IV.
Przy zakładce
Skróć czas odpowiedzi serwera mamy niestety niewiele do powiedzenia w przypadku gdy nie mamy bezpośredniego dostępu do zasobów serwera oraz gdy nie opieramy sie o własny skrypt. Czas odpowiedzi serwera zależy od wielu czynników, ale w głównej mierze od czasu zwrotu zapytań SQL. Jeżeli więc wiesz jak bezpiecznie zmniejszyć złożoność zapytań SQL to zapewne będziesz wiedział/wiedziała jak poprawić tą opcję.
V.
Zakładkę
Zmniejsz HTML, bardzo jasno opisuje
TA podstrona, natomiast
Unikaj przekierowań stron docelowych TA podstrona, dlatego pominę tutaj komentarz.
VI.
Ok przechodzimy następnie do sekcji
Wykorzystaj pamięć podręczną przeglądarki.
Niestety ja tutaj nigdy nie poprawiam za wiele ... Sekcja ta bowiem odnosi się do tego, że tak powinniśmy dopasować naszą treść statyczną strony (np. logo, belki itd) by te nie były za każdym odświeżeniem strony wczytywane z sieci a z dysku twardego użytkownika, które pobiera za pierwszą wizytą na stronie. Generalnie nie robie tego z kilku powodów, a decyzję czy Wy będziecie wskaźnik ten poprawiać pozostawiam do osobistego namysłu.
Gdybym miał określić, które zasoby powinniśmy wziąć pod cache, to byłyby to takie elementy, które się szybko nie zmienią. Jeżeli masz wrażenie, że np Twoje style ulegną zmianie, to nie określaj ich jako tych wziętych pod omawiany mechanizm.
Jak wykorzystywać pamięć podręczną przeglądarki?
W większości przypadków wystarczy dodać odrobinę kodu do pliku na serwerze, który nazywa się
.httaccess. Użytkownicy WordPressa po zainstalowaniu wtyczki
Yoast WordPress SEO mają sprawę ułatwioną, gdyż z poziomu panelu administracyjnego mogą edytować wspomniany plik (pytanie czy to do końca dobre ?). Cała reszta musi zalogować się przez ssh bądź ftp i samodzielnie go wyedytować.
Poniższy kod wklejamy na końcu pliku:
Kod:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=846000, public"
</filesMatch>
Na resztę z parametrów nie mamy znaczącego wpływu
PODSUMOWANIE:
Jak widać proces optymalizacji czasu wczytywania strony to dość pracochłonne zajęcie. Należy tutaj niestety posiadać troszeczkę specjalistycznej wiedzy, która jednak nie jest specjalnie trudna i da się wykonać wszystko samemu.
Ten poradnik był częścią pierwszą serii, którą planuję opublikować.
Jeżeli skorzystałeś, nie bądź żyd i daj + ,wynagrodzisz mi kilka godzin które spędziłem pisząc ten poradnik
POLECAM:
Dziś polecam Wam książkę
Zdobyć rynek. Jak sprzedać prawie wszystko online, stworzyć upragniony biznes i żyć marzeniami Jeff Walker-a . Bardzo fajnie pokazuje jak można skutecznie wywierać wpływ na innych i wprowadzić swój produkt na rynek.
Gdyby ktoś chciał zakupić książkę z mojego polecenia, napisz do mnie proszę PW, a uzyskane środki przeznaczę na testy SEO, na których także TY możesz w przyszłości skorzystać.