Bukan rahasia lagi: pengguna web saat ini membutuhkan kecepatan. Dengan koneksi internet dan seluler yang semakin cepat, pengguna berharap situs dimuat dengan cepat, dan tugas pengembang adalah melakukan apa yang mereka bisa untuk menyajikan halaman tersebut dengan cepat. Jadi bagaimana Anda membuat situs Anda menyala dengan cepat? Inilah yang harus Anda lakukan secara khusus saat membangun dengan WordPress.

Hal pertama yang pertama: Uji kecepatan situs Anda

Kinerja dapat dipecah menjadi dua kategori utama: front-end dan back-end. Saya menganggap back-end sebagai segala sesuatu yang terkait dengan server dan bagaimana data diisi pada halaman (kode PHP Anda dalam tema Anda adalah "back-end"). Front-end terdiri dari semua aset Anda (CSS, JavaScript, gambar, dll.) dan markup. Segala sesuatu yang dibaca dan ditafsirkan oleh browser web adalah "front-end". Alasan saya membuat perbedaan ini dalam hal kinerja adalah karena mengetahui apa yang Anda optimalkan dan, yang lebih penting, di mana Anda paling perlu mengoptimalkannya adalah hal yang baik.

Untuk menguji kecepatan situs Anda, saya sarankan menggunakan kombinasi WebPagetest dan Google PageSpeed ​​Insights. WebPagetest memberi kami ide bagus tentang waktu aktual (dalam detik) yang diperlukan situs untuk memuat, memberi Anda beberapa metrik bagus untuk mengetahui apakah itu back-end atau front-end yang menyebabkan situs dimuat dengan lambat. PageSpeed ​​Insights adalah yang terbaik untuk melihat bagaimana situs Anda dirender oleh browser dan apa yang dapat Anda tingkatkan di front-end.

Ingatlah bahwa artikel ini berfokus pada situs WordPress yang sepenuhnya disesuaikan. Jika Anda menjalankan tes kecepatan di situs menggunakan tema besar dan 19 plugin pihak ketiga (plugin dapat memperlambat bagian depan dan belakang), mulailah dengan membuka daftar kosong dan perlahan-lahan aktifkan plugin satu per satu untuk menemukannya yang memperlambat segalanya.

Kinerja ujung depan

Cara meningkatkan aksesibilitas tema WordPress Anda sekarang

Tidak ada satu hari pun saya tidak menggunakan web, bahkan ketika saya sedang berlibur. Saya akan mengambil tebakan liar yang bisa Anda hubungkan. Semakin banyak, internet memainkan ...

Aturan emas kinerja, menurut chief performance officer Fastly Steve Souders, adalah bahwa 80-90% dari total waktu buka halaman terdiri dari front-end (aturan 80/20). 10-20% back-end sangat penting, tetapi bahkan jika Anda menggunakan host tercepat yang dapat dibeli dengan uang, situs Anda masih tidak akan memenuhi potensi penuhnya tanpa mengoptimalkan front-end untuk memastikan pengguna memahaminya. itu memuat dengan cepat. Persepsi penting dalam hal pengoptimalan front-end. Seorang pengguna tidak akan peduli berapa lama, dalam hitungan detik, situs yang dibutuhkan untuk memuat. Yang benar-benar mereka pedulikan adalah seberapa cepat mereka dapat berinteraksi dengannya dan melihat konten atau melakukan tindakan tanpa penundaan. Bukan untuk mengatakan Anda tidak perlu khawatir tentang waktu muat yang sebenarnya (Anda harus), tetapi dengan mengikuti teknik di bawah ini, Anda dapat memastikan situs Anda dalam keadaan yang dapat digunakan secepat mungkin, diikuti dengan cepat dengan pemuatan halaman lengkap semua aset.

CSS

Hal terpenting yang harus dilakukan dengan CSS Anda sebelum dikirimkan ke browser adalah dengan mengompresnya dan menghapus selektor yang tidak digunakan. Mendapatkan alur kerja pengembangan yang baik saat mengembangkan tema membuat proses ini sepele, terutama jika Anda menggunakan pra-prosesor seperti Sass. Saya menggunakan Grunt, yang merupakan pelari tugas JavaScript yang mengeksekusi perintah untuk Anda saat mengembangkan. Ada plugin untuk Grunt yang disebut grunt-contrib-sass yang hanya mengkompilasi semua file Sass Anda menjadi satu (jika Anda menggunakan parsial Sass), mengecilkannya dan mengompresnya. Masukkan plugin grunt-contrib-watch di atasnya dan itu akan menjalankan tugas Sass setiap kali Anda menyimpan file. Mudah! Jangan kehilangan waktu tidur jika Anda tidak menggunakan metodologi CSS terbaru dan terbaik, tetapi cobalah untuk mengikuti semacam standar saat membuat CSS untuk menghindari duplikasi dan ukuran file yang besar.

