7 sposobów na natychmiastowe przyspieszenie Twojej strony internetowej

Przede wszystkim musisz wiedzieć, jak szybka (lub wolna) jest Twoja strona internetowa. Już ustaliliśmy, że należy dążyć do 2-3 sekund ładowania. Niestety dla internautów na całym świecie, większość stron nawet nie zbliża się do tego celu. Google przebadało setki tysięcy stron docelowych w 126 krajach i odkryło, że 70% stron ładowało się nawet do siedmiu sekund.

Auć.

To smutne. Zła wiadomość jest taka, że dosłownie miliony marketerów internetowych tracą pieniądze. Dużo pieniędzy. Gdyby wiedzieli ile, pewnie by zapłakali. Dobra wiadomość jest taka, że nie powinno być trudno wydostać swoją stronę z marazmu i dołączyć do tych, które ładują się w trzy sekundy lub szybciej.

Jak sprawdzić, jak szybko faktycznie ładuje się Twoja strona? Odwiedź tester Pingdom – jest darmowy – i wpisz swój adres URL. Po kilku sekundach (lub dłużej) otrzymasz wszystkie szczegóły. Potem czas zakasać rękawy i zabrać się do pracy.

#1 Uszczęśliw swój serwer mniejszą liczbą żądań HTTP

Chudziutki tekst na Twojej stronie praktycznie nie wymaga żadnego wysiłku, by pobrać go do przeglądarki odwiedzającego. Wąskie gardła i spowolnienia powodują wszystkie inne elementy – skrypty, obrazy, filmy, arkusze stylów. Dla każdego z tych elementów na stronie wysyłane jest osobne żądanie do serwera o ich pobranie. Projektanci stron często popełniają błąd, dodając po prostu za dużo „rzeczy” na stronę. Nieświadomie zużywają ogromną ilość transferu i ostatecznie lądują w 70% witryn, które ładują się ponad cztery sekundy.

Jeśli myślisz sobie: „muszę ograniczyć żądania HTTP”, masz rację! To naprawdę takie proste. Mniej żądań HTTP do serwera oznacza, przy innych warunkach równych, szybsze ładowanie strony. Oznacza to także, że musisz naprawdę przemyśleć, które elementy są na Twojej stronie faktycznie potrzebne. Każdy z nich to osobne żądanie do serwera.

Ciekawi Cię, ile żądań wykonuje obecnie Twoja strona? Zajrzyj głębiej w wyniki Pingdom i znajdziesz odpowiedź. Co uznać za zbyt wiele? Nie ma na to twardej reguły. Najlepiej przeanalizować swoją stronę i zdecydować, czy dany element jest niezbędny. Jeśli nie – usuń go.

#2 Optymalizuj obrazy pożerające transfer

W początkach ery Internetu obrazy były rzadkością, a rządził tekst. Wraz z rozwojem technologii online, zwłaszcza przyspieszeniem łączy, właściciele stron mają tendencję do przesadzania z ilością grafik. Jeśli robi się to mądrze, to nic złego. Nic tak nie przyciąga uwagi odwiedzających jak atrakcyjny obrazek (palmy i szczeniaki sprawdzają się świetnie).

Minusem jest to, że zdjęcia pochodzące z dwóch popularnych źródeł – aparatów w smartfonach i internetowych banków zdjęć – często mają po kilka megabajtów i pochłaniają transfer jak ciasteczkowy potwór na weekendowym obżarstwie. Gdy dodasz kilka takich zdjęć do dziesiątek czy setek postów, Twoja strona zaczyna ładować się boleśnie wolno.

To łatwo naprawić. Skorzystaj z edytora grafiki, jak Photoshop lub Pixlr (darmowy odpowiednik online), jeśli nie chcesz wydawać setek złotych na oprogramowanie. Przy pracy z dużymi obrazami najlepiej zapisywać je w formacie .jpeg (.jpg) i zmniejszać rozdzielczość do ok. 100 kilobajtów lub mniej. Oczywiście na temat rozdzielczości obrazów można napisać książki, ale na razie skupmy się na tym, że zmniejszenie rozmiaru pliku przyspieszy ładowanie strony.

