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?
optimization
html
performance
xhtml
page-size
Chris W. Rea
sumber
sumber
optimization
dalam subjek dan pertanyaan!Jawaban:
Google telah menjabarkan dan menjelaskan rekomendasi mereka untuk meminimalkan Ukuran Payload terbaik . Mereka termasuk teknik-teknik berikut:
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:
(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.
sumber
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.
sumber
mod_gzip
adalah untuk Apache 1.3, yang sekarang telah mencapai akhir hidup (tidak lagi didukung - masih berfungsi, tentu saja). Setara dengan seri Apache 2 adalahmod_deflate
.Mungkin tidak sepadan.
Saya telah bermain dengan menghapus spasi dalam HTML sedikit, dan hanya melihat pengurangan ukuran 10% dalam muatan setelah gzipping.
(ya ini mengatakan CSS tetapi aturan dasar yang sama juga berlaku untuk HTML)
Masalahnya adalah,
sumber
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.
sumber
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.
sumber
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.
sumber
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:
dan
sumber
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 .
sumber
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 -
sumber
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.)
meiert.com/en/blog/20080601/optional-tags-in-html-4/
code.google.com/speed/articles/optimizing-html.html
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/
sumber
Yang lain mengatakannya, tetapi mereka belum cukup memahami masalahnya: gzipping.
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
sumber