Seiring bertambahnya bandwidth, semakin banyak objek di halaman web, sehingga mempercepat pembukaan halaman web masih menjadi masalah penting. Ada tiga cara untuk mempercepat kecepatan pembukaan halaman web. Yang pertama adalah dengan meningkatkan bandwidth jaringan, yang kedua adalah dengan mengoptimalkan mesin lokal pengguna, dan yang ketiga adalah dengan mengoptimalkan halaman web sampai batas tertentu oleh perancang situs web. Artikel ini berasal dari sudut pandang seorang perancang situs web dan membagikan beberapa tip untuk mengoptimalkan kecepatan memuat halaman web.
1. Optimalkan gambar
Hampir tidak ada halaman web tanpa gambar. Jika Anda pernah mengalami era 56 ribu kucing, Anda tidak akan menyukai situs web dengan banyak gambar. Karena memuat halaman web seperti itu akan memakan banyak waktu.
Bahkan sekarang, bandwidth jaringan telah meningkat pesat dan 56 ribu kucing secara bertahap menghilang. Pengoptimalan gambar masih diperlukan untuk mempercepat halaman web.
Mengoptimalkan gambar meliputi pengurangan jumlah gambar, penurunan kualitas gambar, dan penggunaan format yang sesuai.
1. Kurangi jumlah gambar: hapus gambar yang tidak perlu.
2. Kurangi kualitas gambar: Jika tidak diperlukan, coba turunkan kualitas gambar, terutama dalam format jpg. Penurunan kualitas sebesar 5% mungkin tampak bukan perubahan besar, namun perubahan ukuran file relatif besar.
3. Gunakan format yang sesuai: lihat poin berikutnya.
Oleh karena itu, Anda perlu mengedit gambar sebelum mengunggahnya. Jika menurut Anda Photoshop terlalu merepotkan, Anda dapat mencoba beberapa alat pengeditan gambar online. Terlalu malas untuk mengedit tetapi ingin memberikan efek khusus pada gambar Anda? Anda dapat mencoba memanggil javascript untuk mendapatkan efek gambar.
2. Pemilihan format gambar.
Umumnya ada tiga format gambar yang digunakan pada halaman web, jpg, png, dan gif. Indikator teknis spesifik dari ketiga format tersebut bukanlah isi artikel ini digunakan ketika. Untuk mengurangi waktu pemuatan halaman web.
1. JPG: Umumnya digunakan untuk menampilkan karya fotografi lanskap, manusia, dan foto artistik. Terkadang digunakan dalam tangkapan layar komputer.
2. GIF: Memberikan lebih sedikit warna dan dapat digunakan di tempat yang persyaratan warnanya tidak tinggi, seperti logo situs web, tombol, emotikon, dll. Tentu saja, aplikasi gif yang penting adalah gambar animasi. Seperti gambar refleksi yang dibuat dengan Lunapic.
3. PNG: Format PNG dapat memberikan latar belakang transparan dan merupakan format gambar yang khusus diciptakan untuk tampilan halaman web. Umumnya digunakan pada halaman web yang memerlukan tampilan latar belakang transparan atau persyaratan kualitas gambar yang tinggi.
3. Optimalkan CSS
Cascading style sheet CSS membuat halaman web dimuat lebih efisien dan meningkatkan pengalaman menjelajah. Dengan CSS, tata letak tabel dapat dihentikan.
Namun terkadang kita menggunakan beberapa pernyataan yang lebih bertele-tele saat menulis CSS, seperti kalimat ini:
margin-top: 10px;
margin-kanan: 20 piksel;
margin-bawah: 10 piksel;
margin-left: 20px;
Anda dapat menyederhanakannya menjadi:
margin: 10px 20px 10px 20px;
atau kalimat ini:
＜p class="decorated">Paragraf teks yang dihias＜/p>
＜p class="dihiasi">Paragraf kedua＜/p>
＜p class="dihiasi">Paragraf ketiga＜/p>
＜p class="decorated">Paragraf keempat＜/p>
dapat disertakan dengan div:
＜div class="decorated">
＜p>Paragraf teks yang dihias＜/p>
＜p>Paragraf kedua＜/p>
＜p>Paragraf ketiga＜/p>
＜p>Paragraf keempat＜/p>
＜/div>
Menyederhanakan CSS dapat menghilangkan atribut yang berlebihan dan meningkatkan efisiensi pengoperasian. Jika Anda terlalu malas untuk menyederhanakan CSS setelah menulisnya, Anda dapat menggunakan beberapa alat CSS online yang disederhanakan, seperti CleanCSS.
4. Tambahkan garis miring setelah URL
. Beberapa URL, misalnya, ketika server menerima permintaan alamat seperti itu, perlu waktu untuk menentukan jenis file di alamat ini. Jika web adalah sebuah direktori, Anda sebaiknya menambahkan garis miring tambahan setelah URL untuk mengubahnya menjadi /, sehingga server dapat mengetahui dengan jelas sekilas bahwa ia ingin mengakses indeks atau file default di direktori tersebut, sehingga menghemat waktu pemuatan.
5. Menandai tinggi dan lebar
memang sangat penting, namun banyak orang yang selalu mengabaikannya karena malas atau alasan lainnya. Saat Anda menambahkan gambar atau tabel ke halaman web, Anda harus menentukan tinggi dan lebarnya, yaitu parameter tinggi dan lebar. Jika browser tidak menemukan kedua parameter ini, maka browser perlu menghitung ukurannya saat mendownload gambar. Jika ada banyak gambar, browser perlu terus menyesuaikan halaman. Ini tidak hanya mempengaruhi kecepatan, tetapi juga mempengaruhi pengalaman browsing.
Berikut kode gambar yang relatif bersahabat:
<img id="moon" height="200" width="450" src=" />
Saat browser mengetahui parameter tinggi dan lebar, meskipun gambar tidak dapat ditampilkan
untuk sementara, halaman tersebut juga akan mengosongkan ruanguntuk
gambar, dan kemudian terus memuat konten berikut. Hasilnya, waktu pemuatan lebih cepat dan pengalaman menjelajah lebih
baik halaman web, browser akan mengeluarkan banyak permintaan objek (gambar), skrip, dll.), tergantung pada penundaan jaringan, setiap objek akan tertunda. Jika ada banyak objek di halaman web, ini mungkin memakan waktu lama waktu.
Oleh karena itu, bagaimana caramengurangi
beban pada permintaan http?
Beberapa objek yang tidak diperlukan.2. Gabungkan dua gambar yang berdekatan menjadi satu.
3. Gabungkan CSS.
Perhatikan kode berikut.
＜link rel="stylesheet" type="text/css" href="/body.css" />
＜link rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
Kita bisa menggabungkannya menjadi satu:
＜link rel="stylesheet" type="text/css" href="/style .css" />
sehingga mengurangi permintaan http.
7. Tips lainnya (ditambahkan oleh penerjemah)
1. Hapus add-on yang tidak diperlukan.
2. Jika widget dari situs web lain tertanam di halaman web, jika Anda punya pilihan, pastikan memilih yang berkecepatan tinggi.
3. Coba gunakan gambar daripada flash, yang juga bagus untuk SEO.
4. Jika beberapa konten dapat dibuat statis, buatlah konten tersebut statis untuk mengurangi beban pada server.
5. Kode statistik ditempatkan pada akhir halaman.