Pengaturan Automatis yang Ideal + Cloudflare / StackPath CDN (2020)

Optimalkan secara otomatis adalah plugin yang bagus, tetapi untuk caching, WP Rocket biasanya # 1 di jajak pendapat Facebook.


Jadi mengapa Anda menggunakannya??

Karena beberapa host suka Ayo ayah dan Mesin WP blacklist kebanyakan plugin cache (karena mereka memiliki sistem caching bawaan mereka sendiri) tetapi mereka tidak melakukan hal-hal seperti mengoptimalkan HTML, CSS, JavaScript, Google Font, atau CDN (jaringan pengiriman konten). Jadi, sementara sistem caching host Anda mungkin bekerja dengan baik untuk caching, Autoptimize membantu melakukan “sisanya” dari barang-barang (memperbaiki item di GTmetrix + Pingdom). Hindari Google PageSpeed ​​Insights seperti itu bahkan tidak mengukur waktu muat.

Bahkan pengembang Autoptimize mengatakan pada halaman plugin-nya bahwa itu berfungsi paling baik ketika dikombinasikan dengan plugin cache. Saya merekomendasikan Swift jika Anda menggunakan rute gratis, dan WP Rocket jika Anda dapat melakukan $ 49 / tahun karena lebih mudah untuk mengkonfigurasi (itu juga apa yang saya gunakan dan saya memiliki skor 100% di GTmetrix) karena ia datang dengan banyak fitur yang tidak dimiliki kebanyakan plugin cache (pembersihan basis data, hosting kode Google Analytics secara lokal, detak jantung kontrol, dan integrasi dengan Cloudflare + CDN lainnya). Saya punya tutorial untuk WP Rocket, Cepat, WP Fastest Cache, W3TC, dan bahkan WP Super Cache.

Jadi mari kita konfigurasikan pengaturan Optimalkan. Saya juga akan menunjukkan kepada Anda cara menambahkan CDN (idealnya keduanya Cloudflare dan StackPath) karena masing-masing memiliki set pusat data sendiri, dan lebih banyak pusat data = pengiriman konten lebih cepat. CDN direkomendasikan dalam Panduan pengoptimalan WordPress.

Optimalkan plugin

1. JS, CSS, & HTML

Aktifkan semua ini untuk mengoptimalkan file JavaScript, CSS, dan HTML, kemudian lihat instruksi di bawah ini.

Mengoptimalkan JS JS Pengaturan HTML

Optimalkan Kode JavaScript

  • Agregat file-JS: aktifkan, ini menggabungkan file JavaScript seperti yang direkomendasikan oleh GTmetrix. Jika dinonaktifkan, masing-masing file akan dimuat dan tidak akan digabungkan.
  • Juga agregat JS sebaris: aktifkan, ini menggabungkan file JavaScript yang terletak di file HTML. Autoptimize memberikan peringatan yang pada dasarnya berarti jika merusak apa pun di situs Anda, baik kecualikan file JavaScript atau nonaktifkan ini.
  • Paksa JavaScript dalam : disable, kecuali Anda memiliki kesalahan JavaScript. Lebih baik Anda mencoba mencari file yang bermasalah dan mengecualikannya daripada memilih opsi ini karena ini membuat pemblokiran render JavaScript (tidak optimal untuk kecepatan).
  • Kecualikan skrip dari Autoptimize: jika Anda melihat kesalahan setelah mengaktifkan pengaturan JavaScript tertentu, temukan JavaScript yang bermasalah dan kecualikan file di sini.
  • Tambahkan bungkus try-catch: disable, kecuali Anda memiliki kesalahan JavaScript. Ini adalah cara lain untuk memperbaiki kesalahan JS tanpa harus mengaktifkan JavaScript secara langsung.

