Cara Mempercepat Situs Web Anda: 15 Perbaikan Cepat dan Mudah untuk Mengurangi Waktu Muat Halaman Web

Diterbitkan: 2021-10-10

Cara Meningkatkan Kecepatan Halaman Dalam posting hari ini, saya akan menunjukkan kepada Anda cara cepat dan mudah mengurangi waktu buka situs web Anda (dan mengapa itu penting).

Faktanya:

Teknik yang akan saya ungkapkan adalah strategi yang sama dengan yang saya gunakan untuk meningkatkan kecepatan halaman saya dari waktu penuh 3+ detik menjadi 1,2 detik.

Tapi inilah bagian terbaiknya:

Tak satu pun dari peningkatan pemuatan situs web ini memerlukan pengetahuan pengembang dan dapat diterapkan bahkan oleh SEO pemula dengan sangat cepat.

Jika Anda ingin meningkatkan kecepatan situs Anda, peringkat lebih tinggi, meningkatkan keterlibatan dan mengkonversi lebih banyak lalu lintas, posting ini adalah untuk Anda. Tapi pertama-tama, mengapa waktu buka halaman web yang cepat itu penting?

Statistik Waktu Muat Situs Web

Statistik Waktu Muat Situs Web

  • 59,2% pengguna akan meninggalkan situs web dalam 6 detik pertama jika lambat memuat – Unbounce
  • Saat waktu buka halaman berubah dari 1 detik, kemungkinan bouncing meningkat 32% – Pikirkan Dengan Google
  • Mengurangi waktu buka sebesar 0,1 detik menyebabkan rasio pentalan halaman penghasil prospek meningkat sebesar 8,3% – Google, Fifty-Five, dan Deloitte
  • Ketika waktu muat berkurang hanya 0,1 detik:
    • Keterlibatan pelanggan ritel meningkat sebesar 5,2%.
    • Rasio pentalan pada halaman daftar produk dalam kategori ritel dan perjalanan meningkat sebesar 5,7% dan 5,4% – Google, Fifty-Five, dan Deloitte
  • Tingkat konversi situs web turun rata-rata 4,42% dengan setiap detik tambahan waktu buka antara nol dan lima detik – Portent
  • Meningkatkan waktu buka situs sebesar sepersepuluh detik menghasilkan penurunan tingkat konversi sebesar 7% – Akamai
  • Mengurangi waktu buka situs sebesar sepersepuluh detik menghasilkan peningkatan 8,4% dalam rasio konversi untuk situs ritel dan peningkatan 10,1% dalam konversi untuk situs perjalanan – Google, Fifty-Five, dan Deloitte
  • Jika situs eCommerce memuat lebih lambat dari yang diharapkan, lebih dari 45% orang mengakui bahwa mereka cenderung tidak melakukan pembelian – Unbounce
  • Sekitar 70% orang mengatakan bahwa kecepatan halaman memengaruhi keinginan mereka untuk membeli dari pengecer online – Unbounce
  • 77% pembeli ponsel cerdas mengatakan bahwa mereka lebih cenderung membeli dari situs seluler yang menawarkan kemampuan untuk melakukan pembelian dengan cepat – Think with Google
  • Situs ritel melihat peningkatan 9,2% dalam nilai pesanan rata-rata saat waktu muat berkurang sepersepuluh detik – Deloitte
  • Rata-rata waktu yang dibutuhkan halaman web seluler untuk menyelesaikan pemuatan secara visual adalah 21,6 detik – Backlinko
  • Rata-rata waktu yang dibutuhkan halaman web desktop untuk menyelesaikan pemuatan secara visual adalah 8,2 detik – Backlinko
  • Kecepatan pemuatan halaman rata-rata untuk halaman web yang terisi penuh adalah 27,3 detik di seluler – Backlinko
  • Kecepatan pemuatan halaman rata-rata untuk halaman web yang terisi penuh adalah 10,3 detik di desktop – Backlinko
  • Rata-rata halaman web membutuhkan waktu 87,84% lebih lama untuk dimuat sepenuhnya di seluler vs. desktop – Backlinko
  • Laman seluler yang dimuat lambat menghasilkan rasio pentalan dua kali lebih tinggi dan tampilan laman 27% lebih sedikit jika dibandingkan dengan laman desktop – Sempurna

Sekarang Anda memahami pentingnya situs web yang memuat cepat, mari kita bahas apa itu kecepatan halaman (tepatnya) dan bagaimana Anda dapat meningkatkannya.

Apa itu Kecepatan Halaman?

Kecepatan halaman adalah jumlah waktu yang diperlukan untuk memuat halaman web.

Definisi Kecepatan Halaman

Atau dikenal sebagai waktu pemuatan, kecepatan halaman diukur dengan interval antara browser yang meminta halaman web dan saat browser merender halaman.

Kecepatan memuat halaman dipengaruhi oleh berbagai faktor seperti jarak perjalanan data, kecepatan server situs web, kerumitan kodenya, ukuran file halaman, dan jenis koneksi.

Belum lagi, kompresi file, caching, render-blocking, dan puluhan faktor lain yang memengaruhi kecepatan halaman dan SEO.

Seperti yang Anda mulai katakan, meningkatkan kecepatan halaman tidak sesederhana menginstal plugin kecepatan halaman.

Ada banyak, terkadang faktor kompleks yang berkontribusi pada seberapa cepat – atau lambat – situs web Anda dimuat.

Bukan hanya itu, juga tidak ada "satu cara" untuk mengukur waktu buka halaman, ada banyak.

Inilah tiga yang paling umum:

Waktu Muat Halaman

Ini adalah berapa lama waktu yang dibutuhkan halaman untuk memuat secara penuh.

