Wordpress

Cara Nggawe Autoptimize kanggo Situs WordPress Sampeyan

Autoptimize minangka plugin optimasi WordPress gratis. Saliyane optimasi HTML, CSS, lan JavaScript, Autoptimize uga kalebu fitur optimasi sing ditargetake ing aspek liya saka situs WordPress modern.

Ing kirim iki, kita bakal nuduhake setelan plugin Autoptimize paling apik kanggo nambah kinerja lan kacepetan kaca situs WordPress sampeyan.

Kenapa Autooptimize?

Sadurunge nyilem menyang setelan Autoptimize sing paling apik, ayo goleki telung sebab kenapa Autoptimize minangka plugin optimasi sing apik.

  1. Versi gratis Autoptimize duwe set fitur lengkap kanggo ngoptimalake situs WordPress sampeyan.
  2. Autoptimize pancen minangka plugin optimasi lan ora nindakake caching kaca HTML. Iki tegese kompatibel karo kabeh host web - malah sing duwe konfigurasi caching kaca khusus kaya Behmaster.
  3. Autoptimize duwe luwih saka 1 yuta instal aktif ing repositori WordPress lan terus-terusan dianyari karo fitur-fitur anyar lan koreksi bug.

Ngoptimalake JS, CSS, lan Setelan HTML

HTML, CSS, lan JavaScript minangka roti lan mentega Autoptimize. Kaya plugin optimasi liyane, ngeduk set fitur lan setelan ekstensif Autoptimize bisa dadi tugas sing angel. Kanggo nggawe kabeh luwih gampang, kita wis nyusun setelan Autoptimize paling apik kanggo nambah kinerja situs sampeyan.

Pilihan JavaScript

Optimisasi JavaScript ing Autoptimize.
Optimisasi JavaScript ing Autoptimize.

Optimalake Kode JavaScript

Disaranake ngaktifake pilihan iki. Nalika "ngoptimalake kode JavaScript" diaktifake, Autoptimize bakal nyuda file JavaScript sampeyan.

File JS Agregat

Opsi "file JS agregat" Autoptimize bakal nggabungake kabeh file JavaScript dadi siji file. Ing jaman kepungkur, nggabungake file JS lan CSS minangka langkah kunci ing optimasi WordPress. Ing Behmaster, kita nggunakake server HTTP / 2 modern sing ndhukung download paralel lan multiplexing - iki tegese nggabungake file ora penting maneh amarga HTTP / 2 ngidini sawetara file diundhuh bebarengan. Kanthi ujar manawa, nglumpukake file CSS lan JS isih bakal nyebabake kacepetan kanggo jinis situs WordPress tartamtu, mula disaranake nyoba kacepetan kaca kanthi pilihan iki diaktifake lan dipateni.

Uga Aggregate Inline JS

Opsi "uga agregat inline JS" ngekstrak inline JS ing HTML sampeyan, lan nggabungake karo file JS sing dioptimalake Autoptimize. Wiwit pilihan iki bisa nimbulaké Tambah cepet ing ukuran cache Autoptimize kang, disaranake supaya opsi iki dipatèni kajaba sampeyan duwe alesan tartamtu kanggo ngaktifake.

Meksa JavaScript ing

Umume kasus, kita ora nyaranake meksa file JavaScript kanggo dimuat ing HTML situs sampeyan unsur. Meksa JS mbukak luwih awal bisa nyebabake unsur pamblokiran render sing bisa nyuda kacepetan kaca sampeyan. Yen sampeyan duwe file JavaScript sing kudu dimuat ing unsur, disaranake ora kalebu skrip kasebut saka Autoptimize.

Ngilangi Skrip saka Autoptimize

Opsi iki ngidini sampeyan ngilangi direktori tartamtu lan file JavaScript saka agregasi. Kanthi gawan, Autoptimize ora kalebu skrip ing ngisor iki.

  • wp-includes/js/dist/
  • wp-includes/js/tinymce/
  • js/jquery/jquery.js

