Bagaimana Kami Membuat WordPress Lebih Cepat dari Generator Situs Statis (Studi Kasus

Pada peringatan 10 tahun WPBeginner, saya berbagi bahwa infrastruktur hosting WPBeginner mendapat peningkatan besar berkat mitra hosting web kami, HostGator.

Tak lama setelah itu, saya mulai mendapatkan email dari pembaca yang meminta saya untuk membagikan detail tentang bagaimana kami membuat WPBeginner dimuat dengan sangat cepat.

Ya, WPBeginner memuat lebih cepat dari kebanyakan generator situs statis dan dalam beberapa kasus lebih cepat dari situs Google AMP juga.

Pada artikel ini, saya akan memberi Anda di belakang layar melihat bagaimana kami membuat WordPress lebih cepat dari generator situs statis dan platform CMS tanpa kepala.

Note: Artikel ini sedikit lebih teknis daripada yang biasanya kami terbitkan di WPBeginner. Untuk pengguna non-techy, saya sarankan mengikuti panduan utama kami tentang cara mempercepat WordPress.

Latar Belakang

Akhir-akhir ini WordPress telah mendapatkan banyak perwakilan buruk dari pengembang "modern" di mana mereka mengatakan WordPress lambat.

Pernyataan ini biasanya ditindaklanjuti dengan, Anda harus beralih ke generator situs statis JAMstack seperti GatsbyJS. Orang lain di dunia perusahaan akan mengatakan bahwa Anda harus beralih ke CMS tanpa kepala seperti Puas.

Beberapa teman wirausahawan saya yang sangat sukses mulai bertanya kepada saya apakah ini benar.

Beberapa bahkan memulai proses migrasi ke CMS tanpa kepala karena mereka membaca studi kasus tentang bagaimana orang lain membuka peningkatan kecepatan besar dengan beralih dari WordPress ke generator situs statis.

Ini sangat menyebalkan bagi saya karena saya tahu mereka menghabiskan puluhan ribu dolar untuk biaya migrasi. Belum lagi, biaya kustomisasi tak berujung yang akan menumpuk di masa depan.

Jadi saya menganggapnya sebagai tantangan untuk membuktikan bahwa situs konten WordPress besar seperti WPBeginner dapat memuat dengan cepat jika tidak lebih cepat dari kebanyakan generator situs statis modern.

Anda dapat memanggil saya sekolah lama, tetapi pada akhirnya, situs statis hanya memuat halaman dari cache.

Hasil

Sebelum saya beralih ke infrastruktur hosting WordPress yang tepat, konfigurasi server, dan plugin, saya pikir sangat membantu untuk membagikan hasilnya.

Inilah seberapa cepat beranda WPBeginner dimuat di Pingdom dari server Washington, DC mereka:

Situs Web WPBeginner Pingdom

Bergantung pada waktu dan lokasi yang Anda periksa, hasil ini akan bervariasi mulai dari kisaran 400ms – 700ms yang cukup cepat untuk beranda.

Inilah tes yang saya jalankan untuk satu halaman posting karena memiliki gambar yang lebih besar dan lebih banyak konten:

WPBeginner Single Posts Page Speed ​​Test dari Pingdom

Kami juga mendapat skor sempurna "100" dalam tes kecepatan halaman Google untuk desktop. Meskipun kami memiliki beberapa ruang untuk peningkatan skor seluler.

WPBeginner Tes Kecepatan Halaman Google

Hasil di atas adalah untuk halaman yang di-cache yang didapatkan pembaca dan mesin pencari kami saat mereka melihat situs web kami. Waktu muat yang dirasakan dari WPBeginner hampir instan (lebih lanjut tentang ini nanti).

Demi perbandingan, inilah hasil tes kecepatan untuk beranda Gatsby. Ini adalah generator situs statis populer yang dibicarakan oleh banyak pengembang:

Situs Web Gatsby Pingdom

Inilah hasil uji kecepatan dari situs Netlify, host situs statis populer, yang direkomendasikan banyak pengembang. Perhatikan bahwa mereka memiliki setengah jumlah permintaan, dan ukuran halaman mereka adalah 30% dari WPBeginner, namun masih memuat lebih lambat dari beranda kami.

Netlify Homepage Pingdom

Kecepatan beranda Contentful, CMS tanpa kepala yang merupakan "bagaimana perusahaan memberikan pengalaman digital yang lebih baik" tidak dioptimalkan sama sekali. Ini adalah situs web paling lambat yang kami uji.

Pingdom Homepage yang Penuh Isi

Saya membagikan statistik ini bukan untuk mendiskreditkan kerangka kerja lain, tetapi lebih untuk memberikan perspektif bahwa tidak semua hal baru sama mengkilapnya seperti yang terlihat.

WordPress dengan infrastruktur hosting yang tepat dan optimalisasi dapat secepat generator situs statis. Selain itu, tidak ada platform lain yang mendekati tingkat fleksibilitas yang ditawarkan WordPress kepada pemilik bisnis melalui ekosistem plugin dan tema yang besar.

Infrastruktur Hosting WPBeginner

Ketika datang ke kecepatan situs web, tidak ada yang memainkan peran lebih penting daripada infrastruktur hosting web Anda.

Seperti yang sudah Anda ketahui, saya telah menjadi pelanggan HostGator sejak 2007. Saya memulai blog WPBeginner pada tahun 2009 di akun hosting bersama HostGator yang kecil.

Seiring pertumbuhan situs web kami, kami meningkatkan versi hosting VPS mereka dan kemudian server khusus.

Selama dekade terakhir, saya mendapat kesempatan untuk bekerja erat dengan banyak anggota tim mereka, dan mereka telah menjadi bagian besar dari keluarga WPBeginner.

Jadi ketika saya mengambil tantangan untuk membuat WPBeginner lebih cepat dari generator situs statis, saya meminta bantuan mereka.

Saya membagikan visi saya dengan tim kepemimpinan mereka, dan mereka menawarkan untuk membantu saya membangun salah satu pengaturan hosting perusahaan yang baik untuk WPBeginner.

Mereka menempatkan insinyur terbaik dari tim Bluehost dan HostGator untuk bekerja sama dengan saya untuk membuat WPBeginner menyala dengan sangat cepat.

Berikut ini gambaran umum tentang bagaimana pengaturan hosting WPBeginner terlihat:

Infrastruktur Hosting WPBeginner

Seperti yang Anda lihat, ini adalah pengaturan multi-server yang tersebar di dua wilayah geografis (Texas dan Utah). Ada total 9 server tidak termasuk cloud load balancer. Setiap server adalah CPU Xeon-D dengan 8 core (16 thread) dengan 32GB RAM dan 2 x 1TB SSD (setup RAID).

Kami menggunakan Platform Google Cloud Load Balancing, sehingga kami dapat memiliki autoscaling dan load balancing yang mulus, di seluruh dunia.

Setelah perangkat keras diatur dengan sinkronisasi data yang tepat, tim Bluehost dan HostGator bekerja bersama untuk mengoptimalkan konfigurasi server untuk WordPress. Harapan saya adalah bahwa beberapa optimasi ini akan segera membuatnya menjadi paket hosting WordPress masa depan :)

