Optimalisasi Kecepatan Situs Web: Cara Melakukannya di 2020 # Langkah-demi-Langkah

Sekitar satu dekade yang lalu, Google mengumumkan bahwa kecepatan situs akan memengaruhi peringkat pencarian web. Meskipun posting tidak menjelaskan dampak kecepatan pada peringkat, webmaster yang membaca pengumuman memahami bahwa optimasi kecepatan situs web harus di atas rencana pengembangan mereka..


Sebagai tambahannya Manfaat SEO dari optimasi kecepatan, waktu muat halaman penting untuk menentukan berapa banyak pengguna yang tersisa di situs web Anda. HubSpot melaporkan itu penurunan konversi terkait dengan peningkatan waktu pemuatan halaman – penundaan satu detik dalam waktu muat dapat menyebabkan pengurangan konversi 20-30%!

Panduan Pengoptimalan Kecepatan Situs Web

Selama beberapa tahun terakhir, telah terjadi peningkatan ukuran halaman rata-rata. Bahkan, pada 2018, rata-rata, ukuran halaman lebih dari 2 MB! Bagian penting dari pemuatan halaman ini terdiri dari gambar, file statis, dan video.

Untuk sedikitnya, ukuran situs web Anda dan kecepatan situs Anda secara keseluruhan tidak masalah, banyak! Bahkan dengan pemuatan halaman yang terus meningkat, ada beberapa hal yang dapat Anda lakukan untuk meningkatkan cara situs Anda menangani berbagai hal. Posting ini membahas semuanya.

Optimalisasi kecepatan situs web: Apa yang Anda butuhkan sebelum memulai

Posting ini mengasumsikan bahwa Anda memiliki dua hal penting yang sudah diurus:

  • Anda menggunakan tema yang dioptimalkan yang tidak memperkenalkan banyak mengasapi di atas WordPress itu sendiri.
  • Anda berada di host yang cukup cepat.

Jika Anda mencentang dua kotak ini, Anda dapat melanjutkan ke bagian berikut untuk menjelajahi daftar tugas komprehensif yang dapat Anda lakukan untuk memastikan waktu muat situs web Anda minimal.

Memulai dengan optimasi kecepatan situs web

Anatomi halaman web

ilmu urai

Trik untuk mengoptimalkan halaman web Anda untuk kecepatan adalah dengan memahami apa yang masuk ke halaman web. Mari kita lihat komponen yang paling populer:

  • Kode HTML yang memberikan struktur dan konten ke halaman web – bahkan dengan WordPress menjalankan pesta di situs Anda, yang diperlukan hanyalah mengambil apa yang ada di database – semua konten – dan mengubahnya menjadi output HTML statis
  • File statis yang membantu dalam desain, fungsionalitas, dan interaktivitas (CSS, JavaScript)
  • Gambar untuk latar belakang, logo, dan konten

Untuk membuat halaman, browser meminta setiap elemen halaman web – halaman itu sendiri dalam bentuk HTML, file statis, gambar, konten eksternal. Karena itu, jumlah Permintaan HTTP juga memainkan peran penting dalam optimasi kecepatan situs web.

Mencari tahu posisi Anda: alat pengoptimalan kecepatan situs web

Sebelum kami beralih ke teknik spesifik yang membantu Anda dalam mengoptimalkan situs web Anda, mari kita luangkan waktu sejenak untuk meninjau alat yang membantu dalam menganalisis kecepatan halaman web.

Jika Anda seorang pemula yang mencari alat pengujian biasa, Anda dapat mempertimbangkan untuk menggunakannya Alat Pingdom suite untuk penilaian cepat situs web Anda. Untuk solusi yang lebih lengkap, Anda dapat mengunjungi Wawasan Kecepatan Halaman Google.

Tes Kecepatan PingdomAlat Pingdom untuk Tes Kecepatan

