Przyspiesz swoją stronę internetową

przyspiesz-stronę-www

Każdy doświadczony webmaster wie, że czas ładowania strony jest kluczową sprawą jeżeli chcemy, żeby nas serwis internetowy był dobrze postrzegany przez użytkowników i funkcjonował prawidłowo. Jak pokazują badania wykonane między innymi przez firm Yahoo, nawet 100 milisekundowe opóźnienie może spowodować utratę cześć użytkowników, a tym samym pozbycie się cześć zysków. Nawet najcierpliwsi internauci dadzą Twojej stronie góra 4 sekundy na "załadowanie się". Potem zamkną kartę i przejdą na stronę konkurencji. Jak nie dopuścić do tej sytuacji? Sprawa jest prosta. Wystarczy zastosować się do poniższych wskazówek.

Optymalizacja kodu

Jedną z najczęstszych przyczyn długiego czasu ładowania się strony jest zbyt duża liczba zapytań http w kodzie. O co dokładnie chodzi? Kiedy otwieramy stronę przeglądarka wysyła żądanie do serwera dotyczące konkretnego pliku hipertekstowego. Oczywiście oprócz zwykłego html-a strona składa się z plików zawierających kod CSS, JavaScript, php, fonty itp. Wystarczy zajrzeć w sekcje <head> strony, żeby przekonać się jak dużo znajduje się tam odwołań do zewnętrznych zasobów. Niestety każde dowołanie do sekwencja polegająca na wysłaniu do serwera zapytania i pobrania odpowiedzi w postaci pliku.

Warto poświęcić trochę czasu i przeanalizować wywołania w nagłówkach strony. W prosty sposób ograniczymy ich liczbę umieszczając wszystkie style CSS w jednym zewnętrznym pliku. Szczególnie jeżeli korzystacie z szablonów – warto sprawdzić w ilu plikach umieszczono jego styl. Czasami ta liczba jest dość spora. To samo tyczy się na przykład liczy pobieranych czcionek. Często strony używają kilku krojów dla takich elementów jak tytułu wpisu, treści, metadane. Jeżeli liczba ta jest duża, warto zrezygnować ze stylizacji na korzyść szybszego ładowania strony. Analogiczną sytuacje mamy również w przypadku plików .js z kodem JavaScript-u. Umieśćmy je w jednym pliku.

Optymalizacja kodu php, to już trochę trudniejsze zadanie. Jeżeli korzystamy z otwartego kodu warto pokusić się o jego optymalizację i dostosowanie do wymagań naszej aplikacji. Pożytek naszej stronie przyniesie przeanalizowanie z których funkcji aplikacji nasz serwis nie korzysta i zakomentowanie linii kodu dołączających np. niewykorzystywane pliki z funkcjami w PHP. W przydatku aplikacji z rozbudowanym panelem CMS warto sprawdzić które moduły i wtyczki nie są nam potrzebne i je powyłączać.

Optymalizacja grafik

Jak wiadomo strona www, to głównie tekst i grafika. O ile grafiki będące kontentem strony (zdjęcia w galerii, ikony wpisów) możemy zostawić w spokoju, o tyle grafiki składające się na layout strony są kluczową sprawą. Chodzi tutaj między innymi o logo, tło, ikony, grafiki buttonów itp. Ogólnie, wszytko to, co powtarza się na każdej (lub większości) podstron powinno być zoptymalizowane.

Mniejszy rozmiar plików graficznych uzyskamy przede wszystkim stosując kompresję obrazu. Kompresja powinna być możliwie jak najmocniejsza, ale nie powodująca przy tym widocznych strat w graficie. Chodzi przede wszystkim o artefakty. Do kompresji grafik zawierających teks lepiej użyć formatu .png, natomiast do pozostałych grafik .jpg.

Warto również  tam gdzie jest to możliwe zastąpić grafikę w plikach, odpowiednimi stylami CSS. Takimi elementami są między innymi gradienty i cienie. Umieszczenie ich definicji (i pozostawienie renderowania przeglądarce) znacznie zmniejszy wielkość pobieranej strony.

Wykorzystanie cache'owania przeglądarki

Dzięki temu prostemu zabiegowi można znacznie przyspieszyć czas ładowania strony. Przeglądarka internetowa wykorzystuje tzw. pamięć podręczną (zlokalizowaną na dysku twardym) do zapisywania pobranych elementów strony. Dzięki temu nie musi za każdym razem pobierać wszystkich obiektów z serwera, tylko ładuje je bezpośrednio z dysku co znacznie skraca czas otwierania strony.

Cache'owanie obiektu możemy wymusić na kilka sposobów, ale zasadniczo najczęściej wykorzystywane są dwie możliwości: umieszczenie odpowiednich znaczników w sekcji head dokumentu HTML oraz wysłanie dodatkowych nagłówków przez serwer HTTP. W pierwszym przypadku za pomocą nagłówka Expires ustawimy czas, po upływie którego przeglądarka powinna pobrać ponownie obiekt. W drugim użyjemy modułu mod_expires serwer Apache do automatyczne cache'owania odpowiednich plików.

Włączenie kompresji przesyłanych obiektów

Dla większych plików warto włączyć kompresję. Ten zabieg sprawi, że serwer HTTP przed wysłaniem pliku przeglądarce skompresuje, go algorytmem gzip. Przeglądarka rozpakuje go w locie. Oczywiście dla użytkownika cała akcja jest niezauważalna. Jak wiadomo nie każdy plik dobrze się kompresuje, ale przy dużym ruchu na stronie "odciążenie" serwera i łącza może być znaczące.

Szybszy serwer

Gdy powyższe czynności nie dadzą zakładanego rezultatu, nie pozostaje nic innego jak migracja na szybszy serwer. Czasami może pomóc przeniesienie strony po prostu na lepszy hosting, ale w przypadku większej aplikacji i dużego skoku liczby odwiedzających koniecznie może okazać się wykupienie serwera dedykowanego pod hosting strony. Większość firm oferujących tego typu usługi ma zróżnicowaną ofertę pod wglądem wydajności maszyny, także jest szansa, że uda się wybrać optymalne rozwiązanie.

Na koniec

Oczywiście temat optymalizacji witryn internetowych jest znacznie obszerniejszy, a ten tekst opisuje tylko podstawowe zagadnie i czynności, które możemy wykonać w celu przyspieszenia ładowania swojej strony internetowej. Jednak mam nadzieję, że nakieruje osoby poszukujące szerszej informacji. Istniej wiele narzędzi dostępnych on-line, które ułatwią analizę szybkości ładowania strony. Za ich pomocą można sprawdzić, który obiekt powoduje największe opóźnienie i które elementy wymagaj optymalizacji. Z pomocą przyjdzie plugin Firefoxa o nazwie PageSlow stworzony przez Google, albo strona pingdom.com.

Znacie inne tego typu narzędzia?. Zapraszam do umieszczania linków w komentarzach.

Skomentuj

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.


*

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>