Lulus Setiap Uji Wawasan CWV dan PageSpeed ​​Dengan Teknik Pengembangan WordPress Ini

Pada tahun 2021, di StrategiQ, agensi digital lengkap yang berbasis di Inggris, kami menjadikan target kami untuk mulai mengembangkan setiap situs web yang kami kembangkan dan luncurkan untuk melewati kinerja Core Web Vitals (CWV) dan PageSpeed ​​Insights (PSI) Google. laporan.

Data Web Inti menunjukkan kinerja situs web Anda dalam berbagai cara. Ini termasuk kecepatan memuat konten pertama pada halaman (Cat Contentful Pertama dan Terbesar), kecepatan berapa lama pengguna harus menunggu sebelum mereka dapat berinteraksi dengannya (Waktu untuk Interaktif), dan perubahan tata letak (Pergeseran Tata Letak Kumulatif) .

Menguji CWV Anda semudah pie – cukup kunjungi https://pagespeed.web.dev/ dan masukkan alamat Anda. Area atas menampilkan data dunia nyata terbaru dari 28 hari terakhir, sedangkan bagian bawah (skor dari 100, baik untuk seluler dan desktop), adalah data yang dihasilkan lab.

Mengapa ini penting? Yah, karena Google mengatakan demikian.

Pada Juli 2018, Google mengumumkan bahwa kecepatan adalah faktor bagaimana sebuah situs muncul di hasil Penelusuran, terutama di seluler. Sumber.

Pada tahun 2020, mereka juga mengumumkan bahwa metrik pengalaman pengguna (yang membentuk Core Web Vitals / CVW) sekarang digunakan dalam cara mereka memberi peringkat situs. Sumber.

Sederhana saja: semakin cepat dan kinerja situs yang lebih baik, semakin baik kemungkinan peringkatnya.

Jadi tim pengembangan di StrategiQ memutuskan giliran kami untuk membantu departemen SEO. Pakar SEO dapat bekerja keras semaksimal mungkin, tetapi situs yang berkinerja buruk dapat lebih banyak merugikan daripada menguntungkan. Sebuah situs yang lolos CWV dan PSI, bagaimanapun, akan memastikan bahwa karya luar biasa mereka memiliki batu loncatan yang cemerlang.

Yang perlu diperhatikan, CWV dan PSI terkenal sulit dilewati. Sebagian besar situs tidak, bahkan banyak situs web paling terkenal di dunia . Pikirkan YouTube, BBC, bahkan WP Engine sendiri berjuang untuk mendapatkan izin di seluler dan desktop ( maaf teman-teman ).

Jadi apa yang kami lakukan untuk memastikan kami melihat donat hijau yang menyenangkan?

Kami menanggalkan semuanya dan mengerjakan satu mantra sederhana:

Muat sesedikit mungkin, secepat mungkin.

Sementara saya tidak akan membahas seluk beluk terkecil, saya akan membahas metode utama kami untuk menjaga tema WordPress pesanan kami sesederhana mungkin.

Pertama, mari kita bicara perangkat keras. Kami tidak dapat melanjutkan tanpa terlebih dahulu berbicara tentang WP Engine. Tanpa ragu, mereka adalah salah satu, jika bukan pemasok hosting khusus WordPress terbaik di luar sana. Kami senang dengan dukungan yang mengesankan, waktu aktif, lingkungan untuk setiap pemasangan, pencadangan, dan betapa mudahnya mengelola sertifikat SSL dan domain di antara banyak fitur lainnya. Selain itu, caching dan optimasi kecepatan hard-baked mereka memastikan situs bekerja secepat mungkin di tingkat server.

Dengan server berperforma tinggi pada intinya, kami tahu bahwa sekarang terserah kami untuk membuat situs web bekerja secepat mungkin.

Seperti kebanyakan agensi, kami memiliki templat dasar kerajinan tangan yang kami gunakan sebagai titik awal untuk semua situs web kami yang dipesan lebih dahulu. Setiap situs yang kami buat dirancang dan diberi kode internal – bukan tema yang sudah dibuat sebelumnya.

Template dasar kami memiliki metode pengoptimalan kecepatan yang kami terapkan, serta sejumlah fungsi cerdas dan komponen yang dapat digunakan kembali yang kami butuhkan di setiap proyek. Memiliki titik awal itu menghemat waktu kami dalam jangka panjang, dan memastikan setiap situs akan melakukan yang terbaik dengan sedikit overhead yang dibutuhkan oleh pengembang.

Saya tahu apa yang Anda pikirkan – dapatkan hal-hal yang baik!

