Optimalisasi umum untuk mengurangi ukuran halaman HTML atau XHTML?

Apa saja optimasi umum yang dilakukan untuk mengurangi ukuran halaman HTML atau XHTML? Beberapa yang terlintas dalam pikiran adalah:

• menghapus komentar,
• menghapus spasi asing,
• memindahkan gaya inline berulang ke stylesheet CSS,
• dll.

Apa yang lainnya? Yang menawarkan penawaran terbaik atau dapat dilakukan secara otomatis oleh alat atau modul?

Google telah menjabarkan dan menjelaskan rekomendasi mereka untuk meminimalkan Ukuran Payload terbaik . Mereka termasuk teknik-teknik berikut:

1. Aktifkan kompresi
2. Hapus CSS yang tidak digunakan
3. Perkecil JavaScript
4. Minimalkan CSS
5. Minify HTML
6. Tunda pemuatan JavaScript
7. Optimalkan gambar
8. Sajikan gambar berskala
9. Sajikan sumber daya dari URL yang konsisten

Saran-saran ini adalah bagian dari proyek add-on Firefox / Firebug open-source mereka yang disebut Page Speed . Mirip dengan plugin YSlow milik Yahoo ! . Pengaya Kecepatan Halaman aktual akan memeriksa lebih banyak optimasi daripada yang dijelaskan secara rinci di dalam daftar itu. Instruksi untuk Menggunakan Kecepatan Halaman juga disajikan.

Praktik Terbaik Yahoo! Untuk Mempercepat Situs Web Anda mengidentifikasi serangkaian praktik terbaik serupa:

1. Minimalkan Permintaan HTTP
2. Gunakan Jaringan Pengiriman Konten
3. Tambahkan yang kedaluwarsa atau Header Kontrol-Cache
4. Komponen Gzip
5. Letakkan Stylesheets di Atas
6. Letakkan Script di Bawah
7. Hindari Ekspresi CSS
8. Jadikan JavaScript dan CSS Eksternal
9. Kurangi Pencarian DNS
10. ...

(Daftar Yahoo! Panjang ~ 35 item, tidak perlu mengutip secara keseluruhan.)

Baik YSlow (tautan gambar) dan Kecepatan Halaman (tautan gambar) akan memungkinkan Anda untuk menjalankan tes pada halaman Anda, menyarankan hal-hal yang dapat Anda lakukan dan menunjukkan kepada Anda apa, dari rekomendasi mereka, sudah diterapkan.

Seseorang akan mengatakan bahwa markup harus di-Gzip, jadi saya mungkin juga orangnya.

Berikut adalah penjelasan panjang tentang apa itu Gzip dengan tautan tentang cara mengaturnya di Apache dan IIS .

Sebuah artikel di WebReference menyatakan bahwa Anda akan menemukan keuntungan kinerja berikut ketika menggunakan mod_gzip Apache modul.

Webmaster biasanya melihat peningkatan 150-160% dalam kinerja server Web, dan 70% - 80% penurunan bandwidth HTML / XML / JavaScript digunakan, menggunakan modul ini. Secara keseluruhan penghematan bandwidth sekitar 30 hingga 60%

Mungkin tidak sepadan.

Saya telah bermain dengan menghapus spasi dalam HTML sedikit, dan hanya melihat pengurangan ukuran 10% dalam muatan setelah gzipping.

Secara realistis, penghapusan spasi putih dan linefeed sedang melakukan pekerjaan yang kompresi akan lakukan untuk kita. Kami hanya menambahkan sedikit efisiensi yang dibantu manusia:

                  Terkompresi mentah
CSS Tidak Dioptimalkan 2,299 bytes 671 bytes
Dioptimalkan CSS 1,758 byte 615 byte

(ya ini mengatakan CSS tetapi aturan dasar yang sama juga berlaku untuk HTML)

Masalahnya adalah,

1. GZIP melakukan 90% pekerjaan untuk Anda, jadi ini adalah optimasi mikro yang gila. Maksud saya, mungkin jika Anda Google atau Yahoo.
2. Pengurangan ukuran tambahan 10% itu datang pada biaya yang agak curam dari HTML yang sama sekali tidak dapat dibaca dalam "sumber tampilan"

ok, yang kecil: pertahankan nama tag dan atribut huruf kecil dan konsisten (sebagai mandat standar, by the way). Ini akan meningkatkan rasio kompresi dengan persentase atau dua.

Jika Anda adalah situs bervolume sangat tinggi, Anda mungkin ingin mempertimbangkan untuk menggunakan id entitas super pendek dan nama kelas, karena ini mengurangi ukuran halaman HTML dan halaman CSS yang digunakan untuk mendesainnya.

Juga, berhati-hatilah dengan komposisi situs yang terlalu terstruktur; mudah untuk menambahkan bagian div dan span ketika mereka tidak benar-benar dibutuhkan. Anda mungkin juga ingin mempertimbangkan strategi seperti paging untuk set hasil besar dan output serupa.

Pada kenyataannya, optimasi ini memiliki pengembalian yang sangat terbatas (dan untuk strategi paging, potensi kerugian SEO) menjadi layak untuk situs yang tidak dalam kategori lalu lintas yang sama dengan Google. Cukup ikuti rekomendasi jessegavin untuk mengaktifkan kompresi GZip / Deflate dan selesai dengannya.