Ringkasan Konfigurasi Server

Merangkum konfigurasi server dari pengaturan kompleks ini hanya dalam beberapa paragraf sangat sulit, tetapi saya akan mencoba yang terbaik.

Kami menggunakan Apache untuk perangkat lunak server web kami karena tim lebih mengenalnya. Saya tidak akan masuk ke debat NGINX vs Apache.

Kami menggunakan PHP 7.2 bersama dengan kumpulan PHP-FPM, sehingga kami dapat menangani banyak proses dan permintaan. Jika perusahaan hosting Anda tidak menggunakan PHP 7+, maka Anda kehilangan optimasi kecepatan yang serius.

Kami menggunakan caching Opcode dengan penghangat cache canggih untuk memastikan bahwa tidak ada pengguna asli yang akan mengalami tampilan halaman yang tidak di-cache.

Kami juga menggunakan cache Objek dengan memcache, sehingga kami dapat meningkatkan waktu respons untuk klik halaman yang tidak di-cache dan waktu respons API lainnya di area admin WordPress untuk pengguna yang masuk (penulis kami). Berikut adalah tab pemuatan jaringan layar "Semua Posting" kami di admin WordPress:

Layar Edit Posting WPBeginner

Singkatnya, pengalaman area admin kami sekarang 2X lebih cepat dari yang kami miliki sebelumnya.

Untuk server basis data kami, kami beralih dari MySQL ke MariaDB yang merupakan tiruan dari MySQL tetapi lebih cepat dan lebih baik. Kami juga beralih dari HyperDB untuk LudicrousDB karena ini membantu kami meningkatkan replikasi database kami, failover, dan load balancing.

Ada juga banyak konfigurasi lain yang membantu kami dengan kinerja dan skalabilitas seperti HTTP / 2 dan HSTS untuk koneksi + enkripsi yang lebih cepat, kemampuan untuk memutar server tambahan di wilayah baru jika terjadi pemadaman pusat data, dll.