Selain itu, jika Anda mencari opsi cepat dalam bentuk plugin browser, Anda dapat mencoba YSlow, yang menguji situs web dan memberikan saran dari dalam browser. Selanjutnya, Alat GTmetrix menggunakan hasil pengujian YSlow untuk laporan.

�� Jika Anda ingin lebih banyak opsi untuk menguji kecepatan situs Anda, posting ini mencantumkan 5 alat pemeriksaan kecepatan terbaik di luar sana.

Sebelum mempelajari teknik-teknik yang tercantum dalam posting ini, pastikan Anda menjalankan situs web Anda di salah satu alat yang tercantum di sini untuk dijadikan patokan. Segera setelah Anda melakukan optimasi kecepatan situs web, pastikan untuk kembali ke alat untuk memeriksa peningkatan kecepatan.

Langkah 1: Optimalkan file statis

Langkah pertama dari panduan ini berfokus pada optimalisasi file statis – paling populer dalam bentuk stylesheet (file CSS) dan skrip (file JS).

(a) Pindahkan CSS ke kepala, JS ke bawah

Optimalisasi pertama yang dilakukan adalah memastikan stylesheet masuk di bagian struktur halaman Anda, sedangkan semua skrip dipindahkan ke tepat di atas tag penutup halaman Anda. Logika di balik ini sederhana:

  • Secara umum, stylesheet berukuran lebih kecil dari skrip
  • Setelah stylesheet dimuat dalam tag sebelum browser merender isi halaman, elemen apa pun yang dirender dalam halaman akan memiliki gaya yang tepat
  • Fungsi skrip umumnya mulai berlaku setelah konten halaman dimuat, jadi, skrip umumnya dapat ditempatkan di bagian bawah.

Praktek ini memastikan bahwa pengunjung situs web Anda tidak meninggalkan halaman dengan frustrasi sambil menunggu untuk memuat.

Untuk menangani bagian skrip dengan cepat, Anda dapat menginstal plugin Scripts to Footer untuk WordPress. Ia bekerja dengan autopilot dan melakukan pekerjaan dengan baik.


Scripts To Footer Scripts To Footer

Penulis: Joshua David Nelson

Versi Saat Ini: 0.6.4.1

Terakhir Diperbarui: 15 April 2020

scripts-to-footerphp.0.6.4.1.zip


94% Peringkat


20.000 + Pemasangan


3.1.0 Persyaratan

(B) Mengatur minifikasi

Minifikasi adalah proses menghapus bagian-bagian file yang tidak diperlukan untuk eksekusi. Misalnya, dalam stylesheet atau skrip Anda, hal-hal berikut tidak perlu dilakukan:

  • spasi putih untuk lekukan
  • komentar
  • fungsi panjang dan nama variabel
  • kode yang tidak digunakan

Minifikasi sangat membantu dengan mengurangi ukuran file statis Anda. Anda dapat memperkecil file Anda dengan menggunakan layanan seperti Mengecilkan, atau menginstal salah satunya plugin minification di WordPress.

(c) Gunakan pemuatan asinkron

Peramban web merender dan meminta sumber daya secara berurutan saat muncul di laman web. Ini disebut sebagai pemuatan sinkron. Namun, Anda dapat mengubah fungsionalitas default browser ini dengan menggunakan atribut async untuk memuat sumber daya segera setelah tersedia. Misalnya, Anda dapat memuat skrip secara tidak sinkron sebagai berikut:

Disini adalah daftar plugin yang membantu Anda dengan memuat asinkron di WordPress.

(d) Gunakan kompresi GZIP

Kompresi GZip adalah teknik untuk memampatkan sumber daya melalui permintaan HTTP. Dengan kompresi GZip, server mengirimkan file sumber daya yang di-zip, yang dibuka oleh browser saat merender halaman web.

