Typowe optymalizacje w celu zmniejszenia rozmiaru strony HTML lub XHTML?

Jakie są typowe optymalizacje w celu zmniejszenia rozmiaru strony HTML lub XHTML? Niektóre, które przychodzą na myśl, to:

• usuwanie komentarzy,
• usuwanie obcych białych znaków,
• przenoszenie powtarzalnych stylów wbudowanych do arkusza stylów CSS,
• itp.

Jakie są inne? Która oferta daje największe zyski lub może być wykonywana automatycznie przez narzędzie lub moduł?

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.

Ktoś powie, że znaczniki powinny być skompresowane przez Gzip, więc równie dobrze mogę być tym.

Oto obszerne wyjaśnienie, czym jest Gzip wraz z linkami, jak skonfigurować go w Apache i IIS .

Artykuł na WebReference stwierdza, że znajdziesz następujące wzrost wydajności podczas korzystania z mod_gzip moduł Apache.

Za pomocą tego modułu webmasterzy zwykle widzą wzrost wydajności serwera WWW o 150-160% i zmniejszenie przepustowości HTML / XML / JavaScript o 70% - 80%. Ogólna oszczędność przepustowości wynosi około 30 do 60%

Prawdopodobnie nie jest tego warte.

Mam grał usuwając spacje w HTML trochę, i piła tylko 10% zniżki w rozmiarze ładowności po gzipping.

Realistycznie, usuwanie białych znaków i wysuwu wiersza działa tak, jak dla nas kompresja. Właśnie dodajemy odrobinę wydajności wspomaganej przez człowieka:

                  Surowy skompresowany
Niezoptymalizowany CSS 2299 bajtów 671 bajtów
Zoptymalizowany CSS 1758 bajtów 615 bajtów

(tak, to mówi CSS, ale te same podstawowe zasady dotyczą również HTML)

Problemem jest,

1. GZIP wykonuje za Ciebie 90% pracy, więc jest to szalona mikrooptymalizacja. To znaczy, może jeśli jesteś Google lub Yahoo.
2. To dodatkowe 10% zmniejszenie rozmiaru wiąże się z dość wysokimi kosztami całkowicie nieczytelnego HTML w „źródle widoku”

ok, mały: zachowaj nazwy i atrybuty znaczników pisane małymi literami i spójne (tak na marginesie, jako standardowy mandat). Zwiększa współczynnik kompresji o procent lub dwa.

Jeśli jesteś witryną o bardzo dużej objętości, możesz rozważyć użycie super krótkiego identyfikatora encji i nazw klas, ponieważ zmniejszają one zarówno rozmiar strony HTML, jak i stronę CSS używaną do jej stylowania.

Uważaj również na zbyt ustrukturyzowaną kompozycję witryny; łatwo jest dodawać sekcje div i span, gdy nie są one naprawdę potrzebne. Możesz także rozważyć strategie, takie jak stronicowanie dla dużych zestawów wyników i podobnych wyników.

W rzeczywistości te optymalizacje mają wyjątkowo ograniczony zwrot (a dla strategii stronicowania potencjalne wady SEO) są tego warte w przypadku witryn, które nie należą do tej samej kategorii ruchu co Google. Postępuj zgodnie z zaleceniami jessegavin, aby włączyć kompresję GZip / Deflate i gotowe.

Połącz wspólne css, obrazy i javascripts w jeden plik. Nie zmniejsza to rozmiaru pliku, ale zmniejszy liczbę żądań HTTP. W przypadku mniejszych plików obciążenie http znacznie przewyższa czas pobierania. Łatwo jest napisać skrypt łączący pliki css i javascript, dzięki czemu można łatwiej nimi zarządzać podczas programowania, ale wdrażać je w jednym pliku.

Więcej informacji na temat łączenia zdjęć można znaleźć na stronie http://css-tricks.com/css-sprites .

Sprawdź także Kompilator zamknięcia od Google. Nie korzystałem z niego, ale twierdzi, że pobieranie javascript i szybsze uruchamianie.

Jak powiedzieli inni, największą korzyścią jest gzipping.

