Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🚀 Kuidas Elementori saiti kiirendada: 3 nõuannet PageSpeed Insightsi jaoks 2026. aastal
WordPressi teemadSEO ja edendamine
5 min968 sõna

🚀 Kuidas Elementori saiti kiirendada: 3 nõuannet PageSpeed Insightsi jaoks 2026. aastal

Elementor ehitab lehti vidinatest, stiilidest ja skriptidest ning iga päring välise ressursi poole lisab laadimisaega millisekundeid. Google Fonts, Font Awesome, Eicons: kolm fondipäringut, mida plugin vaikimisi tekitab, isegi kui sa neid teadlikult ei kasuta.

Tulemus: madalamad skoorid PageSpeed Insightsis, pundunud päringute jada GTMetrixis ja külastajad, kes lahkuvad enne, kui leht täielikult renderdub. Ometi pakub Elementor ise tööriistu kõigi nende päringute keelamiseks; sa pead lihtsalt teadma, milliseid hoobasid liigutada.

Allpool on kolm sihitud optimeerimist, mis koos võivad laadimisajast ära lõigata kuni sekundi, ilma vahemälupluginateta või CDN-ita. Igaühe juurde kuulub kasutusvalmis kood faili functions.php jaoks.

💡 Kiirülevaade:

  • Keela Elementori Google Fonts, kasutades sisseehitatud seadet või haaki oma teemas, ja majuta fonte lokaalselt
  • Asenda Elementori Font Awesome kohaliku kriitilise versiooniga, nii et brauser laeb ainult tegelikult kasutatud ikoone
  • Vaheta Eicons (Elementori enda ikoonid) CSS-i abil Font Awesome'i vastu: kaks fondipaketti asemel üks fail

1. Keela Elementori Google Fonts

Elementori Google Fontsi päringud võrgupaneelil

Vaikimisi laeb Elementor Google Fontsi iga sinu kujunduses kasutatud fondi jaoks, isegi kui sa juba majutad neid fonte lokaalselt. Päringute jadas ilmub see eraldi HTTP-kutsena aadressile fonts.googleapis.com, mis blokeerib teksti renderdamise kuni täieliku laadimiseni.

Lihtsaim viis on Elementori sisseehitatud seade. Mine Elementor → Settings → Performance ja lülita sisse Disable Google Fonts. Pärast seda lõpetab plugin päringute genereerimise Google'i CDN-i ja sa saad fondid lokaalselt ühendada alamteema või pluginaga nagu OMGF (Optimize My Google Fonts).

Kui see seade pole mingil põhjusel saadaval või vajad programmilist kontrolli, lisa see kood oma alamteema faili functions.php:

1add_action( 'wp_enqueue_scripts', function() {
2    wp_dequeue_style( 'google-fonts-1' );
3    wp_dequeue_style( 'google-fonts-2' );
4}, 99 );

Prioriteediga 99 haak käivitub pärast seda, kui Elementor on oma stiilid järjekorda pannud, ja eemaldab need enne nende väljastamist <head>-s. Pärast deaktiveerimist ühenda fondid lokaalselt: laadi alla vajalikud paksused WOFF2-vormingus, paiguta need oma teema kausta ja lisa oma stiilidesse @font-face reeglid.

2. Asenda Elementori Font Awesome kohaliku versiooniga

Elementor laeb kogu Font Awesome'i paketi (sadu ikoone), samas kui tüüpiline sait kasutab neist tegelikult ainult 5-7. Ülejäänud baidid lihtsalt põletavad sinu laadimiseelarvet.

Lahendus on kohalik kriitiline font. Vahemälupluginad (Swift Performance, LiteSpeed Cache) ja spetsialiseeritud tööriistad (OMGF) suudavad lehte skannida, koguda nimekirja tegelikult kasutatud ikoonidest ja ehitada kärbitud webfont.css, mis sisaldab ainult vajalikke glüüfe. Fail läheb sinu serveris kausta /wp-content/fonts/: null välist päringut.

Selleks, et peatada Elementoril oma versiooni laadimine ja võtta kasutusele sinu kohalik versioon, lisa faili functions.php:

1add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2add_action( 'elementor/frontend/after_enqueue_styles', function() {
3    wp_dequeue_style( 'font-awesome' );
4} );
5 
6function replace_elementor_fa() {
7    wp_enqueue_style(
8        'font-awesome-local',
9        get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css',
10        array(),
11        '1.0.0'
12    );
13}

Esimene rida paneb sinu kohaliku versiooni kõrge prioriteediga järjekorda. Teine eemaldab Elementori versiooni käepidemega font-awesome kohe pärast seda, kui plugin selle registreerib. Funktsioon replace_elementor_fa määrab faili asukoha; asenda see oma vahemäluplugina genereeritud faili asukohaga.

Pärast seadistamist kontrolli päringute jada GTMetrixis: päring Elementori font-awesome.min.css failile peaks kaduma ja kohalik webfont.css peaks laadima sinu domeenilt.

3. Asenda Elementori ikoonid (Eicons) Font Awesome'iga

eicons-fondi päringud GTMetrixi kosel

Elementor kasutab vidinates ikoonide jaoks oma Eicons fonti: liuguri nooled, hamburgerimenüü ikoon, sulgemisnupp. Kogu pakett laaditakse alati, kui mõnda ikooni kasutatakse, lisades veel ühe päringu ja renderdamisviivituse.

eicons-faili HTTP-päringu üksikasjad GTMetrixi raportis

Kuna sul on juba kohalik Font Awesome (2. samm), on mõistlik Eicons selle vastu välja vahetada: kahe fondifaili asemel üks. See tehnika asendab CSS-klassid .eicon ja .eicon-menu-bar Font Awesome'i glüüfidega.