Waktu dan sumber daya yang diperlukan untuk mengompresi dan mendekompres suatu sumber daya tidak sebanding dengan waktu dan bandwidth yang disimpan dalam mentransfer file yang lebih kecil dari server ke klien. Teknik ini tidak hanya memuat halaman lebih cepat, tetapi juga menghemat biaya server.

Kompresi GZip adalah bagian dari beberapa plugin caching WordPress seperti WP Fastest Cache.

(e) Gunakan Google CDN untuk perpustakaan populer

Teknik optimasi terakhir dalam langkah ini adalah untuk menggunakan Google atau Microsoft CDN saat mengambil perpustakaan umum apa pun yang digunakan di situs Anda. Alasan di baliknya sederhana – karena popularitas CDNs ini, besar kemungkinan pengunjung telah memiliki versi cache dari sumber daya di browser mereka..

Langkah 2: Optimalkan gambar

Seperti dibahas di atas, sumber utama peningkatan ukuran halaman web selama bertahun-tahun adalah gambar.

Bahkan lihatlah nomor CodeinWP sendiri:

memuat gambar

Karena itu, menangani gambar harus mengarah pada peningkatan paling signifikan dalam kecepatan situs web Anda, dan itu terjadi.

Gambar sangat penting untuk situs web, namun, penggunaan gambar berkualitas penuh untuk web tidak benar-benar direkomendasikan. Anda harus memampatkan gambar ke tingkat yang mengurangi ukuran secara drastis, sambil memberikan kualitas visual yang adil.

Anda dapat melakukan beberapa hal untuk mewujudkannya dan mempertimbangkan optimasi kecepatan situs web:

(a) Unggah gambar dengan ukuran yang tepat

Tema Anda saat ini kemungkinan memiliki ukuran gambar maksimum yang dapat ditampilkan – berdasarkan dimensi. Cari tahu apa itu dan kemudian unggah hanya gambar yang maksimal dua kali lebih besar dari itu.

Mengapa dua kali? Ini juga akan memungkinkan tema untuk menampilkan versi kualitas gambar retina.

(B) Gunakan jenis gambar yang benar

Dua jenis gambar yang paling umum digunakan di web adalah JPG dan PNG.

Mereka tidak sama.

  • Gambar JPG dimaksudkan untuk foto dan gambar kompleks lainnya dengan banyak informasi warna di dalamnya
  • Gambar PNG sempurna untuk grafik yang memiliki sedikit informasi warna, seperti tangkapan layar antarmuka.

Contoh gambar PNGtema

(c) Optimalkan gambar secara lokal sebelum mengunggah

Ada berbagai alat yang dapat Anda gunakan sebelum mengunggah gambar apa pun ke situs Anda.

tinypng
imageoptim

(D) Malas memuat gambar Anda

Teknik lain untuk mengoptimalkan gambar adalah pemuatan malas, praktik di mana gambar tidak diunduh sampai pengunjung menggulir ke bawah untuk melihatnya.

demo lazyloadDemonstrasi pemuatan malas di CodeinWP

Berikut adalah panduan lengkap untuk malas memuat gambar di situs Anda.

(e) Dapatkan plugin pengoptimalan gambar

Last but not least, Anda harus mendapatkan plugin optimasi gambar berkualitas untuk situs WordPress Anda. Bergantung pada yang mana Anda akan menggunakan akhirnya, Anda mungkin mendapatkan sebagian besar kebutuhan optimasi gambar Anda dilakukan secara autopilot.

Di sini adalah 6 plugin pengoptimalan gambar terbaik dibandingkan.

Jika Anda memerlukan rekomendasi cepat, periksa sendiri Optimole. Ini memberikan kompresi gambar yang sangat efisien, selain CDN dalam paket gratis! Optimole juga memberikan beberapa hasil bintang ketika dibandingkan dengan pesaing utamanya:

Hasil optimasi PNG

