Preskoči na vsebino 
Optimiziram hitrost WordPress brez vtičnikov z ročnimi posegi, ki vidno zmanjšajo čas nalaganja in zanesljivo zadenejo ključne spletne vitalne parametre. Tako ohranjam nadzor nad Zahtevevirov in stranskih učinkov ter odpraviti balast pri viru.
Osrednje točke
- Slike Pred nalaganjem dosledno stisnite in pretvorite v format WebP
- Leno nalaganje nativno prek atributa HTML namesto preobremenjenih razširitev
- Predpomnilnik prek strategije .htaccess/server in čiste glave
- Koda Zmanjševanje, povezovanje in izogibanje blokatorjem upodabljanja
- Balast odstraniti v WordPress, podatkovno bazo in teme
Zakaj optimiziram brez vtičnikov
Vtičniki se zdijo priročni, vendar dodajajo zahteve, skripte in sloge, ki blokirajo začetne poti upodabljanja in povzročajo, da je moj TTFB se poslabša. Vsaka dodatna odvisnost povečuje površino napak in otežuje analizo vzrokov za padec zmogljivosti. Z ročnimi ukrepi zmanjšam verige obremenitev in zmanjšam število aktivnih komponent. To mi omogoča, da zmanjšam splošne stroške, ostanem prilagodljiv in se hitreje odzovem na nove zahteve. Ta pristop preprečuje stranske učinke, ki jih povzročajo verige posodobitev, in zmanjšuje vzdrževanje na minimum. slim.
Slike naj bodo tanke: Formati, velikosti, stiskanje.
Velike slike ne uničijo časa do prvega bajta, vendar prevladujejo pri času prenosa in LCP, zato zmanjšam vsako sredstvo. vnaprej. Fotografije izvažam kot JPEG ali WebP, PNG pa uporabljam le za prave prosojnice. Dimenzije natančno prilagodim zahtevanim širinam prikazovalnika, namesto da bi naložil 4000px, ko zadostuje 800px. Nato jih dosledno stisnem s programi Squoosh, ImageOptim ali Photoshop in preverim vidne artefakte. Pri odzivnih različicah se zanašam na srcset/sizes in rad uporabljam to kratko Vodnik za odzivne sliketako da brskalnik samodejno naloži najmanjši smiselni vir in moj Prenos podatkov zmanjšuje.
Nativna uporaba lenobnega nalaganja
Slike in okvire iFrames naložim šele, ko pridejo v vidno polje, nativno prek HTML5, namesto da bi vključeval dodatne skripte, ki pomenijo Glavna nit obremenitev. Atribut loading="lazy" je v sodobnih brskalnikih povsem zadosten. Na ta način zmanjšam število začetnih bajtov in izenačim kritično fazo upodabljanja. Hkrati nadzor ostaja pregleden in odločam o tem, katere elemente nad pregibom namerno nalagam nestrpno. Kritične slike junakov dobijo loading="eager", vse drugo se naloži Odmik.
<img src="beispiel.jpg" alt="Primer slike" loading="lazy">
<iframe src="video.html" title="Videoposnetek" loading="lazy"></iframe>Ciljno pospeševanje programa LCP: Prednostne naloge in nosilci
Za izboljšanje stabilnosti največjega vsebinskega elementa Paint izrecno označim svoj največji element nad pregibom. Slikam dodelimo fetchpriority="high" in opredeljene dimenzije, tako da jih brskalnik preferira in CLS se izogiba. Po potrebi dodam prednakladanje, če je pot jasna.
<!-- LCP-Image priorisieren -->
<link rel="preload" as="image" href="/assets/hero.webp" imagesrcset="/assets/hero-800.webp 800w, /assets/hero-1200.webp 1200w" imagesizes="(min-width: 800px) 1200px, 100vw">
<img src="/assets/hero-800.webp"
srcset="/assets/hero-800.webp 800w, /assets/hero-1200.webp 1200w"
sizes="(min-width: 800px) 1200px, 100vw"
width="1200" height="700"
fetchpriority="high"
loading="eager"
decoding="async"
alt="Heroj">Za slike in vsebnike nastavim širino/viščino ali razmerje stranicza izključitev skokov v postavitvi. Za nekritična območja uporabljam vidnost vsebine: samodejno in . contain-intrinsic-sizetako da brskalnik pozneje upodobi območja zunaj vidnega polja, ne da bi premaknil postavitev.
/* Rezervacija nad zavihkom */
.hero { aspect-ratio: 12 / 7; }
/* Nevidne dele razporedite pozneje */
.section { content-visibility: auto; contain-intrinsic-size: 1000px; }
Posebej konfigurirajte predpomnjenje brskalnika
Ponavljajoči se obiskovalci bi morali statična sredstva nalagati iz predpomnilnika, zato čas izteka veljavnosti nastavim neposredno na ravni strežnika prek .htaccess ali v vHostu. Dolgi TTL za slike, zmerni za CSS/JS in kratki privzeti za HTML zagotavljajo ravnovesje med pravočasnostjo in hitrostjo. Pozoren sem na dosledno določanje različic datotek, tako da posodobitve začnejo veljati takoj kljub dolgim časovnim rokom TTL. V kombinaciji z ETags ali glavo Last-Modified se promet drastično zmanjša. S tem prihranim pasovno širino in skrajšam zaznavno Čas polnjenja.
ExpiresActive On
ExpiresByType image/jpg "dostop plus 1 leto"
ExpiresByType image/jpeg "dostop plus 1 leto"
ExpiresByType image/gif "dostop plus 1 leto"
ExpiresByType image/png "dostop plus 1 leto"
ExpiresByType text/css "dostop plus 1 mesec"
ExpiresByType application/pdf "dostop plus 1 mesec"
ExpiresByType text/javascript "dostop plus 1 mesec"
ExpiresByType application/x-javascript "dostop plus 1 mesec"
ExpiresDefault "dostop plus 2 dni"Strategija predpomnilnika, ustvarjanje različic in ponovna potrditev
Dolge TTL-je kombiniram s šifriranjem imen datotek, tako da odjemalci predpomnilnik uporabljajo enako dolgo (style.9c2a.css), posodobitve pa začnejo veljati takoj. Za pogosto spreminjajoče se svežnje nastavim Cache-Control: public, max-age=31536000, immutablemedtem ko je HTML kratek no-cache-strategije. Za dinamične odgovore imam raje Pogojne zahteve o ETag ali Nazadnje spremenjenotako da odjemalci le redko preverjajo veljavnost:
Header set Cache-Control "public, max-age=31536000, immutable"
Header set Cache-Control "no-cache, no-store, must-revalidate"Pri vsebini z različnim formatom (npr. WebP proti JPEG) preverim, ali Vary: Accept je v brskalniku Edge pravilno nastavljena; tako se prepreči, da bi se v predpomnilniku znašle napačne različice. Z gradbenimi cevovodi zagotavljam dosledno določanje različic, tako da nobeno sredstvo ne zastara na nenadzorovan način.
Racionalizacija CSS in JavaScript
CSS/JS zmanjšam lokalno v postopku izdelave in odstranim komentarje, presledke in neuporabljene Selektorji. Kritične sloge za nadpogoje zapakiram v vrstico, ostale pa naložim asinhrono ali kot odloženo datoteko. Skripte, ki blokirajo izrisovanje, premaknem na konec, jim dodam defer/async in poskrbim, da je število zunanjih knjižnic majhno. Pri ogrodjih preverim tresenje drevesa in obseg uvoza, da ne naložim vsega, kar redko uporabljam. Če je mogoče, združujem datoteke v svežnje, da zmanjšam število zahtevkov, ne da bi pri tem predpomnilnik uporabljal v zaledju. poslabšati.
Izboljšajte INP: Olajšajte glavno nit
Za nizko interakcijo z naslednjo barvo razdelim dolga opravila na manjše koščke, se izogibam razbijanju postavitve in ločim zapletene obdelovalce od interakcij. Uporabljam odlog za module, nastavite pasivne poslušalce dogodkov in načrtujte nekritično delo v času mirovanja:
document.addEventListener('touchstart', onTouch, { passive: true });
const expensiveInit = () => { /* ... */ };
requestIdleCallback(expensiveInit, { timeout: 1500 });
// Razdelitev dolgih opravil
funkcija chunkedWork(items) {
const batch = items.splice(0, 50);
// obdelati...
if (items.length) requestAnimationFrame(() => chunkedWork(items));
}V orodju DevTools izmerim dolga opravila, odstranim podvojene knjižnice in nadomestim pripomočke jQuery z nativnimi API-ji. Povzemam posodobitve DOM, uporabljam preoblikovanje namesto zgoraj/levo in zmanjšajte ponovne pretoke na minimum.
Znebite se balasta WordPress
Na produktivnih straneh ne potrebujem veliko funkcij WP, zato deaktiviram emojije, oEmbeds in dele API REST ter prihranim denar. Zahteve. To zmanjša glavo in manj skripte blokira Prva slika. Prav tako preverjam povratne povezave, povezave RSD in WLW manifest in jih izklopim. Izključim tudi povratne povezave in XML-RPC, če ne igrajo pomembne vloge. Na ta način zmanjšam površino napada in ohranim začetno fazo svetloba.
// Deaktiviranje emojijev
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
// zmanjšajte oEmbeds in REST API
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
add_filter('rest_enabled', '_return_false');
add_filter('rest_jsonp_enabled', '_return_false');Ukrotitev skript tretjih oseb
Koda tretjih oseb je pogosto največja zaviralna ploščica. Inicializiram jo z zamikom, vključim le tisto, kar je nujno potrebno, in jo naložim šele po interakciji ali soglasju. Prihaja analitika/sledenje async po Prvi barvi zamenjam družabne gradnike s statičnimi povezavami. Za okvirje iFrame uporabljam loading="lazy" in . peskovnikza omejitev neželenih učinkov. Vložki YouTube dobijo sliko predogleda in predvajalnik naložijo šele ob kliku - to prihrani več zahtevkov ob zagonu.
Vzdrževanje zbirke podatkov brez pomočnikov
Preko phpMyAdmina brišem odvečne revizije, praznimo prehodne dele in čistimo neželene komentarje, da so poizvedbe hitrejše. odgovor. Samodejno naložene možnosti preverjam zaradi prevelike velikosti, ker se znajdejo v vsaki poizvedbi. V manjših namestitvah je za optimizacijo tabel dovolj nekaj usmerjenih stavkov SQL. Preverim, ali so opravila cron viseča, in pospravim postmete, ki so jih pustili stari vtičniki. Redno vzdrževanje preprečuje, da bi poizvedbe ušle izpod nadzora in da bi moj zaledni del postal nepregleden. počasen bo.
Sistem Cron namesto WP Cron
Da bi zagotovil zanesljivo in učinkovito izvajanje opravil cron, jih ločim od nalaganja strani. Deaktiviram WP-Cron in načrtujem prava sistemska opravila, ki delujejo v mirnem času.
// v wp-config.php
define('DISABLE_WP_CRON', true);# crontab -e (vsakih 5 minut)
*/5 * * * * * * /usr/bin/php -q /path/to/wp/wp-cron.php >/dev/null 2>&1To pomeni, da noben cron ne blokira odzivnega časa redne zahteve, poleg tega pa je mogoče načrtovati ponavljajoča se opravila, kot sta prehodno čiščenje ali ustvarjanje zemljevida spletnega mesta.
Kritično preverite temo, vtičnike in pisave
Odstranim neaktivne teme in vse razširitve, ki podvajajo funkcije ali redko zagotavljajo kakršno koli korist, tako da Avtomatski polnilnik manj obremenitev. Pri pisavah zmanjšam različice na navadne/debele in dva sloga pisav, jih gostim lokalno in aktiviram prednaložitev za glavno datoteko. Zunanje vire pripravim s predpomnjenjem DNS, če jih res potrebujem. Za vdelane datoteke YouTube uporabljam sličice, da kasneje inicializiram okvirje iFrames. Na ta način ohranim nadzor nad potmi izrisovanja in ohranim začetni tovor majhen.
Pisave: obnašanje pri nalaganju, podnastavljanje, nadomestne možnosti
Spletne pisave močno vplivajo na zaznano hitrost. Uporabljam prikaz pisave: swap ali neobveznoda je besedilo takoj vidno. Kritično preverjam spremenljive pisave in podnastavljam območja Unicode, da prihranim bajte. Ciljno prednaložitev najpomembnejše datoteke WOFF2 zmanjša število datotek FOIT.
@font-face {
font-family: 'Brand';
src: url('/fonts/brand-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
obseg enokod: U+000-5FF; /* osnovni niz latinice */
}V nizu pisav določim čiste sistemske nadomestne pisave (npr. Segoe UI, Roboto, SF Pro, Arial), da bi čim bolj zmanjšal preskoke v postavitvi. O prilagajanje velikosti Metrične razlike prilagodim tako, da je sprememba z nadomestne na spletno pisavo komaj vidna.
Strežnik, PHP in protokoli
Brez prave infrastrukture bo vsaka optimizacija neuspešna, zato sem pozoren na hitre SSD-je, ažurne PHP-različic in podporo HTTP/2. OPcache, Brotli/Gzip in multipleksiranje HTTP/2 pospešujejo dostavo in zmanjšujejo blokade. Če je mogoče, razmislim o HTTP/3/QUIC ter skrbno preverim nastavitev in konfiguracijo TLS; ta kratek članek o Izvajanje protokola HTTP/3. Testi obremenitve in stresni testi mi pokažejo, kako se stran odziva pri obremenitvi. Tako zagotovim, da moj sklad podpira aplikacijo nosi in moji ukrepi so učinkoviti.
| Ponudnik gostovanja | Značilnosti | Napajanje | Podpora | Razmerje med ceno in zmogljivostjo |
|---|---|---|---|---|
| webhoster.de | SSD, PHP 8.*, HTTP/2 | ★★★★★ | ★★★★★ | ★★★★★ |
| Tekmovalec 1 | SSD, PHP 7.*, HTTP/2 | ★★★★☆ | ★★★★☆ | ★★★★☆ |
| Tekmovalec 2 | HDD, PHP 7.*, brez HTTP/2 | ★★★☆☆ | ★★★☆☆ | ★★★☆☆ |
Optimizacija PHP-FPM, OPcache in transporta
PHP-FPM sem nastavil tako, da zahteve ne končajo v čakalnih vrstah. pm, pm.max_children in . pm.max_requests Izmerim obremenitev. OPcache dobi dovolj pomnilnika, da se izogne ponovnemu polnjenju.
php.ini / www.conf
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
opcache.validate_timestamps=0
PHP-FPM (primer vrednosti)
pm = dynamic
pm.max_children = 20
pm.start_servers = 4
pm.min_spare_servers = 2
pm.max_spare_servers = 8
pm.max_requests = 500Na transportni plasti aktiviram Brotli pred Gzipom, pustim odprt Keep-Alive in preverim nadaljevanje TLS. Pri HTTP/2 preverim prednostno razvrstitev, tako da imajo prednost CSS/črke in slika LCP. Pri HTTP/3 spremljam izgubo paketov in prilagajam hitrost.
CDN, predpomnilnik in geografija
Za mednarodni promet uporabljam robno omrežje, da zmanjšam zakasnitve in ohranim statična sredstva blizu uporabnika. dostaviti. Pozoren sem na čiste ključe predpomnilnika, variantne glave (npr. za WebP) in dosledno izdajanje različic. Kritične strani HTML skrbno shranjujem v predpomnilnik, odzive API selektivno, slike pa agresivno. Kratek pregled Optimizacija CDN mi pomaga izogniti se pastem, kot je dvojno stiskanje. Tako združujem strežniško in robno predpomnjenje ter ohranjam nizke stroške. Oglejte si.
Formati, pogajanja in deduplikacija na robu
Slike predvajam v sodobnih formatih (WebP, po želji AVIF) in zagotovim, da CDN upošteva pogajanja o vsebini. Pomembno je pravilno Sprejmite-variante in edinstvenost ključev predpomnilnika. Izogibam se dvojnemu Gzipu s stiskanjem samo enkrat (strežnik ali Edge) in deaktivirajte zastavico na drugem koncu. Za HTML nastavim konservativne TTL in močne oznake ETag, sredstva pa ostanejo v agresivnem predpomnilniku.
Merjenje, ključne številke in določanje prednostnih nalog
Začnem z jasnim proračunom za zmogljivost in se osredotočim na LCP, CLS in INP namesto na vsako milisekundo. izolirani upoštevati. Podatki s terena so višji od laboratorijskih vrednosti, zato primerjam signale resničnih uporabnikov s preskusnimi serijami. Diagrami slapu razkrivajo sredstva, ki blokirajo, zemljevidi zahtevkov kažejo podvojene knjižnice in nepotrebne datoteke s pisavami. Vsako spremembo izmerim posebej, da hitro prepoznam regresijo. Šele ko se podatki dosledno izboljšajo, jih uvedem širše. s spletne strani.
Delovna metoda: čista namestitev, hitra vrnitev nazaj
V postopek uvajanja vključim preverjanje uspešnosti: V okviru izgradnje se ustvarijo artefakti z različicami, testi Lighthouse/DevTools se izvajajo v fazi pripravljanja, v živo pa se izvajajo samo preverjeni svežnji. Z zastavicami funkcij lahko nadzorovano uvajam tvegane spremembe in jih po potrebi takoj deaktiviram. To mi omogoča, da ohranjam stabilno zmogljivost, medtem ko razvijam nove funkcije.
Na kratko povzeto: Kako ga izvajam
Najprej optimiziram vsebino z največjim učinkom: zmanjšam velikost slik, aktiviram leno nalaganje, vstavim kritične dele CSS in blokiram skripte. premik. Nato zagotovim strategije predpomnjenja na strani brskalnika in strežnika, uredim funkcije WordPressa in zbirko podatkov ter odstranim nepotrebne vtičnike. Preverim infrastrukturo, HTTP/2/3, Brotli in OPcache ter zagotovim čiste postopke uvajanja z različicami. Po potrebi dodam CDN ter uredim glave in različice. Nazadnje iterativno preverjam ključne podatke, dokler LCP, CLS in INP niso stabilni in zeleni. Področja laž.
