Jak przyśpieszyć działanie strony

Czas po jakim internauta zobaczy stronę ma duży wpływ na to czy na niej pozostanie. Aby przyśpieszyć ładowanie witryny możemy wykupić szybszy serwer, zoptymalizować jego działanie, zmniejszyć ilość pobieranych danych i wykorzystać zalety nowoczesnych przeglądarek.

Szybszy hosting

Najprostsza, ale zwykle najdroższa metoda to zmiana serwera na szybszy. Przy wyborze hostingu warto zwrócić uwagę na szybkość wysyłania danych, a nie tylko na limit ich ilości. Serwer powinien ponadto znajdować się blisko potencjalnych użytkowników. Odbije się to na czasie wysyłania danych.

Szybszy skrypt

Przyśpieszyć można również działanie serwera. Znów najprostszy jest zakup szybszego sprzętu, ale jeśli aplikacja jest źle napisana, to nic nie pomoże. Ilość i złożoność zapytań do bazy należy dobrać tak, aby baza wykonywała jak najwięcej obliczeń, a skrypt nie musiał ich przetwarzać. Jak najwięcej zapytań powinno być cache'owanych.

Testowanie połączenia ułatwi jego optymalizację.

Niestety na część serwerów nie mamy wpływu – reklamy, statystyki czy widgety innych serwisów potrafią spowolnić nawet najlepszą stronę. Warto zastanowić się czy koniecznie potrzebne są spowalniające skrypty i czy nie da się załadować ich po załadowaniu szkieletu (jak np. Google Analytics). Jeśli nie, to powinny znaleźć na samym końcu pobieranych elementów. Oczywiście tylko jeśli JavaScript nie wpływa na działanie strony.

Szybszy transfer

Poza szybkością serwera ważna jest również ilość przesyłanych danych. Najwięcej ważą obiekty multimedialne, więc warto przenieść je na szybszy serwer. Pozostałe elementy należy skompresować. Dotyczy to zwłaszcza grafik i skryptów. Należy przy tym pamiętać, że pliki skompresowane JPG-iem czy zapisane w formacie GIF mogą znacznie stracić na jakości.

A jak skompresować skrypty? Zamiast nazw typu toJestMojaZmienna warto stosować jednoliterowe, należy usunąć zbędne białe znaki, nie powielać fragmentów kodu i wyciąć komentarze. Skrypt będzie nieczytelny, ale jego rozmiar zmniejszy się o kilkadziesiąt procent! Jeśli serwer na to pozwala, należy włączyć kompresję gzip.

Szybsza komunikacja

Komunikacja z serwerem to nie tylko pobieranie danych, ale także nawiązania połączenia. Czas ten jest mniej więcej stały i opóźnia pobranie każdego pliku o przeciętnie 0,1 – 0,2s (zależy to również od serwera). To mało, ale jeśli mamy do pobrania 30 obrazków, to opóźnienie wyniesie 5 sekund. Z tego względu należy łączyć pliki graficzne tak jak w dołączonym przykładzie.

Połączenie małych plików graficznych w jeden to najprostszy sposób na przyśpieszenie.

Wykorzystując CSS można „wyciąć” interesujący nas fragment grafiki. W przykładowym kodzie

[+]

[-]

 

 

 

1. #zielony{
2.         background: url(przyklad.gif) -80px -30px;
3.         width:160px;
4.         height:50px;
5. }

Listing zwinięty - 5 linii

Używamy tylko fragmentu grafiki przykład.gif przesuniętego o 80 pikseli w prawo od lewej krawędzi i o 30 pikseli od góry. Widoczny wycinek ma 160 pikseli szerokości i 50 wysokości, a pozostała część grafiki może być wykorzystana w innych miejscach. Można w ten sposób połączyć wszystkie pliki w danym formacie.

Szybsza przeglądarka

Warto również wykorzystać zalety nowoczesnych przeglądarek i część danych pobrać asynchronicznie po załadowaniu strony, przy grafikach określać ich wysokość i szerokość, żeby przeglądarka przy renderowaniu wiedziała jak ułożyć treść czy wykorzystać przyśpieszenie płynące z używania Chrome'a.

Wykorzystanie tych prostych sztuczek przyśpieszy działanie strony, a nie wymaga specjalistycznej wiedzy i wiele zachodu. Użytkownicy z pewnością będą zadowoleni.