Optimalisasi umum untuk mengurangi ukuran halaman HTML atau XHTML?

15

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?

Chris W. Rea
sumber
Permintaan maaf saya untuk duplikat - tidak sengaja. Ingin tahu, mengapa: Pertanyaan ini lebih populer daripada yang pertama?
Chris W. Rea
mungkin karena ditanyakan dengan cara yang berbeda, melewatkan kata optimizationdalam subjek dan pertanyaan!
Julien N

Jawaban:

5

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.

Bryson
sumber
Hanya tambahan kecil: Pedoman kinerja ini dimulai dengan pekerjaan Steve Souders saat di Yahoo !. Bukunya "Situs Web Kinerja Tinggi" menguraikan alasan , alasan di baliknya. Buku ini mudah dibaca dan informatif.
Jesper M
18

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%

jessegavin
sumber
2
mod_gzipadalah untuk Apache 1.3, yang sekarang telah mencapai akhir hidup (tidak lagi didukung - masih berfungsi, tentu saja). Setara dengan seri Apache 2 adalah mod_deflate.
10

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"
Jeff Atwood
sumber
6

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.

Thomas Bonini
sumber
1
Bagaimana casing membuat perbedaan? Saya menemukan hal yang aneh untuk dikatakan ...
Grant Palin
2
@Grant: Lebih mudah untuk mengompresi beberapa contoh "abcde" (tepatnya huruf besar) daripada berbagai "ABCDE", "abcde", "Abcde", dll.
Chris W. Rea
Terima kasih atas tipnya, itu masuk akal. Kode saya dalam kondisi bagus!
Grant Palin
4

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.

JasonBirch
sumber
3

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.

mcrumley
sumber
2
Kecuali saya salah, pertanyaannya adalah tentang mengurangi ukuran HTML, bukan JS / CSS. Itu sudah dibahas dalam pertanyaan lain.
DisgruntledGoat
3

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>
DisgruntledGoat
sumber
2

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 .

Julien N
sumber
1

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.
mvark
sumber
1

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/

dzollman
sumber
1
Saya bisa mengatakan itu diabaikan karena suatu alasan. Ini mungkin jauh lebih menyakitkan daripada opsi lain dan mungkin dapat dengan mudah menghancurkan situs. IE dalam mode querks menyakitkan
WalterJ89
Sangat benar; ini akan berdampak pada kompatibilitas / aksesibilitas. Tapi itu sesuatu yang perlu diingat dan digunakan ketika itu sesuai untuk konteksnya.
dzollman
1

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

Paul D. Waite
sumber