Jak przyspieszyć ładowanie strony

Oczywiście temat jest praktycznie nie do wyczerpania, można o tym napisać całkiem pokaźną książkę, ale jest kilka podstawowych elementów, na które trzeba zwrócić uwagę. Temat potraktuję hasłowo, więc jeżeli ktoś potrzebuje go rozwinąć proszę o komentarze. Postaram się napisać coś więcej.

Od czego więc zacząć?

Sprawdź aktualną prędkość strony

Ciężko przyspieszyć stronę, skoro nie wiemy jak wolna ona jest. Ocena “na oko” niestety się nie sprawdzi, trzeba skorzystać z profesjonalnych narzędzi, które rozpoznają wolne elementy oraz od razu zasugerują jakieś rozwiązanie.

Ja polecam dwa popularne rozwiązania:

• Page Speed czyli wtyczka dla FireFoxa oraz jej wersja dla Chroma, która przeprowadza analizę i daje podstawowe wskazówki do optymalizacji.
• Web Page Test drugie narzędzie, które kompleksowo taktuje temat.

Optymalizuj obrazki

Czyli jak zmniejszyć wagę pliku nie tracąc na jakości. Podstawy są raczej oczywiste – JPEG do dużych obrazków, zdjęć gdzie możemy sobie pozwolić na stratę jakości (często niezauważalną), PNG – do wszystkiego gdzie potrzebujemy ostrych krawędzi i obejdziemy się w palecie 256kolorów, PNG24 – tam gdzie potrzebujem super jakości a rozmiar nie ma znaczenia – (choć ma) – GIFów nie lubię i nie używam – PNG zwykle wychodzi parę procent mniejszy, więc skoro nie widać różnicy…

Warto też zapoznać się z serwisami online do optymalizacji zdjęć i obrazków takimi jak: Online image optymizer . Generalnie polecam Google i wyżej wymienione hasła.

Skaluj obrazki

Wielkość pliku obrazka to nie wszystko – warto zadbać o rozmiar. Na pewno nie przez zmianę parametrów width i height. Jeżeli wstawiasz na stronę miniaturkę 150×150 zadbaj o to, żeby plik źródłowy był dokładnie takich rozmiarów. Nie rób tego za pomocą tagów!!!

Kompresuj zawartość

Zagadnienie mocno techniczne, jeżeli korzystasz z gotowej platformy CMS prawdopodobnie ma już ona uruchomioną… kompresję w nagłówkach, jeżeli nie włącz ją!

Kompresuj CSS i JavaScript

Kolejne zagadnienie o którym większość webmasterów nie wie. CSS i JavaScript można kompresować. Kompresja i optymalizacja CSS to zagadnienie raczej trudne, ale można skorzystać z serwisów takich jak CSS Compressor , do JavaScriptu polecam Closure Compiler albo wersję desktopową , która sam napisałem 😉

Trzymaj CSS i JavaScript w osobnych plikach

Podobno jest to oczywiste, ale o ileż wygodniej jest wstawić jakiś styl czy JavaScript w treści kodu… Kod z zewnętrznego pliku ładuje się raz – czyt to jest .css czy .js podczas wejścia na stronę zostaje on załadowany do cache przeglądarki, podczas wchodzenia na kolejne podstrony nie musi być więc on ponownie pobierany.

Ograniczaj liczbę wywołań

Rozrzucanie wszystkiego do zewnętrznych plików jest potrzebne i wymagane, ale… bez przesady. 10 czy 20 plików .css i .js nie przyspieszy naszej strony. Trzeba połączyć je w jeden większy plik. Ręcznie, albo za pomocą automatu. To samo dotyczy ikonek – jeżeli masz 20 piktogramów, które coś symbolizują – połącz je w jeden większy obrazek i używaj Spriteów – tradycyjnie można się wspomóc narzędziem online do generowania spriteów. Ja używam CSS Sprite Generator a.

Używaj Cache

Ale jak? Jeżeli masz WordPressa, albo inny popularny system CMS pewnie jest już do niego wtyczka. Jeżeli nie – tam gdzie się da – cachuj wyniki zapytań, a najlepiej generuj statyczną treść i serwuj dla klienta. Pamiętaj, że serwery WWW z założenia miały serwować statyczną treść – więc każdy plik .html załaduje się szybciej niż dowolny skrypt .php czy .asp.

Oczywiście nie jest to możliwe w przypadku każdego serwisu czy strony, ale… szczerze mówiąc jak często zmieniasz treść na stronie “kontakt” czy “o firmie”?