Elinga yen nambahake skrip sing ora kalebu mung mengaruhi panggabungan kanthi standar. File JavaScript sing dikecualekake isih bakal diminimalisir kajaba "nyilikake file CSS lan JS sing ora kalebu" ora dicenthang ing "Pilihan Misc".

Tambah Coba-Catch Wrapping

Ngaktifake opsi "nambah bungkus nyoba-nyekel" bakal mbungkus kode JavaScript sampeyan ing blok-blok nyoba-nyekel. Opsi iki migunani kanggo masalah debugging sing disebabake dening minifikasi lan agregasi JS. Yen situs sampeyan mung bisa digunakake kanthi aktif "nambah bungkus nyoba-nyoba", disaranake nggarap pangembang kanggo mbukak file JavaScript kanggo ngenali sing nyebabake masalah amarga panggunaan pamblokiran coba-tangkap sing berlebihan bisa nyuda kinerja JS.

Autoptimize: plugin optimasi WordPress gratis sing sampeyan ora ngerti sing sampeyan butuhake…nanging bakal nggawe situs sampeyan cepet banget ⚡️Pandhuan iki nerangake persis kenapa sampeyan butuh 🚀Klik kanggo Tweet

Pilihan CSS

Ngoptimalake optimasi CSS.
Ngoptimalake optimasi CSS.

Ngoptimalake Kode CSS

Disaranake ngaktifake pilihan iki. Nalika "ngoptimalake kode CSS" diaktifake, Autoptimize bakal nyuda file CSS sampeyan.

File CSS agregat

Opsi "file CSS agregat" Autoptimize bakal nggabungake kabeh file CSS dadi siji file. Kaya sing wis kasebut sadurunge, fitur iki bisa uga ora entuk manfaat saka situs sing ndhukung HTTP/2. Disaranake A/B nguji opsi iki ing situs sampeyan kanggo nemtokake manawa ana pengaruh positif ing kacepetan kaca.

Uga Aggregate Inline CSS

Opsi iki bakal mindhah inline CSS menyang file CSS Autoptimize. Nalika mindhah inline CSS menyang file CSS browser-cacheable bisa nyuda ukuran kaca, disaranake ninggalake opsi iki dipatèni ing akeh kasus.

Gawe Data: URI kanggo Gambar

Nalika pilihan iki diaktifake, Autoptimize bakal base64-encode gambar latar mburi cilik lan sijine menyang CSS. Disaranake nyoba opsi iki kanggo ngukur impact ing kacepetan kaca sampeyan. Nalika ngodhe gambar menyang format base64 nyuda jumlah panjalukan HTTP, file representasi base64 biasane 20-30% luwih gedhe tinimbang mitra binar.

Inline lan Defer CSS

Inlining CSS kritis bisa nyebabake dorongan kacepetan sing signifikan kanggo sawetara situs. Ide ing kene yaiku gaya inline sing dibutuhake kanggo unsur sing "ing ndhuwur lipatan". Ing praktik, CSS inline biasane nargetake unsur kaya unsur struktural, kulawarga lan ukuran font global, lan gaya navigasi.

Kanthi nglebokake unsur-unsur kunci kasebut, file CSS lengkap sing luwih gedhe bisa dimuat ing wektu sabanjure tanpa mengaruhi tampilan kaca. Nalika sampeyan bisa ngekstrak gaya kritis kanthi manual, disaranake nggunakake alat kaya iki kanggo ngasilake gaya minangka titik wiwitan.

Nggawe CSS kritis.
Nggawe CSS kritis.

Sawise nggawe CSS kritis, salin lan tempel menyang setelan Autoptimize.

Inline lan nundha CSS ing Autoptimize.
Inline lan nundha CSS ing Autoptimize.

Langkah sabanjure yaiku nyoba pengalaman frontend situs sampeyan. Yen sampeyan ngelingi sawetara kelip-kelip aneh saka konten tanpa gaya (FOUC), sampeyan mesthine kudu ngenali unsur sing ora nganggo gaya kasebut lan nambah gaya sing cocog menyang Autoptimize kanggo inlining.

