01. Minimalkan Permintaan HTTP Kurangi permintaan HTTP
Gambar, CSS, Skrip, Flash, dll. akan meningkatkan jumlah permintaan HTTP. Mengurangi jumlah elemen ini dapat mengurangi waktu respons. Menulis beberapa JS dan CSS ke dalam satu file jika memungkinkan; menulis gambar langsung ke halaman juga merupakan praktik yang buruk. Anda harus menuliskannya ke dalam CSS, menggunakan CSS Sprite untuk merakit gambar kecil dan kemudian menggunakan latar belakang untuk menemukan posisinya; gunakan " Peta Gambar" (Menempatkan URL berbeda pada gambar yang sama, metode ini dapat mengurangi jumlah permintaan gambar. Setelah pengujian, waktu untuk mendapatkan peta gambar 56% lebih cepat daripada waktu untuk mendapatkan masing-masing gambar. Peta Gambar Ada dua cara, satu adalah "peta gambar sisi server" dan yang lainnya adalah "peta gambar sisi klien". Implementasi sisi server adalah meneruskan koordinat XY yang diklik oleh pengguna ke server, dan kemudian ke server-. side memetakan operasi terkait. Gunakan tag MAP di latar depan. Metode peta gambar membuat pemeliharaan pemrograman jauh lebih sulit).
02. Gunakan Jaringan Pengiriman Konten menggunakan teknologi CDN
"Jaringan Pengiriman Konten". Tujuannya adalah untuk mempublikasikan konten situs web ke "tepi" jaringan yang paling dekat dengan pengguna dengan menambahkan lapisan arsitektur jaringan baru ke Internet yang ada.
Fitur CDN:
1. Akselerasi Cache Lokal – meningkatkan kecepatan akses situs perusahaan (terutama situs yang berisi banyak gambar dan halaman statis), dan sangat meningkatkan stabilitas situs seperti di atas.
2. Layanan mirroring – menghilangkan dampak kemacetan interkoneksi antar operator yang berbeda, mewujudkan akselerasi jaringan lintas operator, dan memastikan pengguna di jaringan berbeda dapat memperoleh kualitas akses yang baik.
3. Akselerasi jarak jauh – Pengguna akses jarak jauh secara cerdas dan otomatis memilih server Cache berdasarkan teknologi penyeimbangan beban DNS dan memilih server Cache tercepat untuk mempercepat akses jarak jauh.
4. Optimasi Bandwidth – Secara otomatis menghasilkan server Mirror Cache jarak jauh untuk server, dan membaca data dari server Cache ketika pengguna jarak jauh mengaksesnya, mengurangi bandwidth akses jarak jauh, berbagi lalu lintas jaringan, dan mengurangi beban pada server WEB situs asli , dll.
5. Anti-serangan cluster – Node CDN yang tersebar luas dan mekanisme redundansi cerdas antar node dapat secara efektif mencegah intrusi peretas dan mengurangi dampak berbagai serangan DDOS pada situs web, sekaligus memastikan kualitas layanan yang baik.
03. Tambahkan Kedaluwarsa atau Header Kontrol Cache untuk mengatur "kedaluwarsa file header" atau "cache statis"
Browser menggunakan caching untuk mengurangi jumlah permintaan HTTP dan mempercepat waktu pemuatan halaman. Jika waktu kedaluwarsa yang lama ditambahkan ke header halaman, browser akan selalu menyimpan elemen di halaman dalam cache. Namun, jika sesuatu pada halaman berubah, namanya harus diubah, jika tidak, klien tidak akan melakukan penyegaran secara aktif.
(1) Konsep
Kontrol cache digunakan untuk mengontrol cache HTTP (mungkin tidak diterapkan sebagian di HTTP/1.0, hanya Pragma: tanpa cache yang diterapkan)
Format: Kontrol-Cache: arahan-cache
direktif cache dapat berupa berikut ini:
Digunakan saat meminta:
|. "tanpa cache"
|. "tidak ada toko"
|. “usia maksimal” “=” delta-detik
|. "maks-basi" [ "=" delta-detik ]
|. “min-fresh” “=” delta-detik
|. "tidak ada transformasi"
|. "hanya-jika-cache"
|. "ekstensi cache"
Digunakan sebagai tanggapan:
|. "publik"
|. "pribadi" [ "=" <"> nama bidang <"> ]
|. "tanpa cache" [ "=" <"> nama bidang <"> ]
|. "tidak ada toko"
|. "tidak ada transformasi"
|. "harus divalidasi ulang"
|. "validasi ulang proxy"
|. “usia maksimal” “=” delta-detik
|. “s-maxage” “=” delta-detik
|. "ekstensi cache"
Deskripsi sebagian:
Dibagi berdasarkan apakah dapat di-cache
Publik menunjukkan bahwa respons dapat di-cache oleh cache apa pun.
Pribadi menunjukkan bahwa seluruh atau sebagian pesan respons untuk satu pengguna tidak dapat diproses oleh cache bersama. Hal ini memungkinkan server untuk hanya mendeskripsikan sebagian respons dari pengguna yang tidak valid untuk permintaan pengguna lain.
no-cache menunjukkan bahwa pesan permintaan atau respons tidak dapat di-cache (HTTP/1.0 digantikan oleh no-cache Pragma)
Berdasarkan apa yang bisa di-cache
no-store digunakan untuk mencegah informasi penting dirilis secara tidak sengaja. Mengirimkannya dalam pesan permintaan akan menyebabkan pesan permintaan dan respons menggunakan cache.
Berdasarkan batas waktu cache
max-age menunjukkan bahwa klien dapat menerima respons dengan masa hidup tidak lebih dari waktu yang ditentukan dalam hitungan detik.
min-fresh menunjukkan bahwa klien dapat menerima respons dengan waktu respons kurang dari waktu saat ini ditambah waktu yang ditentukan.
max-stale menunjukkan bahwa klien dapat menerima pesan respons melebihi periode waktu habis. Jika nilai untuk pesan max-stale ditentukan, klien bisa
Menerima pesan respons yang berada dalam periode waktu habis yang ditentukan.
Kedaluwarsa mewakili waktu keberadaan, memungkinkan klien untuk tidak memeriksa (mengirimkan permintaan) sebelum waktu ini, yang setara dengan usia maksimal.
Memengaruhi. Namun jika mereka ada pada saat yang sama, mereka akan ditimpa oleh usia maksimal Kontrol-Cache.
Format: Kedaluwarsa = "Kedaluwarsa" ":" Tanggal HTTP
Misal: Expired: Kam, 01 Des 1994 16:00:00 GMT (harus dalam format GMT)
(2) Aplikasi
Tetapkan masa berlaku dan kontrol cache melalui HTTP META:
<meta http-equiv=”Kontrol Cache” content=”max-age=7200″ />
<meta http-equiv=”Kedaluwarsa” content=”Senin, 20 Juli 2009 23:00:00 GMT” />
Pengaturan di atas hanyalah contoh, dan salah satunya dapat digunakan dalam praktik. Jika ditulis seperti ini, itu hanya akan berlaku untuk halaman web, dan tidak akan digunakan untuk gambar atau permintaan lain di halaman web, dan tidak akan melakukan caching apa pun. Apalagi permintaan dari klien lebih banyak. Meski hanya memeriksa status Terakhir diubah, peningkatan permintaan pasti berdampak pada kecepatan browsing.
Jika Anda ingin menambahkan cache ke file, Anda dapat menggunakan modul mod_expire Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), yang ditulis sebagai
<IfModule mod_expires.c>
Kedaluwarsa Aktif Aktif
KedaluwarsaDefault "akses ditambah 1 hari"
</JikaModul>
Saya ingat ExpiresActive disetel ke Aktif. Saya tidak menyetel ke Aktif pada awalnya. Tampaknya YSlow tidak dapat menemukan mekanisme caching apa pun yang terjadi. Jika ditambahkan dengan cara ini, maka akan disertakan secara default. Jika Anda ingin menargetkan tipe MIME individual, Anda dapat:
ExpiresByType image/gif “akses ditambah 5 jam 3 menit”
Selain itu, saat Anda mengklik segarkan di browser, permintaan yang dikirim oleh klien semuanya max-age=0, yang menunjukkan operasi validasi. Kirim permintaan ke server untuk memeriksa cache, lalu perbarui cache dapatkan 304 Not Modified yang artinya tidak ada perubahan.
04. Komponen Gzip Kompresi Gzip
Format Gzip adalah teknologi kompresi yang sangat umum. Hampir semua browser memiliki kemampuan untuk mendekompresi format Gzip, dan rasio kompresi yang dapat dikompres sangat besar, dengan tingkat kompresi umum sebesar 85%. Kompresi atau tidak, Anda bisa mengujinya di sini.
05. Letakkan Stylesheets di Atas Letakkan CSS di atas
Gunakan tag LINK untuk menempatkan style sheet di HEAD dokumen sehingga pengunjung dapat melihat style website secara lengkap sedini mungkin.
Halaman HTML dirender langkah demi langkah. Saat pengguna membuka halaman, kita perlu mempertimbangkan pengalaman pengguna - kecepatan membuka halaman web. Persyaratan pertama untuk menampilkan halaman adalah HTML, dan HTML terdiri dari DIV satu per satu, dan CSS adalah dasar dari segalanya.
06. Letakkan Script di Bawah Letakkan JS di bawah
Setelah website di-render, Anda dapat mengatur fungsinya. Tentu saja, JS ini tidak boleh mempengaruhi kinerja konten selama proses pemuatan Anda.
Karena halaman dirender secara bertahap, konten di bawah skrip akan diblokir. Render halaman tidak akan dilanjutkan hingga skrip selesai dimuat. Penempatan yang benar
(1) Skenario terburuk: letakkan skrip di atas. Ini akan memblokir rendering konten berikutnya dan pengunduhan komponen selanjutnya.
(2) Skenario kasus terbaik: Letakkan skrip di bagian bawah. Tidak mencegah halaman dirender.
07. Hindari Ekspresi CSS Hindari Ekspresi CSS
Ekspresi CSS sangat buruk. Hal yang hanya didukung oleh IE ini memerlukan perhitungan yang sangat besar saat dijalankan. Ini akan dihitung ulang setiap kali Anda menggerakkan mouse, tetapi terkadang ini harus digunakan untuk kompatibilitas browser.
08. Jadikan JavaScript dan CSS Eksternal
Kita telah membicarakan tentang caching sebelumnya. Untuk beberapa JS dan CSS yang lebih umum, kita dapat menggunakan tautan eksternal, seperti menautkan file Jquery dari Google.
09. Kurangi Pencarian DNS Kurangi pencarian DNS
Kurangi sumber daya panggilan situs web dari luar.
Internet menemukan server berdasarkan alamat IP. DNS juga memiliki overhead. Dalam keadaan normal, waktu yang diperlukan browser untuk menemukan alamat IP host tertentu adalah 20~120 ms. Untuk mengurangi waktu yang dihabiskan dalam proses pencarian DNS, beberapa teknik berikut perlu diterapkan:
(1) tembolok DNS
Pencarian DNS dapat di-cache untuk meningkatkan kinerja. Di komputer pengguna, setelah nama host diselesaikan, informasi DNS yang sesuai akan disimpan dalam cache DNS sistem operasi, yang dapat mengurangi waktu yang diperlukan untuk penggunaan selanjutnya. Beberapa browser lain juga memiliki fungsi cache DNS yang sesuai. Namun jumlah DNS yang di-cache terbatas. Biasanya sistem operasi mempertimbangkan nilai TTL, dan browser mengabaikan nilai ini dan menetapkan waktunya sendiri.
(2) TTL
Caching DNS menyebabkan konsumsi sistem, dan alamat IP server tidak selalu berubah. Server dapat menunjukkan berapa lama catatan dapat disimpan dalam cache, dan catatan DNS yang dikembalikan oleh pencarian berisi nilai time-to-live (TTL) yang menunjukkan berapa lama klien dapat menyimpan catatan dalam cache. Umumnya dapat diatur menjadi 1 hari.
10. Perkecil JavaScript dan CSS Perkecil ukuran JS dan CSS
Ada keterampilan dalam menulis JS dan CSS. Gunakan kode paling sedikit untuk mencapai fungsi yang sama, mengurangi spasi, meningkatkan logika, menggunakan singkatan, dll. Tentu saja, ada banyak alat yang dapat membantu Anda mencapai hal ini.
11. Hindari Pengalihan
Saat menulis tautan lagi, meskipun hanya ada satu perbedaan "/" terakhir antara "http://xxx.com" dan "http://xxx.com/", hasilnya berbeda. Server perlu meluangkan waktu untuk melakukannya ubah Redirect sebelumnya ke yang terakhir lalu lompat. Anda juga perlu memperhatikan ini. Anda juga dapat menggunakan Alias atau mod_rewrite atau DirectorySlash di Apache untuk menyelesaikannya.
Selain itu, kegunaan pengalihan meliputi: menghubungkan situs web yang berbeda; melacak kunjungan situs web; dan mempercantik URL.
12. Hapus Skrip Duplikat Hapus skrip duplikat
Browser tidak akan mengenali dan mengabaikan kode yang dipanggil berulang kali, melainkan akan menghitungnya kembali, yang tentu saja merupakan pemborosan yang sangat besar.
13. Konfigurasikan ETag Konfigurasikan ETag
Saya tidak tahu apa yang terjadi, tapi saya menghapusnya di htaccess.
14. Jadikan cache Ajax yang dapat di-cache Ajax
Ajax merespons secara real time sebelum browser menerima data baru, data lama disimpan dalam cache, yang dapat meningkatkan efisiensi dengan lebih baik.
15. Flush the Buffer Early Lepaskan buffer sedini mungkin
Saat pengguna membuat permintaan halaman, server perlu menghabiskan 200 hingga 500 milidetik untuk merakit HTML, menuliskannya di antara kepala dan badan, dan melepaskan buffer. Dengan cara ini, header file dapat dikirim terlebih dahulu, lalu konten file dapat dikirim untuk meningkatkan efisiensi.
16. Gunakan GET untuk Permintaan AJAX Gunakan GET untuk permintaan AJAX
Metode Get hanya berinteraksi dengan server satu kali (mengirim data), sedangkan Post memerlukan dua interaksi (mengirim header dan kemudian data).
17. Komponen Pasca Pemuatan Komponen pemuatan lambat
Pertama muat komponen yang diperlukan untuk inisialisasi halaman, lalu muat komponen lainnya. Metode implementasi spesifik dapat berupa "IFRAME tersembunyi" atau javascript. "YUI Image Loader" adalah contoh yang bagus.
18. Komponen pramuat Komponen pramuat
Memuat sesuatu yang mungkin digunakan nanti tidak bertentangan dengan pemuatan lambat. Tujuannya adalah untuk memberikan respons yang lebih cepat terhadap permintaan selanjutnya. Lihat aplikasi sprite CSS di beranda Google.
19. Mengurangi Jumlah Elemen DOM Mengurangi jumlah elemen DOM
Struktur halaman yang rumit berarti waktu pengunduhan dan respons yang lebih lama, sehingga rendering halaman menjadi lebih lambat. Menggunakan tag yang lebih masuk akal dan efisien untuk menyusun halaman merupakan prasyarat untuk front-end yang baik.
20. Membagi Komponen di Seluruh Domain
Tujuan utamanya adalah untuk meningkatkan kemampuan pengunduhan paralel komponen halaman, namun hati-hati jangan sampai menggunakan terlalu banyak nama domain akan menyebabkan pemborosan pencarian DNS yang disebutkan di atas. IE hanya dapat memiliki dua permintaan untuk domain yang sama pada waktu yang bersamaan. Implementasinya dapat memanfaatkan jaringan CDN atau jaringan komputasi terdistribusi lainnya.
21. Minimalkan Jumlah iframe Kurangi jumlah IFrame
IFrame adalah hal yang tabu untuk SEO, dan IFrame perlu digunakan dengan lebih efektif.
Keunggulan IFrame: bagus untuk mengunduh konten pihak ketiga yang lambat seperti iklan, kotak pasir keamanan, skrip unduhan paralel
Kekurangan IFrame: Sekalipun kosong, ia akan menghabiskan banyak sumber daya dan mencegah pemuatan halaman yang tidak bersifat semantik.
22. No 404 Tidak muncul di halaman 404
Halaman 404 muncul di situs itu sendiri (bukan hasil pencarian). Halaman 404 yang tidak berarti akan memengaruhi pengalaman pengguna dan menghabiskan sumber daya server.
23. Kurangi Ukuran Kue Kurangi Kue
Cookie dipertukarkan antara server dan browser melalui header file, mengurangi ukuran cookie sebanyak mungkin dan menetapkan waktu kedaluwarsa yang wajar, yang dapat meningkatkan efisiensi secara signifikan.
24. Gunakan Domain Bebas Cookie untuk Komponen Gunakan nama domain bebas cookie untuk komponen
Membaca cookie untuk komponen statis adalah sia-sia. Ini adalah cara yang baik untuk menggunakan nama domain lain yang bebas cookie untuk menyimpan komponen statis Anda, atau Anda hanya dapat menyimpan nama domain dengan www di cookie.
25. Minimalkan Akses DOM Mengurangi jumlah akses DOM
JS sangat lambat dalam mengakses DOM, jadi usahakan untuk tidak menggunakan JS untuk mengatur tata letak halaman.
26. Kembangkan Event Handler yang Cerdas Kembangkan event handler yang fleksibel
Jika terlalu banyak elemen di pohon DOM yang ditambahkan ke pengendali peristiwa, efisiensi respons pasti akan rendah. Alat peristiwa YUI memiliki metode onAvailable yang dapat membantu Anda mengatur pengendali peristiwa DOM secara fleksibel.
27. Pilih <link> daripada @import Gunakan <link> daripada @import
Menggunakan @import di IE sama dengan menggunakan <link> di bagian bawah halaman.
28. Hindari Filter Hindari penggunaan filter
Jika Anda memerlukan transparansi Alpha, jangan gunakan AlphaImageLoader. Ini tidak efisien dan hanya berlaku untuk gambar IE6 dan di bawahnya. Jika Anda harus menggunakannya, tambahkan _filter agar tidak memengaruhi pengguna IE7+.
29. Optimalkan Gambar Optimalkan gambar
Mengonversi GIF Anda ke PNG8 adalah cara yang baik untuk memperkecil ukuran, dan ada banyak cara untuk memproses gambar JPG dan PNG Anda untuk mencapai hasil pengoptimalan.
30. Optimalkan Sprite CSS Optimalkan Sprite CSS
Menyusun gambar dalam CSS Sprite secara vertikal dan kompak mungkin, serta menyusun gambar dengan warna yang serupa sedekat mungkin akan memperkecil ukuran gambar itu sendiri dan meningkatkan kecepatan tampilan halaman gambar.
31. Jangan Skala Gambar dalam HTML Jangan skalakan gambar dalam HTML
Gunakan gambar sebesar yang Anda inginkan, jangan malas.
32. Jadikan favicon.ico Kecil dan Dapat Di-Cache Kurangi ukuran favicon.ico dan simpan dalam cache
ICO browser situs tidak boleh sering diubah, jadi simpan dalam cache untuk waktu yang lama, dan yang terbaik adalah mengontrolnya di bawah 1K.
33. Jaga Komponen di bawah 25K
IPhone tidak dapat melakukan cache komponen di atas 25K, dan itu sebelum dikompresi.
34. Kemas Komponen ke dalam Dokumen Multibagian Kemas komponen ke dalam dokumen multibagian
Sama seperti menambahkan lampiran ke email, permintaan HTTP saja sudah cukup, namun teknik ini perlu didukung oleh proxy Anda, yang tidak didukung iPhone.
Gambar sebaris:
Gunakan "data: skema URL" untuk menyematkan data gambar di halaman sebenarnya. Yang biasa kita lihat adalah: http, ftp, mailto dan mode lainnya. Faktanya, mode data:URL telah diusulkan sejak tahun 1995. Artinya, potongan kecil data langsung diintegrasikan ke dalam URL tautan. Polanya sebagai berikut: data: [<mediatype>][;base64],<data>
Parameter pertama menunjukkan format file, seperti gambar/gif.
Sayangnya, IE saat ini tidak mendukung mode ini. Selain itu, ukuran data juga terbatas.
Pernyataan: Kontennya berasal dari Internet dan didasarkan pada 34 artikel Yahoo.