Esiteks eemalda Eicons järjekorrast. See kood läheb faili functions.php:

1add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2 
3function js_dequeue_eicons() {
4    if ( is_admin() || current_user_can( 'manage_options' ) ) {
5        return;
6    }
7    wp_dequeue_style( 'elementor-icons' );
8}

Funktsioon jätab administraatori ala vahele, nii et Elementori redaktor jätkab tõrgeteta tööd, ja eemaldab elementor-icons käepideme ainult esiküljel.

Nüüd lisa CSS-i asendus, kas Appearance → Customize → Additional CSS kaudu või oma alamteema stiililehel:

1.eicon,
2.eicon-menu-bar {
3    display: inline-block;
4    font: normal normal normal 14px/1 FontAwesome;
5    font-size: inherit;
6    text-rendering: auto;
7    -webkit-font-smoothing: antialiased;
8    -moz-osx-font-smoothing: grayscale;
9}
10 
11.elementor-menu-toggle i:before {
12    content: "\f0c9";
13    font-family: FontAwesome;
14}
15 
16.elementor-menu-toggle.elementor-active i:before {
17    content: "\f00d";
18    font-family: FontAwesome;
19}

Esimene plokk määrab Eiconsi baasklassidele ümber FontAwesome'i kirjatüübi. Teine ja kolmas määravad konkreetsed glüüfid: \f0c9 hamburgeriikooni jaoks (fa-bars) ja \f00d sulgemisnupu jaoks (fa-times). Teised ikoonid asendatakse samamoodi: ava arendajatööriistad, leia vidina klass ja lisa content koos glüüfikoodiga Font Awesome'i spikrilehelt.

Pärast rakendamist kontrolli brauseri konsooli fondi laadimise vigade suhtes ja jooksuta leht läbi PageSpeed Insightsi. Päring failile eicons.woff2 peaks aruandest kaduma.

⁉️🤔 Korduma kippuvad küsimused

Kas see meetod töötab praeguste Elementori versioonidega?

Jah, kõik kolm nõuannet on asjakohased praeguse Elementori liini jaoks. Haagid elementor/frontend/after_enqueue_styles ja wp_enqueue_scripts on plugina avaliku API osa ja säilitavad tagasiühilduvuse. Elementori ametlik dokumentatsioon Google Fontsi keelamise kohta kirjeldab sisseehitatud lülitit asukohas Elementor → Settings → Performance. Esimese nõuande puhul kasuta seda esmalt ja hoia koodi varuvariandina mittestandardsete teemade jaoks.

Mida teha, kui ikoonid kaovad redaktoris pärast Eiconsi asendamist?

Eiconsi deaktiveerimise kood läheb administraatori alast mööda. Kontrollid is_admin() ja current_user_can( 'manage_options' ) tagavad, et font jääb Elementori redaktoris alles. Kui ikoonid ikkagi kaovad, veendu, et lisasid koodi oma aktiivse teema faili functions.php, mitte läbi katkendplugina, mis võib samuti administraatori lehtedel käivituda.

Kas ma pean nende optimeerimiste jaoks installima vahemäluplugina?

Nõuannete #1 ja #3 jaoks pole vahemälupluginat vaja; koodist failis functions.php piisab. Nõuande #2 (kriitiline font) jaoks vajad tööriista, mis ehitab kärbitud Font Awesome'i: Swift Performance, LiteSpeed Cache, OMGF Pro või käsitsi koostamine fonttools utiliidiga. Ilma selle sammuta lülitad lihtsalt täieliku Font Awesome'i laadimise Elementori CDN-ilt oma serverisse, peaaegu ilma säästuta.

Kui palju reaalset PageSpeedi skoori tõusu need kolm nõuannet annavad?

Iga juhtum on erinev, kuid siin on orientiir: Google Fontsi keelamine vähendab laadimisaega 200-400 ms, kohalik Font Awesome säästab veel 150-300 ms ja Eiconsi asendamine eemaldab ühe HTTP-päringu ning säästab 50-150 ms. Kokku kuni sekund täislaadimisajast, mis tüüpilisel 10-20 $/kuus majutusel tõstab mobiilse PageSpeed Insightsi skoori 5-15 punkti võrra.

Kas ma saan Font Awesome'ist ja Eiconsist täielikult loobuda?

Saad, kui oled valmis kõik Elementori ikoonid SVG-na ümber ehitama. See tähendab vidinate ikoonide käsitsi asendamist üleslaaditud SVG-failidega või plugina nagu Iconic kasutamist. Töömaht on suur (kümneid vidinaid saidil), kuid tulemus on võimalikult kerge esikülg. Enamiku projektide jaoks on kohalik kriitiline font (2. samm) piisav kompromiss.

Mida need muudatused reaalsel saidil saavutavad?

Kolm kirjeldatud tehnikat ei nõua tasulisi pluginaid, CDN-i ega majutuse vahetust. See on puhtalt fondipäringutega tegelemine, kõige alahinnatum kiiruskulu Elementori saitidel.

Kui sa pole veel põhilist WordPressi optimeerimist teinud, alusta täielikust saidi kiiruse juhendist, mis hõlmab vahemälu, CSS/JS tihendamist ja piltide optimeerimist. Kui jõuad fontideni, tule nende kolme sammu juurde tagasi ja rakenda need ükshaaval, kontrollides PageSpeed Insightsi pärast iga sammu.

Testi oma saidi koopial, varunda enne faili functions.php muutmist ja pigista Elementorist maksimaalne kiirus välja.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.