Autoptimize nawakake "daya-munggah" kanthi otomatis ngasilake CSS kritis kanggo kaca WordPress sampeyan. Saka pengalaman kita, fitur iki sok-sok bisa nyuda situs sampeyan amarga nggunakake panggilan API eksternal kanggo ngasilake CSS kritis. Mangkono, generasi CSS kritis wiwitan gumantung marang responsif server eksternal. Umume kasus, cara sing kasebut ing ndhuwur sing ora mbutuhake telpon API eksternal minangka solusi sing luwih resik.

Inline kabeh CSS

Kanggo umume situs, kita ora nyaranake nglebokake kabeh CSS amarga bisa nambah ukuran kaca kanthi dramatis. Salajengipun, inlining kabeh CSS ndadekake browser web ora bisa cache CSS.

Ngilangi CSS saka Autoptimize

Kanthi gawan, Autoptimize ora kalebu direktori ing ngisor iki lan file CSS saka agregasi. Yen sampeyan pengin nyegah Autoptimize kanggo nglumpukake file CSS, sampeyan bisa nambahake menyang dhaptar iki. Kaya karo pengecualian JavaScript, prilaku standar fitur iki ora nyegah file CSS dikurangi - mung dikumpulake.

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • dashicons.min.css

Pilihan HTML

Optimisasi HTML Autoptimize bisa mbantu nyuda ukuran kaca kanthi mbusak spasi putih.

Optimasi HTML ing Autoptimize.
Optimasi HTML ing Autoptimize.

Ngoptimalake Kode HTML

Disaranake ngaktifake fitur kode "optimalake HTML" amarga nyuda ukuran kaca kanthi mbusak spasi putih sing ora perlu ing HTML sampeyan. Nalika fitur iki kompatibel karo umume situs, mbusak spasi putih bisa nyebabake gangguan ing sawetara situs. Dadi, disaranake nyoba optimasi kode HTML sak tenane sadurunge digunakake ing lingkungan produksi.

Tansah Komentar HTML

Aktifake fitur iki yen sampeyan pengin nyimpen komentar HTML kanggo kaca sing dioptimalake.

Pilihan CDN

Yen sampeyan nggunakake CDN kaya BehmasterCDN kanggo nyepetake aset statis, sampeyan kudu nambah URL CDN menyang Autoptimize. Yen sampeyan nggunakake layanan proxy kanthi kapabilitas CDN kaya Cloudflare, sampeyan ora perlu ngatur apa wae ing opsi CDN Autoptimize.

Ngatur setelan CDN ing Autoptimize.
Ngatur setelan CDN ing Autoptimize.

Info Cache

"Info cache" Autoptimize nampilake informasi penting kaya lokasi lan ijin folder cache, uga ukuran total gaya lan skrip sing di-cache. Yen sampeyan ndeleng "Ora" ing jejere "Apa kita bisa nulis?", Sampeyan kudu nggarap host kanggo ndandani ijin folder kasebut.

Ngoptimalake informasi cache.
Ngoptimalake informasi cache.

Pilihan Misc

Autoptimize duwe sawetara setelan optimasi macem-macem. Yen sampeyan duwe masalah njupuk file CSS lan JS sing dioptimalake kanggo dimuat ing situs sampeyan, sampeyan bisa uga kudu ngatur maneh sawetara setelan ing ngisor iki.

Optimisasi macem-macem ing Autoptimize.
Optimisasi macem-macem ing Autoptimize.

Simpen Skrip/CSS Gabungan minangka File Statis

Disaranake ngaktifake pilihan iki kanggo nyimpen file agregat minangka file statis sacara lokal. Sampeyan bisa uga kudu mateni iki yen server sampeyan ora dikonfigurasi kanggo nangani kompresi file lan kadaluwarsa.

Minify File CSS lan JS sing Dibuwang