Waktu untuk memuat penuh mengukur pemuatan semua bagian halaman yang terlihat, serta elemen tersembunyi seperti skrip dan kode – pada dasarnya ini mengukur waktu muat 100% dari semua sumber daya di halaman.

Ini adalah metrik kecepatan halaman yang paling sederhana untuk dipahami, tetapi belum tentu yang paling berguna, karena halaman mungkin tampak dimuat ke pengguna (dan benar-benar berfungsi) jauh sebelum halaman dimuat secara penuh.

Cat Contentful Terbesar

Largest Contentful Paint (LCP) adalah metrik yang lebih berharga untuk menentukan waktu buka halaman dari sudut pandang pengguna.

Ini mengukur waktu yang diperlukan halaman web untuk menunjukkan kepada pengguna konten terbesar di layar.

Biasanya itulah judul halaman, gambar unggulan, atau konten teks utama.

Singkatnya, LCP mengukur waktu agar konten paruh atas yang penting terlihat sepenuhnya oleh pengguna.

Cat Contentful Terbesar

Sebagai contoh, katakanlah sebuah halaman membutuhkan waktu 10 detik untuk dimuat sepenuhnya.

Halaman tidak akan "tampak" dimuat dengan lambat selama cat konten pertama muncul dalam beberapa detik.

Singkatnya, Anda bisa lolos dengan waktu pengisian penuh yang lambat selama cat konten terbesar Anda cepat.

Waktu untuk Byte Pertama

Sederhananya, ini adalah ukuran berapa lama browser web harus menunggu sebelum menerima byte data pertamanya dari server situs web.

TTFB tidak benar-benar mengukur berapa lama waktu yang dibutuhkan untuk memuat halaman, namun hal itu mempengaruhi waktu buka halaman.

Semakin lama waktu yang dibutuhkan browser untuk menerima data dari server, semakin lama waktu yang dibutuhkan untuk menampilkan halaman.

Bagaimana Menghitung Waktu Muat Halaman?

Ada banyak metode berbeda untuk mengukur kecepatan halaman:

  • Waktu ke Byte Pertama (TTFB)
  • Cat Contentful Terbesar (LCP)
  • Cat Bermakna Pertama (FMP)
  • Waktu untuk Interaktif (TTI)
  • Penundaan Input Pertama (FID)

Daftarnya terus…

Dan karena tidak satu pun dari metrik ini lebih baik dari yang lain.

Saya sarankan Anda bekerja untuk mempercepat situs web Anda di semua itu.

Jangan khawatir. Sebentar lagi saya akan menunjukkan caranya, tetapi pertama-tama:

Mengapa Kecepatan Halaman Penting untuk SEO?

Tidak dapat disangkal, Google terobsesi dengan kecepatan memuat halaman.

Benih Halaman sebagai Sinyal Peringkat

Sejak 2010, Google telah menggunakan kecepatan situs (dan karenanya kecepatan halaman) sebagai faktor peringkat dalam algoritme mesin telusurnya.

Kemudian pada tahun 2018, Google meluncurkan "Pembaruan Kecepatan" yang selanjutnya berdampak pada peringkat mesin pencari dari halaman yang memuat lambat.

Dan yang terbaru pada tahun 2021, Google memperkenalkan Pengalaman Halaman yang komponen utamanya adalah vital web inti dan kecepatan pemuatan.

Sinyal Peringkat Pengalaman Halaman

Google sangat peduli dengan kecepatan halaman – dan mengapa tidak?

Jika Google akan mengirimkan banyak lalu lintas gratis ke situs web Anda, mereka ingin pengguna menikmati pengalaman yang HEBAT. Sebagian besar dari itu adalah halaman web yang dimuat dengan cepat.

Sederhananya:

Situs web yang memuat lambat akan merusak peringkat Google Anda.

Situs web yang memuat cepat akan membantu peringkat Google Anda.

Satu-satunya pertanyaan adalah, bagaimana Anda meningkatkan waktu muat halaman Anda? Kami akan membahasnya selanjutnya.

Cara Mempercepat Situs Web Anda: 15 Praktik Terbaik untuk Mengurangi Waktu Muat Halaman Web

Tidak ada cara untuk menghindarinya, banyak hal yang berkontribusi pada kecepatan halaman berakar dalam dalam kode dan sangat teknis.

Membuat Halaman AMP, meminimalkan permintaan HTTP, dan menggunakan pemuatan asinkron – semuanya memerlukan pengetahuan tingkat developer. Dan, karena itu, saya tidak akan membahas optimasi kecepatan halaman tersebut di posting ini.

Sebagai gantinya, saya membagikan 15 cara yang mudah diterapkan (namun sering dilupakan) untuk meningkatkan kecepatan situs Anda yang belum pernah ada sebelumnya.

Mari kita masuk:

(1). Lakukan Tes Kecepatan Halaman Sehingga Anda Dapat Membandingkan Waktu Pemuatan Anda (dan Mengetahui Apa yang Harus Ditingkatkan)

Sebelum Anda mencoba meningkatkan kecepatan halaman, ada baiknya mengetahui seberapa cepat – atau lambat – situs web Anda dimuat.

Lagi pula, jika Anda tidak mengetahui kecepatan halaman Anda saat ini, bagaimana Anda tahu jika pengoptimalan kecepatan Anda berhasil?

Anda dapat menggunakan beberapa alat untuk menilai peningkatan kecepatan halaman Anda, dan saya sarankan menjalankan situs Anda melalui semuanya.

Tapi kata peringatan singkat:

Skor Anda akan sangat bervariasi dari satu alat ke alat lainnya.

