Porady odnośnie tworzenia szybko ładujących się stron HTML

Streszczenie: Nauczyć się zdroworozsądkowych porad odnośnie tworzenia stron HTML, które ładują się szybko i dają satysfakcję odwiedzającemu.

Porady odnośnie tworzenia szybko ładujących się stron HTML

Poniższe porady są oparte na powszechnej wiedzy i eksperymentach. Jeśli masz dodatkowe wskazówki, które mogą pomóc innym zwiększyć szybkość ładowania się ich stron WWW, zapisz swoje sugestie na stronie dyskusji tego artykułu.

Zoptymalizowana strona internetowa nie oznacza jedynie szybszej reakcji na odwiedzających twoją witrynę, ale także zmniejsza obciążenie twoich 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.

Porady

Zmniejsz rozmiar strony

Rozmiar strony jest zdecydowanie najistotniejszym czynnikiem wpływającym na szybkość jej ładowania.

Zmniejszenie rozmiaru strony poprzez usunięcie niepotrzebnych białych spacji i komentarzy oraz przeniesienie wpisanych skryptów i arkuszy stylów do zewnętrznych plików może zwiększyć szybkość ładowania się strony minimalizując pozostałe zmiany w strukturze strony.

Narzędzia, takie jak HTML Tidy, mogą automatycznie usunąć dodatkowe nowe linie i poprzedzające je białe spacje z poprawnego kodu HTML. Inne narzędzia mogą "skompresować" JavaScript reformatując kod źródłowy lub czyniąc źródło mniej zrozumiałym i redukując długie identyfikatory do krótszych wersji.

Zminimalizuj liczbę plików

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 <tt>If-Modified-Since</tt> 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, zmniejszasz 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.

Zmniejsz liczbę wywołań domen

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.

Nie zawsze musi się to okazać praktyczne, jednakże powinieneś zawsze zwracać uwagę na to, aby w miarę możliwości używać na swoich stronach minimalnej liczby różnych domen.

Przechowuj w cache wielokrotnie wykorzystywane treści

Upewnij 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 nieco kłopotliwe, ale zaoszczędzi mnóstwo zapytań o strony, które w innym wypadku nie mogłyby być składowane w cache.

Więcej informacji:

  1. HTTP Conditional Get dla hakerów RSS
  2. HTTP 304: Not Modified
  3. O HTTP Last-Modified i ETag

Optymalnie porządkuj komponenty strony

Pobierz treść strony w pierwszej kolejności, dzięki czemu użytkownik najszybciej otrzyma widoczny efekt pobierania.

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.

Zmniejsz liczbę skryptów wpisanych

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 W3C DOM, zamiast starszych rozwiązań opartych na document.write.

Używaj nowoczesnego CSS i poprawnej składni znaczników

Wykorzystanie nowoczesnego CSS zmniejsza ilość znaczników, może zmniejszyć potrzebę wstawiania obrazków tworzących układ graficzny strony i może na wiele sposobów 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 HTML, poprawna składnia znaczników pozwala na swobodne korzystanie z innych narzędzi, które mogą pre-procesować twoje strony internetowe. Na przykład HTML Tidy może usunąć białe spacje i opcjonalne znaczniki zamykające, jednak odmówi uruchomienia na stronie z poważnymi błędami składniowymi.

Segmentuj zawartość

Albo zastąp układ graficzny strony oparty na tabelach na rzecz znaczników div, albo podziel tabele na mniejsze tabelki, które będą mogły zostać wyświetlone bez potrzeby pobierania całej zawartości strony.

Zamiast wielokrotnie zagnieżdżać tabele, jak w poniższym przykładzie:

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>

Skorzystaj z niezagnieżdżonych tabel lub znaczników div, np.

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>

Określaj rozmiary obrazków i tabel

Jeżeli przeglądarka może natychmiast wyznaczyć wysokość i/lub szerokość twoich 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.

Mądrze dobieraj wymagania agenta użytkownika

W celu osiągnięcia największych usprawnień w konstrukcji strony, upewnij się, że dla projektów określono rozsądne wymagania agenta użytkownika. Nie wymagaj, aby zawartość strony wyświetlała się idealnie z dokładnością co do piksela we wszystkich przeglądarkach, szczególnie w tych przestarzałych.

W idealnej sytuacji, twoje podstawowe wymagania minimalne powinny być oparte na nowoczesnych przeglądarkach, które wspierają odpowiednie standardy. Można do nich zaliczać: Netscape 7/Gecko 1.0.2+ na dowolnej platformie, Internet Explorer 5.5+ na Windows, Opera 7+ na Windows lub Safari na Mac OS X.

Zauważ jednak, że wiele porad umieszczonych w tej notce technicznej to zdroworozsądkowe techniki, które stosują się do dowolnego agenta użytkownika i mogą być zastosowane na dowolnej stronie niezależnie od wymagań technicznych przeglądarki.

Przykładowa struktura strony

· HTML

· HEAD
· LINK ...
Pliki CSS wymagane do określenia wyglądu strony. Zminimalizuj liczbę linii, aby zwiększyć wydajność, dzieląc jednocześnie niezwiązane ze sobą CSS na oddzielne pliki w celu ułatwienia konserwacji.
· SCRIPT ...
Pliki JavaScript zawierające funkcje wymagane podczas ładowania strony, ale nie DHTML, który może zostać wykonany dopiero po załadowaniu strony.
Zminimalizuj liczbę plików, aby zwiększyć wydajność, dzieląc jednocześnie niezwiązane ze sobą skrypty JavaScript na oddzielne pliki w celu ułatwienia konserwacji.
· BODY
· Widoczna dla użytkownika zawartość podzielona na małe segmenty (tabele / div), które mogą zostać wyświetlone bez potrzeby czekania na pobranie całej strony.
· SCRIPT ...
Wszystkie skrypty, które zostaną użyte jako DHTML. Skrypt DHTML zwykle może zostać wykonany dopiero po całkowitym załadowaniu strony i inicjalizacji wszystkich niezbędnych obiektów. Nie ma potrzeby ładowania tych skryptów przed zawartością strony. To jedynie opóźnia pierwsze widoczne efekty ładowania strony.
Zminimalizuj liczbę plików, aby zwiększyć wydajność, dzieląc jednocześnie niezwiązane ze sobą skrypty JavaScript na oddzielne pliki w celu ułatwienia konserwacji.
Jeśli jakieś obrazki są używane w efektach rollover, powinieneś zastosować wobec nich preload po pobraniu zawartości strony.

Powiązane odnośniki

Informacje o dokumencie

  • Autor: Bob Clary, Ewangelizator Technologiczny, Netscape Communications
  • Ostatnia aktualizacja: opublikowano 04 kwietnia 2003
  • Informacja o prawach autorskich: Copyright © 2001-2003 Netscape. All rights reserved.
  • Nota: Ten artykuł był pierwotnie częścią witryny DevEdge.
  • Tłumaczenie: Krzysztof Jurewicz.


Autorzy i etykiety dokumentu

Contributors to this page: Mgjbot, Janbil, Ptak82, Witia, Nerf, gandalf, Jan Dudek, StevenGarrity, Anonymous, Dria
Ostatnia aktualizacja: Mgjbot,