Disaranake ngaktifake pilihan iki kanggo mesthekake kabeh file CSS lan JS diminimalisir. Nanging, yen sampeyan ngerteni sawetara masalah sing gegandhengan karo minifikasi karo sawetara file CSS lan JS sing ora kalebu, sampeyan bisa nerusake lan mateni pilihan iki.

Uga Optimalake kanggo Log In Editors / Administrators

Disaranake ngaktifake iki kanggo mesthekake yen aset dioptimalake kanggo editor lan administrator sing mlebu log. Iki penting yen sampeyan nyoba setelan Autoptimize minangka pangguna sing mlebu.

Perlu hosting sing paling dhuwur, cepet, lan aman kanggo situs web e-commerce anyar sampeyan? Behmaster nyedhiyakake server kanthi cepet lan dhukungan kelas donya 24/7 saka ahli WooCommerce. Priksa rencana kita

Optimization Gambar ing Autoptimize

Autoptimize nduweni integrasi sing dibangun karo ShortPixel kanggo ngoptimalake gambar. Saliyane setelan kualitas gambar, integrasi Autoptimize uga ngidini sampeyan ngasilake lan ngladeni versi WEBP gambar sampeyan.

kanggo Behmaster pangguna, kita ora nyaranake nggunakake fitur optimasi gambar ing Autoptimize. Nanging, disaranake nggunakake plugin fitur lengkap saka ShortPixel utawa Imagify langsung. Kanthi plugin lengkap, sampeyan bakal duwe kontrol luwih akeh babagan setelan optimasi kalebu nulis ulang gambar kanggo nggunakake tag, kang dibutuhake kanggo support WEBP ing Behmaster.

Gambar kesed-load karo Autoptimize.
Gambar kesed-load karo Autoptimize.

Autoptimize uga kalebu fungsi males-loading kanggo gambar. Disaranake ngaktifake fitur iki kanggo nambah kacepetan kaca kanggo kaca-kaca abot gambar. Nalika males-loading diaktifake, Autoptimize ngidini sampeyan ngilangi kelas gambar lan jeneng file tartamtu supaya ora dimuat.

Setelan pangecualian migunani kanggo gambar kaya logo, lambang sosial, lan unsur gambar penting liyane sing ora kudu diisi kanthi kesed. Yen sampeyan nggoleki solusi sing menehi kontrol luwih akeh babagan males-loading, priksa pandhuan kita babagan gambar lan video males-loading ing WordPress.

Optimasi Ekstra ing Autoptimize

Optimizations ekstra ing Autoptimize.
Optimizations ekstra ing Autoptimize.

Google Fonts

Autoptimize duwe sawetara opsi beda kanggo ngoptimalake Google Fonts. Pilihan sing paling apik kanggo sampeyan bakal gumantung carane situs sampeyan nggunakake Google Fonts.

  • Ninggalake minangka.
  • Mbusak Google Fonts.
  • Gabungke lan link ing sirah.
  • Gabungke lan preload ing sirah.
  • Gabungke lan muat fonts asynchronously karo webfont.js.

Kita ora nyaranake nggunakake pilihan "ninggalake minangka" amarga ora menehi keuntungan kacepetan.

Yen Google Fonts dudu syarat sing penting banget ing situs sampeyan, mbusak lan nggunakake tumpukan font sistem bisa nduwe pengaruh positif ing kacepetan kaca sampeyan.

Yen sampeyan pengin nyimpen Google Fonts ing situs sampeyan, disaranake nyoba telung opsi pungkasan kanggo mangerteni sing paling apik kanggo situs sampeyan.

Mbusak Emojis

Opsi Autoptimize iki mbusak CSS lan JavaScript sing ana gandhengane karo emoji inti WordPress. Disaranake ngaktifake pilihan iki amarga bisa mbantu nyuda ukuran kaca sampeyan. Salajengipun, umume sistem operasi utama dikirim nganggo tumpukan font sing kalebu emojis. Mesthi, ana cara liya uga kanggo mateni emojis ing situs WordPress sampeyan.