Saya merasa tidak melakukan keadilan terhadap pengaturan menakjubkan yang telah dibuat oleh tim, tetapi ketahuilah bahwa kekuatan inti saya adalah pemasaran. Ya, saya seorang blogger yang menulis tentang WordPress, tetapi banyak optimasi teknis di sini jauh di atas tingkat gaji saya.

Itu dilakukan oleh insinyur super pintar di tim Endurance termasuk David Collins (kepala arsitek Endurance / CTO HostGator), Mike Hansen (pengembang WordPress inti), dan lainnya yang saya akan berterima kasih di bagian kredit di bawah ini.

CDN, WAF, dan DNS

Selain dari hosting web, area lain yang memainkan peran penting dalam kecepatan situs web Anda adalah penyedia DNS Anda, jaringan pengiriman konten Anda (alias CDN), dan firewall aplikasi web Anda (WAF).

Walaupun saya telah mendaftarkannya sebagai tiga hal terpisah, banyak perusahaan sekarang menawarkan solusi ini dalam paket paket seperti Sucuri, Cloudflare, MaxCDN (StackPath), dll.

Karena saya ingin memiliki kontrol maksimum dan menyebarkan risiko, saya menggunakan tiga perusahaan terpisah untuk menangani setiap bagian secara efisien.

WPBeginner DNS diberdayakan oleh DNS Made Easy (perusahaan yang sama dengan Constellix). Mereka konsisten peringkat sebagai penyedia DNS tercepat di dunia. Keuntungan dari DNS Made Easy adalah saya dapat melakukan arahan lalu lintas global ketika pusat data spesifik pada CDN atau WAF saya tidak berfungsi dengan baik untuk memastikan waktu kerja maksimum.

CDN kami diberdayakan oleh MaxCDN (StackPath). Mereka pada dasarnya memungkinkan kami untuk melayani aset statis kami (gambar, file CSS, dan JavaScripts) dari jaringan server besar mereka di seluruh dunia.

Kami menggunakan Sucuri sebagai firewall aplikasi web kami. Selain memblokir serangan, mereka juga bertindak sebagai lapisan lain dari CDN, dan kinerja keseluruhannya sangat menakjubkan. Saya percaya mereka memiliki solusi firewall WordPress terbaik di pasar.

Saat bekerja pada pengoptimalan kecepatan situs web, mencukur setiap masalah milidetik. Itulah mengapa menggunakan penyedia solusi ini dikombinasikan dengan infrastruktur hosting web baru kami membuat perbedaan besar.

Sebagai ilustrasi, inilah rincian air terjun WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Rincian Permintaan Waterfall di WPBeginner

Perhatikan bahwa waktu DNS WPBeginner, waktu SSL, waktu Konektivitas, dan waktu Tunggu adalah yang terbaik jika dibandingkan dengan situs web populer lainnya ini. Masing-masing senyawa perbaikan untuk memberikan hasil terbaik.

Halaman Instant.page, Gambar yang Dioptimalkan, dan Praktik Terbaik Lainnya

Salah satu hal yang mungkin Anda perhatikan adalah waktu buka yang hampir instan ketika Anda menelusuri posting dan halaman WPBeginner.

Selain semua hal yang saya sebutkan di atas, kami juga menipu latensi dengan menggunakan skrip yang disebut instant.page yang menggunakan preloading tepat waktu.

Pada dasarnya sebelum pengguna mengklik tautan, mereka harus mengarahkan mouse ke tautan itu. Ketika seorang pengguna telah melayang selama 65 ms (periode waktu yang sangat singkat), satu dari dua akan benar-benar mengklik tautan.

Halaman instan skrip mulai preloading halaman pada saat ini, jadi ketika pengguna benar-benar mengklik tautan banyak pengangkatan berat sudah dilakukan. Ini membuat otak manusia menganggap waktu pemuatan situs web hampir instan.

Untuk mengaktifkan Instant.page di situs Anda, Anda cukup menginstal dan mengaktifkan Plugin WordPress Halaman Instan.

Script Halaman Instan

Script ini cukup rapi. Saya sangat merekomendasikan memeriksa situs web mereka dan mengklik tombol "uji kecepatan mengklik Anda" untuk melihat bagaimana itu menipu otak.

Memperbarui: Saya telah menonaktifkan halaman instan. Untuk saat ini, dan saya akan menguji Plugin FlyingPages dalam waktu dekat. Gijo Varghese membagikan plugin barunya dengan saya di Internet WPBeginner Terlibat Facebook kelompok, dan sepertinya menggabungkan yang terbaik dari script instant.page dan quicklink.

