Sangat penting bagi situs web untuk memuat secepat mungkin; Pengguna ingin dengan cepat melihat halaman yang ingin mereka lihat, dan jika Anda tidak dapat memuaskannya, mereka akan mencarinya di tempat lain. Dalam artikel ini, Anda akan melihat diskusi tentang lima teknik sederhana dan efektif untuk mempercepat halaman web Anda.
Mengetahui waktu pemuatan situs web adalah langkah pertama sebelum memutuskan apa yang salah. Ini juga memberi tahu Anda jika Anda perlu melakukan perubahan untuk speedup situs web Anda.
Sebelum kita mulai, jika Anda belum menginstal yslow, silakan instal. Ini adalah perpanjangan dari Mozilla Firefox, Anda dapat menemukannya dari tautan di bawah ini:
Pertama, mari kita telusuri situs web enam revisi, kita semua menggunakan contoh yang sama untuk mengujinya (hanya perlu dibuka di tab baru tab atau browser).
Di browser, ada kolom odometer (seperti yang ditunjukkan pada Gambar 1). Di sebelahnya, ketika halaman web sudah selesai memuat, Anda akan melihat yslow dan angka. Angka tersebut mewakili waktu (dalam hitungan detik) yang dibutuhkan browser untuk memuat situs web. Kami ingin nomor ini serendah mungkin.
Gambar 1: Ikon Yslow dan Odometer yang Menampilkan Waktu Pemuatan Halaman Web
Dalam kebanyakan kasus, satu atau sekelompok alasan yang menyebabkan waktu pemuatan yang panjang dari halaman web adalah sebagai berikut:
Kami akan membahas ini nanti.
Untuk memastikan waktu pemuatan situs web Anda sendiri ditampilkan, telusuri beberapa situs web. Lihatlah Google, Facebook, dan beberapa blog dan situs web yang Anda sukai. Anda akan melihat bahwa semakin banyak gambar yang digunakan situs web, semakin lama waktu respons halaman JS.
Selain mengukur seberapa cepat memuatnya, Yslow memberi Anda beberapa wawasan mendalam seperti apa yang dapat Anda lakukan untuk meningkatkan kinerja situs web Anda, serta kurangnya kinerja beban situs web Anda.
Gambar di bawah ini adalah tab 'Performance' (seperti yang ditunjukkan pada Gambar 2). Tetapi jika Anda mengkliknya, itu akan menunjukkan detail dari setiap area yang memengaruhi waktu pemuatan dan kinerja keseluruhan.
Gambar 2: Tag kinerja
Di bidang ini, pilihan yang paling subyektif adalah menggunakan CDN (jaringan distribusi konten) .cdn sangat efektif untuk situs web besar. Apa yang mereka lakukan adalah menyebarkan konten situs web di seluruh server di berbagai wilayah. Semakin dekat server fisik dengan pengguna yang memuat situs web, semakin cepat halaman. Jadi pada dasarnya, menggunakan CDN adalah untuk mendistribusikan konten dari server ke pengguna halaman terdekat yang diakses.
Gambar 3: Tag kinerja menggunakan huruf (a, b, c, d, f) untuk mewakili nilai dan nilai saat ini (1-100).
Selain menggunakan CDN (yang bisa mahal) - yang lainnya bisa dilakukan.
Mari kita jalankan melalui setiap faktor level, berikut adalah kecepatan kedua singkat untuk setiap bidang level dan cara menyelesaikan masalah ini untuk mencapai kinerja yang optimal.
Kurangi Permintaan HTTP : Ketika halaman web memperoleh file dari server, permintaan HTTP akan dihasilkan. Lingkupnya termasuk skrip, file CSS, gambar, dan permintaan klien/server asinkron (AJAX dan teknologi perubahan lainnya). Ini adalah poin utama ketika berbicara tentang kinerja, tetapi dapat dengan mudah diselesaikan hanya dengan sedikit usaha. Misalnya, seringkali bermanfaat untuk menggabungkan skrip, CSS, dan gambar sebanyak mungkin, file cache pada mesin pengguna.
Tambahkan Header Term : 80% dari waktu pemuatan halaman terkait dengan skrip unduhan, gambar, dan CSS. Dalam kebanyakan kasus, elemen -elemen ini tidak akan berubah di mesin pengguna. Anda dapat menyimpan kode di .htaccess di mesin lokal pengguna (kami akan membahas cara beroperasi nanti di artikel).
Komponen GZIP : Gziping atau file JS terkompresi, gambar, dokumen HTML, dokumen CSS, dll. Pengguna dapat mengunduh versi file yang lebih kecil untuk meningkatkan kecepatan pemuatan halaman web. Ini dapat mengurangi konsumsi server, tetapi komponen dekompresi juga dapat menyebabkan respons halaman lebih lambat, tergantung pada browser pengguna.
Letakkan CSS di bagian atas : Letakkan file CSS di bagian atas situs web, yang dapat memuat bagian lain seperti gambar dan teks mungkin pada saat yang sama.
Letakkan JS di bagian bawah : Letakkan CSS di kepala dokumen, Anda hanya perlu memasukkan JS sebelum menutup <Boby>. Sementara skrip ini dimuat di latar belakang, pengguna pertama -tama mendapatkan halaman yang tampaknya lengkap.
Hindari Ekspresi CSS : Saya tidak pernah menggunakan ekspresi CSS (disebut fitur dinamis), yang hanya merupakan fitur CSS yang menambahkan konsep pemrograman (seperti kontrol/struktur kondisional), pada IE8, mesin tata letak trident (digunakan dalam IE) tidak lagi didukung. Bagaimanapun, mereka tidak memiliki ide yang bagus untuk digunakan. Hingga taraf tertentu, saya akan menggunakan skrip PHP untuk memuat aturan gaya CSS yang berbeda berdasarkan kondisi yang berbeda, seperti angka acak, waktu hari, atau browser.
Panggilan Eksternal ke JS dan CSS : Masukkan file JS dan CSS di file eksternal, dan browser menyimpannya dengan kecepatan pemuatan halaman yang lebih cepat daripada setiap panggilan.
Kurangi pencarian DNS : Selama pengguna mengetik nama domain di bilah alamat browser, browser akan selalu melakukan DNS mencari alamat IP. Semakin banyak lokasi entri yang dimiliki situs web, semakin penting pencarian DNS. Jaga level serendah mungkin, dan lakukan permintaan DNS rata-rata 60-100 milidetik.
Zoom in JS : Tidak seperti kompresi GZIP umum, zoom dalam dokumen JS adalah untuk menghapus ruang yang tidak perlu, tab, dan karakter seleksi lainnya dari Zhonghe Yang, mengurangi ukuran total file, dan halaman yang lebih kecil bisa mendapatkan kecepatan pemuatan yang lebih cepat. Anda dapat menggunakan JSmin untuk memperbesar JavaScript.
Hindari pengalihan : apakah itu pengalihan header server, pengalihan JS, atau pengalihan elemen HTML. Situs web Anda akan memuat header halaman kosong dan kemudian halaman baru. Pengguna menghabiskan lebih banyak waktu untuk mendapatkan halaman yang mereka butuhkan, sehingga mereka harus menghindari ini dengan cara apa pun.
Hapus skrip duplikat : Browser memuat skrip yang sama akan meningkatkan waktu pemuatan halaman, yang merupakan masalah matematika yang sangat sederhana, lebih banyak file yang sama dengan lebih banyak waktu pemuatan. Periksa kembali situs web Anda untuk memastikan Anda tidak menghubungi jQuery dua atau tiga kali atau skrip lainnya.Ketika ... itu banyak, mari kita beralih ke tab Yslow berikutnya tepat sebelum kita masuk ke beberapa teknik lain untuk meningkatkan kinerja situs web Anda.
Gambar 4: Label Bagian.
Bagian tag (seperti yang ditunjukkan pada Gambar 4) dapat memberikan wawasan tentang efek meningkatkan kecepatan pemuatan situs web. Di sini Anda dapat melihat berapa lama dokumen saat ini perlu memuat, jika file -file ini dikompresi, waktu respons, dan jika mereka di -cache di mesin pengguna dan ketika cache berakhir. Ini adalah penilaian yang baik dari situs web, mengukur kinerja dan optimasi kecepatannya. Akhirnya, tag statistik (seperti yang ditunjukkan pada Gambar 4), yang menunjukkan kepada kita semua permintaan HTTP, dokumen yang diunduh pada saat yang sama, dan file di -cache. Cache kosong menampilkan file yang dibutuhkan browser untuk mengunduh halaman rendering. Cache prima, di sisi lain, menampilkan daftar file yang sudah ada di cache browser pengguna, sehingga menyimpan permintaan browser untuk tidak perlu mengunduh file lagi.
Gambar 5: Tab Statistik.