Dengan peningkatan bandwidth, ada semakin banyak objek di halaman web, jadi masih merupakan topik penting untuk mempercepat pembukaan halaman web. Ada tiga cara untuk mempercepat pembukaan halaman web: satu adalah untuk meningkatkan bandwidth jaringan, yang kedua adalah mengoptimalkan pengguna pada mesin lokal, dan yang ketiga adalah mengoptimalkan halaman web oleh desainer situs web. Artikel ini didasarkan pada perspektif perancang situs web dan berbagi beberapa tips untuk mengoptimalkan kecepatan pemuatan halaman web.
1. Mengoptimalkan gambar
Hampir tidak ada halaman web tanpa gambar. Jika Anda telah mengalami usia 56 ribu kucing, Anda pasti tidak akan menyukai situs web dengan banyak gambar. Karena memuat halaman web seperti itu akan memakan banyak waktu.
Bahkan sekarang, bandwidth jaringan telah meningkat banyak, dan 56k Cat secara bertahap memudar, dan masih perlu untuk mengoptimalkan gambar untuk mempercepat halaman web.
Mengoptimalkan gambar termasuk mengurangi jumlah gambar, mengurangi kualitas gambar, dan menggunakan format yang sesuai.
1. Kurangi jumlah gambar: Hapus gambar yang tidak perlu.
2. Kurangi Kualitas Gambar: Jika tidak terlalu diperlukan, cobalah untuk mengurangi kualitas gambar, terutama format JPG.
3. Gunakan format yang sesuai: lihat poin berikutnya.
Oleh karena itu, sebelum mengunggah gambar, Anda perlu mengedit gambar. Apakah Anda terlalu malas untuk diedit tetapi ingin gambar memiliki efek khusus? Anda dapat mencoba menggunakan Calling JavaScript untuk mengimplementasikan efek khusus gambar.
2. Pemilihan format gambar
Ada tiga format gambar yang umumnya digunakan pada halaman web, yaitu JPG, PNG, dan GIF. waktu halaman web.
1. JPG: Foto -foto yang umumnya digunakan untuk menampilkan lanskap, karakter, dan foto artistik. Terkadang juga digunakan pada tangkapan layar komputer.
2. GIF: Ada lebih sedikit warna yang disediakan, dan dapat digunakan di beberapa tempat di mana tidak ada permintaan warna yang tinggi, seperti logo situs web, tombol, ekspresi, dll. Tentu saja, aplikasi penting GIF adalah gambar animasi. Seperti gambar refleksi yang dibuat dengan lunapic.
3. PNG: Format PNG dapat memberikan latar belakang yang transparan dan merupakan format gambar yang diciptakan khusus untuk tampilan halaman web. Ini umumnya digunakan pada halaman web yang membutuhkan tampilan latar belakang transparan atau membutuhkan kualitas gambar tinggi.
3. Mengoptimalkan CSS
Lembar gaya overlay CSS membuat halaman web lebih efisien untuk memuat dan meningkatkan pengalaman menjelajah. Dengan CSS, metode tata letak formulir dapat pensiun.
Tetapi kadang -kadang ketika kami menulis CSS, kami menggunakan beberapa kalimat yang lebih bertele -tele, seperti kalimat ini:
margin-top: 10px;
margin-kanan: 20px;
margin-bottom: 10px;
margin-kiri: 20px;
Anda dapat menyederhanakannya menjadi:
margin: 10px 20px 10px 20px;
Atau kalimat ini:
＜ P class = "Dihiasi"> Paragraf teks yang dihiasi ＜/p>
＜ P class = "Dihiasi"> paragraf kedua ＜/p>
＜ P class = "Dihiasi"> paragraf ketiga ＜/p>
＜ p class = "Dihiasi"> Forth paragraf ＜/p>
Anda dapat menggunakan Div untuk memasukkan:
＜ Div class = "didekorasi">
＜ p> paragraf teks yang dihiasi ＜/p>
＜ p> paragraf kedua ＜/p>
＜ P> paragraf ketiga ＜/p>
＜ p> forth paragraf ＜/p>
＜/Div>
CSS yang disederhanakan dapat menghapus atribut yang berlebihan dan meningkatkan efisiensi operasional. Jika Anda terlalu malas untuk menyederhanakan setelah menulis CSS, Anda dapat menggunakan beberapa alat CSS yang disederhanakan secara online, seperti CleanCSS.
4. Tambahkan tebasan di bagian belakang URL
Beberapa URL, misalnya, ketika server menerima permintaan alamat seperti itu, dibutuhkan waktu untuk menentukan jenis file dari alamat. Jika web adalah direktori, Anda mungkin juga menambahkan tebasan tambahan ke URL untuk membuatnya / sehingga server dapat dengan jelas mengetahui untuk mengakses indeks atau file default di direktori, sehingga menghemat waktu pemuatan.
V. Tunjukkan tinggi dan lebar
Ini penting, tetapi banyak orang selalu mengabaikannya karena kemalasan atau alasan lain. Saat Anda menambahkan gambar atau tabel di halaman web, Anda harus menentukan tinggi dan lebar mereka, yaitu, parameter tinggi dan lebar. Jika browser tidak menemukan dua parameter ini, perlu menghitung ukuran saat mengunduh gambar. Ini tidak hanya mempengaruhi kecepatan, tetapi juga mempengaruhi pengalaman penelusuran.
Berikut adalah kode gambar yang relatif ramah:
＜ img id = "moon" height = "200" width = "450" src = " />
Ketika browser mengetahui parameter tinggi dan lebar, bahkan jika gambar tidak dapat ditampilkan untuk saat ini, gambar akan dibebaskan pada halaman dan kemudian konten selanjutnya akan terus dimuat. Oleh karena itu, waktu pemuatan lebih cepat dan pengalaman penelusuran lebih baik.
6. Kurangi permintaan HTTP
Ketika browser membuka halaman web, browser akan mengeluarkan banyak permintaan objek (gambar, skrip, dll.). Bergantung pada keterlambatan jaringan, setiap objek akan dimuat dengan penundaan. Jika ada banyak objek di halaman web, ini bisa memakan banyak waktu.
Oleh karena itu, kita perlu mengurangi beban permintaan HTTP. Bagaimana cara mengurangi beban?
1. Hapus beberapa objek yang tidak perlu.
2. Gabungkan dua gambar terdekat menjadi satu.
3. Gabungkan CSS
Lihatlah kode berikut dan Anda perlu memuat tiga CS:
＜ tautan rel = "stylesheet" type = "text/css" href = "/body.css"/>
＜ tautan rel = "stylesheet" type = "text/css" href = "/side.css"/>
＜ tautan rel = "stylesheet" type = "text/css" href = "/footer.css"/>
Kami dapat mensintesisnya menjadi satu:
＜ tautan rel = "stylesheet" type = "text/css" href = "/style.css"/>
Ini mengurangi permintaan HTTP.
7. Tips Lain (Ditambahkan oleh Penerjemah)
1. Hapus add-in yang tidak perlu.
2. Jika Anda menyematkan widget dari situs web lain di halaman web, jika Anda memiliki ruang untuk pilihan, Anda harus memilih yang cepat.
3. Coba gunakan gambar, bukan flash, yang juga bermanfaat bagi SEO.
4. Jika beberapa konten bisa statis, itu akan statis untuk mengurangi beban pada server.
5. Kode statistik ditempatkan di akhir halaman.