#3 Pamięć podręczna przeglądarki = zadowoleni powracający użytkownicy

Jeśli serwer wyda takie polecenie, większość popularnych przeglądarek potrafi „zapisywać w pamięci podręcznej” pliki tymczasowo, aż będą ponownie potrzebne. Działa to tak:

• Odwiedzający po raz pierwszy wchodzi na Twoją stronę.
• Serwer każe przeglądarce „zapamiętać” pewne statyczne elementy strony, np. logo, obrazy i tekst.
• Gdy odwiedzający wróci, te elementy z pamięci podręcznej wyświetlą się niemal natychmiast, co go ucieszy.

W praktyce przeglądarka szybko pokazuje elementy statyczne bez potrzeby pobierania ich z serwera. Elementy dynamiczne (zmieniające się) wymagają żądania do serwera, by pobrać najnowszą wersję, co trwa nieco dłużej.

Najlepsze jest to – i to sprawia, że odwiedzający są zadowoleni – że mają już na czym zawiesić oko, zanim dynamiczne treści się pobiorą. Obecność obrazków lub treści na ekranie jest lepsza niż wielka biała plama z kręcącą się klepsydrą i zwiększa szansę, że powracający użytkownik poczeka na załadowanie dynamicznych elementów. Jeśli pojęcie „cache’owanie przeglądarki” sprawia, że masz ochotę rzucić internet, po prostu zadzwoń do swojego hostingu i poproś o włączenie tej funkcji.

#4. Kompresuj swoją stronę

W sieci znajdziesz różne szacunki, ale najważniejsze jest to, że niekompresowaną stronę możesz zmniejszyć nawet o 50-90% dzięki Gzip. Mniejsze pliki wymagają mniej transferu i szybciej się ładują. Gzip to otwartoźródłowy format, który pakuje (kompresuje) wszystkie pliki Twojej strony w zgrabną paczkę.

Gdy przeglądarka prosi o stronę, otrzymuje plik o nazwie np. index.html.gz zamiast tradycyjnego index.html. Po otrzymaniu tej odchudzonej paczki przeglądarka szybko ją rozpakowuje i wyświetla użytkownikowi.

Dobrym przykładem oszczędności jest strona główna Yahoo – niekompresowana zajmuje ok. 101 kb, a po spakowaniu tylko 10 kb. Tak, Gzip może zrobić to samo z Twoją stroną.

Nie możesz zmusić przeglądarki, by przyjmowała tylko wersję spakowaną, ale możesz ustawić serwer, by oferował obie opcje. To prosta sprawa dla kogoś, kto pracuje z serwerami. Jeśli to nie Ty, znów warto zadzwonić do swojego hostingu.

#5. Najpierw zoptymalizuj CSS

Proces optymalizacji dotyczy nie tylko obrazów. Dotyczy także CSS (kaskadowych arkuszy stylów). Spójrz na jakiś plik CSS – co widzisz? Dużo kodu, ale też mnóstwo pustych miejsc. Arkusze stylów są ważne – nie wątp w to – ale nie muszą wyglądać ładnie dla ludzkiego oka.

Spójrz na poniższy przykład CSS. Wygląda schludnie, prawda? Wszystko ładnie poukładane, tekst opisuje przeglądarce, jak wyświetlić stronę. Ale zwróć uwagę na te wszystkie puste miejsca. Każda spacja powiększa plik. Gdy powielisz to setki razy, plik staje się za duży. Dobra wiadomość jest taka, że nie musisz ręcznie wycinać tych „nadmiarów”.

Są świetne narzędzia online, jak darmowy CSS Minifier, który zamienia standardowy CSS taki jak…

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

…na taki wynik.

p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}

W skrócie – wszystko jest upakowane, żadna spacja się nie marnuje. Gdy zależy Ci na szybkim ładowaniu strony, liczy się każdy szczegół.

#6 Gdybyś mógł „złożyć” swoją stronę…

Czasem internet uczy się od papierowej prasy i wyrażenie „poniżej linii załamania” (ang. below the fold) jest tego przykładem. Widziałeś kiedyś gazetę na stojaku – złożoną tak, by najważniejsze informacje były widoczne na górze. Mniej ważne są ukryte pod zgięciem.