Mengoptimalkan Gambar untuk Web

Meskipun ada format gambar baru yang sedang dikembangkan seperti webp, kami belum menggunakannya. Sebagai gantinya kami meminta semua penulis kami untuk mengoptimalkan setiap gambar menggunakan alat TinyPNG.

Anda juga dapat mengotomatiskan kompresi gambar menggunakan plugin seperti Optimole atau EWWW Image Optimizer.

Namun, saya pribadi lebih suka meminta tim melakukan ini secara manual, jadi kami tidak mengunggah file besar di server.

Saat ini, kami tidak melakukan pemuatan yang malas untuk gambar, tetapi saya berencana untuk menambahkannya dalam waktu dekat sekarang karena Google memiliki dukungan pemuatan yang malas. bawaan untuk Chrome 76.

Ada juga a tiket di WordPress inti untuk menambahkan fitur ini di semua situs (sangat berharap hal ini segera terjadi), jadi saya tidak perlu menulis plugin khusus.

Membatasi Permintaan HTTP + Praktik Terbaik

Kurangi permintaan HTTP lintas-domain

Bergantung pada plugin WordPress yang Anda gunakan, beberapa akan menambahkan file CSS dan JavaScript tambahan pada setiap pemuatan halaman. Permintaan HTTP tambahan ini dapat lepas kendali jika Anda memiliki banyak plugin di situs web Anda.

Untuk detail lebih lanjut, lihat bagaimana plugin WordPress dapat memengaruhi waktu buka situs Anda.

Sekarang sebelum Anda melompat ke kesimpulan yang salah bahwa terlalu banyak plugin WordPress buruk, saya ingin memberi tahu Anda bahwa ada 62 plugin aktif yang berjalan di situs web WPBeginner.

Yang perlu Anda lakukan adalah menggabungkan file CSS dan JavaScript jika memungkinkan untuk mengurangi permintaan HTTP. Beberapa plugin caching WordPress seperti WP Rocket dapat melakukan ini secara otomatis dengan fitur minifikasi mereka.

Anda juga dapat mengikuti instruksi dalam artikel ini untuk melakukannya secara manual yang telah dilakukan oleh tim kami di WPBeginner.

Selain permintaan HTTP yang ditambahkan oleh plugin dan tema, Anda juga ingin memperhatikan skrip pihak ketiga lainnya yang Anda tambahkan di situs web Anda karena setiap skrip akan memengaruhi kecepatan situs web Anda.

Misalnya, jika Anda menjalankan banyak skrip iklan atau skrip penargetan ulang, maka mereka akan memperlambat situs Anda. Anda mungkin ingin menggunakan alat seperti Google Pengelola Tag untuk memuat skrip secara kondisional hanya saat dibutuhkan.

Jika Anda situs web yang didukung iklan seperti TechCrunch atau TheNextWeb, maka sangat sedikit yang dapat Anda lakukan tentang hal ini karena menghapus iklan bukan merupakan pilihan.

Untungnya, WPBeginner tidak bergantung pada skrip iklan pihak ketiga untuk menghasilkan uang. Ingin melihat bagaimana WPBeginner menghasilkan uang? Lihat posting blog saya tentang penghasilan WPBeginner.

Pelajaran yang Dipetik (sejauh ini) + Pikiran Akhir Saya

Ini adalah infrastruktur hosting baru, dan saya yakin ada banyak pelajaran yang akan saya pelajari dari waktu ke waktu.

Sejauh ini saya menyukai peningkatan kecepatan karena telah membantu kami meningkatkan peringkat SEO kami, dan area admin kami jauh lebih cepat.

Dengan pengaturan multi-server baru, kami memperkenalkan alur kerja penyebaran baru untuk membawa WPBeginner secara normal dengan sisa dari Situs produk Motive yang luar biasa.

Apa artinya ini adalah bahwa kita sekarang memiliki versi yang tepat mengendalikan bawaan, dan ada langkah-langkah yang diberlakukan untuk menghentikan saya dari gegabah (mis. Menambahkan plugin tanpa pengujian yang tepat, memperbarui plugin dari dashboard tanpa pengujian, dll).

Perubahan ini juga menetapkan jalan bagi saya untuk akhirnya keluar dari pengembangan dan menyerahkan pemerintahan situs WPBeginner kepada tim pengembang kami.

Saya telah menolak ini selama bertahun-tahun, tetapi saya pikir waktunya akan tiba, dan saya hanya perlu menerimanya.

