it-swarm-id.com

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?

15
Chris W. Rea

Google telah menjabarkan dan menjelaskan rekomendasi mereka yang terbaik Minimalkan Ukuran Muatan . 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 ini adalah bagian dari proyek add-on Firefox/Firebug open-source mereka yang disebut Kecepatan Halaman . Mirip dengan plugin Yahoo YSlow . Pengaya Kecepatan Halaman aktual akan memeriksa lebih banyak optimasi daripada yang dijelaskan secara rinci di dalam daftar itu. Petunjuk untuk Menggunakan Kecepatan Halaman juga disajikan.

Yahoo! Praktik Terbaik untuk Mempercepat Situs Web Anda mengidentifikasi serangkaian praktik terbaik yang 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 mereka rekomendasi, sudah diterapkan.

5
Bryson

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

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

--- artikel di WebReference menyatakan bahwa Anda akan menemukan peningkatan kinerja berikut saat menggunakan modul Apache mod_gzip.

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%

18
jessegavin

Mungkin tidak sepadan.

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

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

 Raw Compressed 
 CSS yang tidak dioptimalkan 2,299 bytes 671 bytes 
 Dioptimalkan CSS 1,758 bytes 615 bytes 

(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"
10
Jeff Atwood

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.

6
Thomas Bonini

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.

4
JasonBirch

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-sprites untuk informasi lebih lanjut tentang menggabungkan gambar.

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

3
mcrumley

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 gulung 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>
3
DisgruntledGoat

Jika Anda menggunakan situs web ASP.NET, berhati-hatilah terhadap kondisi tampilan . Itu dapat menghasilkan bidang tersembunyi yang sangat besar di halaman, sering membebani itu sementara itu tidak perlu (sudah terjadi pada saya bahwa kondisi tampilan lebih berat daripada bagian halaman 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 adalah dalam kode .net sekalipun.

2
Julien N

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 ke 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 Jadi, praktik pembuatan seperti menjaga atribut Anda dalam urutan yang sama, dan menjaga 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:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

Ada banyak alat analisis kinerja & optimisasi 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 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.
1
mvark

Strategi yang sering 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/

1
dzollman