Optimalkan Kode CSS

  • Agregat file-CSS: aktifkan, hal yang sama dengan menggabungkan file JS hanya untuk CSS.
  • Juga agregat CSS sebaris: aktifkan, hal yang sama dengan menggabungkan file JS inline hanya untuk CSS. Aktifkan keduanya untuk lebih meningkatkan waktu muat + skor GTmetrix.
  • Hasilkan data: URI untuk gambar: nonaktifkan jika menggunakan CDN. MaxCDN (StackPath) memperingatkan kamu bahwa mengaktifkan ini akan memaksa gambar untuk dilayani dari layanan asal Anda, bukan CDN Anda. Mengaktifkan ini pada awalnya mungkin menghasilkan lebih sedikit permintaan HTTP, tetapi kemungkinan tidak setelah Anda menyiapkan CDN dan menyajikan gambar melalui itu.
  • Inline dan Defer CSS: aktifkan, Anda hanya dapat mengaktifkan opsi ini atau “sebaris semua CSS” yang tidak disarankan oleh Autoptimize di FAQ mereka. Mereka mengatakan “walaupun dengan menggarisbawahi semua CSS akan membuat pemblokiran non-render CSS, itu akan membuat halaman HTML dasar Anda menjadi lebih besar secara signifikan sehingga membutuhkan lebih banyak“ perjalanan pulang pergi ”.
  • Sebariskan semua CSS: disable, Autoptimize tidak merekomendasikan untuk mengaktifkan ini.
  • Kecualikan CSS dari Optimalkan: jika Anda melihat kesalahan setelah mengaktifkan pengaturan CSS tertentu, cari file CSS yang bermasalah dan kecualikan di sini. Catatan: opsi “minify CSS dan JS yang dikecualikan” di Misc Options perlu dinonaktifkan.

2. Opsi CDN

Di sinilah milik Anda URL CDN pergi (instruksi di bawah). Cloudflare tidak memberi Anda URL CDN (Anda akan mengubah server nama saja). URL Basis CDN khusus untuk StackPath, KeyCDN, dan CDN lainnya – bukan Cloudflare. Saya sarankan menggunakan StackPath + Cloudflare karena CDN Anda akan memiliki lebih banyak pusat data, dan lebih banyak pusat data = situs web yang lebih cepat.

Langkah 1: Mendaftar untuk CDN. Saya menggunakan StackPath yang memiliki 34+ pusat data yang banyak berlokasi di Amerika Serikat dan merupakan tempat sebagian besar pengunjung saya. Ini $ 10 / bulan dengan uji coba 30 hari gratis.

StackPath-Pusat Data

Langkah 2: Di dasbor StackPath, klik tab CDN, dan buat Situs CDN StackPath.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

* Salin alamat IP server Anda seperti yang diperlukan pada langkah 5 bagian ini.

StackPath-CDN-URL-Autoptimize

Langkah 3: Tempel URL CDN Anda ke Autoptimize dengan http: // atau https: // (mana pun yang Anda gunakan).

Optimalkan URL CDN

Langkah 4: Di StackPath pergi ke CDN → Pengaturan Cache, lalu klik “Bersihkan Semuanya.”

StackPath-Purge-Cache

Langkah 5: Daftar putih alamat IP server Anda di StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Langkah 6: Jalankan situs Anda di GTmetrix dan “jaringan pengiriman konten” harus berwarna hijau di YSlow.

CDN GTmetrix YSlow

3. Pengaturan Lain-lain

Berikut adalah pengaturan Lain-lain:

Optimalkan Pengaturan Lain-Lain

Simpan skrip agregat / css sebagai file statis – jika diaktifkan, ini berarti file CSS dan JS disimpan ke cache dan disajikan melalui server Anda, jadi jika hosting Anda tidak menangani ini, aktifkan.

Perkecil file CSS dan JS yang dikecualikan – jika Anda mengecualikan file CSS dan JavaScript tertentu, itu karena ada masalah ketika mencoba untuk mengoptimalkannya, dan Anda tidak ingin mereka diperkecil.

Juga mengoptimalkan untuk editor / administrator yang masuk – Nonaktifkan, Anda biasanya ingin menonaktifkan fitur kinerja di admin WordPress, termasuk fitur kinerja Cloudflare.

4. Pengaturan Gambar

Mengoptimalkan otomatis juga dapat membantu membuat gambar dimuat lebih cepat.

Optimalkan Pengaturan Gambar

Optimalkan Gambar – URL di situs web Anda akan diubah ke titik CDN ShortPixel. Ini seharusnya tidak mempengaruhi tampilan mereka selama itu kompresi lossless, tetapi mereka akan memuat lebih cepat.

Kualitas Optimasi Gambar – temukan keseimbangan unik Anda sendiri antara kompresi dan kualitas (saya menggunakan Glossy). Berikut adalah perbedaan di setiap level kompresi dari ShortPixel:

Tingkat Kompresi Gambar ShortPixel

  • Rugi: kebanyakan kompresi, sebagian besar penurunan kualitas.
  • Glossy: kompresi sedang, sedikit kehilangan kualitas.
  • Kerugian: kompresi rendah, kehilangan kualitas terendah.

