🚀 Kuinka nopeuttaa Elementor-sivustoa: 3 vinkkiä PageSpeed Insightsiin vuonna 2026
Elementor rakentaa sivut vimpaimista, tyyleistä ja skripteistä, ja jokainen pyyntö ulkoiseen resurssiin lisää millisekunteja latausaikaan. Google Fonts, Font Awesome, Eicons: kolme fonttipyyntöä, jotka lisäosa luo oletuksena, vaikka et tietoisesti käyttäisikään niitä.
Lopputulos: matalammat pisteet PageSpeed Insightsissa, paisunut vesiputouskaavio GTMetrixissä ja kävijöitä, jotka poistuvat ennen kuin sivu on kokonaan renderöitynyt. Elementor itsessään tarjoaa kuitenkin työkalut jokaisen näistä pyynnöistä poistamiseen; sinun tarvitsee vain tietää, mistä vivuista kääntää.
Alla on kolme kohdennettua optimointia, jotka yhdessä voivat leikata jopa sekunnin latausajasta ilman välimuistilisäosia tai CDN:ää. Jokaisen mukana tulee valmis koodi functions.php-tiedostoon.
💡 Pikakatsaus:
- Poista Google Fonts käytöstä Elementorissa sisäänrakennetun asetuksen tai teeman koukun avulla ja isännöi fontit paikallisesti
- Korvaa Elementorin Font Awesome paikallisella Critical-versiolla, jotta selain lataa vain tosiasiallisesti käytetyt kuvakkeet
- Vaihda Eicons (Elementorin omat kuvakkeet) Font Awesomeen CSS:n avulla: yksi tiedosto kahden fonttipaketin sijaan
1. Poista Google Fonts käytöstä Elementorissa
Oletuksena Elementor lataa Google Fontsit jokaiselle suunnittelussa käytetylle fontille, vaikka isännöisit kyseiset fontit jo paikallisesti. Pyyntöjen vesiputouskaaviossa tämä näkyy erillisenä HTTP-kutsuna osoitteeseen fonts.googleapis.com, joka estää tekstin renderöinnin, kunnes se on kokonaan ladattu.
Yksinkertaisin tapa on Elementorin sisäänrakennettu asetus. Mene kohtaan Elementor → Settings → Performance ja ota käyttöön Poista Google Fonts käytöstä. Tämän jälkeen lisäosa lakkaa luomasta pyyntöjä Googlen CDN:ään, ja voit liittää fontit paikallisesti child-teeman tai lisäosan, kuten OMGF:n (Optimize My Google Fonts), kautta.
Jos asetus ei jostain syystä ole käytettävissä tai tarvitset ohjelmallista hallintaa, lisää tämä koodi child-teemasi functions.php-tiedostoon:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
Koukku prioriteetilla 99 laukeaa sen jälkeen, kun Elementor on asettanut tyylinsä jonoon, ja poistaa ne ennen kuin ne tulostetaan <head>-osioon. Deaktivoinnin jälkeen liitä fontit paikallisesti: lataa tarvittavat leikkaukset WOFF2-muodossa, sijoita ne teemakansioosi ja lisää @font-face-säännöt tyyleihisi.
2. Korvaa Elementorin Font Awesome paikallisella versiolla
Elementor lataa koko Font Awesome -paketin (satoja kuvakkeita), kun tyypillinen sivusto käyttää niistä tosiasiassa vain 5-7 kappaletta. Loput tavut vain polttavat latausbudjettiasi.
Ratkaisu on paikallinen Critical Font. Välimuistilisäosat (Swift Performance, LiteSpeed Cache) ja erikoistyökalut (OMGF) voivat skannata sivun, kerätä listan tosiasiallisesti käytetyistä kuvakkeista ja rakentaa karsitun webfont.css-tiedoston, joka sisältää vain tarvittavat glyyfit. Tiedosto menee palvelimellasi kansioon /wp-content/fonts/: ei lainkaan ulkoisia pyyntöjä.
Pysäyttääksesi Elementorin oman version lataamisen ja ottaaksesi sen sijaan käyttöön paikallisen versiosi, lisää tämä functions.php-tiedostoon:
1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 ); 2 add_action( 'elementor/frontend/after_enqueue_styles', function() { 3 wp_dequeue_style( 'font-awesome' ); 4 } ); 5 6 function 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 }
Ensimmäinen rivi asettaa paikallisen versiosi jonoon korkealla prioriteetilla. Toinen poistaa Elementorin version kahvalla font-awesome heti sen jälkeen, kun lisäosa on rekisteröinyt sen. Funktio replace_elementor_fa määrittää tiedostopolun; korvaa se välimuistilisäosasi generoimalla polulla.
Asennuksen jälkeen tarkista vesiputouskaavio GTMetrixissä: pyynnön Elementorin font-awesome.min.css-tiedostoon pitäisi kadota, ja paikallisen webfont.css-tiedoston pitäisi latautua omalta verkkotunnukseltasi.
3. Korvaa Elementorin kuvakkeet (Eicons) Font Awesomeilla
Elementor käyttää omaa Eicons-fonttiaan vimpaimien kuvakkeisiin: liukusäätimen nuolet, hampurilaisvalikkokuvake, sulkupainike. Koko paketti latautuu aina, kun mitä tahansa kuvaketta käytetään, lisäten yhden pyynnön ja renderöintiviiveen.
Koska sinulla on jo paikallinen Font Awesome (vaihe 2), on järkevää vaihtaa Eicons siihen: yksi fonttitiedosto kahden sijaan. Tämä tekniikka korvaa CSS-luokat .eicon ja .eicon-menu-bar Font Awesomen glyyfeillä.
Poista ensin Eicons jonosta. Tämä koodi menee functions.php-tiedostoon:
1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' ); 2 3 function js_dequeue_eicons() { 4 if ( is_admin() || current_user_can( 'manage_options' ) ) { 5 return; 6 } 7 wp_dequeue_style( 'elementor-icons' ); 8 }
Funktio ohittaa hallinta-alueen, jotta Elementor-editori jatkaa toimintaansa ongelmitta, ja poistaa vain elementor-icons-kahvan julkisella puolella.
Lisää nyt CSS-korvaus joko Appearance → Customize → Additional CSS-kohdan kautta tai child-teemasi tyylitiedostoon:
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 }
Ensimmäinen lohko määrittää Eicons-perusluokat uudelleen käyttämään FontAwesome-kirjasintyyppiä. Toinen ja kolmas asettavat tietyt glyyfit: \f0c9 hampurilaiskuvakkeelle (fa-bars) ja \f00d sulkupainikkeelle (fa-times). Muut kuvakkeet korvataan samalla tavalla: avaa devtools, etsi vimpaimen luokka ja lisää content glyyfikoodilla Font Awesome -lunttilapusta.
Toteutuksen jälkeen tarkista selaimen konsoli fonttien latausvirheiden varalta ja aja sivu PageSpeed Insightsin läpi. Pyynnön eicons.woff2-tiedostoon pitäisi kadota raportista.
⁉️🤔 Usein kysytyt kysymykset
Toimiiko tämä menetelmä nykyisissä Elementor-versioissa?
Kyllä, kaikki kolme vinkkiä ovat relevantteja nykyiselle Elementor-linjalle. Koukut
elementor/frontend/after_enqueue_stylesjawp_enqueue_scriptsovat osa lisäosan julkista rajapintaa ja säilyttävät taaksepäin yhteensopivuuden. Virallinen Elementor-dokumentaatio Google Fontsien poistamisesta käytöstä kuvaa sisäänrakennetun valintakytkimen kohdassa Elementor → Asetukset → Suorituskyky. Vinkissä #1 käytä sitä ensisijaisesti ja pidä koodi varasuunnitelmana epästandardeille teemoille.
Mitä minun pitäisi tehdä, jos kuvakkeet katoavat editorista Eiconsien korvaamisen jälkeen?
Eiconsien deaktivointikoodi ohittaa hallinta-alueen.
is_admin()- jacurrent_user_can( 'manage_options' )-tarkistukset varmistavat, että fontti pysyy paikallaan Elementor-editorissa. Jos kuvakkeet silti katoavat, varmista, että lisäsit koodin aktiivisen teemasifunctions.php-tiedostoon, etkä pätkälisäosan kautta, joka saattaa suorittaa koodia myös hallintasivuilla.
Tarvitsenko välimuistilisäosan näihin optimointeihin?
Vinkkeihin #1 ja #3 välimuistilisäosaa ei tarvita; koodi
functions.php-tiedostossa riittää. Vinkkiin #2 (Critical Font) tarvitset työkalun, joka rakentaa karsitun Font Awesomen: Swift Performance, LiteSpeed Cache, OMGF Pro tai manuaalinen koostaminenfonttools-työkalulla. Ilman tätä vaihetta vaihdat yksinkertaisesti koko Font Awesome -latauksen Elementorin CDN:ltä palvelimellesi, jolloin säästöä ei juuri synny.
Kuinka suuren todellisen PageSpeed-pistemäärän nousun nämä kolme vinkkiä tuovat?
Jokainen tapaus on erilainen, mutta tässä suuntaviiva: Google Fontsien poistaminen käytöstä leikkaa 200-400 ms latausajasta, paikallinen Font Awesome säästää toiset 150-300 ms, ja Eiconsien korvaaminen poistaa yhden HTTP-pyynnön ja säästää 50-150 ms. Yhteensä jopa sekunti täydestä latausajasta, mikä tyypillisellä 10-20 $/kk hostingilla nostaa mobiilin PageSpeed Insights -pistemäärää 5-15 pisteellä.
Voinko jättää Font Awesomen ja Eiconsit kokonaan pois?
Voit, jos olet valmis rakentamaan kaikki Elementorin kuvakkeet uudelleen SVG-muodossa. Tämä tarkoittaa kuvakkeiden manuaalista korvaamista vimpaimissa ladatuilla SVG-tiedostoilla tai lisäosan, kuten Iconicin, käyttöä. Työmäärä on suuri (kymmeniä vimpaimia sivustolla), mutta lopputulos on mahdollisimman kevyt julkisivu. Useimmille projekteille paikallinen Critical Font (vaihe 2) on riittävä kompromissi.
Mitä nämä muutokset saavuttavat oikealla sivustolla?
Kuvatut kolme tekniikkaa eivät vaadi premium-lisäosia, CDN:ää tai hostingin vaihtoa. Kyse on puhtaasti fonttipyyntöjen kanssa työskentelystä, joka on aliarvostetuin nopeuskulu Elementor-sivustoilla.
Jos et ole vielä tehnyt WordPressin perusoptimointia, aloita täydellisestä sivuston nopeusoppaasta, joka kattaa välimuistituksen, CSS/JS-pakkauksen ja kuvien optimoinnin. Kun pääset fontteihin, palaa näihin kolmeen vaiheeseen ja toteuta ne yksi kerrallaan tarkistaen PageSpeed Insightsin jokaisen jälkeen.
Testaa sivustosi kopiolla, varmuuskopioi ennen functions.php-tiedoston muokkaamista ja purista maksiminopeus irti Elementorista.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.