Skip to content Skip to sidebar Skip to footer

Cara Meningkatkan Kecepatan Kinerja WordPress

Konten [Tampil]
Cara Meningkatkan Kecepatan Kinerja WordPress

OPERATORDATA - Anda telah menghabiskan waktu berbulan-bulan merancang situs WordPress yang menakjubkan dan bekerja dengan klien dan kolaborator untuk menciptakan sesuatu yang benar-benar istimewa. Sekarang Anda telah meluncurkannya ke publik, dan yah! Anda sudah selesai. Tapi, tunggu... agak lambat. Anda tahu bahwa kecepatan situs sangat penting untuk keberhasilan bisnis Anda (dan bisnis klien Anda). Berkali-kali, Anda dihadapkan dengan statistik menakutkan seperti "hampir separuh pengguna web mengharapkan situs dimuat dalam 2 detik atau kurang", dan "pengguna cenderung meninggalkan situs yang tidak dimuat dalam 3 detik .”
Sangat mudah untuk merasa frustrasi pada titik ini dalam proyek, tetapi jangan khawatir. Sebelum Anda merobohkan pintu host web Anda atau menambahkan banyak plugin yang tidak jelas, ikuti langkah-langkah mudah ini untuk membuat situs WordPress Anda mulus, solid, dan super cepat.

Tolok ukur situs Anda dengan pengujian

Sebelum Anda memulai dan membuat perubahan apa pun pada situs Anda, penting untuk melakukan beberapa pengukuran dan menjalankan beberapa pengujian untuk mendapatkan beberapa tolok ukur. Ini akan membantu Anda mengetahui dengan tepat di mana Anda berada sekarang dan memastikan perubahan yang Anda buat benar-benar meningkatkan situs Anda (bukan memperburuk keadaan)! Untuk menguji kecepatan situs Anda, taruhan terbaik Anda adalah kombinasi dariTes Halaman Web dan Wawasan Google PageSpeed . WebPageTest memberi Anda ide bagus tentang waktu aktual (dalam detik) yang diperlukan situs untuk memuat, dan metrik ini akan membantu Anda mengetahui apakah itu back-end atau

front-end menyebabkan situs dimuat dengan lambat. Google PageSpeed Insights adalah yang terbaik untuk melihat bagaimana situs Anda dirender oleh browser dan dapat membantu Anda mengidentifikasi apa yang dapat Anda tingkatkan di front-end.

Setelah Anda memiliki tolok ukur ini, Anda akan dapat mulai memahami di mana Anda bisa
membuat peningkatan terbesar di situs Anda. Dan ingat: Setelah Anda membuat perubahan pada situs web Anda, ingatlah untuk mengujinya lagi untuk melihat bagaimana hal itu sesuai dengan angka asli Anda. Ini akan menghemat beberapa sakit kepala besar, untuk berjaga-jaga jika sesuatu memiliki efek sebaliknya dan memperlambat situs Anda!

Pastikan Anda mendapatkan tuan rumah terbaik

Sebelum kita melangkah lebih jauh, kita perlu berbicara tentang host WordPress Anda. Tidak peduli berapa banyak pekerjaan yang Anda lakukan, pada akhirnya, host Anda juga memainkan peran penting dalam kinerja situs Anda.

Meskipun label harga hosting bersama membuatnya tampak seperti tawar-menawar, ia datang dengan biaya yang berbeda: risiko kecepatan situs yang lambat, kinerja yang tidak teratur, dan waktu henti yang sering. Semua hal yang mempengaruhi keandalan dan kecepatan situs Anda. Tekanannya tidak sepadan, terutama ketika Anda memiliki kemampuan untuk memilih host WordPress yang dikelola (seperti Flywheel!) yang akan menangani sebagian besar masalah kinerja Anda.

Dengan platform WordPress hosting terkelola Flywheel, Anda akan mendapatkan kinerja terbaik bahkan dari situs web dengan lalu lintas tertinggi. Caching yang kuat menjadi standar di setiap situs, dan Anda selalu dapat menambahkan CDN untuk melihat situs Anda terbang. Selain itu, selalu ada tim dukungan terbaik kami, dasbor cantik, dan sejumlah besar fitur untuk membantu Anda membangun situs WordPress yang sangat cepat.

Audit plugin Anda

