Skuteczne metody zmniejszania przepustowości (a tym samym czasu ładowania strony)?

12

Jakie są najskuteczniejsze metody ograniczenia przepustowości strony internetowej potrzebnej do renderowania strony?

Agresywne buforowanie? Minimalizujesz JS / CSS? Gzip? CMS? Duszki?

bandwidth compression Mark Henderson
źródło
Duplikat pytania otrzymuje duplikat odpowiedzi: webmasters.stackexchange.com/questions/569/…
Bryson
1
To pytanie było pierwsze, więc drugie to duplikat
Mark Henderson

Odpowiedzi:

10

Kilka podstawowych metod, które można łatwo wdrożyć na dowolnej stronie:

  • Skompresuj HTML, CSS i JavaScript za pomocą deflatelub gzipjeśli przeglądarka, która wysłała żądanie, obsługuje to.
  • Zminimalizuj JavaScript w Kompilatorze Google Closure
  • Zminimalizuj swoje css za pomocą YUI Compressor

Nieco bardziej zaangażowany:

  • Jeśli zmiana strony lub obrazu jest mało prawdopodobna, poproś przeglądarkę o jej buforowanie. Większość serwerów już to robi dla plików statycznych, więc wszystko, co musisz zrobić, to dodać je do skryptów dynamicznych, jeśli to możliwe.
  • Automatycznie scal pliki CSS i JS w jeden . Jest to korzystne, ponieważ zmniejsza żądania HTTP (które mają narzut i które niektóre głupie przeglądarki - a przez to Internet Explorer - domyślnie ograniczają 2 żądania na domenę).
  • Przenieś swoje pliki statyczne (CSS, JS, obrazy itp.) Do oddzielnej nazwy domeny. To powoduje, że informacje cookie nie są wysyłane w żądaniu HTTP.

  • Używaj duszków generowanych automatycznie . Duszek to pojedynczy obraz zawierający wiele ikon lub inne małe obrazy; następnie wybierz obraz do wyświetlenia za pomocą backgroundwłaściwości CSS . Przykład .

    Zaletą jest to, że klient wykonuje mniej żądań HTTP (które mają narzut).

Pogrubiłem „automatycznie”, ponieważ jeśli robisz te rzeczy ręcznie, to zdecydowanie nie jest tego warte i sprawia, że ​​utrzymanie kodu jest koszmarem. Zwykle robienie tego automatycznie oznacza pisanie niestandardowego skryptu, dlatego jest to „trochę bardziej zaangażowane”,

Thomas Bonini
źródło
Chciałem odpowiedzieć, ale myślę, że wszystko załatwiłeś :)
Echo mówi Przywróć Monikę
koszty ogólne są rzeczywiście ważną rzeczą do rozważenia, w przypadku małych plików mogą one reprezentować dobry odsetek przesyłanych danych.
HoLyVieR
Nie używaj deflacji, chyba że dokładnie sprawdzisz również agenta użytkownika, ponieważ w programie Internet Explorer występuje deflate.
@Kinopiko: tak, dobra rada. Zobacz moje pytanie na temat przepełnienia stosu.
Thomas Bonini,
5

Google nakreślił i wyjaśnił ich rekomendacje, by jak najlepiej zminimalizować ładowność . Obejmują one następujące techniki:

  1. Włącz kompresję
  2. Usuń nieużywany CSS
  3. Zminimalizuj JavaScript
  4. Zminimalizuj CSS
  5. Zmniejsz HTML
  6. Odłóż ładowanie JavaScript
  7. Zoptymalizuj obrazy
  8. Podaj skalowane obrazy
  9. Podaj zasoby ze stałego adresu URL

Te sugestie są częścią ich projektu open-source Firefox / Firebug o nazwie Page Speed . Podobne do wtyczki YSlow firmy Yahoo ! . Rzeczywisty dodatek Page Speed ​​sprawdzi, czy istnieje wiele więcej optymalizacji, niż ta lista szczegółowo wyjaśnia. Przedstawiono również instrukcje dotyczące używania szybkości strony.

Najlepsze praktyki Yahoo! W zakresie przyspieszania witryny określają podobny zestaw najlepszych praktyk:

  1. Minimalizuj żądania HTTP
  2. Użyj sieci dostarczania treści
  3. Dodaj nagłówek Expires lub Cache-Control
  4. Komponenty Gzip
  5. Umieść arkusze stylów na górze
  6. Umieść skrypty na dole
  7. Unikaj wyrażeń CSS
  8. Ustaw JavaScript i CSS na zewnętrzne
  9. Ogranicz liczbę wyszukiwań DNS
  10. …

(Lista Yahoo! Ma długość ~ 35 elementów, nie trzeba cytować jej w całości.)

Zarówno YSlow (link do obrazu), jak i Szybkość strony (link do obrazu) pozwolą ci uruchomić testy na twoich stronach, sugerując rzeczy, które możesz zrobić i pokazując, co z ich rekomendacji jest już zaimplementowane.

Bryson
źródło