Muat WebP di browser yang didukung – diaktifkan jika Anda menggunakan gambar WebP dan memuat gambar dengan malas.

Gambar-gambar malas – Saya pribadi tidak malas memuat gambar saya karena terus-menerus memuat gambar saat Anda menggulir halaman ke bawah dapat mengganggu pengguna. Ya, itu menghasilkan lebih sedikit permintaan dan direkomendasikan oleh Google untuk waktu pemuatan yang lebih cepat, tetapi saya merasa menjengkelkan. Ini sepenuhnya terserah Anda.

5. CSS Kritis

Ini mengacu pada Plugin peningkatan-daya criticalcss.com Autoptimize.

Itu membutuhkan premi paket berbayar dari criticalcss.com ($ 7 / bulan).

Plugin membuat aturan CSS kritis untuk memastikan halaman diberikan sebelum CSS penuh dimuat, meningkatkan “mulai render waktu.” Yang perlu Anda lakukan adalah menginstal plugin, mendaftar untuk sebuah rencana, masukkan Critical CSS API Key Anda ke bagian “Critical CSS” dari Autoptimize, dan plugin akan melakukan sisanya. Periksa plugin Halaman FAQ untuk detail tentang konfigurasi khusus.

Saya pribadi tidak menggunakannya dan lebih suka menggunakan $ 7 / bulan tambahan di server yang lebih kuat.

Autoptize criticalcss com power-up

Optimalkan Pengaturan CSS Kritis

6. Pengaturan Ekstra

Optimalkan-Pengaturan Ekstra