Itu karena setiap alat uji kecepatan halaman web menggunakan metode yang berbeda untuk menilai kinerja. Tidak hanya itu, lokasi server mereka berada di berbagai kota – dan seperti yang akan Anda ketahui nanti – lokasi server memiliki dampak BESAR pada waktu pemuatan situs web.

Tidak perlu terjebak pada spesifikasinya. Untuk saat ini, jalankan tes dengan setiap alat dan catat skor Anda.

Pingdom

Tes kecepatan situs yang mudah digunakan yang meniru cara halaman dimuat di browser web. Pingdom saat ini menawarkan tujuh lokasi server dari mana Anda dapat menguji situs Anda.

Tidak seperti alat lain yang mengukur waktu buka berdasarkan saat halaman dimuat penuh, Pingdom menggunakan Waktu Muat yang mencatat saat semua sumber daya pada halaman telah diunduh. Pada titik ini, halaman akan menjadi interaktif, tetapi skrip mungkin masih berjalan di latar belakang.

Alat Pengujian Kecepatan Halaman Pingdom

GT Metrik

Alat pengujian kecepatan halaman yang menawarkan pengukuran desktop dan seluler serta opsi untuk menguji di beberapa browser. GT Metrix menyediakan berbagai lokasi server, termasuk 7 pada paket gratis dan 15 lagi pada paket pro.

Pengukuran default adalah waktu muat penuh, dengan waktu muat opsional.

Alat Pengujian Kecepatan Situs Web GT Metrix

Tes Halaman Web

WebPageTest adalah alat hebat lainnya yang menunjukkan kepada Anda kecepatan dan kinerja situs web Anda di berbagai browser.

WebPageTest memiliki jumlah lokasi pengujian paling luas, dengan total 38 lokasi. Seperti GT Metrix, WebPage Test menggunakan waktu yang dimuat penuh secara default, dengan waktu muat (juga dikenal sebagai waktu Penyelesaian Dokumen) opsional.

Tes Halaman Web

Wawasan PageSpeed

Ini adalah alat Google untuk menilai kinerja kecepatan halaman. Tidak seperti tiga alat yang disebutkan di atas, Google menggunakan data lapangan alih-alih data lab dalam skornya – dengan asumsi data lapangan tersedia.

Apa artinya ini:

Alih-alih menjalankan pengujian yang mensimulasikan waktu buka untuk pengguna nyata, Google PageSpeed ​​Insights mengumpulkan data pengguna nyata dari pengguna browser Chrome. Data ini dikumpulkan selama 30 hari, yang berarti Anda mungkin tidak melihat peningkatan skor hingga 30 hari setelah Anda mengoptimalkan waktu muat Anda.

Wawasan PageSpeed

Penting untuk mengetahui penilaian Google terhadap waktu buka Anda. Skor inilah yang mereka gunakan untuk Data Web Inti – bagian penting dari sinyal Pengalaman Halaman yang berkontribusi terhadap kinerja peringkat mesin pencari.

Yang mengatakan, tiga alat lainnya (Pingdom, GT Metrix, dan WebPageTest) lebih berguna untuk pengukuran cepat sebelum dan sesudah kinerja kecepatan halaman Anda.

Beberapa petunjuk:

Pertama, pilih lokasi pengujian di dekat audiens target Anda. Jika pengujian Anda dijalankan dari Amerika Serikat, tetapi pengguna Anda berada di Australia, Anda tidak akan mendapatkan ukuran kinerja kecepatan halaman yang realistis.

Tes Lokasi Webpagetest

Kedua, jangan membuat kesalahan dengan menguji HANYA beranda Anda.

Kecepatan halaman unik untuk setiap halaman.

Saya sarankan Anda menguji semua URL terpenting Anda dan menggunakan Google Analytics untuk mengidentifikasi halaman pemuatan paling lambat Anda dengan cepat.

Laporan Waktu Halaman Google Analytics

Tip – Anda dapat menemukan 'Waktu Halaman' di bawah 'Kecepatan Situs' di menu 'Perilaku' GA.

Mengerti? Dingin.

Mari kita mulai mengoptimalkan kecepatan halaman kita.

(2). Matikan Sistem Nama Domain Gratis Anda untuk Host DNS Cepat Kilat

Pikirkan host Domain Name System (DNS), seperti buku telepon.

Ini memetakan nama domain Anda yang dapat dibaca manusia ke alamat IP (tempat situs web Anda sebenarnya berada).

Host Sistem Nama Domain

Pendeknya:

Setiap kali pengguna mengetik alamat web Anda ke bilah URL browser mereka, browser melakukan pencarian DNS yang mengubah alamat web menjadi alamat IP, dan dengan melakukan itu, akan menemukan server tempat situs web Anda dihosting.

Secara default, Anda akan menggunakan layanan DNS gratis yang ditawarkan oleh pencatat domain Anda.

NameCheap, GoDaddy, Google Domains (dan hampir setiap pencatat domain lain di luar sana) memberi Anda kemampuan untuk menyiapkan server nama dan merutekan domain Anda ke alamat IP host web Anda.

Masalah dengan layanan DNS gratis ini?

Mereka benar-benar lambat.

Jika Anda menginginkan situs web yang sangat cepat, saya sarankan untuk mengalihkan DNS Anda ke Cloudflare.

Saya beralih dari layanan DNS Namecheap dan beralih dari waktu kueri 26 ms:

Kinerja DNS Namecheap

Untuk mengejutkan 13 ms.

Performa DNS Cloudflare

Dengan kata lain, saya memotong 50% dari waktu pemrosesan DNS.

Terbaik dari semua, itu tidak dikenakan biaya sepeser pun.