Penambahan plugin ke situs dapat membawa banyak fungsi dan hal menyenangkan yang membuat situs Anda jauh dari dasar, tetapi sayangnya, banyak yang membawa overhead kinerja. Kami telah melihat begitu banyak situs lambat yang segera disembuhkan hanya dengan menonaktifkan beberapa plugin. Cara terbaik untuk menghindari migrain dari mengelola plugin adalah dengan mengingat kinerja saat Anda mengembangkan situs. Anda tidak ingin menghabiskan waktu berminggu-minggu mengandalkan plugin,  hanya  untuk  itu  menjadi kutukan keberadaan Anda ketika Anda mengetahui itu membuat situs Anda sangat lambat. Baca ulasan, uji secara teratur, dan pastikan Anda memperbaruinya ke versi terbaru saat tersedia.

Semua pembicaraan negatif tentang plugin ini hanya untuk membuat Anda sadar akan potensi risiko yang terlibat saat menggunakan yang buruk. Ini biasanya plugin yang dikembangkan oleh pemrogram yang tidak berpengalaman atau yang membuat banyak kueri basis data dan memerlukan pemrosesan logika yang intensif. Namun, ada kabar baik! Ada ribuan plugin bermanfaat yang tidak membuat pengguna dan pembaca Anda frustrasi ketika mereka
merangkak di sekitar situs Anda. Trik sulapnya hanya menggunakan itu, dan bukan yang berkinerja lambat.

Anda dapat melacak plugin mana yang mungkin menyebabkan penurunan kinerja di situs Anda dengan cukup mudah. Kami biasanya menggunakan plugin yang disebutPemantau Kueri yang menyaring seluruh situs Anda dan melaporkan kembali berapa persentase total waktu buka setiap plugin yang bertanggung jawab untuk digunakan. Jika Anda serius tentang kecepatan, Anda akan menjalankan tes setiap kali Anda mengaktifkan plugin baru, untuk memastikan Anda tidak menginstal sesuatu yang akan mengorbankan kecepatan. Plus, dengan membandingkan plugin Anda langsung, Anda tidak akan membuang waktu untuk mengotak-atik plugin jika tidak akan berkinerja baik dalam jangka panjang.

Jika ada plugin yang Anda tidak bisa hidup tanpanya tetapi masih membuat situs Anda lambat, ada beberapa cara untuk terus menggunakannya. Umumnya, jika Anda menentukan bahwa sebuah plugin dimuat dengan lambat, langkah selanjutnya adalah berbicara dengan perusahaan hosting Anda untuk menambah memori di server Anda. Dengan Roda Gila, itu biasanya berarti meningkatkan rencana Anda ke tingkat berikutnya untuk mendapatkan lebih banyak memori dan, dengan demikian, lebih cepat. Menghilangkan kebutuhan untuk melakukan ini adalah rencana tindakan terbaik, tetapi mungkin ada beberapa plugin yang mungkin tidak ingin Anda buang (WooCommerce, misalnya).
 
Tembolok semuanya

Caching, baik di sisi server dan sisi klien, merupakan bagian penting dari kinerja situs WordPress. Setelah pengguna memuat situs Anda untuk pertama kalinya, Anda dapat memanfaatkan kemampuan browser untuk menyimpan konten situs tersebut secara lokal di cache, sehingga pada kunjungan berikutnya pengguna sudah memuatnya.
Demikian pula, di sisi server, memiliki lapisan caching bekerja sangat baik untuk melayani situs Anda dengan sangat cepat. Cara paling umum untuk mengaktifkan caching sisi server dengan WordPress adalah dengan menggunakan plugin W3 Total Cache. Plugin ini (atau yang serupa) diperlukan di hampir semua host.
Pengecualian untuk aturan ini adalah Roda Gila; kami menangani caching sisi server untuk Anda di belakang layar dengan Varnish. Menggunakan Varnish alih-alih plugin dapat meningkatkan kecepatan secara dramatis karena Varnish tidak pernah harus berbicara dengan PHP. Ini menyajikan salinan statis yang di-cache dari situs Anda dengan segera (bahkan tanpa menyentuh lapisan aplikasi PHP), sedangkan plugin masih dijalankan oleh PHP. Pada host terkelola seperti Flywheel, caching sisi server memberi tahu browser berapa lama untuk men-cache sesuatu dengan menyetel "header kedaluwarsa." Peramban tidak akan meminta informasi lebih lanjut kepada server jika tajuk tersebut menyuruhnya untuk tidak bertanya.
Anda terutama harus mulai berpikir tentang caching ketika Anda mulai menginstal plugin atau tema pihak ketiga.
Pengembang tema dan plugin dapat mengatur header mereka sendiri yang dapat mengesampingkan pengaturan default host Anda, yang berdampak buruk pada mekanisme caching.
WooCommerce, misalnya, menonaktifkan caching sisi server dengan mengatur cookie. Ini biasanya tidak terlalu terlihat ketika plugin atau tema menonaktifkan caching, jadi hal yang baik untuk dilakukan adalah menghubungi penyedia hosting Anda dan meminta mereka untuk memaksa cache situs Anda. Berhati-hatilah untuk tidak memaksakan caching pada halaman yang benar- benar membutuhkan cookie untuk berfungsi, seperti halaman keranjang dan checkout WooCommerce.
 
