Optymalizacja strony - JavaScript

Opublikowano:
W poprzednich wpisach o optymalizacji strony zajęliśmy się przede wszystkim obrazkami. Dzisiaj natomiast zajmiemy się optymalizacją JavaScript na Twojej stronie WWW.

Jeśli nie czytałeś jeszcze moich wpisów na temat optymalizacji obrazków to zapraszam najpierw tutaj:

optymalizacja strony - część I
optymalizacja strony - część II

Spokojnie do obrazków jeszcze wrócimy, ale zanim to nastąpi zajmiemy się kolejnym “ciężkim tematem”. Stosując się do poniższych zasad Twoja strona na pewno dużo zyska na wadze i ładowaniu.

  • Ładuj tylko te skrypty, które potrzebujesz - przykładowo korzystasz na stronie z kilku skryptów np TinyMCE, FancyBox i jakiś skrypt do obsługi sliderów no i oczywiście JQuery. TinyMCE korzystasz tylko do edycji wpisów, FancyBox znajduje się na jednej podstronie z galerią, a skrypt slidera występuje na stronie głównej. Nie ładuj na każdej podstronie wszystkich skryptów, tylko te które potrzebujesz. Sam FancyBox w wersji zminimalizowanej waży 22Kb. Przy stronach internetowych, które są bardziej multimedialne bez problemu 500Kb zaoszczędzisz na jednej stronie.
  • Korzsystaj z wersji zminimalizowanych skryptów. W wersji produkcyjnej serwisu WWW, wskazane jest, abyś korzystał z wersji zminimalizowanych - czyli pozbawionych zbędnych znaków. Idąc dalej za przykładem FancyBoxa, jego wersja deweloperska waży 47,6Kb, a zminimalizowana 22Kb - czyli ponad połowę mniej.
    Do optymalizacji własnych skryptów JavaScript polecam wykorzystać to narzędzie
  • Pisz własne skrypty. Wszędzie powtarzane jest, aby nie wymyślać koła na nowo, ale nie do końca. Większość popularnych skryptów, jest wielkimi bibliotekami oferującymi bardzo bogate możliwości. Wracając do slidera, jeśli nasz slider ma tylko kilka treści, które po najechaniu myszką mają się zatrzymać, to kod do niego zajmie około 10~20 linijek, a pierwsza z brzegu biblioteka (u mnie FlexSlider 2) waży 22,3Kb - spora różnica.
  • Najmniej potrzebne skrypty umieść tuż przed tagiem - w tym miejscu powinny być kody śledzące, wywołania funkcji np $(document).ready(), ładowanie bibliotek (niestety nie wszystkie zadziałają, jak są dodane na końcu, więc rób to rozważnie). Dzięki temu cała treść strony się załaduje i użytkownik może już przeglądać zawartość serwisu, a skrypty w tym momencie są ładowane. Skraca to czas jaki użytkownik musi stracić między wysłaniem żądania, a przeglądaniem strony.
  • Korzystaj tylko z jednego kodu śledzącego - albo adsense albo Piwik nie korzystaj z obu. Oba łączą się z zewnętrznymi serwerami i wydłużają czas ładowania strony. Należy ten czas skrócić do minimum, więc i na tym można skorzystać.

Wykonaj sobie kopie swojego serwisu i wprowadź w nim powyższe poprawki i sprawdź czas ładowania strony i przekonaj się sam, że warto wprowadzić powyższe - na pozór drobne - poprawki na swojej stronie WWW.