Setelah Anda mendaftar untuk mendapatkan akun Cloudflare gratis, Anda cukup masuk ke pendaftar domain Anda dan mengganti server nama default dengan Cloudflare.

Ubah Nameserver ke Cloudflare

Dan dengan itu, Anda selesai.

(3). Terapkan Caching Double Whammy ini dan Percepat Waktu Muat

Inilah yang (biasanya) terjadi ketika pengguna membuka situs web Anda:

  • Browser mereka menghubungi server web Anda
  • Sistem manajemen konten Anda mengambil data terbaru dari database Anda (seperti posting dan halaman terbaru Anda)
  • Server web Anda mengkompilasi data ke halaman HTML dan menyajikannya kepada pengunjung
Koneksi Peramban dan Basis Data

Plugin caching menghapus dua langkah pertama sepenuhnya.

Untuk menghindari permintaan baru dibuat ke server Anda setiap kali pengunjung melihat halaman, plugin caching akan menyimpan versi prebuilt halaman web Anda dan menyajikannya kepada pengunjung Anda.

Cara kerja caching

Dan dengan melakukan itu, ini mempercepat waktu buka bagi pengguna.

Rekomendasi saya untuk plugin caching WordPress adalah:

  • WP Rocket (apa yang saya gunakan)
  • Cache Total W3
  • WP Super Cache

Karena plugin caching menghapus pencarian basis data, plugin ini dapat memotong 1-3 detik waktu pemuatan situs web Anda.

Tidak buruk.

Tetapi jika Anda ingin halaman Anda dimuat dengan sangat cepat, saya sarankan ini:

Caching Tepi (CDN)

Tidak seperti cache halaman, yang menyimpan versi cache situs web Anda di server web pusat…

Caching tepi menyimpan seluruh halaman HTML pada "simpul tepi" yang terletak di jaringan server yang mencakup dunia.

Apa artinya ini:

Alih-alih permintaan dibuat ke server di sisi lain planet ini…

Saat pengunjung meminta untuk membuka halaman, halaman tersebut dikirim dari server yang terletak di dekat Anda.

Bagaimana Edge Caching Bekerja

Seperti halnya cache halaman, versi halaman web yang dibuat sebelumnya disimpan untuk akses langsung, dan panggilan ke database tidak diperlukan.

Seperti yang dapat Anda bayangkan, jika data hanya perlu menempuh jarak beberapa ratus kilometer versus ribuan – dan halaman sudah siap untuk pengguna – ini akan menghasilkan waktu muat yang lebih cepat.

Tidak hanya itu, karena edge caching melakukan banyak pekerjaan, itu juga menghilangkan tekanan dari hosting web Anda, yang dapat meningkatkan kecepatan situs Anda lebih jauh.

Layanan Edge Caching yang saya sarankan Anda gunakan adalah CDN Cloudflare:

Dengan 200+ server di seluruh dunia:

Jaringan Cloudflare Edge Caching

Dan, hanya dengan $20 per bulan, itu benar-benar mencuri.

(4). Optimalkan Gambar Anda untuk Mengurangi Muatan Besar

Tidak ada yang memperlambat situs web seperti gambar yang membengkak.

Dan, itu tidak mengejutkan.

Gambar merupakan bagian besar dari ukuran halaman.

Kontribusi Gambar untuk Berat Halaman

(Hampir 40% dari total berat halaman untuk halaman layanan SEO kami).

Jadi semakin Anda dapat mengoptimalkan gambar Anda, semakin cepat halaman Anda akan dimuat.

Satu-satunya pertanyaan adalah bagaimana?

Pertama, Anda ingin mengubah ukuran semua gambar Anda ke ukuran terbesar yang diperlukan – dan tidak lebih besar

Contohnya:

Gambar di halaman ini memiliki lebar maksimum 640px.

Jika saya memuat gambar dengan lebar 650px, saya akan menambahkan bobot yang tidak perlu ke halaman.

Tidak hanya itu, karena CMS saya perlu mengubah ukuran gambar menjadi lebar 640px agar sesuai dengan dimensi halaman, waktu buka akan semakin diperlambat.

Dengan mengingat hal itu, saya sarankan Anda mengubah ukuran gambar Anda ke ukuran maksimal yang mereka perlukan SEBELUM mengunggahnya ke situs web Anda.

Cara mengompres file gambar

Anda dapat menggunakan alat pengeditan gambar online seperti Pixlr atau alat asli komputer Anda. Mekanismenya tidak masalah – Anda memerlukan gambar dengan ukuran yang sama dengan area maksimum yang dapat dilihat.

Hal kedua yang ingin Anda lakukan adalah memilih jenis file yang tepat.

Memilih format file yang salah dapat menambah bobot ekstra atau menghasilkan gambar berkualitas rendah.

Kecuali jika gambar Anda dianimasikan, PNG atau JPEG adalah yang paling ringan – dan karenanya paling cepat dimuat.

Berikut cara mengetahui jenis file mana yang harus dipilih:

Cara Memilih Jenis File Gambar yang Tepat

Ketiga, Anda ingin menghapus semua bloat yang tidak perlu dari file gambar Anda sambil mempertahankan kualitas sebanyak mungkin.

Jangan khawatir tentang teknisnya.

Cukup instal Imageoptim dan biarkan alat melakukan sisanya.

Pengoptimalan gambar

Ini dapat membantu mengurangi ukuran file Anda sekitar setengahnya.

Tapi tunggu!

Bagaimana jika gambar Anda sudah dimuat?

Kabar baik. Jika Anda menggunakan WordPress, saya punya solusinya:

WP Gila!

WP Smush secara otomatis mengompresi gambar apa pun yang Anda unggah ke perpustakaan media WordPress.

