Optymalizacja czasu wczytywania strony

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?!

Exclamation 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.

Exclamation 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:

http://kmagdziarz.pl/pliki-graficzne/optymalizacja1.png

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 ? smutny 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 Sad … Ale co jeżeli ustawilibyśmy babcię na końcu kolejki ? Idea 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 2 . 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:

<!-- 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,8​00,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 Smile

http://kmagdziarz.pl/pliki-graficzne/optymalizacja2.png

SUPER ! Aż o 6 punktów zwiększyliśmy szacun u Google! Huh

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:

[Obrazek: optymalizacja3.png]

Natomiast jpegoptim-a tak:

[Obrazek: optymalizacja4.png]

Po zainstalowaniu niezbędnego oprogramowania, popatrzmy na jakie obrazki Google zwraca nam uwagę:

Kompresja i zmiana wymiarów obrazów na stronie http://kmagdziarz.pl/img/logo.png pozwoliłaby zmniejszyć objętość plików nawet o 21,6 KB (redukcja o 88%).
Kompresja http://kmagdziarz.pl/img/kod.png pozwoliła zredukować rozmiar o 16,7 KB (18%).
Kompresja http://kmagdziarz.pl/img/bg-map.png pozwoliła zredukować rozmiar o 5,2 KB (14%).
Kompresja http://kmagdziarz.pl/img/doyoulovemoney.png pozwoliła zredukować rozmiar o 2,1 KB (23%).
Kompresja http://kmagdziarz.pl/img/cl_logo.png pozwoliła zredukować rozmiar o 1,4 KB (21%).
Kompresja http://kmagdziarz.pl/img/mysql.png pozwoliła zredukować rozmiar o 1,4 KB (17%).
Kompresja http://kmagdziarz.pl/img/bootstrap.png pozwoliła zredukować rozmiar o 579 B (15%).
Kompresja http://kmagdziarz.pl/img/bt_logo.png pozwoliła zredukować rozmiar o 555 B (21%).

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 …”

http://kmagdziarz.pl/pliki-graficzne/optymalizacja5.png

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 180×172)

[Obrazek: optymalizacja6.png]

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:

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ę:

[Obrazek: optymalizacja7.png]

I pozostaje nam tylko załadować pliki z powrotem na serwer …

Exclamation 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:

<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 + impreza ,wynagrodzisz mi kilka godzin które spędziłem pisząc ten poradnik

Poradnik ten został stworzony w ramach dziennika pracy na forum zarabiam.com

2 myśli na temat “Optymalizacja czasu wczytywania strony

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *