Cara meningkatkan kecepatan halaman google di situs wordpress

Dengan lebih dari 59% situs web menggunakan WordPress sebagai CMS, mengoptimalkannya untuk memuat dengan cepat adalah ide yang bagus. Kontributor Dave Davies menelusuri langkah-langkah penting dan menunjukkan cara mengoptimalkan situs WordPress untuk Google PageSpeed

Dave Davies pada 14 Agustus 2018 pukul 10. 34 pagi. Waktu membaca. 12 menit

Sebelum membahas lebih dalam, penting untuk mengklarifikasi bahwa dalam artikel kami hari ini, kami akan berfokus pada PageSpeed, dan bukan kecepatan halaman

Bagi mereka yang tidak terbiasa dengan perbedaannya, PageSpeed ​​adalah metrik Google. Ini didasarkan pada sekumpulan alat, dan saat kami mengacu pada nomor PageSpeed ​​​​antara 0 dan 100, kami merujuk pada keluaran alat Wawasan PageSpeed

Kecepatan halaman, di sisi lain, umumnya mengacu pada kecepatan dunia nyata dari halaman web. Dan ya, mungkin untuk meningkatkan satu tanpa yang lain, dan saya bahkan pernah melihat kasus di mana peningkatan satu mengorbankan yang lain

Singkatnya, kami akan fokus pada metrik Google di artikel ini yang berkaitan dengan situs WordPress. Setiap kali Anda mengerjakan satu, penting untuk mengukur yang lain juga, agar tidak menembak diri sendiri.

Metrik satu atau lainnya

Meskipun saya akan menggambarkan pengalaman saya dalam memengaruhi PageSpeed ​​atau kecepatan halaman, pengalaman saya diambil dari skenario yang belum pernah saya lihat atau terlibat sebelumnya. Saya akan menjalankan eksperimen kecil ini saat menulis artikel ini sehingga saya dapat memberikan tangkapan layar dan nomor keluaran

Perlu dicatat bahwa saat saya menulis ini, saya tidak tahu di mana kita akan berakhir mengenai angka akhir. Kami menargetkan 80+ untuk mencapai level "Bagus", tetapi itu tidak selalu memungkinkan. Saya menganggap apa pun di atas 70 masuk akal, karena memberikan sedikit ruang gerak untuk turun dari waktu ke waktu dan tetap di atas ambang 60, di mana kita jatuh ke kelas "Rendah"

Saya tidak dapat memberikan URL spesifik dalam latihan ini, dan Anda tidak akan melihat angka awal saat Anda membaca ini, tetapi saya ingin menekankan lagi bahwa saya belum pernah melihat skenario khusus ini atau yang serendah ini sebelumnya. Saya akan menggunakan Search Engine Land sebagai pengganti di beberapa tangkapan layar, tetapi eksperimen kecil ini dijalankan di URL yang berbeda

Inilah yang kami mulai

• Seluler. 57/100
• Desktop. 0/100

Dan ya, saya telah memeriksa berkali-kali selama beberapa hari; . Tidak baik. Sasaran Anda adalah mendapatkan skor setinggi mungkin, dengan skor 80 sebagai titik awal agar halaman diberi peringkat “Baik. ”

Kami juga akan melihat waktu yang dibutuhkan halaman untuk dimuat, atau kecepatan halaman, seolah-olah. Saya juga akan menyertakan angka-angka tersebut di bawah metrik peningkatan

Penting untuk diperhatikan bahwa setiap alat mengukur secara berbeda. Saya akan mendasarkan nomor saya pada Dotcom-Tools. com, tapi GTmetrix. com juga berfungsi dengan baik

Alasan saya menggunakan Dotcom adalah karena ia menguji dari berbagai lokasi di seluruh dunia, dan angka yang saya berikan adalah rata-rata

Langkah 1. HTTPS

Langkah pertama membunuh dua burung dengan satu batu. Situs ini memiliki sertifikat aman yang disediakan dan dipasang oleh registrar. Dan mereka melakukan pekerjaan dengan baik, kecuali bahwa HTTP tidak dialihkan ke HTTPS, dan Google memiliki versi HTTP yang di-cache

Langkah pertama adalah mengalihkan situs sepenuhnya ke HTTPS. Dalam kasus kami, pengaturan situs belum dialihkan ke HTTP di Pengaturan Umum

Mengalihkan alamat ke HTTPS membuat pengalihan 301, dan pengaturan segera dilompati

• Seluler. 61/100
• Desktop. 0/100