Plugin Pengoptimalan Gambar WP Smush

Dan mengurangi ukuran file lebih dari 2 kali, tanpa penurunan kualitas visual yang nyata.

Cukup keren, bukan?

Setelah Anda mengompresi ukuran file gambar, ada satu lagi trik pengoptimalan gambar yang dapat Anda gunakan untuk meningkatkan waktu pemuatan halaman web Anda.

(5). Terapkan Lazy Loading (Tapi Tidak di Logo Anda)!

Bahkan jika gambar Anda seringan bulu, berat halaman Anda masih bisa berat jika Anda menggunakan banyak gambar dalam posting Anda (seperti saya).

Tidak hanya itu, jika setiap gambar perlu dimuat agar halaman dapat dirender – waktu pemuatan halaman Anda akan diperpanjang.

Masukkan pemuatan malas.

Lazy loading adalah saat browser menunda pemuatan gambar hingga gambar perlu ditampilkan di layar.

Dengan kata lain, tidak semua gambar dimuat sekaligus.

Beberapa gambar (dan aset lain seperti video dan sematan) ditunda dan dimuat HANYA bila diperlukan—yaitu, saat pengguna menggulir ke bawah ke bagian halaman tersebut.

Jika Anda memperhatikan posting blog saya dengan cermat, Anda akan melihat pemuatan malas beraksi:

Pemuatan malas sangat kuat. Ini benar-benar dapat mempercepat situs. Tapi, ada satu masalah BESAR dengan pemuatan yang lambat:

Saat dihidupkan, itu malas memuat SEMUA gambar.

Karena sebagian besar situs – seperti milik saya – memiliki gambar yang seharusnya ditampilkan saat dimuat, menggunakan pemuatan lambat sebenarnya dapat merusak konten konten terbesar.

Intinya di sini adalah bahwa pengaturan lazy loading default akan menerapkan tag lazy loading ke semua gambar di halaman, termasuk yang di atas yang harus segera ditampilkan kepada pengguna.

Yang berarti:

Gambar "paro atas" harus menunggu perpustakaan JavaScript pemuatan lambat dijalankan sebelum gambar di bagian atas halaman dapat dimuat. Dengan kata lain, JavaScript lazyload memblokir rendering aset yang diperlukan untuk contentful paint (LCP) terbesar yang cepat.

Untuk mengatasi masalah ini, ambil URL logo Anda dan gambar paruh atas lainnya (Petunjuk! Gambar unggulan Anda) dan tambahkan sebagai pengecualian di plugin pemuatan lambat Anda.

Saya menggunakan WP Rocket, dan berikut pengaturannya:

Pengecualian Logo Lazy Load

Baik Anda menggunakan WP Rocket, atau Autoptimize (plugin hebat lainnya untuk pemuatan lambat), pastikan untuk menunda pemuatan gambar dan menetapkan logo Anda sebagai pengecualian.

Dengan itu, ke hal lain yang harus diatur ke "tunda pemuatan."

(6) Tunda File JavaScript dan Tingkatkan Kecepatan Halaman Anda

Jika Anda pernah menjalankan situs melalui PageSpeed ​​Insights atau GT Metrix, Anda akan terbiasa dengan peringatan ini:

Tunda Peringatan Lewat JavaScript GT Metrix

Tidak ada cara untuk menghindarinya. JavaScript adalah salah satu penyebab terbesar yang memengaruhi waktu buka situs web.

Tapi kenapa?

Saat seseorang mengunjungi situs Anda, server web Anda mengirimkan konten HTML situs web Anda ke browser pengguna.

Browser pengguna kemudian bekerja melalui HTML dari atas ke bawah untuk merender halaman.

Jika menemukan JavaScript apa pun selama proses itu, ia berhenti merender sisa halaman hingga mengambil dan menguraikan file JavaScript lengkap.

Karena file skrip berukuran besar dan membutuhkan waktu untuk dimuat, mereka benar-benar dapat memengaruhi waktu pemuatan.

Dan inilah kesepakatannya:

Sebagian besar file JavaScript seperti Obrolan Langsung, munculan, widget, atau bahkan skrip pelacakan tidak diperlukan agar laman dapat dirender dengan benar.

Dan itulah mengapa saya menyarankan Anda menunda penguraian file JavaScript hingga halaman dimuat.

Dengan cara ini, semua konten penting pada halaman dimuat, dan kemudian skrip dijalankan nanti.

Jika Anda menggunakan WordPress, baik WP Rocket dan Perfmatters memungkinkan Anda untuk menunda rendering JavaScript.

Jika Anda penasaran, berikut adalah pengaturan Perfmatters saya:

Perfmatters Menunda JavaScript

Skrip yang Anda tunda di situs Anda akan unik untuk Anda.

Tinjauan singkat tentang rekomendasi GT Metrix akan menunjukkan kepada Anda penyebab memperlambat waktu muat Anda.

(7). Tingkatkan Hosting Anda

Tidak semua web host dibuat sama. Jauh dari itu.

Perbedaan waktu respons antara penyedia hosting cepat dan lambat dapat dengan mudah mencapai 800 milidetik.

Mungkin kedengarannya tidak banyak, tapi itu perbedaan 4X:

Perbandingan Kecepatan Hosting

Saya tidak akan menyebut penyedia hosting individu karena saya hanya menguji beberapa dari mereka, tetapi kemungkinannya adalah jika Anda menghabiskan $ 4,99 per bulan untuk hosting, situs Anda tidak akan dimuat dengan cepat.

