Cara membuat WordPress lebih cepat daripada generator situs statis (studi kasus …

Pada peringatan 10 tahun WPBeginner, saya mengumumkan bahwa infrastruktur hosting WPBeginner telah menerima pembaruan besar berkat mitra hosting web kami HostGator.

Saya segera menerima email dari pembaca yang meminta saya untuk membagikan rincian tentang bagaimana kami memuat WPBeginner dengan sangat cepat.

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

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

catatan: Artikel ini sedikit lebih teknis daripada yang biasanya kami posting di WPBeginner. Untuk pengguna non-teknis, saya sarankan mengikuti panduan terakhir kami untuk mempercepat WordPress.

perbarui: Kami tidak lagi menggunakan pengaturan bersama dalam artikel ini. Sebagai gantinya, kami telah sepenuhnya beralih ke platform Google Cloud yang dikelola oleh SiteGround. Kami membuka hasil kecepatan yang sama dan kinerja backend yang lebih cepat. Baca mengapa kami beralih ke SiteGround.

latar belakang

WordPress baru-baru ini mendapatkan banyak reputasi buruk dari pengembang "modern" bahwa WordPress lambat.

Instruksi umumnya mengikuti bahwa Anda harus beralih ke generator lokasi JAMstack statis seperti GatsbyJS. Orang lain dalam bisnis mengatakan Anda harus beralih ke CMS tanpa kepala seperti Contentful.

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

Beberapa bahkan telah mulai bermigrasi ke CMS tanpa kepala karena mereka telah membaca studi kasus tentang bagaimana orang lain telah membuka kunci peningkatan kecepatan besar dengan beralih dari WordPress ke pembangun situs statis.

Sangat menyebalkan bagi saya karena saya tahu bahwa puluhan ribu dolar dihabiskan untuk biaya migrasi. Belum lagi biaya penyesuaian yang tak terbatas yang akan terjadi di masa depan.

Itu sebabnya saya mengambil tantangan untuk membuktikan bahwa situs konten WordPress yang bagus seperti WPBeginner dapat memuat dengan cepat, jika tidak lebih cepat, daripada kebanyakan pembuat situs statis modern.

Anda dapat memanggil saya sekolah lama, tetapi pada akhirnya, tempat statis hanyalah sebuah halaman yang penuh dengan cache.

hasil

Sebelum melihat infrastruktur hosting WordPress yang tepat, konfigurasi server, dan plugin, saya pikir berbagi hasilnya sangat membantu.

Situs web WPBeginner di Pingdom akan dimuat dari server Anda di Washington, DC sesegera mungkin:

Bergantung pada waktu dan tempat Anda memeriksa, hasil ini bervariasi antara 400ms dan 700ms, yang cukup cepat untuk beranda.

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

Kami juga mendapat skor sempurna "100" dalam Tes Kecepatan Halaman Google Desktop. Meskipun kami memiliki ruang untuk peningkatan dalam hasil seluler.

Hasil di atas merujuk ke halaman cache. Robot pembaca dan mesin pencari kami menerima ini ketika mereka mengunjungi situs kami. Waktu muat yang dirasakan untuk WPBeginner hampir instan (lebih lanjut tentang itu nanti).

Sebagai perbandingan, berikut adalah hasil tes kecepatan untuk situs web Gatsby. Ini adalah generator situs statis populer yang membuat banyak pengembang bersemangat:

Ini adalah hasil dari tes kecepatan di situs web Netlify, sebuah host situs statis populer yang direkomendasikan oleh banyak pengembang. Perhatikan bahwa mereka memiliki setengah dari permintaan dan bahwa ukuran halaman mereka adalah 30% dari WPBeginner, tetapi masih lebih lambat dari apa yang dimuat situs web kami.

Kecepatan situs web yang kaya konten, CMS tanpa kepala yang "perusahaan memberikan pengalaman digital yang lebih baik" sama sekali tidak dioptimalkan sama sekali. Ini adalah tempat paling lambat yang kami coba.

Saya tidak membagikan statistik ini untuk mendiskreditkan kerangka kerja lain, tetapi untuk memberikan gagasan bahwa tidak semua hal baru secemerlang kelihatannya.

WordPress dengan infrastruktur dan pengoptimalan hosting yang tepat dapat secepat pembangun situs statis apa pun. Plus, tidak ada platform lain yang akan mencapai fleksibilitas yang ditawarkan WordPress kepada pemilik bisnis melalui plugin dan ekosistem tema yang hebat.

Infrastruktur hosting WPBeginner

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

Seperti yang sudah Anda ketahui, saya sudah menjadi klien HostGator sejak 2007. Saya memulai blog WPBeginner 2009 di akun host HostGator kecil yang dibagikan.

Seiring pertumbuhan situs kami, kami meningkatkan hosting VPS Anda dan kemudian ke server khusus.

Saya telah memiliki kesempatan untuk bekerja sama dengan banyak anggota tim Anda selama dekade terakhir dan telah menjadi bagian dari keluarga WP Beginner.

Menghadapi tantangan membuat WPBeginner lebih cepat daripada konstruktor statis, saya meminta bantuan mereka.

Saya membagikan visi saya dengan tim manajemen mereka dan mereka menawarkan untuk membantu saya membangun pengaturan hosting perusahaan yang unik untuk WPBeginner.

Anda menyewa insinyur terbaik dari tim Bluehost dan HostGator untuk bekerja sama dengan saya untuk membuat WPBeginner sangat cepat.

Berikut ini gambaran umum tentang bagaimana konfigurasi hosting WPBeginner terlihat:

Seperti yang Anda lihat, ini adalah pengaturan multi-server yang mencakup dua wilayah geografis (Texas dan Utah). Ada semuanya 9 Server tanpa memuat saldo di cloud. Setiap server adalah CPU Xeon-D 32-core (16-kawat) dengan 32 GB RAM dan 2 x 1 TB SSD (Konfigurasi RAID).

Kami menggunakan platform Google load balancing untuk secara otomatis mengukur dan memuat keseimbangan di seluruh dunia.

Setelah mengatur perangkat keras dengan sinkronisasi data yang benar, Bluehost dan HostGator bekerja bersama untuk mengoptimalkan pengaturan server WordPress. Saya harap beberapa optimasi ini akan segera berlaku untuk paket hosting WordPress di masa mendatang.

Ikhtisar konfigurasi server

Sangat sulit untuk merangkum konfigurasi server dari konfigurasi yang kompleks ini hanya dalam beberapa paragraf, tetapi saya akan melakukan yang terbaik.

Kami menggunakan Apache untuk perangkat lunak server web kami karena tim lebih mengenalnya. Saya tidak akan berpartisipasi dalam debat NGINX-Apache.

Kami menggunakan PHP 7.2 bersama-sama dengan grup PHP-FPM, sehingga kami dapat menangani banyak proses dan persyaratan. Jika perusahaan hosting Anda adalah PHP 7+ yang tidak digunakan, lewatkan optimasi kecepatan yang serius.

Kami menggunakan cache opcode dengan pemanas cache canggih untuk memastikan bahwa tidak ada pengguna nyata yang mengalami kunjungan halaman tanpa cache.

Kami juga menggunakan objek cache dengan Memcache sehingga kami dapat meningkatkan waktu respons untuk akses halaman tanpa cache dan waktu respons API lainnya di area admin WordPress untuk pengguna terdaftar (penulis kami). Inilah tab unggahan jaringan untuk tangkapan layar kami dari semua pos WordPress Manager:

Pengalaman administrasi kami sekarang dua kali lebih cepat dari sebelumnya.

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

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

Saya merasa seperti tidak melakukan pengaturan luar biasa yang dilakukan tim, tetapi saya tahu kekuatan terbesar saya adalah pemasaran. Ya, saya seorang blogger yang menulis tentang WordPress, tetapi banyak optimasi teknis di sini jauh di atas tingkat gaji saya.

Mereka diciptakan oleh insinyur super pintar di tim Endurance, termasuk David Collins (Lead Endurance / Arsitek CTO untuk HostGator), Mike Hansen (Lead WordPress Developer), dan lainnya, yang ingin saya ucapkan terima kasih pada bagian "Kredit" di bawah.

CDN, WAF, dan DNS

Selain hosting web, penyedia DNS Anda, jaringan pengiriman konten Anda (juga dikenal sebagai CDN), dan firewall aplikasi web (WAF) Anda semua memainkan peran penting dalam kecepatan situs Anda.

Sementara saya mendaftarkannya sebagai tiga hal yang terpisah, banyak perusahaan sekarang menawarkan solusi ini dalam rencana terpadu seperti Sucuri, Cloudflare, MaxCDN (StackPath), dll.

Karena saya berada dalam kendali maksimum dan ingin menyebarkan risiko, saya menggunakan tiga perusahaan terpisah untuk mengelola setiap bagian secara efektif.

WPBeginner DNS bekerja dengan DNS Made Easy (perusahaan yang sama dengan Constellix). Mereka secara konsisten diperingkatkan sebagai penyedia DNS tercepat di dunia. Keuntungan dari DNS Made Easy adalah saya dapat mengarahkan lalu lintas global ketika pusat data tertentu pada CDN atau WAF saya tidak berfungsi dengan baik untuk memastikan ketersediaan maksimum.

CDN kami bekerja dengan MaxCDN (StackPath). Pada dasarnya, mereka memungkinkan kami untuk mengirimkan aset statis kami (gambar, file CSS, dan JavaScripts) dari jaringan besar server di seluruh dunia.

Kami menggunakan Sucuri sebagai firewall aplikasi web. Mereka tidak hanya memblokir serangan, tetapi mereka juga bertindak sebagai lapisan lain dari CDN, dan kinerja keseluruhan mereka sangat luar biasa. Saya pikir mereka memiliki solusi firewall WordPress terbaik di pasar.

Saat mengoptimalkan kecepatan situs, penting untuk mengurangi setiap milidetik. Untuk alasan ini, menggunakan penyedia solusi ini dalam kombinasi dengan infrastruktur web hosting baru kami membuat perbedaan besar.

Untuk mengilustrasikan kerusakan tumpang tindih WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Harap perhatikan bahwa waktu DNS WPBeginner, waktu SSL, waktu koneksi, dan batas waktu adalah yang terbaik dibandingkan dengan situs-situs populer lainnya. Masing-masing perangkat tambahan ini digabungkan untuk hasil terbaik.

Halaman Instant.page, gambar yang dioptimalkan, dan praktik terbaik lainnya

Salah satu hal yang mungkin Anda perhatikan adalah waktu pemuatan yang hampir seketika saat menelusuri posting dan halaman WPBeginner.

Selain semua hal yang saya sebutkan sebelumnya, kami juga menipu latensi dengan menggunakan skrip yang disebut instant.page yang menggunakan preload yang sesuai.

Pada dasarnya, sebelum mengklik tautan, pengguna harus menggerakkan mouse mereka di atas tautan itu. Jika pengguna tetap 65 ms (waktu yang sangat singkat), setiap pengguna lain mengklik tautan tersebut.

Skrip Instant.page mulai memuat halaman ini segera. Jadi, jika pengguna benar-benar mengklik tautan, banyak dari pengangkatan berat sudah dilakukan. Akibatnya, otak manusia merasakan bahwa waktu pemuatan situs hampir seketika.

Untuk mengaktifkan Instant.page di situs Anda, Anda cukup menginstal dan mengaktifkan plugin WordPress Instant Page.

Script ini cukup bagus. Saya sarankan mengunjungi situs Anda dan mengklik tombol "Uji Rasio Klik Anda" untuk melihat bagaimana otak menipu Anda.

perbarui: Saya telah menonaktifkan instant.page untuk saat ini dan akan menguji plugin FlyingPages dalam waktu dekat. Gijo Varghese berbagi dengan saya tambahan barunya dengan grup Facebook WPBeginner Terlibat dan tampaknya menggabungkan yang terbaik dari instant.page dan skrip tautan cepat.

Optimalkan gambar untuk web

Meskipun format gambar baru seperti webp sedang dikembangkan, 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 tim melakukan ini secara manual sehingga kami tidak mengunggah file besar ke server.

Kami tidak menunda mengunggah gambar saat ini, tetapi saya berencana untuk menambahkannya dalam waktu dekat karena dukungan pemuatan malas Google dibangun di Chrome 76a

Ada juga tiket di kernel WordPress untuk menambahkan fitur ini ke semua situs (harap ini segera terjadi) sehingga Anda tidak perlu menulis plugin khusus.

perbarui: Beberapa jam setelah menerbitkan posting blog, Google merilis plugin Native Lazy Load untuk WordPress.

Batasan permintaan HTTP + praktik terbaik

Bergantung pada plugin WordPress yang Anda gunakan, beberapa file CSS dan JavaScript tambahan ditambahkan setiap kali halaman dimuat. Permintaan HTTP tambahan ini bisa lepas kendali jika situs Anda mengandung banyak plugin.

Untuk informasi lebih lanjut, lihat Bagaimana plugin WordPress mempengaruhi waktu pemuatan situs web Anda.

Sebelum secara keliru menyimpulkan bahwa terlalu banyak plugin WordPress yang buruk, saya ingin memberi tahu Anda bahwa ada 62 plugin aktif yang berjalan di situs WPBeginner.

Jika memungkinkan, gabungkan file CSS dan JavaScript untuk mengurangi persyaratan HTTP. Beberapa plugin cache WordPress seperti WP Rocket dapat melakukan ini secara otomatis dengan fitur minimisasi.

Anda juga dapat mengikuti instruksi di artikel ini untuk melakukannya secara manual. Tim kami di WPBeginner melakukannya.

Selain permintaan HTTP yang menambahkan plugin dan tema, Anda juga harus mengetahui skrip pihak ketiga lain yang Anda tambahkan ke situs karena setiap skrip memengaruhi kecepatan situs Anda.

Misalnya, menjalankan skrip iklan Anda atau skrip pengalihan akan memperlambat situs Anda. Anda mungkin perlu menggunakan alat seperti Google Pengelola Tag untuk memuat skrip hanya jika perlu.

Jika Anda memiliki situs yang didukung iklan seperti TechCrunch atau TheNextWeb, ada sangat sedikit yang dapat Anda lakukan tentang hal itu, karena menghapus iklan bukan pilihan.

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

Pelajaran yang dipetik (sejauh ini) + pikiran terakhir saya

Ini adalah infrastruktur hosting yang sama sekali baru dan saya yakin saya akan belajar banyak pelajaran dari waktu ke waktu.

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

Dengan pengaturan multi-server baru, kami memperkenalkan proses penyebaran baru sehingga WPBeginner setara dengan semua situs produk Awesome Motive lainnya.

Ini berarti bahwa kami sekarang memiliki versi yang sesuai yang mengontrol kontrol bawaan dan bahwa ada langkah-langkah untuk mencegahnya menjadi gegabah (mis. Tambahkan plugin tanpa tes yang tepat, perbarui plugin dari dashboard tanpa tes, dll.).

Perubahan-perubahan ini juga menetapkan jalan bagi Anda untuk menyelesaikan pengembangan dan memberikan pemerintahan situs WPBeginner kepada tim pengembangan kami.

Saya telah mengalami ini selama bertahun-tahun, tetapi saya pikir waktunya tepat dan saya hanya harus menerimanya.

Pengaturan baru tidak memiliki cPanel atau WHM, jadi bagaimanapun juga saya tidak berguna karena saya tidak fasih lagi pada baris perintah.

Sejauh ini, kami telah belajar dua pelajaran bagus:

Pertama, memperbarui WordPress tidak semudah itu karena sinkronisasi / replikasi server. Ketika kami memulai blog pribadi saya (SyedBalkhi.com) di WordPress 5.2 yang diperbarui, file pembaruan di salah satu node web tidak disinkronkan dengan benar dan pemecahan masalah membutuhkan waktu lebih lama dari yang diharapkan. Kami sedang berupaya menciptakan proses build / test yang lebih baik untuk itu.

Kedua, kami membutuhkan komunikasi yang lebih baik antara tim karena kami mengalami kejang kecil dengan pengaturan penyeimbangan muatan yang salah yang menyebabkan waktu henti. Lebih buruk lagi, saya berada dalam penerbangan transatlantik dengan Turkish Airlines dan WiFi tidak berfungsi.

Untungnya, berkat waktu respon yang cepat dari tim hosting, semuanya teratasi. Namun, ini membantu kami menciptakan beberapa Prosedur Operasi Standar (SOP) baru untuk menangani insiden di masa depan dengan lebih baik.

Secara keseluruhan, saya sangat puas dengan pengaturan dan mengetahui bahwa beberapa pengaturan cache / optimasi 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 meluncurkan situs web, blog atau toko online, Anda TIDAK perlu setup bisnis yang canggih ini.

Saya selalu menyarankan Anda mulai secara bertahap dengan paket HostGator atau Bluehost bersama dan kemudian memutakhirkan infrastruktur hosting Anda saat bisnis Anda tumbuh.

Anda dapat menerapkan banyak pengaturan yang sebelumnya saya bagikan dalam paket hosting WordPress Anda saat ini.

Misalnya, paket Bluehost standar sudah menyertakan plugin cache bawaan yang dapat Anda gunakan, dan mereka juga menawarkan PHP secara default 7 pada.

Anda dapat menggabungkan ini dengan CDN + WAF seperti Sucuri untuk secara signifikan mempercepat situs Anda.

Jika Anda adalah perusahaan menengah yang menginginkan pengaturan hosting serupa, silakan hubungi saya menggunakan formulir kontak kami. Saya dapat membantu Anda mengambil arah yang benar.

Terima kasih khusus + kredit

Sementara saya mengucapkan terima kasih banyak pada merek HostGator dan Bluehost di artikel sebelumnya, saya ingin meluangkan waktu untuk mengakui dan menghargai orang-orang yang bekerja di belakang layar untuk mencapai ini.

Pertama, saya ingin mengucapkan terima kasih kepada tim kepemimpinan perlawanan 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 anggota lain dari tim pusat data. lakukan kerja keras dan wujudkan.

Saya ingin berterima kasih kepada Steven Job (pendiri DNSMadeEasy) karena dengan cepat menjawab pertanyaan saya dan membantu saya lebih memahami beberapa pengaturan. Saya juga ingin menyapa Tony Pérez dan Daniel Cid de Sucuri karena selalu membelakangi mereka.

Akhirnya, saya ingin memberikan penghargaan khusus kepada Chris Christoff. Dia adalah salah satu pendiri MonsterInsights dan cukup baik untuk membantu saya dengan banyak tes dan implementasi.

Saya sangat berharap Anda telah menemukan ini di balik layar studi kasus infrastruktur hosting WPBeginner bermanfaat. Anda juga dapat membaca panduan akselerasi WordPress final kami, yang jauh lebih ramah-pemula.

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

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.