PluginOriginal Ukuran PNG Setelah PengoptimalanOptimasi% Kompresi
Optimole301 KB34 KB88,7%Rugi dan Rugi
Bayangkan301 KB67 KB77,7%Rugi
TinyPNG301 KB79,7 KB73,5%Rugi
ShortPixel301 KB90,4 KB69,96%Rugi
Smush301 KB247 KB17,9%Kerugian
EWWW301 KB257,4 KB14,6%Kerugian

Hasil optimasi JPG

PluginOriginal Ukuran JPGSetelah OptimasiOptimasi% Kompresi
ShortPixel518 KB169 KB67,36%Rugi
TinyPNG518 KB248,6 KB52%Rugi
Optimole518 KB274 KB47%Rugi dan Rugi
Bayangkan518 KB338,7 KB34,64%Rugi
EWWW518 KB488.9 KB5,7%Kerugian
Smush518 KB493 KB4,9%Kerugian


Optimasi Gambar & Pemuatan Malas oleh Optimole Pengoptimalan gambar & Lazy Load by Optimole

Penulis: Optimole

Versi Saat Ini: 2.3.1

Terakhir Diperbarui: 21 April 2020

optimole-wp.zip


Peringkat 96%


50.000 + Pemasangan


WP 4.7 + Membutuhkan

Langkah 3: Optimalkan permintaan HTTP

Sebelumnya di posting, kami membahas bahwa ketika browser pengguna mulai memuat halaman web, transfer aktual dilakukan melalui permintaan HTTP individual. Satu permintaan mengambil setiap sumber daya. Karenanya, peningkatan jumlah permintaan semacam itu meningkatkan waktu buka halaman web Anda.

permintaan situsPermintaan HTTP dari halaman web

(a) Gabungkan file

Tugas pertama untuk meminimalkan beban permintaan HTTP adalah menggabungkan sumber daya serupa. Saat Anda sedang memperkecil sumber daya, Anda dapat menggabungkan file yang sama menjadi satu. Misalnya, semua stylesheet (file CSS), dan semua file JavaScript khusus dapat digabungkan menjadi file tunggal. Ini mengurangi jumlah permintaan yang harus dilakukan klien untuk memuat semua sumber daya.

Lagi-lagi ini plugin minification untuk WordPress dapat membantu Anda melakukan itu.

(B) Minimalkan pencarian DNS

Ketika permintaan HTTP dibuat ke domain seperti www.codeinwp.com, pencarian DNS (sistem nama domain) dilakukan untuk menemukan alamat IP server. Akibatnya, target Anda juga harus meminimalkan jumlah pencarian DNS di semua permintaan, untuk mempercepat pemuatan situs web.

Ini a panduan keren oleh Kinsta tentang cara melakukan itu.

(c) Aktifkan tetap hidup

Tanpa optimasi apa pun, browser mengirimkan satu permintaan HTTP untuk setiap sumber daya. Koneksi ini ditutup setelah unduhan selesai. Browser kemudian membuat permintaan baru ke server untuk sumber daya baru. Tetap hidup adalah teknik yang tidak menghentikan permintaan saat unduhan sumber daya selesai.

Anda dapat mengaktifkannya tetap hidup melalui cara-cara berikut:

(d) Minimalkan pengalihan

Redirect adalah instruksi untuk secara otomatis membawa klien dari satu lokasi ke lokasi sumber daya lainnya. Setiap pengalihan meningkatkan waktu pemuatan halaman web Anda dan kecuali benar-benar diperlukan, Anda harus menghindari pengalihan dalam kode Anda.

(e) Gunakan CDN

CDN (jaringan pengiriman konten) adalah kumpulan server web yang ada di seluruh lokasi geografis luas yang mengirimkan konten dengan cepat dan efisien kepada klien.

Klien yang meminta sumber daya akan dilayani sumber daya dari server yang secara geografis paling dekat dengan lokasi klien. Ini memastikan bahwa konten yang diminta mencapai klien dalam waktu sesingkat mungkin!