Sebelum kami mulai, kami memiliki kecepatan halaman 10. 1 detik. Untuk memberi Anda gambaran tentang apa yang saya maksud di atas tentang beberapa lokasi di seluruh dunia, dari Denver dimuat di 3. 5 detik. Setelah beralih ke HTTPS, kecepatan halaman meningkat menjadi 9. 4 detik

Jika situs tidak dialihkan secara otomatis, ada plugin yang disebut Force HTTPS untuk menyelesaikan pekerjaan. Atau Anda bisa, jika Anda merasa nyaman dengannya, tambahkan yang berikut ini ke. file htaccess

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com
RewriteRule ^(.*)$ https://www.domain.com/$1 [R,L]

Anda jelas ingin mengganti kode dari domain. com ke URL Anda

Langkah 2. Gambar-gambar

Siapa pun yang pernah menangani PageSpeed ​​​​akan memberi tahu Anda bahwa gambar adalah penyebab paling umum yang memperlambat halaman. Dalam kasus kami, kami melihat…

Anda membacanya dengan benar — lebih dari 15 MiB yang tidak perlu

Gambar jatuh ke dalam dua kategori kesalahan

• Mengompresi dan mengubah ukuran. Ini berarti bahwa gambar secara fisik lebih besar dari yang seharusnya. Ini sering terjadi di WordPress ketika sebuah gambar ditambahkan ke Perpustakaan Media dan ditempatkan pada halaman dengan ukuran yang jauh lebih besar daripada yang seharusnya untuk dimensi yang ditempati.
• Mengompresi. Gambar memiliki banyak sekali sampah di dalamnya, dan untuk web, seringkali kualitasnya jauh lebih tinggi daripada yang dibutuhkan. Kompresi gambar berurusan dengan ini. Sebagai peringatan, jika Anda pernah menggunakan sistem kompresi gambar otomatis, usahakan untuk selalu memeriksa dan memastikan gambar yang keluar tampak seperti yang Anda inginkan. Ini jarang terjadi, tetapi saya telah menemukan kasus di mana terjadi penurunan kualitas yang nyata

Saya biasanya menggunakan alat pengeditan gambar atau Compressimage. toolur. com dan melakukannya secara manual. Saya akan menggunakan TinyPNG. com untuk metrik dalam artikel ini

Setelah mengoptimalkan satu gambar besar dari 9. 2MB turun menjadi 175 KB tanpa dampak visual pada halaman, hanya dengan mengoptimalkan gambar, kami mendapat skor

• Seluler. 61/100
• Desktop. 67/100

Untuk kecepatan halaman, kami sekarang hadir di 5. 5 detik, atau sekitar dua kali lebih cepat

Gambar bukanlah masalah terbesar di seluler untuk PageSpeed, tetapi dengan mudah menjadi masalah terbesar di desktop. Sekarang kedua skor berada dalam kisaran OK

Langkah 3. Caching peramban

Bagi mereka yang melalui proses ini untuk pertama kalinya, jika Anda melihat cache browser sebagai masalah, Google menyarankan agar Anda memberi tahu pengunjung Anda berapa lama browser mereka harus menyimpan sumber daya tertentu.

Misalnya, Anda dapat mengirim pesan ke browser bahwa gambar dapat di-cache selama dua minggu. Dengan cara ini, ketika pengunjung kembali ke situs Anda dalam waktu dua minggu, situs memuat lebih cepat, karena banyak sumber daya yang ditarik dari mesin mereka sendiri.

Anda dapat menetapkan batas waktu untuk menyimpan sebagian besar sumber daya, mulai dari skrip dan lembar gaya hingga sebagian besar jenis gambar

Ada dua metode yang cenderung saya gunakan saat menyiapkan cache browser. mengatur langsung di. htaccess dan melalui plugin W3 Total Cache

Langsung di. File htaccess

Anda dapat menambahkan beberapa kode ke. htaccess saat mengatur cache browser, tetapi peringatan. Jika Anda tidak yakin apa a. htaccess, Anda mungkin lebih baik menggunakan rute plug-in yang diuraikan lebih lanjut di bawah ini

Jika Anda memutuskan untuk pergi sekolah tua dan kode. htaccess, Anda harus mengakses situs melalui FTP, atau, jika Anda tidak memiliki akses FTP, Anda dapat menginstal plugin WP File Manager, yang memberikan akses ke file

Anda akan menambahkan yang berikut ini ke. file htaccess

## Start browser caching ##_

