A | A | A

SZYBKOŚĆ ŁADOWANIA STRONY

Szybkość ładowania serwisu jest jednym z najważniejszych elementów, o które trzeba zadbać przy tworzeniu witryny. Nie ma tu znaczenia, czy mowa jest o rozwoju serwisu społecznościowego, zakładaniu bloga czy też o planowaniu wdrożenia sklepu internetowego. Czasy ładowania strony zależą od wielu czynników, zaczynając od szybkości serwera na którym serwis jest umieszczony poprzez użycie elementów multimedialnych a kończąc na błędach w kodzie strony. Programista poprzez testy musi upewnić się, że oczekiwanie na wyświetlenie każdej strony serwisu nie jest zbyt uciążliwe. Należy pamiętać, że przeciętny użytkownik spędza na stronie około 6 sekund w celu odnalezienia interesujących go informacji i około 60 sekund gdy je na danej stronie odnajdzie. Pozwala to na przeczytanie 28% zawartości strony. Przy tak krótkich wizytach użytkowników nie można pozwolić aby ładowanie każdej ze stron trwało dłużej niż mrugnięcie oka.

Na czas ładowania strony mają wpływ takie czynniki jak rozmiar pliku HTML, ilość i rozmiar zewnętrznych plików CSS oraz JavaScript a także całkowita wielkość wszystkich użytych grafik i elementów multimedialnych. Przy długich czasach potrzebnych na wyświetlenie strony należy elementy te zredukować do minimum. Zoptymalizowana strona internetowa nie oznacza jedynie szybszej reakcji na odwiedzających witrynę, ale także zmniejsza obciążenie serwerów WWW i łącza internetowego. Może się to okazać kluczowe dla witryn o dużym natężeniu lub witryn, w których następuje nagły skok odwiedzalności z powodu niecodziennych okoliczności takich, jak sensacyjne historie podawane w mediach.

Optymalizacja ładowania się strony nie służy tylko treściom, które zostaną obejrzane przez wąską grupę odwiedzających korzystających z modemu. Jest ona tak samo ważna dla treści szerokopasmowych i może zaowocować wielkimi usprawnieniami również dla odwiedzających z najszybszymi połączeniami.

