Kiedy nasz serwis internetowy ma coraz więcej użytkowników, a materiałów na stronę www ciągle przybywa, można odczuć wrażenie, że witryna ładuje się w przeglądarce zdecydowanie wolniej. Tak naprawdę to normalna sytuacja. Przeglądarka internetowa musi pobrać z serwera więcej zasobów, a co za tym idzie, wydłuża się czas oczekiwania na odpowiedź. Zobaczmy zatem jak przyśpieszyć stronę internetową.
Poziom trudności:
Artykuł opracowaliśmy dla osób, które nie znają jeszcze tematyki optymalizacji stron internetowych lub znają w mniejszym stopniu i chcą rozszerzyć swoje umiejętności o wiedzę z przyspieszenia działania strony www.
W artykule wykorzystujemy pojęcie optymalizacji stron www w rozumieniu prostych witryn internetowych i blogów skupiając się głównie na szybkości działania witryny. Optymalizacja dużych portali internetowych i sklepów to temat o wiele trudniejszy i wymaga dużo doświadczenia i wiedzy programistycznej, dlatego w tym artykule pominiemy tego typu serwisy.
Czym jest optymalizacja www?
Optymalizacja jest to proces, który polega na usprawnianiu kodu źródłowego strony, w taki sposób by zawierał poprawną składnię i dobrze skompresowaną. Optymalizacja to także praca nad przejrzystą strukturą tekstów, linków i słów kluczowych na stronie, która pomaga użytkownikowi w poruszaniu się po niej.
Aby skutecznie zoptymalizować stronę internetową, musimy poznać miary, jakimi będziemy się posługiwać przy działaniach nad minimalizacją naszej strony internetowej.
Jak zmierzyć w jakim stopniu moja strona jest zoptymalizowana?
Do tego celu może posłużyć nam narzędzie od Google PageSpeed Insights. Aby skorzystać z tego narzędzia dla deweloperów, wystarczy wejść na adres https://developers.google.com/speed/pagespeed/insights/ i w polu „Podaj URL strony internetowej” wpisać adres strony, którą chcesz zbadać pod kątem optymalizacji.
Narzędzie udostępnia także wskazówki i porady jak poprawić słabsze strony witryny. Warto je przeanalizować i przynajmniej do większości z nich się zastosować. Część błędów jest dość trudna do zrealizowania i nie zawsze ma sens poprawiać wszystko za wszelką cenę. Na kompromis na pewno będziemy musieli pójść, jeżeli korzystamy z gotowych rozwiązań do tworzenia treści, czyli CMS np. WordPress. W pierwszej kolejności najlepiej skupić się na pozycjach „Należy poprawić”. Usunięcie każdej z nich spowoduje wzrost wskaźnika o kilka lub nawet kilkanaście punktów. Jeżeli poprawimy uwagę „Do ewentualnej optymalizacji” wskaźnik wzrośnie o 1 – 5 punktów. Jeżeli uzyskamy wynik 85/100 punktów to już naprawdę dobry wynik.
PORADA
Jeżeli kupujesz gotowy szablon na CMS, WordPress, Joomla, Drupal, PrestaShop itd. sprawdź, jaki uzyskuje wynik przykładowy demo theme narzędziem Google speed Insight.
Czas wczytywania strony możemy badać także za pomocą innych narzędzi online np. Pingdom Website Speed Test
Możemy także posłużyć się narzędziami offline przeglądarek internetowych np. Google Chrom czy Mozilla Firefox. Niech za przykład posłuży nam przeglądarka Google Chrome.
- Otwieramy stronę którą chcemy przepadać w przeglądarce
- Klikamy prawym przyciskiem myszy i klikamy w „Zbadaj” albo wciskamy sekwencję klawiszy Ctr + Shift + I
(W przeglądarce Firefox Zbadaj element) - Przechodzimy do zakładki Network
- Odświeżamy stronę F5
Program daje nam dużo informacji m.in. czas wczytywania strony, Load, jak i strukturę DOM. Możemy prześledzić także, jak zasobożerne są poszczególne elementy składowych strony: media, obrazy i skrypty. Jest to bardzo ciekawe narzędzie i warte uwagi.
Optymalizacja strony internetowej
1. Włączenie kompresji Gzip
Pierwszym krokiem będzie włączenie kompresji Gzip. Dzięki temu zabiegowi zmniejszymy ilość danych przesyłanych z serwera do przeglądarki użytkownika. Kompresja pozwala na zmniejszenie objętości plików tekstowych nawet o 80 procent, tak więc jest o co walczyć.
Na czym polega kompresja gzip?
Pliki strony internetowej takie jak HTML, CSS, JavaScript, XML są kompresowane przez serwer www, a następnie dekompresowane przez przeglądarkę internetową. Dzięki temu zmniejszmy transfer. Serwer www Apache dostarcza moduł mod_deflate, za pomocą którego można skompresować pliki.
ZALETY
– mniejszy transfer
WADY
– większe zużycia procesora serwera www
Włączanie modułu mod_deflate
Jeżeli moduł jest zainstalowany na serwerze wystarczy dodać w pliku .htacces poniższe reguły:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript application/x-javascript </IfModule>
Jeżeli włączymy już kompresowanie, możemy sprawdzić, czy strona jest poprawnie kompresowana, na przykład tym narzędziem. W polu Web Page URL wpisujemy adres URL naszej strony. Możemy także skorzystać ze wtyczki do przeglądarki Firefox – Firebuga lub skorzystać ze znanego już nam narzędzia Zbadaj element przeglądarki Firefox. Interesuje nas wartość pola Content Encoding.
2. Minifikacja skryptów JavaScript i arkuszy CSS
Minifikacja polega na usunięciu ze skryptów JS i CSS komentarzy oraz zbędnych znaków, m.in. znak końca wiersza czy spacja. Dobrą praktyką jest także dołączenie plików JS i CSS do strony HTML, dzięki temu przeglądarka wyśle do serwera tylko jedno żądanie zamiast kilku, co znacznie powinno skrócić czas potrzebny na załadowanie strony.
W internecie znajdziesz wiele optymalizatorów kodu online.
Do plików CSS:
- http://www.csscompressor.com/
- http://devilo.us/
Do plików JavaScript:
- http://javascriptcompressor.com/
- http://jscompress.com/
W przypadku systemu CMS WordPress możesz użyć wtyczki Autoptimize, która poradzi sobie z tym problemem za nas kompresując kod CSS i JS.
3. Optymalizacja obrazków
Obrazy to zwykle największe pod względem rozmiarów elementów strony internetowej. Warto zadbać, aby ich rozmiar i kompresja była optymalna. Pamiętaj, że www lubi .jpg, które z łatwością można kompresować bez znacznej straty jakości obrazu. Jeżeli przygotowujesz obrazek na stronę internetową w Photoshopie czy llustratorze to użyj funkcji „Zapisz jako web”. Pozwoli to znacznie zmniejszyć rozmiar pliku. Dobrą praktyką jest także w przypadku rozszerzeń plików JPG zaznaczać opcję progressive, dzięki temu zdjęcie będzie wyświetlało się płynnie. Innymi słowy, zdjęcie pojawi się na początku w przeglądarce internetowej użytkownika z małą ilością pikseli i będą one doczytywane sukcesywnie. Unikniemy w ten sposób efektu pojawienia się nagle obrazka w przeglądarce użytkownika. Oczywiście pamiętajmy także o atrybutach width i height, dzięki czemu pozbędziemy się pływania tekstu i obrazków podczas wczytywania strony.
Jeżeli korzystasz z WordPressa, wystarczy, że zainstalujesz wtyczkę WP Smush.it, która świetnie poradzi sobie z optymalizacją obrazów, pracuje w tle i nie wymaga od nas żadnych działań. Każdy obrazek, który przesyłamy na serwer, jest optymalizowany przez stronę Smush.it. Ciekawą opcją jest też kompresja obrazów już istniejących w bibliotece mediów WordPress, dzięki opcji Bulk Smush.it, znajdującej się w menu Media możemy w łatwy sposób pozbyć się zbędnych KB ze zdjęć.
4. Usunięcie zbędnych wtyczek
Duża ilość zainstalowanych wtyczek/modułów w systemie CMS np. WordPress, Joomla, Drupal niekoniecznie musi spowalniać stronę, ale źle napisane rozszerzenia mogą to robić. Często zdarza się, że zainstalowanie kliku lub kilkunastu wtyczek powoduje występowanie błędów, dlatego dobrą praktyką jest instalowanie tylko niezbędnych modułów czy pluginów. A tych nieużywanych usunięcie z systemu. Wyłączona wtyczka co prawda nie obciąża systemu, ponieważ nie jest wczytywany jej kod, ale nawet dla samego porządku warto to zrobić. Możesz przeprowadzić prosty eksperyment wyłączyć wszystkie wtyczki w systemie CMS i zbadać stronę za pomocą narzędzia Page Speed Insight. Zobaczysz wtedy, jak wtyczki potrafią obciążyć stronę www. Wtyczki często doczytują pliki styli CSS, czy skrypty JS potrzebne do prawidłowego działania. Dlatego spowalniają szybkość renderowania strony. Warto wspomnieć, iż nawet jeżeli usuniemy wtyczkę mogą zostać tabele, rekordy w bazie danych. Nie każdy autor wtyczki dba o usuwanie takich danych. Warto co jakiś czas przejrzeć bazę danych i wyczyścić ją z niepotrzebnych danych.
5. Sprzątanie CMS
CMS jako system dość uniwersalny posiada mnóstwo opcji, a co za tym idzie dużą ilość kodu, która musi być przetworzona przez serwer, zanim zostanie przesłany do przeglądarki użytkownika. Często korzysta się też z gotowych szablonów, które zawierają masę śmieci w postaci wpisów i stron leżących w koszu, niepotrzebnych już wersji wpisów, czy nieusuniętych komentarzy. Każde zapytanie do bazy danych musi być przetworzone. Jeżeli rekordów w bazie będzie dużo to na odpowiedź będziemy musieli czekać dłużej. Warto co jakiś czas usunąć te wszystkie informacje odchudzając przy tym bazę danych naszego serwisu. Możemy także usunąć pliki typu readme.html, license.txt itd.
6. Zmniejszenie ilości zewnętrznych skryptów
Bardzo często możemy spotkać strony internetowe, które pobierają skrypty pochodzące z zewnętrznych źródeł, takich jak fonty czy systemy statystyk. Każdy skrypt wczytywany z zewnątrz to dodatkowy czas potrzebny na załadowanie pliku. Alternatywą jest ściągniecie takiego pliku lokalnie, na serwer i podpięcie do strony. Idealnym rozwiązaniem będzie złączenie wszystkich stylów czy plików JS do jednego pliku.
7. Modyfikacja formatu adresów URL
Systemy CMS takie jak WordPress pozwalają na ustawienie dowolnego formatu adresu URL.
W WordPressie możemy to zrobić (Ustawienia → Bezpośrednie odnośniki). Niestety, nie wszystkie z nich są tak samo wydajne. Najlepszymi formatami linków (bo najkrótszymi) są te, które zawierają identyfikator strony, ale niestety są one niezbyt przyjazne, jeżeli chodzi o pozycjonowanie (SEO). Najlepszym rozwiązaniem jest link z tytułem strony.
Zły przykład: http://egeek.pl/?p=690
Dobry przykład: http://egeek.pl/co-to-jest-certyfikat-multidomain-ssl/
8. Wybór odpowiedniego szablonu
Wybierając szablon dla strony internetowej dla gotowych CMS, często kierujemy się tylko wyglądem i nie skupiamy się na kodzie strony. Oczywiście wygląd estetyczny strony obrazki, ikony i kolory, a także font dobrane w odpowiedni sposób przyciągną klientów, ale taki szablon musi być napisany zgodnie ze sztuką. Inaczej będziemy mieć problemy z wysoką pozycją witryny w wyszukiwarkach internetowych. Oczywiście, jeżeli nie mamy pojęcia o kodowaniu stron to lepiej kupić płatny szablon, będziemy mieć wtedy większą gwarancję, iż będzie wykonany prawidłowo. Przy tego typu szablonach Premium mamy również aktualizację i wsparcie techniczne co jest bardzo istotne.
Idealnym rozwiązaniem jest stworzenie szablonu dostosowanego tylko do naszych potrzeb. Takie rozwiązanie jest zdecydowanie droższe, jednak zdecydowanie lepsze. Jeżeli nie potrafisz stworzyć takiego szablonu, możesz zlecić go profesjonalistą. Grafik przygotuje spersonalizowaną warstwę wizualną, a Web developer zakoduje szablon. Portal Egeek poleca firmę Adevo – Działamy Kreatywnie.
9. Wybór odpowiedniego serwera
Przy wyborze serwera www często jedynym kryterium wyboru jest cena. Niestety coś, co kosztuje tanio nie może być jednocześnie bardzo dobre. Nie możemy wtedy oczekiwać najwyższej jakości usług. Jeżeli inwestujemy w stronę internetową, pozycjonujemy czy nawet reklamujemy się za pomocą płatnych reklam Google AdWords to musimy także zadbać o dobry serwer.
Pytanie jaki to jest dobry serwer?
Dobry serwer to szybki serwer. Który będzie w stanie maksymalnie szybko przesłać informację zwrotną do przeglądarki klienta. Pomyśl o Hostingu z dyskami SSD!.
Na początku dla naszej strony powinien wystarczyć zwykły, serwer wirtualny gdzie zasoby są współdzielone na kilka innych stron. Jednak gdy nasz serwis stanie już bardziej popularny, to warto rozważyć serwer VPS lub dedykowaną maszynę.
10. Cache
Czym jest cache?
Cache to inaczej pamięć podręczna, to mechanizm, w którym część zasobów zgromadzonych jest w miejscu o szybszym dostępie. Podczas generowania strony internetowej na serwerze www, zostaje zbudowana strona w postaci HTML, CSS i JS. Taki kod strony zrozumiały jest już dla przeglądarki internetowej. Ówczesne strony rzadko zbudowane są tylko i wyłącznie ze wspomnianych wyżej języków znaczników. Obecnie strony posiadają zaawansowane narzędzia do zmiany wyglądu strony z poziomu zaplecza, praktycznie bez znajomości żadnego języka www. Aby takie zaawansowane systemy mogły funkcjonować muszą być napisane w języku programowania np. PHP, Python, Ruby, JAVA, C#. Wszystkie te języki są interpretowane przez serwer witryny, na którym się znajduje. W przypadku WordPress-a system napisany jest w języku PHP. Taka operacja też kosztuje czasowo. W cache przetrzymywana jest już wygenerowana gotowa strona. Dzięki temu serwer jest w stanie szybciej odpowiedzieć na zapytania, a co za tym idzie użytkownik wcześniej zobaczy gotową stronę w swojej przeglądarce internetowej. Oczywiście cache www jest odświeżany co jakiś określony interwał czasowy.
WordPress w swoim repozytorium posiada mnóstwo wtyczek, które w kompleksowy sposób zarządzają cache’owaniem stron. Możemy polecić wtyczkę W3 Total Cache. Jest to naprawdę bardzo rozbudowane rozszerzenie z całą masą dostępnych opcji. Najlepsze jest to, że możemy wszystko wyklikać z poziomu ustawień wtyczki.
Oprócz cache na serwerze mamy też cache przeglądarki internetowej, która we własnym zakresie przechowuje pewne zasoby stron. Zapewne zauważyłeś, że pierwsze wejście na stronę trwa przeważnie o wiele dłużej niż kolejne. Aby określić cache w przeglądarce, do pliku .htaccess dodaj poniższe linijki kodu, które określają czas przechowywania dla poszczególnych elementów strony.
IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/jpg "access plus 30 days"
ExpiresByType image/svg+xml "access plus 30 days"
ExpiresByType text/css "access plus 30 days"
ExpiresByType text/javascript "access plus 30 days"
ExpiresByType application/javascript "access plus 30 days"
ExpiresByType application/x-javascript "access plus 30 days"
ExpiresByType text/xml "access plus 60 minutes"
</IfModule>