To świetny pomysł do zastosowania przy układaniu kodu HTML strony, zwłaszcza przy korzystaniu z JavaScript (JS), który potrafi zablokować ładowanie i wyświetlanie strony. Zamiast umieszczać JS na górze dokumentu, daj go na końcu sekcji body. Dzięki temu wszystko inne ładuje się szybciej, a użytkownik ma już co oglądać, zanim skrypt się pobierze.

W przeciwnym razie ekran zostanie pusty, dopóki JS się nie załaduje. Puste ekrany to zaproszenie dla niecierpliwych użytkowników do kliknięcia „wstecz”. Daj im coś do roboty, zanim pojawi się dodatkowa funkcjonalność JavaScriptu. Widzisz? Internet może się czegoś nauczyć od gazet z połowy XX wieku.

#7 Wybierz coś lepszego niż współdzielony hosting

Niezależnie, czy prowadzisz sklep e-commerce, czy strona jest głównym narzędziem promocji Twojej firmy, cel jest ten sam: ma się ładować szybko. Potencjalni klienci nie będą długo czekać, aż treść pojawi się w ich przeglądarce – klikną „wstecz”. Często zapomina się, że jedna z najważniejszych decyzji – wybór hostingu – może mieć ogromny wpływ na szybkość strony.

Hosting współdzielony jest tani (czasem nawet darmowy), ale rzadko jest najlepszym wyborem. Ceną za niską opłatę jest to, że firma hostingowa upycha zbyt wiele stron na jednym serwerze i cierpi na tym wydajność. Co gorsza, zasoby takie jak transfer, miejsce na dysku i moc procesora są współdzielone. Jeśli jedna strona zużyje za dużo, reszta ładuje się wolno, zawiesza lub jest niedostępna.

Jeśli Twoja strona to coś więcej niż hobby – nie wybieraj hostingu współdzielonego.

Lepszym wyborem dla firmy, za parę złotych miesięcznie więcej, jest hosting dedykowany lub VPS, które gwarantują zarezerwowane zasoby, bez obaw o to, co robią „sąsiedzi”, bo ich po prostu nie ma.

Co więcej, wybierając zarządzany hosting Virtual Private Server (VPS) w porównaniu do niezależnego, otrzymasz dodatkowe wsparcie techniczne od dostawcy hostingu.

Dla każdej małej i średniej firmy poważnie myślącej o obecności w sieci zdecydowanie polecamy sprawdzenie alternatyw dla hostingu współdzielonego.

Jeśli to wszystko brzmi zbyt technicznie, rozważ użycie zewnętrznych kreatorów stron WWW. Dzięki nim zbudujesz stronę od podstaw za pomocą łatwego w obsłudze interfejsu „przeciągnij i upuść”. Takie rozwiązania są nie tylko niedrogie, ale też zapewniają pełną obsługę hostingu. Strony hostowane w ten sposób ładują się z reguły szybciej niż na własnym serwerze. Możesz wtedy skupić się na tym, co najważniejsze – tworzeniu treści i rozwijaniu ruchu na stronie.

Podsumowanie

Aby spojrzeć szerzej, pierwszym krokiem przy budowie strony powinna być staranna strategia. Czyli dokładny wybór, które elementy są naprawdę niezbędne. Wybieraj lekkie (małe rozmiarowo) szablony i dobrze napisane i sprawdzone wtyczki . Innymi słowy – zaprojektuj stronę pod kątem szybkości od samego początku. Dzięki temu nie będziesz musiał później kombinować, gdy okaże się, że to wolno ładujący się potwór pożerający transfer.

Jedno jest pewne. Wraz z rosnącymi wymaganiami użytkowników – zwłaszcza jeśli chodzi o streaming audio, wideo i rozbudowaną interaktywność – rozmiary plików będą tylko rosły. Oznacza to, że właściciele firm muszą stale czuwać nad wydajnością strony. Najlepiej regularnie wykonywać testy i szukać okazji do usprawnienia swojego internetowego „mienia”, by zawsze działało jak dobrze naoliwiona maszyna, o której marzysz.