Setup baru tidak memiliki cPanel atau WHM, jadi ini membuat saya praktis tidak berguna karena saya tidak terlalu fasih dengan baris perintah lagi.

Sejauh ini kami telah belajar dua pelajaran besar:

Pertama, memperbarui WordPress tidak dapat dilakukan karena adanya sinkronisasi / replikasi server. Ketika kami meningkatkan blog pribadi saya (SyedBalkhi.com) ke WordPress 5.2, file pembaruan tidak disinkronkan dengan benar di salah satu simpul web, dan proses debug membutuhkan waktu lebih lama dari yang diperkirakan. Kami sedang berupaya membangun proses pembuatan / pengujian yang lebih baik untuk ini.

Kedua, kita perlu memiliki komunikasi yang lebih baik antar tim karena kita mengalami krisis kecil dengan kesalahan konfigurasi penyeimbang muatan yang mengakibatkan beberapa waktu henti. Untuk membuatnya lebih buruk, saya berada dalam penerbangan transatlantik di Turkish Airlines, dan WiFi tidak berfungsi.

Untungnya semuanya tersortir berkat waktu respons cepat oleh tim hosting, tetapi ini membantu kami membuat beberapa Prosedur Operasi Standar (SOP) baru untuk menangani insiden di masa depan dengan lebih baik.

Secara keseluruhan saya sangat senang dengan pengaturan ini, dan saya tahu bahwa beberapa konfigurasi / optimisasi caching yang dibuat untuk WPBeginner akan menjadi bagian standar dari paket hosting HostGator Cloud dan Bluehost WordPress.

Saya pikir ini harus dilakukan tanpa mengatakan bahwa jika Anda baru memulai sebuah situs web, blog, atau toko online, maka Anda TIDAK memerlukan pengaturan perusahaan yang canggih ini.

Saya selalu menyarankan Anda memulai dari yang kecil dengan HostGator yang dibagikan atau paket bersama Bluehost seperti yang saya lakukan, dan kemudian memutakhirkan infrastruktur hosting Anda saat bisnis Anda tumbuh.

Anda dapat menerapkan banyak optimasi yang saya bagikan di atas pada paket hosting WordPress Anda saat ini.

Sebagai contoh, paket standar Bluehost sudah dilengkapi dengan plugin caching bawaan yang dapat Anda gunakan, dan mereka menawarkan PHP 7 secara default juga.

Anda dapat menggabungkannya dengan CDN + WAF seperti Sucuri untuk secara signifikan mempercepat situs web Anda.

Sekarang jika Anda adalah perusahaan pasar menengah / perusahaan yang menginginkan pengaturan hosting serupa, silakan hubungi saya melalui formulir kontak kami. Saya dapat membantu mengarahkan Anda ke arah yang benar.

Terima Kasih Khusus + Kredit

Terima kasih HostGator dan Bluehost

Sementara di artikel di atas, saya telah memberikan banyak teriakan untuk merek HostGator dan Bluehost, saya ingin meluangkan waktu sejenak untuk mengenali dan menghargai orang-orang yang bekerja di belakang layar untuk mewujudkannya.

Pertama, saya ingin mengucapkan terima kasih kepada tim kepemimpinan Endurance Suhaib, Mitch, John Orlando, Mike Lillie, dan Brady Nord karena setuju untuk membantu saya dengan tantangan.

Saya juga ingin mengucapkan terima kasih kepada Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem, dan lain-lain di tim pusat data untuk benar-benar melakukan kerja keras dan mewujudkannya.

Saya ingin memberikan teriakan khusus kepada Steven Job (pendiri DNSMadeEasy) karena dengan cepat menjawab pertanyaan saya dan membantu saya lebih memahami beberapa pengaturan. Juga ingin memberikan teriakan kepada Tony Perez dan Daniel Cid di Sucuri karena selalu mendukung saya.

Terakhir tetapi tidak kalah pentingnya, saya ingin memberikan pengakuan khusus kepada Chris Christoff. Dia adalah co-founder dari MonsterInsights, dan dia cukup baik untuk membantu saya dengan banyak pengujian dan penyebaran.

Saya sangat berharap Anda menemukan ini di balik layar studi kasus tentang infrastruktur hosting WPBeginner untuk membantu. Anda mungkin juga ingin melihat panduan utama kami tentang cara mempercepat WordPress yang jauh lebih ramah bagi pemula.

Bonus: Berikut adalah plugin dan alat WordPress terbaik yang saya rekomendasikan untuk semua situs WordPress.

Jika Anda menyukai artikel ini, silakan berlangganan artikel kami YouTube Saluran untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.


Pos terkait

Back to top button