Gunakan CDN

Jaringan pengiriman konten (atau CDN) adalah jaringan server yang melayani situs web Anda dan asetnya dari lokasi berbeda berdasarkan lokasi pengguna.
Misalnya, Anda tidak menggunakan CDN dan situs Anda dihosting di San Francisco. Ketika seseorang dari, katakanlah, Barcelona mengunjungi situs Anda, mereka harus mengambil semua aset Anda dari server Anda di San Francisco. Jarak yang jauh antara dua lokasi jelas memakan waktu lebih lama daripada jika seseorang dari San Francisco memuat situs Anda yang dihosting di San Francisco. CDN, di sisi lain, melayani aset Anda dari sekelompok server berbeda yang berbasis di seluruh dunia, seperti New York, Seattle, Omaha, Paris, London, Beijing, DAN San Francisco (dan banyak lagi).
Idenya adalah bahwa pengguna akan menekan server yang paling dekat dengan mereka dan tidak mengorbankan waktu buka, karena ada jarak yang lebih kecil antara mereka dan server. Dengan CDN, orang yang sama dari Barcelona sekarang akan mencapai pusat data di London atau Paris, bukan San Francisco. Menggunakan CDN pasti akan meningkatkan kecepatan situs Anda bagi pengguna di seluruh dunia!
Beberapa CDN paling populer termasukLayanan Web Amazon ,CloudFlare , danMaxCDN . Kebanyakan dari mereka memiliki paket gratis, tetapi jika Anda menarik banyak pengunjung dan memiliki banyak aset, kemungkinan besar Anda harus membayarnya. Mereka biasanya cukup mudah diatur, tetapi jika Anda menginginkan solusi yang sangat apik, pastikan untuk memeriksanyaAdd-on MaxCDN Flywheel .

Kurangi ukuran statis Anda (aktiva)

Sekarang saatnya untuk melihat kode Anda. Jika Anda ingin mencapai kinerja yang optimal, ada beberapa pekerjaan yang harus dilakukan dengan aset statis sebelum mengunggahnya ke server Anda. Pekerjaan ini pada dasarnya bermuara pada kompresi dan minifikasi. Anda selalu ingin menyajikan jumlah aset sesedikit mungkin, dikompresi sebanyak mungkin, untuk membuat situs Anda secepat mungkin.
 
GAMBAR-GAMBAR
Gambar sering kali merupakan file terbesar pada halaman, bertanggung jawab atas penundaan terbesar dalam waktu buka halaman. Hal yang baik tentang gambar, bagaimanapun, adalah bahwa 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:
  1. Anda menyajikan gambar sesedikit mungkin dan
  2. Gambar-gambar itu dikompres sebanyak mungkin
Alat kompresi diperlukan untuk memeras sebanyak mungkin kelebihan pada gambar. GambarOptim adalah aplikasi Mac hebat yang melakukan ini dengan baik, bersama denganOptiPNG danjpegtran untuk digunakan dengan pelari tugas seperti Grunt.kecil png adalah alat kompresi berbasis web kami. Namun, melakukan hal ini dengan setiap gambar dapat menjadi rumit, dan terkadang bahkan tidak layak jika banyak orang yang menyumbangkan konten. Untungnya, ada beberapa alat khusus WordPress yang tersedia untuk membantu dalam hal ini.
Bila Anda memiliki beberapa ukuran gambar yang dipotong saat diunggah (biasanya ditentukan di sebagian besar tema), menggunakan plugin WordPress kompresi gambar sangat penting. Bahkan jika gambar awal yang Anda unggah dipangkas dan dikompresi mungkin, ketika WordPress menghasilkan gambar baru dari itu, ukuran baru itu tidak akan dikompresi.

Kami telah menggunakan dan merekomendasikanTinyPNG untuk WordPress danEwww Pengoptimal Awan untuk menangani kompresi dan optimalisasi gambar yang diunggah ke WordPress.