KedaluwarsaAktif Aktif
ExpiresByType image/jpg “akses 1 bulan”
ExpiresByType image/jpeg “akses 1 bulan”
Gambar ExpiresByType/gif "akses 1 bulan"
ExpiresByType image/png “akses 1 bulan”
ExpiresByType teks/css “akses 1 bulan”
ExpiresByType teks/html “akses 1 bulan”
Aplikasi ExpiresByType/pdf “akses 1 bulan”
ExpiresByType teks/x-javascript “akses 1 bulan”
Aplikasi ExpiresByType/x-shockwave-flash “akses 1 bulan”
ExpiresByType image/x-icon “akses 1 tahun”
ExpiresDefault “akses 1 bulan”

## Akhiri cache browser ##

Anda dapat menyesuaikan kerangka waktu akses sesuai kebutuhan. Anda akan melakukan ini jika Anda membutuhkan sumber daya yang disegarkan dalam waktu yang lebih singkat. Contohnya mungkin jika gambar berubah secara berkala tetapi mempertahankan nama file yang sama

Berikut cara menambahkan kode

Yang menghasilkan

• Seluler. 62/100
• Desktop. 72/100

Caching browser melalui plug-in memberi kami kecepatan nyata 5. 1 detik

Melalui Cache Total W3

Ada beberapa plug-in caching, yang paling populer adalah W3 Total Cache dan WP Super Cache

Saya telah menemukan W3 Total Cache untuk memberikan hasil yang lebih baik di berbagai tugas yang lebih luas di sebagian besar tetapi tidak semua skenario. Tidak ada salahnya untuk mencoba keduanya atau yang lain untuk memaksimalkan hasil Anda

Setelah Anda menginstal plug-in, mengaktifkan caching browser semudah pergi ke pengaturan umum, mencentang kotak dan mengklik "Simpan semua pengaturan. ”

Mengaktifkan caching browser melalui plugin menghasilkan skor PageSpeed ​​yang sama, dan kecepatan halaman sebenarnya juga tidak berubah

Langkah 4. Kurangi waktu respons server

Seringkali, kami dapat mencapai skenario di mana kami diminta untuk mengurangi waktu yang diperlukan server untuk merespons. Anda mungkin khawatir Anda perlu meningkatkan lingkungan hosting Anda, tetapi ini sering kali tidak diperlukan

Salah satu masalah utama yang memperlambat server adalah bolak-balik antara file PHP dan database. Untungnya, W3 Total Cache menawarkan solusi berupa page caching. Faktanya, ini dapat mempercepat bahkan jika Anda tidak mendapatkan peringatan respons server

Dengan caching halaman, pada dasarnya kami membuat salinan statis halaman daripada meminta server untuk membuat halaman pada setiap kunjungan. Ini mengambil beban yang signifikan dari server. Dalam kasus yang kami bahas di sini, kami memiliki masalah respons server, dengan Google melaporkan 0. 6 detik untuk merespons dan Dotcom Tools melaporkan waktu byte pertama 573 milidetik

Saya mengaktifkan caching halaman

Dan tiba-tiba kami berada di

• Seluler. 70/100
• Desktop. 74/100

Waktu byte pertama turun menjadi 75 ms. Perlu dicatat bahwa ada opsi penyesuaian untuk fitur ini di pengaturan Page Cache. Anda dapat memilih halaman yang ada dan tidak di-cache di sana — antara lain

PENTING. Ingatlah bahwa Anda membuat halaman cache, yang berarti halaman tersebut tidak berubah. Saat Anda memperbarui halaman, W3 Total Cache dikonfigurasi untuk menghapus cache untuk halaman tersebut dan membangunnya kembali. Namun, lebih banyak perubahan global seperti menu, widget, dan sebagainya dapat diperbarui tanpa pembersihan cache. Jika Anda melakukan perubahan dan tidak melihat pembaruan langsung, cukup klik salah satu tombol "bersihkan cache" atau "cache kosong" di area plug-in dan Anda akan ditetapkan

Langkah 5. Minifikasi

Jika Anda pernah mengintip file yang menyusun halaman web Anda, Anda akan melihat sebagian besar memiliki banyak baris dan ruang kosong. Masing-masing menambahkan byte ke file. Menghapus byte ini disebut sebagai minifikasi

Tiga jenis minifikasi inti yang berlaku untuk situs WordPress adalah

1. HTML. Kode halaman sebenarnya itu sendiri
2. CSS. Kode di dalam style sheet Anda
3. JavaScript. Kode dalam berbagai skrip Anda