Saya tidak akan repot-repot membuat daftar hal-hal membosankan yang biasa Anda lihat di setiap posting blog di luar sana, seperti "gambar pemuatan malas". Tetapi jika tidak, itu memang suatu keharusan – kami memiliki fungsi gambar yang mencetak gambar kami dengan malas dimuat dengan tag srcset dan ukuran (dikenal sebagai gambar responsif).

Mari kita langsung ke dalamnya.

Metode 1: chunk & enqueue

Itu sering terjadi: sebuah proyek hanya memiliki satu file css, dan satu file js, dan akhirnya membengkak hingga seukuran planet kecil. Apa selanjutnya? Google bertanya kepada Anda "mengapa Anda memuat gaya dan javascript tidak digunakan di halaman ini?". Mengapa? Mengapa?!

Ini adalah poin yang valid. Mengapa Anda harus memuat banyak css dan javascript untuk seluruh situs web ketika Anda hanya membutuhkan sebagian kecil dari itu per halaman?

Semua situs kami sepenuhnya dibangun dengan blok Gutenberg. Ini berarti bahwa untuk setiap blok, Anda dapat memanfaatkan kekuatan brilian dari mengantrekan file css dan js Anda.

Untuk setiap blok, kami membuat file css dan js terpisah hanya untuk file itu (jika diperlukan). Ini kemudian diperkecil (lihat poin berikutnya untuk info lebih lanjut) dan diantrekan berdasarkan blok demi blok.

Hasil? Kami hanya memuat apa yang sebenarnya ada di setiap halaman.

Metode 2: gunakan pelari tugas seperti gulp untuk menggabungkan dan mengecilkan aset Anda

Semua aset yang dihasilkan diperkecil oleh fungsi tegukan (yang lain tersedia, seperti gerutuan). Perlu dicatat bahwa beberapa bulan yang lalu, Google lebih memilih penggabungan daripada minifikasi (satu permintaan besar akan lebih disukai daripada 5 permintaan kecil), tetapi sejak munculnya HTTP/2 (yang menggandakan beberapa permintaan sekaligus) ini bukan lagi isu.

Sekali lagi, kami melakukan ini untuk menjaga file sekecil mungkin. Jadi sekarang kami tidak hanya memuat aset yang ada di halaman, tetapi juga berukuran sangat kecil.

Metode 3: hentikan render yang memblokir aset

Kami memastikan semua aset yang diantrekan ini berada di bagian bawah halaman, dan karenanya tidak membuat pemblokiran.

Kami bahkan menghapus antrean jQuery yang disertakan dengan WordPress dan mengantrekan versi baru (yang tidak memiliki kerentanan keamanan), juga di bagian bawah halaman.

Tapi bagaimana dengan FOUC (Flash of Unstyled Content) yang saya dengar Anda katakan?

Metode 4: css paruh atas

Kilatan Konten Tanpa Gaya terjadi saat halaman awalnya dimuat tanpa gaya apa pun, karena lembar gaya berada di bagian bawah halaman. Setelah stylesheet dimuat, gaya diterapkan, situs berkedip dan akhirnya terlihat benar.

Untuk memperbaikinya, kami membagi gaya lipatan di atas dan menambahkannya sebagai tag <style> sebaris di kepala. Ini bukan aset pemblokiran render, dan kami tidak mendapatkan FOUC.

Metode 5: Roket WP

Bagian terakhir dari teka-teki adalah plugin kinerja terbaik di kelasnya WP Rocket. Dibangun bersama dengan insinyur WP Engine, ini adalah satu-satunya plugin caching yang diizinkan di platform hosting mereka.

Hasil?

Nah, skor berbicara sendiri.

SportsAidEastern adalah badan amal yang mendukung atlet Inggris. Menurut PSI, situs yang kami kembangkan untuk mereka mendapat skor 97/100 di seluler dan 100/100 di desktop.

Calligo menawarkan layanan data transformatif, dan skor situs mereka bahkan lebih baik daripada SportsAid; hadir dengan mendekati sempurna 99/100 di seluler dan 100/100 di desktop.

Kesimpulan

Semoga ini menjadi angin segar dari semua posting situs "cara mempercepat WordPress Anda" yang sama di luar sana, dan jika Anda berjuang untuk mendapatkan izin maka mungkin kami telah menyoroti sesuatu yang dapat Anda coba.

StrategiQ adalah agen pemasaran strategi-pertama. Dengan mengungkap wawasan pasar yang berharga, mengungkapkan peluang mengalahkan pesaing, mendefinisikan dan memberikan strategi pemasaran yang efektif, tim kami membantu merek ambisius mengungguli tujuan mereka melalui penasihat, kreatif, pemasaran, dan teknologi.
Apakah Anda memerlukan strategi, saran, sumber daya, atau keahlian, ambillah langkah pertama. Ceritakan tentang diri Anda dan kami akan melihat bagaimana kami dapat membantu.