Bandwidth Internet semakin luas, yang tampaknya telah membuat lompatan kualitatif dalam kecepatan memuat halaman web. Faktanya tidak demikian, karena dengan bertambahnya bandwidth, semakin banyak objek di halaman web, sehingga mempercepat kecepatan pembukaan halaman web masih menjadi isu 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 diperlukan.
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. Kita hanya perlu mengetahui format mana yang harus digunakan 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-right: 20px;
margin
-bottom: 10px
margin
-left: 20px;
10px 20px 10px 20px;
atau kalimat ini:
<p class="decorated">Paragraf teks yang dihias</p>
<p class="decorated">Paragraf kedua</p>
<p class= ”decorated”>Paragraf ketiga </p>
<p class="decorated">Paragraf keempat</p>
dapat dimasukkan dalam 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.
Untuk beberapa URL, seperti "www.kenengba.com/220", ketika server menerima permintaan alamat seperti itu, diperlukan waktu untuk menentukan jenis file dari alamat tersebut. Jika 220 adalah sebuah direktori, Anda sebaiknya menambahkan garis miring tambahan setelah URL untuk menjadikannya www.kenengba.com/220/ , sehingga server dapat mengetahui dengan jelas sekilas bahwa ia ingin mengakses indeks atau file default di direktori, 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 bersahabat:
<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />
</p>
Kapan browser mengetahui parameter tinggi dan lebar, meskipun gambar tidak dapat ditampilkan sementara, browser akan memberikan ruang untuk gambar di halaman dan terus memuat konten berikut. Hasilnya adalah waktu pemuatan yang lebih cepat dan pengalaman menjelajah yang lebih baik.
6. Kurangi permintaan http.
Saat pemirsa membuka halaman web, browser akan mengeluarkan banyak permintaan objek (gambar, skrip, dll.). Tergantung pada penundaan jaringan, pemuatan setiap objek akan tertunda. Jika ada banyak objek pada halaman, hal ini dapat memakan banyak waktu.
Oleh karena itu, beban permintaan http perlu dikurangi. Bagaimana cara mengurangi bebannya?
1. Hapus beberapa objek yang tidak diperlukan.
2. Gabungkan dua gambar yang berdekatan menjadi satu.
3. Gabungkan CSS.
Perhatikan kode berikut. Tiga CSS perlu dimuat:
<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
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.