Kami memiliki sumber daya terpisah yang membandingkan solusi CDN teratas untuk situs WordPress, bersama dengan info tentang cara menatap.

Langkah 4: Caching

Tidak ada panduan pengoptimalan kecepatan situs web yang dapat ada tanpa bagian tentang caching. Beberapa teknik yang kita bahas sebelumnya, seperti kompresi GZip dan minificaiton, adalah bagian dari banyak solusi caching saat ini.

Caching mengacu pada fenomena menyimpan sumber daya dalam penyimpanan sementara untuk mengambilnya dengan cepat saat diperlukan. Ada berbagai bentuk caching:

  • Caching halaman: Versi HTML statis dari sebuah halaman yang disimpan di server
  • Caching basis data: Hasil kueri basis data umum (seperti 10 posting teratas di situs Anda) yang disimpan di server
  • Caching browser: Menyimpan bagian halaman Anda di browser

Kami telah membandingkan plugin caching WordPress paling populer di pos ini. TL; DR: Periksa WP Rocket jika Anda mencari solusi lengkap. Atau, jika Anda lebih suka sesuatu yang gratis, inilah panduannya cara mengkonfigurasi W3 Total Cache.

Langkah 5: Optimalkan untuk seluler

Di bagian awal artikel ini, kami membahas teknik pengoptimalan yang relevan untuk desktop dan seluler. Namun, konsumsi konten di ponsel meningkat, dan ada tantangan baru yang dibawa layar yang lebih kecil. Bagian ini, dengan demikian, membahas metode optimasi kecepatan situs web untuk perangkat seluler.

Pengoptimalan seluler mengacu pada praktik memastikan bahwa pengunjung seluler ke laman web Anda mengalami fungsionalitas dan efisiensi yang sama dengan rekan-rekan desktop mereka. Daftar berikut berisi faktor kebersihan tertentu untuk kurasi konten web untuk perangkat seluler:

  • Gunakan desain web responsif untuk memastikan perangkat yang berbeda mendapatkan versi halaman web yang berbeda
  • Hindari penggunaan flash dan pop up, karena perangkat seluler mungkin tidak mendukungnya
  • Jangan memposisikan interaksi seperti tautan yang terlalu dekat satu sama lain

Selain faktor-faktor ini, AMP (Accelerated Mobile Pages) adalah proyek yang bertujuan untuk menciptakan konten yang cepat dan konsisten di seluruh perangkat.

Berikut ini adalah panduan untuk memulai dengan AMP di WordPress.


AMP

Penulis: Kontributor Proyek AMP


74% Peringkat


500.000 + Pemasangan


WP 4.9 + Membutuhkan

Info lebih lanjut

amp.1.5.3.zip

Versi Saat Ini: 1.5.3

Terakhir Diperbarui: 15 April 2020


74% Peringkat


500.000 + Pemasangan


WP 4.9 + Membutuhkan

Halaman Plugin WordPress.org


AMP

Kesimpulan

Saya harap panduan ini memberi Anda beberapa tips tentang apa yang harus Anda lakukan untuk meningkatkan tingkat optimasi situs web Anda secara keseluruhan.

Hanya untuk rekap; pertama-tama kami melihat anatomi halaman web untuk menangani area tertentu yang perlu ditingkatkan. Kemudian, kami beralih ke langkah-langkah spesifik untuk optimasi:

  • Langkah 1 membahas optimasi file statis dalam bentuk stylesheet dan skrip
  • Langkah 2 menangani gambar dan pengoptimalannya
  • Langkah 3 adalah semua tentang teknik untuk mengoptimalkan permintaan HTTP
  • Langkah 4 membahas beberapa teknik caching yang populer
  • Langkah 5 membahas pengoptimalan untuk perangkat seluler

Apakah Anda kesulitan dengan optimasi kecepatan situs web? Beri tahu kami di komentar di bawah.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Tata letak, presentasi, dan pengeditan oleh Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map