Itu karena sebagian besar paket hosting anggaran menempatkan situs Anda di server yang sama (terbebani) seperti ratusan situs web lain – yang menyebabkan pelambatan, kelambatan, dan bahkan waktu henti.

Saya tidak dapat berbicara tentang kinerja sebagian besar host di luar sana, tetapi sebagai aturan umum, Anda mendapatkan apa yang Anda bayar.

Namun, jika Anda mencari saran hosting, berikut adalah dua host premium yang saya gunakan dan secara pribadi dapat merekomendasikan:

  • Cloudways – Hosting cloud terkelola pada tumpukan server yang dioptimalkan kecepatan untuk menyediakan 60+ lokasi di seluruh dunia. Rekomendasi saya untuk klien.
  • WP Engine – Hosting terkelola untuk situs web WordPress dengan cache halaman di tingkat server. Hosting yang sama dengan tempat situs ini dihosting.

Apakah Anda mengikuti rekomendasi saya atau yang lain, Anda harus mencari beberapa faktor.

Pertama, Anda menginginkan penyedia hosting yang menggunakan solid-state drive (SSD).

Solid-state drive jauh lebih cepat daripada hard drive standar, yang berarti waktu pemuatan halaman lebih pendek.

Kedua, gunakan host dengan server yang berlokasi di negara Anda – atau setidaknya benua Anda.

Bagaimana lokasi server memengaruhi kecepatan halaman

Situs web biasanya berkinerja 1+ detik lebih lambat di luar negara tempat server berada.

Dengan mempertimbangkan statistik itu, jika saat ini Anda menggunakan server bersama murah yang terletak jauh, jauh sekali, inilah saatnya untuk meningkatkan ke server SSD lokal khusus.

(8). Bersihkan dan Kompres Kode Anda

Singkatnya, Anda ingin meminimalkan sumber daya yang ditemukan di halaman Anda.

Minifikasi (jika itu benar-benar sebuah kata) adalah proses menghilangkan spasi, karakter, dan komentar yang tidak perlu – sebenarnya, elemen yang tidak dibutuhkan – untuk mengurangi ukuran file.

File yang lebih ringan berarti lebih sedikit data untuk ditransfer – dan waktu muat lebih cepat.

Proses mengecilkan file biasanya difokuskan pada JavaScript dan CSS tetapi juga dapat menyertakan HTML.

Namun, sebelum Anda panik memikirkan menyisir setiap baris kode di situs web Anda untuk menemukan elemen yang berlebihan, jangan khawatir.

Anda dapat dengan mudah memperkecil kode Anda dengan menginstal WP Rocket dan mencentang beberapa kotak:

Pengaturan WP Rocket Minify

WP Rocket akan mengecilkan kode Anda secara otomatis!

Metode kedua untuk mengurangi file adalah kompresi GZIP.

GZIP bekerja mirip dengan kompresi ZIP dan RAR yang Anda gunakan di komputer tetapi ditangani oleh server Anda.

Pada dasarnya, ketika pengunjung tiba di situs web Anda, browser mereka meminta file situs dari server web Anda. Saat GZIP diaktifkan, server Anda akan mengompresi file tersebut sebelum mengirimkannya ke browser pengguna.

Dan, karena file-file itu dikompresi dan lebih ringan – transfernya lebih cepat.

Karena saya menggunakan hosting WP Engine, GZIP sudah diaktifkan.

Jika hosting Anda tidak mendukung kompresi GZIP, Anda dapat mengaktifkannya melalui WP Rocket atau W3 Total Cache.

Atau, lakukan secara manual jika Anda ahli dalam hal semacam ini.

(9). Buang HTTP Kedaluwarsa Anda untuk Memanfaatkan Protokol HTTP2 yang Lebih Cepat

Saya tidak percaya saya mengatakannya di zaman sekarang ini.

Tetapi jika Anda masih menjalankan situs web Anda pada protokol HTTP (sebagai lawan dari HTTPS), lakukan perubahan sekarang.

Anda mungkin tahu bahwa HTTPS adalah sinyal peringkat.

HTTPS sebagai sinyal peringkat

Pada dasarnya, jika situs web Anda menggunakan protokol HTTPS yang aman dan terenkripsi, Google akan memberikan sedikit peningkatan peringkat pada situs Anda. Sebaliknya, jika Anda menggunakan HTTP, kinerja peringkat Anda akan sedikit berkurang.

Tapi itu bukan satu-satunya alasan untuk mendapatkan sertifikat SSL dan beralih ke hosting HTTPS.

Tahukah Anda bahwa HTTPS juga lebih cepat?

Saat situs Anda berjalan dalam mode HTTPS (terenkripsi), perangkat lunak browser web Anda akan menggunakan protokol HTTP2 yang lebih baru (dengan asumsi host Anda mendukungnya), yang secara signifikan lebih cepat daripada protokol HTTP 1.1 sebelumnya.

Faktanya, menggunakan HTTPS akan memungkinkan situs Anda mengunduh 14,3% lebih cepat:

Kecepatan HTTP Vs HTTP2

Tidak terlalu buruk!

Sebelum buru-buru beralih ke HTTPS dengan host web Anda saat ini, pertimbangkan bahwa banyak penyedia hosting murah masih tidak mendukung HTTP2.

Jika milik Anda tidak, itu merupakan indikasi pasti bahwa infrastruktur mereka sudah usang dan alasan lain untuk beralih ke perusahaan hosting premium seperti Cloudways, WP Engine, atau Kinsta.

KIAT PRO: Berlangganan fitur 0-RTT (zero round trip time) Cloudflare, yang mempercepat negosiasi enkripsi HTTPS lebih jauh!

(10). Gunakan Versi PHP Tertinggi yang Diizinkan Situs Web Anda (Dan Mengunci Waktu Pemrosesan Lebih Cepat)

