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

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

To pytanie było pierwsze, więc drugie to duplikat

— Mark Henderson

Odpowiedzi:

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,

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

Włącz kompresję
Usuń nieużywany CSS
Zminimalizuj JavaScript
Zminimalizuj CSS
Zmniejsz HTML
Odłóż ładowanie JavaScript
Zoptymalizuj obrazy
Podaj skalowane obrazy
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:

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

(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