Gabungkan css, gambar, dan javascript umum ke dalam satu file. Ini tidak mengurangi ukuran file tetapi akan mengurangi jumlah permintaan http. Untuk file yang lebih kecil, overhead http jauh melebihi waktu download. Sangat mudah untuk menulis skrip untuk menggabungkan file css dan javascript sehingga Anda dapat mengelolanya lebih mudah selama pengembangan tetapi menyebarkannya ke satu file.

Lihat http://css-tricks.com/css-sprite untuk informasi lebih lanjut tentang menggabungkan gambar.

Juga, periksa Kompilator Penutupan dari Google. Saya belum menggunakannya, tetapi mengklaim untuk membuat unduhan javascript dan berjalan lebih cepat.

Seperti yang dikatakan orang lain, manfaat terbesar berasal dari gzipping.

Pastikan Anda menggunakan elemen HTML yang sesuai. Alih-alih <div class="page-title">Hello World</div>, gunakan <h1>Hello World</h1>.

Dan yang jelas: jangan gunakan tabel untuk tata letak! Gunakan sistem grid sederhana seperti 960.gs (atau putar versi ringan Anda sendiri). Mungkin ada perbedaan besar antara ukuran HTML, terutama dengan tabel bersarang. Membandingkan:

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

dan

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

Jika Anda menggunakan situs web ASP.NET, berhati-hatilah dengan kondisi tampilan . Ini dapat menghasilkan bidang tersembunyi yang sangat besar di laman, sering membebani bidang itu sementara tidak diperlukan (sudah terjadi pada saya bahwa kondisi tampilan lebih berat daripada bagian laman lainnya).
Terutama benar jika Anda menggunakan AJAX, karena kondisi tampilan akan dikirim bolak-balik dengan setiap permintaan, memperlambat situs web Anda dan meningkatkan volume lalu lintas.

Solusinya ada dalam kode .net .

Ada banyak alat analisis & optimisasi kinerja web gratis . Anda dapat menyusun daftar besar Anda sendiri dari laporan yang mereka hasilkan.

Berikut adalah beberapa poin parafrase dari Penilaian Kinerja Zoompf -

• Hindari konten (gambar) yang dihasilkan secara dinamis. Pertimbangkan untuk menggambar atau mengubah ukuran gambar secara offline sebagai file gambar statis.
• Hindari menggunakan tag gambar tanpa dimensi.
• Google Analytics (& Iklan) mendukung pemuatan file JavaScript yang tidak sinkron. Jika Anda menggunakannya, Anda dapat memilih untuk memuatnya secara tidak sinkron.

Strategi yang biasanya diabaikan adalah menghapus semua kode HTML yang tidak perlu dari halaman.

Untuk proyek apa pun, Anda harus memutuskan strategi mana yang akan digunakan berdasarkan versi (X) HTML yang Anda gunakan, dan cara situs web akan digunakan.

(Rupanya, saya tidak dapat memposting lebih dari satu hyperlink per jawaban karena saya pengguna baru, jadi URL ini harus disalin dan ditempelkan ... Saya harap itu halal.)

• Di HTML4 dan HTML5, untuk banyak elemen, tag penutup tidak diperlukan. Tag pembuka untuk elemen tubuh juga tidak diperlukan. Lihat:

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

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

• Protokol (http :) bagian dari URL HTTP dapat dihilangkan.

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

• Dengan tag seperti <br>, Anda cukup meninggalkan garis miring yang digunakan dalam sintaks XHTML (<br />) kecuali Anda benar-benar perlu menggunakan XHTML.

• Berikut adalah beberapa contoh struktur dokumen HTML kecil:

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

html5doctor.com/html-5-boilerplates/

Yang lain mengatakannya, tetapi mereka belum cukup memahami masalahnya: gzipping.

1. Hampir tidak ada upaya, atau kekurangan.
2. Dalam pengalaman saya yang terbatas, kurangi ukuran HTML antara 60% dan 90%.

Semua tweak lainnya yang dapat Anda buat untuk HTML membutuhkan lebih banyak upaya / pemeliharaan, dan hampir tidak memiliki efek apa pun dibandingkan dengan hanya gzipping dan lupa. Mereka tidak sepadan dengan waktu kecuali Anda Google. Anda bukan Google.

(Seperti yang disebutkan orang lain, semakin konsisten HTML Anda, semakin banyak efek gzipping, karena - menurut pemahaman saya yang terbatas - gzipping mencari string identik dalam file Anda, dan mengganti setiap instance berulang dengan kode kecil yang merujuk pada asli, jadi praktik penulisan seperti menjaga atribut Anda dalam urutan yang sama, dan menjaga agar semua casing Anda tetap sama, dapat membantu gzipping melakukan tugasnya.)

Oh - dan jika Anda secara otomatis memperkecil HTML Anda di beberapa titik dalam proses build / serve Anda, itu tidak membutuhkan lebih banyak upaya / pemeliharaan. Beberapa HTML minifiers tercantum di sini:

/programming/728260/html-minification