PENTING. Setiap kali Anda mengecilkan file, terutama skrip, sangat penting untuk mengunjungi halaman situs Anda yang mengandalkannya untuk memastikannya terus berfungsi dengan baik

Metode pertama yang dapat Anda gunakan adalah mengunduh sendiri file yang diperkecil dari Google

Ini termasuk gambar, tetapi yang menarik, menurut saya tidak sebagus metode yang dirujuk di atas. Anda dapat mengunduh versi JavaScript dan CSS yang diperkecil di sini, tetapi masalah dapat muncul jika Anda memperbarui plugin yang membuat skrip. Anda harus melakukan semuanya lagi

Sejalan dengan itu, Anda dapat menggunakan alat seperti CSSMinifier. com atau JavaScript-minifier. com

Perlu diingat bahwa jika plug-in diperbarui, dan pembaruan itu ada hubungannya dengan skrip atau gaya, Anda harus mengecualikan referensi yang memanggil file asli dalam kode. Ini bisa mengganggu

Alternatifnya adalah sekali lagi kembali ke W3 Total Cache, yang menyertakan fungsi dalam pengaturan umum (meskipun Anda juga harus masuk ke pengaturan lanjutan di sini). Anda akan menemukannya di

Saya sangat merekomendasikan mengecilkannya satu per satu dan menguji situs di antara masing-masing. Jika Anda menemukan ada yang rusak, Anda dapat membuka pengaturan minify dan menguji pengecualian skrip dan style sheet tertentu

Anda juga dapat mengecualikan halaman jika menurut Anda hal itu menyebabkan masalah dengan halaman tertentu seperti halaman kontak atau penggeser. Bisakah Anda memberi tahu di mana saya menemukan masalah terbesar?

Sebagian besar waktu ini akan berhasil, tetapi kadang-kadang, Anda akan menemukan bahwa itu tidak berhasil (seperti yang tidak terjadi dalam skenario yang sedang kami kerjakan, tetapi ini adalah langkah pertama yang baik). Jika tidak memperbaiki keadaan, saya merekomendasikan plugin Autoptimize untuk menyelesaikan tugas yang sama

Dengan plugin ini skor kami sekarang

• Seluler. 70/100
• Desktop. 75/100

Ini adalah salah satu skenario di mana kami melihat peningkatan PageSpeed ​​tanpa peningkatan kecepatan situs nyata

Dan itu dia

Anda mungkin menemukan, seperti yang kami temukan di sini, ada masalah yang tidak dapat Anda perbaiki. Google tidak memberi kami 100 persen, dan inilah alasannya

• Optimalkan gambar. Mereka sekecil atau lebih kecil dari yang disediakan Google sendiri, meskipun saya menggunakan alat di atas. Setiap kompresi lebih lanjut menghasilkan gambar yang tampak menurun
• Hilangkan JavaScript dan CSS render-clocking di konten paro atas. Satu-satunya masalah yang tersisa di sini adalah style sheet yang mengakibatkan rendering halaman cukup buruk sekitar satu detik sebelum gaya diterapkan. Saya ingin realistis dalam angka yang saya berikan, dan saya tidak akan memindahkannya di situs saya kecuali saya terjebak dengan kecepatan jauh ke dalam kategori "Buruk". Selalu utamakan pengguna sebelum mesin
• Manfaatkan cache browser. Kami telah memanfaatkan cache browser, namun sayangnya, itu hanya berlaku untuk skrip yang diambil dari situs kami sendiri. Kami tidak dapat memanfaatkan cache browser untuk skrip eksternal, seperti dari Facebook atau Google, seperti yang terjadi di sini

Kecepatan dunia nyata terakhir kita pada akhirnya adalah 3. 0 detik dan lebih baik di sebagian besar Amerika Utara, dengan angka terendah di 2. 2. Untuk mempercepat ini lebih lanjut, kami perlu melihat pembersihan kode WordPress kami, memilih host yang lebih cepat dan/atau menerapkan CDN

Tapi itu cerita lain untuk artikel lain

Pendapat yang diungkapkan dalam artikel ini adalah dari penulis tamu dan belum tentu Search Engine Land. Penulis staf tercantum di sini

Bagaimana cara meningkatkan kecepatan halaman di WordPress?

Bagaimana cara meningkatkan kecepatan halaman Google saya?

Bagaimana cara mengoptimalkan situs WordPress saya untuk Google?

Bagaimana cara mendapatkan Kecepatan Halaman 100%?