Mbusak String Pitakonan saka Sumber Daya Statis

Yen sampeyan pengin mbusak string pitakon (eg ?ver=) saka sumber daya statis, sampeyan bisa ngaktifake pilihan iki. Mbusak strings pitakon ora bakal mengaruhi wektu mbukak, nanging bisa uga mbantu nambah skor situs sampeyan ing GTmetrix, Google Pagespeed, lan layanan uji kinerja liyane.

Prasambung menyang Domain Pihak Ketiga

Arahan prasambungan ngidini browser sampeyan nyambung menyang domain sing ditemtokake kanggo ngolah telusuran DNS lan negosiasi jabat tangan SSL sadurunge panjaluk HTTP lengkap dikirim.

Contone, yen situs sampeyan duwe gambar logo sing disedhiyakake https://site.behmaster.cdn.com/logo.png, sampeyan bisa nglatih Autoptimize kanggo nambah arahan preconnect kanggo nangani DNS dhisikan lan sambungan SSL ing unsur sadurunge panjalukan HTTP digawe ing unsur HTML sampeyan.

Sampeyan bisa nggunakake alat pangembang utawa inspektur browser kanggo nemokake domain eksternal sing penting kanggo disambungake. Ing kaca conto ing ngisor iki, ana panjalukan eksternal menyang domain ing ngisor iki.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Telung domain iki bisa ditambahake menyang dhaptar preconnect Autoptimize.

Temokake aset eksternal nganggo alat pangembang.
Temokake aset eksternal nganggo alat pangembang.

Kanggo alasan kinerja, disaranake nambahake ora luwih saka enem domain menyang dhaptar prasambung Autoptimize amarga nemtokake arahan prasambung kanggo akeh banget domain bisa nyebabake kinerja hit.

Panjaluk Khusus Preload

Petunjuk pramuat mrentahake browser web sampeyan supaya bisa ndownload aset sanalika bisa. Arahan iki migunani kanggo ngundhuh aset sing dibutuhake banget ing proses muat kaca. Ing praktik, pramuat asring digunakake kanggo nyepetake wektu mbukak font khusus kanthi ngemot sadurunge dijaluk ing CSS kaca.

Disaranake konsultasi karo pangembang babagan aset endi, yen ana, sing bakal dimuat ing situs WordPress sampeyan. Kaya akeh njiwet sing gegandhengan karo kinerja, preloading akeh banget aset bisa nyebabake situs sampeyan mbukak luwih alon.

File JavaScript Async

Fitur "file JavaScript async" Autoptimize ngidini sampeyan nemtokake file JavaScript eksternal tartamtu kanggo dimuat kanthi ora sinkron liwat async gendera HTML. Nalika ngemot file JS kanthi asinkron bisa ningkatake kacepetan kaca, disaranake nindakake tes sing cukup kanggo mesthekake yen ora ana fungsi situs sing kena pengaruh.

Yen sampeyan durung nggunakake Autoptimize, sampeyan pengin nambahake plugin optimasi WordPress iki menyang situs sampeyan ASAP sawise maca pandhuan iki 🚀Klik kanggo Tweet

Summary

Yen sampeyan ngerti carane ngapiki setelan kasebut, plugin Autoptimize minangka pilihan sing kuat kanggo pangguna WordPress sing pengin nambah kinerja situs.

Kanthi fitur dhasar kaya HTML lan CSS optimasi lan sing luwih maju, kaya integrasi CDN lan kemampuan kanggo nemtokake preconnect lan preload arahan, Autoptimize duwe kabeh sing perlu kanggo ngoptimalake kinerja frontend situs WordPress.

Yen sampeyan kepengin sinau luwih lengkap babagan optimasi WordPress lan carane ngoptimalake backend situs, priksa manawa sampeyan mriksa pandhuan kinerja WordPress lengkap.

Artikel web

0 komentar
Umpan Balik Inline
Ndeleng kabeh komentar
Bali menyang ndhuwur tombol