Optymalizacja strony dla szybszych czasów ładowania

  • Zmniejszenie liczby plików, do których odwołuje się strona sieciowa zmniejsza liczbę połączeń HTTP koniecznych do pobrania strony. Zależnie od ustawień cache przeglądarki, może ona wysłać do serwera żądanie If-Modified-Since dla każdego pliku CSS, JavaScript lub obrazka, pytając tym samym, czy plik został zmodyfikowany od czasu ostatniego pobrania. Zmniejszając liczbę plików, do których odwołuje się strona internetowa, zmniejszany jest czas potrzebny do wysłania tych żądań i otrzymania odpowiedzi. Zbyt wiele czasu poświęconego wysyłaniu zapytań o czas ostatniej modyfikacji powiązanych plików może opóźnić pierwsze wyświetlenie strony jako że przeglądarka musi sprawdzić czas modyfikacji każdego pliku CSS lub JavaScript przed jej wyrenderowaniem.
  • Zmniejszenie liczby wywoływanych domen zmniejsza czas oczekiwania. Ponieważ każda oddzielna domena pochłania czas wywołania DNS, zmniejszenie liczby oddzielnych domen, z których korzysta się do tworzenia odnośników do plików CSS, JavaScript i obrazków, zmniejsza czas ładowania się strony.
  • Przechowywanie w cache wielokrotnie wykorzystywanych elementów – należy upewnić się, że każda treść, która może być składowana w cache, jest tam przechowywana z odpowiednim czasem wygaśnięcia. W szczególności zwróć uwagę na nagłówek Last-Modified. Pozwala on efektywnie przechowywać strony w cache. Nagłówek ten informuje agenta użytkownika o tym, kiedy nastąpiła ostatnia modyfikacja pliku, który ma zostać załadowany. Dla stron statycznych (np. .html, .css) większość serwerów WWW automatycznie doda nagłówek Last-Modified, opierając się na dacie ostatniej modyfikacji przechowywanej w systemie plików. Dla stron dynamicznych (np. .php, .aspx) oczywiście nie może to zostać wykonane i nagłówek nie jest wysyłany. Zatem w szczególności dla stron, które są generowane dynamicznie, nieco pracy wykonanej w tym zakresie jest korzystne. Może być to kłopotliwe, ale zaoszczędzi mnóstwo zapytań o strony, które w innym wypadku nie mogłyby być składowane w cache.
  • Optymalne uporządkowanie elementów - treść strony powinna być pobrana w pierwszej kolejności, dzięki czemu użytkownik najszybciej otrzyma widoczny efekt wywołania strony. Zawartość strony wraz z wszelkimi arkuszami CSS lub skryptami JavaScript wymaganymi do jej pierwszego wyświetlenia powinna zostać pobrana jako pierwsza. Stanowi ją zwykle tekst i można zyskać na jego kompresji w modemie, zapewniając tym samym szybszą reakcję na zapytanie użytkownika. Wszystkie mechanizmy DHTML, które wymagają, aby strona została pobrana w całości przed ich użyciem, powinny być początkowo dezaktywowane i uaktywnione dopiero po pobraniu strony. Dzięki temu skrypty DHTML JavaScript zostaną pobrane po zawartości strony, zwiększając tym samym całkowitą wydajność jej ładowania.
  • Zmniejszenie lub wyeliminowanie skryptów wewnątrz dokumentu XHTML - skrypty wpisane mogą być kosztowne dla czasu ładowania się strony, jako że parser musi założyć, że skrypt wpisany może zmodyfikować strukturę strony. Zmniejszenie wykorzystania skryptów wpisanych w ogólności, a w szczególności użycia instrukcji document.write do wypisywania zawartości, może zwiększyć całkowitą szybkość ładowania się strony. W nowoczesnych przeglądarkach do manipulowania zawartością strony należy używać nowoczesnych metod DOM, zamiast starszych rozwiązań opartych na document.write.
  • Użycie poprawnej składni oraz styli CSS - wykorzystanie nowoczesnego CSS zmniejsza ilość znaczników, może zmniejszyć potrzebę wstawiania obrazków tworzących układ graficzny strony i w wielu sytuacjach jest w stanie zastąpić obrazki, które faktycznie przedstawiają jedynie tekst i mają dużo większy rozmiar niż odpowiedni CSS i tekst przez niego opisywany. Korzystanie z poprawnej składni znaczników ma inne zalety. Oprócz tego, że przeglądarka nie musi wykonywać "korekty błędów" podczas parsowania XHTML. Należy również unikać wyrażeń regularnych wewnątrz styli CSS a wszystkie reguły powinny znaleźć się w zewnętrznym arkuszu styli.
  • Określenie rozmiaru obrazków i tabel - jeżeli przeglądarka może natychmiast wyznaczyć wysokość i/lub szerokość obrazków i tabel, będzie mogła wyświetlić stronę internetową bez potrzeby ponownego opływania jej zawartości. To nie tylko przyspieszy wyświetlenie strony, ale także zapobiegnie irytującym zmianom w układzie graficznym strony po zakończeniu pobierania. Obrazki powinny mieć ustawione atrybuty height oraz width. Tabele powinny korzystać z reguły CSS table-layout: fixed; i określać szerokość kolumn za pomocą znaczników COL i COLGROUP.
  • Zmniejszenie ilości wykorzystywanych obrazów i ich rozmiarów – jeśli to tylko możliwe należy usunąć wszelkie zbędne obrazy. Wielkość tych, które muszą pozostać na stronie należy zoptymalizować przez lepszą kompresję, odpowiedniejszy format lub obniżenie jakości. Należy pamiętać, że rozmiar wszystkich obrazów w KB zazwyczaj znacznie przekracza rozmiar pozostałych elementów serwisu.
  • Po wykonaniu testów środowisk i dostępności kolejnym krokiem będzie wykonanie testów użyteczności. Badanie użyteczności serwisu internetowego ma na celu usunięcie możliwie jak największej liczby problemów jakie napotyka użytkownik podczas przeglądania serwisu internetowego. Metodologia tzw. testu usability zazwyczaj składa się z kilku technik badawczych stosowanych niezależnie bądź jednocześnie.

Skocz do góry strony ↑