10 Tips Hidup Sehat di masa tua

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. Kami akan merekomendasikangerutuan , yang merupakan pelari tugas JavaScript yang mengeksekusi perintah untuk Anda saat mengembangkan. Ada plugin untuk Grunt yang disebutgrunt-contrib-sass yang hanya mengkompilasi semua file Sass Anda menjadi satu, mengecilkannya, dan mengompresnya. Lemparkan ke dalam
grunt-contrib-watch plugin di atas itu, dan itu akan menjalankan tugas Sass setiap kali Anda menyimpan file.
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.
 
JAVASCRIPT
Aturan emas untuk mengoptimalkan JavaScript sederhana: Sajikan file JavaScript sesedikit mungkin, 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.

Berhati-hatilah dalam menulis logika tema Anda

Ada banyak hal yang dapat Anda lakukan dari perspektif pengembangan tema untuk membuat kinerja back-end Anda setinggi mungkin. Loop jahat yang melakukan banyak perbandingan dan menggunakan banyak memori (jika, jika, jika, lain, jika, lain, dan seterusnya) pasti dapat memperlambat pemuatan halaman, karena semua logika itu membutuhkan waktu. Ada banyak artikel tentang PHP berkinerja tinggi, tetapi saran terbaik kami adalah berhati-hatilah dalam menulis logika tema Anda!
Salah satu alat yang telah menyelamatkan kita dari loop intensif logika yang membutuhkan waktu lama untuk memuat adalahAPI Transien . Transien WordPress menyimpan data yang di-cache dalam database untuk sementara, yang berarti logika Anda hanya perlu dijalankan sekali (setiap kali pengunjung pertama memuat halaman) dan kemudian hasilnya disimpan dalam database. ItuNaskah kuno memiliki dokumentasi yang baik tentang penggunaan transien, serta sejumlah artikel lain yang ditemukan dengan pencarian Google.

Sajikan aset di piring perak

Cara Anda menyajikan aset statis seperti gambar, CSS, dan JavaScript sangat penting untuk cara situs Anda dimuat. Ikuti tips berikut untuk mengoptimalkan setiap jenis aset!

CSS
Setelah stylesheet Anda dikompresi dan siap digunakan, cara termudah (dan sejauh ini, standar) untuk memuatnya adalah dengan mereferensikannya di<kepala>. Dengan begitu, browser memuat dan mem- parsingnya sebelum DOM lainnya dimuat.
Namun, ada teknik yang cukup baru di mana gaya "kritis" dimasukkan dalam<kepala>dan kemudian stylesheet lengkap dimuat secara asinkron menggunakan JavaScript. Gaya kritis didefinisikan sebagai gaya yang diperlukan untuk melukis semua yang pertama kali dilihat pengguna ("paro atas") saat mereka pertama kali memuat halaman Anda. Cara terbaik untuk mengambil gaya kritis dari halaman adalah dengan menggunakan Grunt (atau pelari tugas lain) dipasangkan dengan tugas sepertigerutu-kritis ataugrunt-kritiscss . Itu Generator web penthouse juga merupakan cara yang solid untuk mengekstraksi gaya kritis.
Setelah Anda menyiapkan CSS penting, itu semudah memasukkannya ke dalam <gaya> tanda di kepala.

<head>
            <style>/* semua gaya kritis Anda ada di sini
* /<gaya>

Sekarang untuk memuat stylesheet penuh, pemuat JavaScript sepertimemuatCSS Dibutuhkan. Grup Filamen memiliki lebih banyak lagiartikel yang luas tentang penggunaan teknik ini, termasuk contoh dengan loadCSS.

JAVASCRIPT
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, Grup Filamen telah melakukan banyak penelitian tentang ini dan memiliki beberapa proyek sumber terbuka yang dapat Anda gunakan jika Anda menginginkan waktu buka halaman yang super cepat (omong-omong, kami sama sekali tidak berafiliasi dengan Filament Group; kami hanya menganggap karya mereka luar biasa). Pendekatan terbaik tampaknya adalah memuat skrip secara dinamis dengan menyejajarkan fungsi kecil di<kepala>; yang kemudian menambahkan tag skrip tanpa memblokir sisa halaman.

Untuk informasi lebih lanjut, periksamemuat skrip JS .

Setelah Anda melalui praktik peningkatan kinerja ini, jika situs Anda masih sangat lambat, kami sarankan untuk menyewa pengembang yang dapat memeriksanya dan menemukan sumber masalahnya dan/atau memilih host WordPress baru.

Post a Comment for "Cara Meningkatkan Kecepatan Kinerja WordPress"