Upewnij się, że używasz odpowiednich elementów HTML. Zamiast tego <div class="page-title">Hello World</div>użyj <h1>Hello World</h1>.

I oczywiste: nie używaj tabel do układania! Użyj prostego systemu siatki, takiego jak 960.gs (lub stwórz własną lekką wersję). Może być duża różnica między rozmiarem HTML, szczególnie w przypadku zagnieżdżonych tabel. Porównać:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

i

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Jeśli korzystasz z witryny ASP.NET, uważaj na ViewState . Może generować bardzo duże ukryte pola na stronie, przeciążając je często, gdy nie jest to konieczne (już zdarzyło mi się, że ViewState jest cięższy niż reszta strony).
Jest to szczególnie prawdziwe, jeśli używasz AJAX, ponieważ ViewState będzie wysyłany tam iz powrotem przy każdym żądaniu, spowalniając twoją stronę internetową i zwiększając natężenie ruchu.

Rozwiązanie znajduje się jednak w kodzie .net .

Istnieje wiele bezpłatnych narzędzi do analizy i optymalizacji wydajności sieci . Możesz skompilować własną dużą listę kontrolną na podstawie generowanych raportów.

Oto kilka sparafrazowanych punktów z oceny wydajności Zoompf -

• Unikaj dynamicznie generowanej treści (obrazu). Zamiast tego rozważ rysowanie lub zmianę rozmiaru obrazu offline jako statyczny plik obrazu.
• Unikaj używania tagów graficznych bez wymiarów.
• Google Analytics (i reklamy) obsługuje asynchroniczne ładowanie pliku JavaScript. W przypadku ich użycia możesz wybrać ładowanie asynchroniczne.

Często pomijaną strategią jest usunięcie całego niepotrzebnego kodu HTML ze strony.

W przypadku każdego projektu musisz zdecydować, którą z tych strategii zastosować, na podstawie używanej wersji (X) HTML i sposobu użytkowania witryny.

(Najwyraźniej nie mogę opublikować więcej niż jednego hiperłącza na odpowiedź, ponieważ jestem nowym użytkownikiem, więc te adresy URL będą musiały zostać skopiowane i wklejone ... Mam nadzieję, że to koszerne).

• W HTML4 i HTML5 dla wielu elementów tag zamykający nie jest wymagany. Znacznik otwierający dla elementu body również nie jest wymagany. Widzieć:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• Protokół (http :) część adresów URL HTTP można pominąć.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• Dzięki tagom takim jak <br> możesz po prostu pominąć ukośnik używany w składni XHTML (<br />), chyba że faktycznie potrzebujesz XHTML.

• Oto kilka przykładów małych struktur dokumentów HTML:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Inni to powiedzieli, ale po prostu nie włożyli wystarczającego sensu do domu: gzipowanie.

1. Praktycznie bez wysiłku lub wad.
2. Z mojego ograniczonego doświadczenia wynika, że ​​zmniejsza rozmiar HTML od 60% do 90%.

Wszystkie inne poprawki, które możesz wprowadzić w HTML, wymagają większego wysiłku / konserwacji i prawie nie mają żadnego efektu w porównaniu do zwykłego gzipowania i zapominania. Po prostu nie są warte czasu, chyba że jesteś Google. Nie jesteś Google.

(Jak wspomnieli inni, im bardziej spójny jest Twój HTML, tym większy efekt będzie miał gzipping, ponieważ - zgodnie z moim ograniczonym rozumieniem - gzipping szuka identycznych ciągów w twoim pliku i zastępuje każdą powtarzaną instancję małym kodem odnoszącym się do oryginalne. Więc praktyki autorskie, takie jak utrzymywanie atrybutów w tej samej kolejności i utrzymywanie tej samej obudowy, mogą pomóc programowi gzipping wykonać swoją pracę).

Aha - a jeśli w pewnym momencie procesu kompilacji / udostępniania automatycznie minimalizujesz kod HTML, nie wymaga to dużo wysiłku / konserwacji. Niektóre minimalizatory HTML są wymienione tutaj:

/programming/728260/html-minification