PHP adalah bahasa pemrograman yang digunakan oleh CMS populer seperti Joomla, Drupal, dan WordPress.

Percaya atau tidak, ini adalah basis kode yang digunakan oleh 4 dari setiap 5 situs web:

Penggunaan Bahasa Pemrograman Situs Web

Satu hal yang baik tentang PHP adalah bahwa ia terus diperbarui untuk meningkatkan keamanan dan kinerja yang ditingkatkan.

Faktanya, versi baru PHP dirilis setiap 6-12 bulan atau lebih – dan setiap pembaruan PHP baru biasanya 10-30% lebih cepat dari versi sebelumnya.

Kecepatan Pemrosesan Versi PHP

Setiap versi beroperasi lebih cepat daripada yang terakhir karena peningkatan jumlah permintaan basis data yang dapat diproses sekaligus.

Misalnya, membandingkan PHP 7.3 dengan PHP 5.6, versi yang lebih baru dapat menangani transaksi 3 kali lebih banyak per detik.

Jika situs Anda menggunakan WordPress, tidak ada salahnya untuk memperbarui situs Anda ke versi PHP terbaru.

Penyedia hosting khusus seperti yang telah disebutkan memperbarui versi PHP Anda secara otomatis.

Atau, Anda dapat memeriksa pengaturan Kesehatan Situs Anda di bawah menu Alat di WordPress. Dari sana, Anda akan melihat versi PHP yang Anda jalankan:

Versi WordPress PHP

Dan dapat memperbaruinya sesuai.

(11). Gunakan Layanan Ini untuk Video – Ini Akan Mempercepat Situs Web Anda Secara Signifikan

Tidak dapat disangkal; video adalah cara yang sangat baik untuk melibatkan pemirsa Anda.

Tetapi masalahnya adalah, mereka mengambil banyak sumber daya server untuk dimuat.

Dan, saat Anda mulai belajar, semakin sedikit ketegangan pada server Anda, semakin baik, karena semakin cepat kecepatan halaman Anda.

Jadi, dalam kasus video…

Alih-alih meng-hosting video sendiri di situs Anda, gunakan layanan hosting video mandiri seperti YouTube, Vimeo, atau Wistia.

Kemudian tambahkan video ke situs web Anda menggunakan kode sematan.

Kode semat wista

Dengan cara ini, server Anda tidak akan sibuk memuat file video berat dan dapat menggunakan waktu untuk memproses elemen lain di halaman.

Tetapi dari masing-masing layanan ini, mana yang lebih baik?

Menurut WP Rocket, Vimeo sedikit lebih cepat dari YouTube dan Wistia – dan JAUH lebih cepat dari Daily Motion, pemain paling lambat.

Namun, perbedaan antara 3 teratas ini minimal, itulah sebabnya saya memilih Wistia untuk sebagian besar video saya.

Ini memiliki analitik yang luar biasa dan mendukung peta situs video – yang merupakan fitur hebat untuk SEO.

(12). Temukan (dan Perbaiki) Pengalihan 3XX

Pengalihan 301 dan 302 berguna.

Mereka digunakan untuk mengarahkan ulang halaman yang berlebihan ke URL kerja alternatif.

Pengalihan 301 dan 302 dijelaskan

Masalahnya adalah mereka pengecut untuk kecepatan halaman.

Mengapa?

Karena setiap kali pengguna mencoba mengakses halaman kode status 3XX, dua permintaan dibuat ke server.

Satu untuk URL asli (dialihkan) dan satu lagi untuk URL tujuan akhir.

Itu bisa berarti peningkatan yang signifikan dalam waktu pemuatan situs web.

Tapi inilah hal…

Anda tidak dapat menghapus pengalihan 3XX sepenuhnya. Itu akan sangat merugikan SEO Anda.

Namun, Anda dapat meminimalkan kode status 3XX yang tidak perlu :

(sebuah). Pengalihan Internal

Pengalihan internal terjadi ketika halaman dengan tautan internal yang mengarah ke halaman tersebut dialihkan ke halaman lain.

Contohnya:

Di beranda, Anda menautkan ke artikel tentang diet keto (mis., healthyfitness.com/keto-diet/)

Kemudian Anda memutuskan untuk membuat artikel baru tentang topik itu dan mengarahkan artikel lama ke artikel baru (301 pengalihan dari healthyfitness.com/keto-diet/ ke healthyfitness.com/new-keto-diet/)

Kerja bagus – itu praktik yang baik untuk SEO.

Masalahnya adalah, tautan internal yang Anda tempatkan di beranda sekarang melewati "loncatan" yang tidak perlu – dan saat berfungsi untuk pengguna – ini menambah waktu buka tambahan bagi mereka yang mengikuti tautan itu.

Pengalihan Rantai

Untungnya, ada perbaikan yang mudah. Cukup perbarui tautan di asal ke URL tujuan akhir.

Cara sederhana untuk menemukan pengalihan di situs Anda adalah dengan memasang Periksa Tautan Saya. Ekstensi browser ini akan merayapi halaman Anda dan menyorot tautan apa pun yang mengalihkan.

Pemindaian cepat dari beranda SEO Sherpa mengidentifikasi beberapa pengalihan internal di footer:

Temukan dan Perbaiki Pengalihan Internal dengan Periksa Tautan Saya

Yang perlu saya lakukan adalah masuk ke WordPress dan memperbarui tautan footer tersebut ke tujuan akhir.

(b). Redirect Rantai

Pengalihan buruk untuk waktu buka, tetapi bahkan lebih buruk ketika berada dalam rantai.