Google Fonts – aktifkan jika menggunakan Google Fonts yang memperlambat waktu muat karena ditarik dari sumber daya eksternal (pustaka Font Google). Saya lebih suka opsi “kombinasikan dan tautkan di kepala” karena ini meningkatkan waktu pemuatan tanpa visibilitas melihat pemuatan font (yang biasanya terjadi ketika memuat secara tidak sinkron. Juga uji opsi Google Font terakhir “kombinasikan dan muat font secara tidak sinkron dengan webfont.js”Dan lihat mana yang menghasilkan hasil yang lebih baik di GTmetrix.

Hapus Emoji – aktifkan (emoji buruk untuk waktu memuat).

Hapus string kueri dari sumber daya statis – string kueri biasanya dihasilkan oleh plugin dan tidak dapat diperbaiki (dalam GTmetrix / Pingdom) cukup dengan mengaktifkan ini, tetapi Anda dapat mencoba. Solusi yang lebih baik adalah memeriksa situs Anda untuk plugin CPU yang tinggi dan menggantinya dengan plugin yang ringan. Sebagian besar plugin CPU tinggi termasuk berbagi sosial, galeri, pembuat halaman, pos terkait, statistik, dan plugin obrolan langsung. Anda juga harus menghapus semua plugin yang tidak perlu dan membersihkan basis data (menggunakan plugin seperti WP-Optimalkan) untuk menghapus tabel yang ditinggalkan oleh plugin yang dihapus.

Pra-terhubung ke Domain Pihak Ketiga – membantu browser mengantisipasi permintaan dari sumber daya eksternal (Google Fonts, Analytics, Maps, Tag Manager, toko Amazon, dll). Ini biasanya akan muncul sebagai “kurangi pencarian DNS” dalam laporan GTmetrix Anda, tetapi di bawah ini adalah contoh umum.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Muat Sebelumnya Permintaan Khusus – Anda dapat menemukan lebih lanjut tentang preload dan petunjuk sumber daya browser dari WP Rocket, tetapi ini pada dasarnya membuatnya jadi file tertentu diunduh sebagai prioritas tinggi.

Async Javascript-Files – ini berarti ada sesuatu yang mencegah pemuatan konten di atas flip dengan cepat. Tutorial ini render memblokir JavaScripts menjelaskannya dengan baik, tetapi jika Anda melihat kesalahan JavaScript di GTmetrix dan Pingdom, the Plugin JavaScipt Async mungkin melakukan trik.

Optimalkan Video YouTube – jika situs Anda memiliki video, WP YouTube Lyte lazy memuatnya sehingga hanya dimuat saat pengguna menggulir ke bawah dan mengklik tombol putar, sehingga menghilangkan permintaan awal ke server YouTube. Ini dapat mencukur beberapa detik dari waktu memuat konten dengan video, karena mereka adalah salah satu elemen terberat pada halaman. WP Rocket dan Swift Performance memiliki ini bawaan untuk pengaturannya, jadi Anda tidak memerlukan ini jika Anda menggunakan salah satunya sebagai plugin cache Anda.

7. Optimalkan Lebih Banyak

Jika Anda ingin lebih mengoptimalkan situs Anda, berikut adalah alat yang disarankan:

WP Rocket – memberi peringkat plugin cache # 1 di banyak jajak pendapat Facebook dan memiliki banyak opsi yang tidak termasuk dengan Optimalkan (pembersihan basis data, kontrol detak jantung, hosting Google Analytics secara lokal, mengganti YouTube iframe dengan gambar pratinjau, menambahkan Cache Browser ke Facebook Pixel, dll). WP Rocket juga menangani hampir semua yang dilakukan Autoptimize, jadi Anda hanya perlu 1 plugin untuk semua optimasi kecepatan tersebut. Itu sebabnya sangat bagus. Anda juga bisa mendapatkan diskon 10% di sini.

ShortPixel – Plugin pengoptimalan gambar yang populer dan yang saya gunakan.

StackPath – CDN dengan 30+ pusat data. Sangat mudah untuk dipasang; cukup mendaftar untuk paket ($ 10 / bulan) lalu salin / tempel URL CDN Anda ke opsi Autoptimize CDN URL.

SiteGround – Biasanya memberi peringkat # 1 host di jajak pendapat Facebook dan juga digunakan oleh Yoast.

Yoast-on-Twitter-Kami-baru saja beralih ke Siteground

Polling Hosting 2019

2017-WordPress-Hosting-FB-Poll

Rekomendasi Elementor Hosting

Rekomendasi Hosting Juli 2019

WordPress-Host-Poll-Aug-2018

Shared-Hosting-Poll-2017

2019-Hosting-Poll

Go-To-Hosting-Company

WordPress-Hosting-Poll-2017

Dikelola-Hosting-Poll

WooCommerce-Hosting-FB-Poll

Polling 2016-Web-Hosting

Poll-Penyedia-Hosting-WordPress-Terbaik

Best-Web-Hosting-2019-Poll

Polling Hosting Ramah WP

2016-WordPress-Hosting-FB-Poll

Hosting Favorit Untuk Elementor

Rekomendasi Hosting 2018

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Hosting-Poll-Untuk-Kecepatan

WordPress-Hosting-Poll-Juni-1

SiteGround-Recommendation

2014-Managed-WordPress-Hosting-FB-Poll

Poll-Penyedia-Web-Hosting-Terbaik

Hosting-Poll-Feb-2019

Hosting-Rekomendasi-Poll

Bluehost vs SiteGround

Poling Host Web WordPress

Orang biasanya bermigrasi karena mereka teknologi kecepatan jauh lebih cepat daripada EIG atau GoDaddy:

Beralih ke SiteGround

Migrasi Waktu Muat SiteGround

Bluehost ke SiteGround GTmetrix

HostGator Ke SiteGround

SiteGround Google PageSpeed ​​Insights

100 Skor Sempurna Di SiteGround

SiteGround Genesis

Kecepatan Disampaikan Oleh SiteGround

Berkurangnya Waktu Pemuatan Dengan SiteGround

Waktu Respons SiteGround Baru

HostGator Ke Migrasi SiteGround

Waktu Respons SiteGround Di Joomla

Beralih ke Hosting SiteGround

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround Di Joomla

SiteGround Mengurangi Waktu Muat

SiteGround Speedy Hosting

Waktu Respons SiteGround Baru

Peningkatan Waktu Respons SiteGround

SiteGround juga migrasi gratis dengan GrowBig+.

Cloudways – lebih cepat dari SiteGround (cloud hosting, tidak dibagikan) dan juga dinilai tinggi dalam jajak pendapat Facebook. Mulai dari $ 10 / bulan dengan mereka Paket DigitalOcean. Mereka menawarkan 1 migrasi gratis (yang telah saya lakukan) dan inilah yang terjadi pada waktu respons server saya:

SiteGround-vs-Cloudways-Cloud-Hosting

Rekomendasi Hosting Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

Saran Hosting WordPress

Waktu Respons Cloudways

Mesin WP Ke Cloudways

Tanpa judul

Cloudways Pingdom Load Times

Cloudways-Facebook-Review

Anda bisa mendapatkan potongan 25% untuk 2 bulan pertama Cloudways dengan kode promo OMM25.

Kinsta – Hosting premium $ 30 / bulan dan sementara saya belum mencobanya, saya belum mendengar apa pun selain hal-hal luar biasa tentang kecepatan, dukungan, waktu kerja, dan hampir semua hal tentang hosting Kinsta.

Perfmatters – plugin oleh Kinsta yang menangani apa yang saya suka sebut “optimasi lain-lain” seperti menonaktifkan plugin secara selektif, membatasi revisi posting, menonaktifkan autosave, hosting Google Analytics secara lokal, dan banyak lagi. Ini menangani 10% kecepatan terakhir.

Beberapa di antaranya direkomendasikan oleh Autoptimize, yang lain tidak:

Optimalkan Add Ons

8. Cloudflare

Optimalisasi tidak memiliki pengaturan untuk ditambahkan Cloudflare ’CDN, tapi ini mudah diatur. Dan Anda pasti harus karena ini menambah 200 pusat lainnya ke jaringan pengiriman konten Anda (CDN).

Pusat Data Cloudflare

Langkah 1. Daftar ke Cloudflare dan Anda akan diminta untuk menambahkan situs Anda dan memulai pemindaian.

cloudflare-begin-scan

Langkah 2. Setelah pemindaian selesai, pilih paket gratis, lalu Cloudflare akan membawa Anda melewati satu set halaman. Anda pada akhirnya akan dibawa ke halaman di mana Cloudflare menetapkan Anda 2 server nama.

Cloudflare-Name-Servers-Dashboard

Langkah 3. Masuk ke pendaftar domain Anda (mis. Namecheap) dan lakukan pencarian Google untuk “cara mengubah server nama di Namecheap” (hanya cari pendaftar domain Anda), lalu ikuti instruksi mereka. Anda akan menyalin 2 server nama yang disediakan oleh Cloudflare dan menempelkannya ke opsi server nama khusus di pendaftar domain Anda. Biarkan 72 jam untuk propagasi.

Server nama Cloudadddy Cloudflare

Itu dia!

Apa berikutnya?

Tonton Video Saya – Ini adalah video 42 menit, tapi saya mencakup hampir semua hal (cap waktu dalam deskripsi video) dan Anda harus mempelajari banyak informasi hebat tentang kecepatan situs WordPress:

Ingin Tahu Bagaimana Saya Mendapatkan Skor 100% Di GTmetrix?
Lihat panduan pengoptimalan kecepatan WordPress lengkap saya yang memiliki lebih dari 38 kiat dalam memperbaiki item GTmetrix / Pingdom termasuk meningkatkan ke PHP 7, menyajikan gambar berskala, menentukan dimensi gambar, pembersihan basis data, hosting Google Analytics secara lokal, WP Disable, dan lain-lain.

Pertanyaan yang Sering Diajukan

&# x1f680; Apakah saya memerlukan plugin kecepatan lain selain Autoptimize?

Ya, Anda biasanya ingin juga menggunakan plugin untuk caching, optimasi gambar, pembersihan basis data, kontrol detak jantung, dan menonaktifkan plugin secara selektif. Saya merekomendasikan WP Rocket, ShortPixel, dan Perfmatters untuk mereka.

&# x1f680; Bagaimana Anda mengatur CDN dengan Autoptimize?

Pilih CDN Anda (saya menggunakan StackPath), salin URL CDN Anda, dan rekatkan ke bidang UR CDN Autoptimize.

&# x1f680; Bagaimana Anda mengoptimalkan Google Fonts dengan Autoptimize?

Saya sarankan menggunakan opsi Combine And Link In Head, dan untuk menghubungkan kembali font Anda menggunakan Autoptimize.

&# x1f680; Apakah Autoptimize menangani caching?

Tidak, Anda harus menggunakan plugin terpisah untuk caching. Saya merekomendasikan WP Rocket atau Pengoptimal SG jika menggunakan SiteGround.

&# x1f680; Bagaimana Anda mengonfigurasi pengaturan Autoptimize?

Semuanya tercantum dalam tutorial ini – cukup perhatikan laporan GTmetrix Anda dan item spesifik apa yang perlu diperbaiki. Jika mengonfigurasi pengaturan dalam Optimisasi tidak memperbaikinya, pertimbangkan untuk menggunakan plugin lain untuk memperbaiki item.

Pertanyaan? Jatuhkan aku satu baris!
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map