Setelah stylesheet Anda siap digunakan, cara termudah (dan sejauh ini, standar) untuk memuatnya adalah dengan mereferensikannya di <head> ;. Dengan begitu, browser memuat dan mem-parsingnya sebelum DOM lainnya dimuat. Namun, ada teknik baru di mana gaya "kritis" dimasukkan ke dalam <head> dan kemudian lembar gaya lengkap dimuat secara asinkron menggunakan JavaScript. Saya hanya benar-benar menggunakan teknik ini ketika saya benar-benar mencoba untuk memuat situs (atau merasa memuat) di bawah satu detik, tetapi itu adalah hal yang bagus untuk dilihat dan dilihat apakah itu dapat masuk ke dalam alur kerja Anda. Filament Group memiliki artikel ekstensif yang bagus tentang penggunaan teknik ini.

JavaScript

Memahami bagaimana WordPress menggunakan MySQL

Secara garis besar, WordPress dapat dibagi menjadi dua segmen: logika dan template yang menghasilkan tampilan dan nuansa situs WordPress, database MySQL yang menyimpan semua konten dan kekuatan...

Aturan utama dalam mengoptimalkan JavaScript sederhana: sajikan file JavaScript sesedikit mungkin dan perkecil dan gabungkan. Plugin WordPress pihak ketiga dapat merusak dokumen Anda dengan file JavaScript pemblokiran yang tidak diminifikasi, jadi penting untuk berhati-hati saat memilih plugin. Idealnya, Anda akan menggabungkan SEMUA file JavaScript menjadi satu dan kemudian mengecilkannya. Untuk saat-saat ketika tidak mungkin untuk menggabungkan semua file Anda menjadi satu, ada atribut HTML yang disebut "async" dan "defer" yang dapat digunakan untuk memuat file JavaScript secara asinkron atau setelah sisa halaman dimuat.

Tempat paling umum saat ini untuk mereferensikan JavaScript adalah di bagian bawah dokumen Anda, tepat sebelum tag penutup. Namun, ada teknik yang lebih canggih untuk memuat JavaScript. Sekali lagi, Filament Group telah melakukan banyak penelitian tentang hal ini dan memiliki beberapa proyek open source yang dapat Anda gunakan jika Anda menginginkan waktu buka halaman yang super cepat (Ngomong-ngomong, saya sama sekali tidak berafiliasi dengan Filament Group; Saya hanya berpikir barang-barang mereka luar biasa). Pendekatan terbaik tampaknya adalah memuat skrip secara dinamis dengan memasukkan fungsi kecil di <head> ; yang kemudian menambahkan tag skrip tanpa memblokir sisa halaman. Untuk informasi lebih lanjut, lihat skrip loadJS.

Gambar-gambar

Gambar sering kali merupakan file terbesar pada halaman, bertanggung jawab atas penundaan terbesar dalam waktu buka halaman. Hal yang baik tentang gambar adalah, tidak seperti CSS dan JavaScript, sebagian besar browser memuatnya secara asinkron. Itu setidaknya membantu dengan kinerja halaman yang dirasakan, tetapi Anda masih ingin memastikan bahwa A) Anda menyajikan gambar sesedikit mungkin dan B) gambar tersebut dikompresi sebanyak mungkin.

Alat kompresi diperlukan untuk memeras sebanyak mungkin kelebihan pada gambar. ImageOptim adalah aplikasi Mac hebat yang melakukan ini dengan baik, bersama dengan OptiPNG dan jpegtran untuk digunakan dengan pelari tugas seperti Grunt.

font

Font web sangat umum akhir-akhir ini. Saya menggunakan Google Web Fonts di hampir setiap proyek, tetapi sampai akhir-akhir ini saya tidak menyadari kinerja yang saya ambil hanya dengan merujuknya di <head> . Hit kinerjanya kecil, tetapi ini adalah artikel tentang membuat situs menjadi sangat cepat, jadi semuanya penting! Untuk kinerja terbaik menggunakan font web, saya sarankan menggunakan Web Font Loader, yang dikembangkan bersama oleh Google dan Typekit. Ini adalah skrip open source yang keduanya mengelola pemuatan font Anda dari pihak ketiga seperti Google Web Fonts dan memungkinkan mereka untuk memuat secara tidak sinkron (sudah bosan dengan kata itu?).

Seperti yang diharapkan, ada beberapa konfigurasi yang diperlukan untuk mengintegrasikan Web Font Loader ke dalam proyek Anda, jadi lihat proyek di GitHub untuk detail tentang cara menyiapkannya.