Rantai pengalihan memang terjadi ketika satu halaman yang dialihkan dialihkan ke halaman lain yang dialihkan – dan seterusnya.

Mereka biasanya merupakan hasil dari perubahan yang dilakukan pada situs dari waktu ke waktu.

Contohnya:

  • domain.com/about/ diperbarui dan 301 dialihkan ke:
  • domain.com/about-us/ diperbarui dan 301 dialihkan ke:
  • domain.com/about-our-company/ diperbarui dan 301 dialihkan ke:
  • domain.com/company-history/

Sekarang siapa pun yang mencoba mengakses halaman asli akan dialihkan tidak hanya sekali tetapi tiga kali.

Saya suka menggunakan Audit Situs Ahrefs untuk menemukan rantai pengalihan. Setelah merayapi situs Anda, itu akan mengidentifikasi jumlah masalah rantai pengalihan yang Anda miliki (bersama dengan kesalahan lainnya).

Redirect Chain di Ahrefs

Anda dapat menelusuri daftar rantai pengalihan untuk melihat rantai yang terjadi:

Rantai Pengalihan Ahrefs

Untuk memperbaiki setiap rantai, perbarui pengalihan 301 di URL asal dengan tautan absolut ke tujuan akhir – sehingga menghapus rantai pengalihan di tengah.

(13). Hilangkan 404 Kesalahan

Itu terjadi!

File dipindahkan (atau hilang), dan tautan rusak.

Tautan Rusak Mempengaruhi Kecepatan Halaman

Ketika ini terjadi, pengguna akan mengalami waktu pemuatan halaman yang lebih lama karena permintaan server web tambahan untuk menemukan file yang hilang.

Akhirnya, mengarah ke kesalahan 404.

Penyebab kesalahan ini banyak dan tidak penting.

Yang perlu Anda ketahui adalah bagaimana menemukannya:

Salah satu caranya adalah dengan menggunakan Google Search Console untuk menemukan dan memperbaikinya.

Setelah masuk ke akun GSC Anda, klik Cakupan dan kemudian Kesalahan.

Klik pada URL yang Dikirim tidak ditemukan , dan Anda akan melihat daftar semua tautan yang menghasilkan kesalahan 404:

404 Halaman Tidak Ditemukan Google Search Console

Atau, Anda dapat menggunakan alat audit situs seperti Ahrefs atau Screaming Frog.

Alat apa pun yang Anda gunakan, ketahuilah bahwa Anda perlu mengidentifikasi tautan ke 404 halaman dan file media.

Kemudian ganti atau hapus tautan yang rusak itu.

Melakukannya akan mempercepat situs Anda.

(14). Kurangi, Perbarui, dan Tingkatkan – Tiga Langkah untuk Meningkatkan Kecepatan Halaman Anda dengan Plugin

Ketika datang ke plugin dan ekstensi, semakin sedikit semakin baik.

Sebagian besar pengaya memuat JavaScript dan CSS.

Dan, seperti yang telah saya tunjukkan, kedua hal ini dapat membuat situs web Anda dalam mode lambat.

Jadi, sedapat mungkin, saya sarankan Anda menghapus plugin Anda dan HANYA menggunakan apa yang (benar-benar) penting.

Apa pun, yang tidak diperlukan untuk fungsionalitas situs Anda, matikan dan kemudian hapus.

Tentu saja, beberapa plugin mempengaruhi kecepatan situs lebih dari yang lain.

Jadi, bahkan jika Anda benar-benar membutuhkan plugin, mungkin ada alternatif yang lebih cepat.

Plugin WordPress Lambat
New Relic dapat digunakan untuk mengidentifikasi plugin yang lambat di situs Anda.

Posting oleh ServeBolt ini mencantumkan plugin WordPress yang paling memengaruhi kinerja waktu buka – dan mencantumkan opsi yang lebih baik dan lebih cepat.

Anda harus beralih jika Anda menemukan alternatif yang lebih cepat.

Langkah ketiga dalam mempercepat situs web Anda melalui plugin adalah memastikan Anda menjalankan versi plugin terbaru.

Very often, older plugins have incompatibilities with the current version of WordPress or PHP.

These incompatibilities almost always impact page speed performance.

Thankfully, the plugin menu in WordPress makes it easy to spot outdated plugins:

Plugin Perfmatters

From there, you can simply upgrade to the latest version.

(15). Use This Little Known Google Tag Manager Trick to Speed up Your Website

You've probably heard of Google Tag Manager? And, hopefully, you are using it on your website.

Google Tag Manager is a container for all your pixels and tracking scripts, which makes deploying codes simple – and bypasses the need for a developer.

Simply moving your tracking pixels from embedded in your website code to Google Tag Manager can shave up to 2 seconds off your load time.

This is a great page speed improvement, but it doesn't stop there…

Did you know that Google Tag Manager, allows you to control when your tags are fired and thus speed up your load times even further?

As you've learned already, any code that's not required for a fast largest contentful paint should be delayed until after the main content has loaded.

By default, Google Tag Manager will fire your tags on page view.

GTM Window Loaded Trigger

But, by selecting the 'Window Loaded” trigger your tags are fired once the entire content of the page has been fully loaded, including any embedded resources such as images and scripts.

SEO Sherpa Tags

I set this up on the SEO Sherpa website, and because I have a bunch of tracking set up, it boosted load times significantly.

To implement this page speed trick on your own website, login to GTM and select 'New Trigger' and then 'Window Loaded.'

And once you've done that, you're done.

What Did You Think?

Now I'd like to hear from you:

Which technique from today's post are you going to implement first?

Are you going to fix broken links? Or implement lazy loading?

Either way, let me know by leaving a comment below.