🚀 Hur du snabbar upp en Elementor-sajt: 3 tips för PageSpeed Insights 2026
Elementor bygger sidor av widgets, stilar och skript, och varje anrop till en extern resurs lägger till millisekunder på laddtiden. Google Fonts, Font Awesome, Eicons: tre teckensnittsanrop som tillägget skapar som standard, även om du inte medvetet använder dem.
Resultatet: lägre poäng i PageSpeed Insights, ett uppsvällt vattenfallsdiagram i GTMetrix och besökare som lämnar innan sidan har renderats klart. Ändå erbjuder Elementor självt verktyg för att stänga av vart och ett av dessa anrop; du behöver bara veta vilka spakar du ska dra i.
Här är tre riktade optimeringar som tillsammans kan kapa upp till en sekund av laddtiden utan cachingtillägg eller CDN. Varje tips kommer med färdig kod för functions.php.
💡 Snabb översikt:
- Inaktivera Google Fonts från Elementor med en inbyggd inställning eller en hook i ditt tema, och hosta typsnitten lokalt
- Ersätt Elementors Font Awesome med en lokal Critical-version så att webbläsaren bara laddar de ikoner som faktiskt används
- Byt ut Eicons (Elementors egna ikoner) mot Font Awesome via CSS: en fil istället för två teckensnittspaket
1. Inaktivera Google Fonts från Elementor
Som standard laddar Elementor Google Fonts för varje typsnitt som används i designen, även om du redan hostar dessa typsnitt lokalt. I anropsvattenfallet syns detta som ett separat HTTP-anrop till fonts.googleapis.com som blockerar textrenderingen tills det är fullständigt inläst.
Den enklaste metoden är Elementors inbyggda inställning. Gå till Elementor → Settings → Performance och aktivera Inaktivera Google Fonts. Efter detta slutar tillägget att generera anrop till Googles CDN, och du kan ansluta typsnitt lokalt via ett barntema eller ett tillägg som OMGF (Optimize My Google Fonts).
Om inställningen inte är tillgänglig av någon anledning eller om du behöver programmatisk kontroll, lägg till den här koden i ditt barntemas functions.php:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
Hooken med prioritet 99 körs efter att Elementor har köat sina stilar och tar bort dem innan de matas ut i <head>. Efter inaktiveringen ansluter du typsnitten lokalt: ladda ner de vikter du behöver i WOFF2, placera dem i din temamapp och lägg till @font-face-regler i din CSS.
2. Ersätt Elementors Font Awesome med en lokal version
Elementor laddar hela Font Awesome-paketet (hundratals ikoner) när en typisk sajt i praktiken bara använder 5-7 av dem. Resterande bytes bränner helt enkelt din laddbudget.
Lösningen är ett lokalt Critical Font. Cachingtillägg (Swift Performance, LiteSpeed Cache) och specialiserade verktyg (OMGF) kan skanna sidan, samla en lista över faktiskt använda ikoner och bygga en nedbantad webfont.css som bara innehåller de glyfer som behövs. Filen placeras i /wp-content/fonts/ på din server: noll externa anrop.
För att stoppa Elementor från att ladda sin version och istället använda din lokala, lägg till detta i functions.php:
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 }
Den första raden köar din lokala version med hög prioritet. Den andra tar bort Elementors version med handtaget font-awesome direkt efter att tillägget har registrerat den. Funktionen replace_elementor_fa anger filsökvägen; ersätt den med den som genererats av ditt cachingtillägg.
Efter installationen, kontrollera vattenfallsdiagrammet i GTMetrix: anropet till Elementors font-awesome.min.css bör vara borta, och den lokala webfont.css bör laddas från din domän.
3. Ersätt Elementors ikoner (Eicons) med Font Awesome
Elementor använder sitt eget Eicons-teckensnitt för ikoner i widgets: pilar i bildspel, hamburgermeny-ikon, stängknapp. Hela paketet laddas så fort någon ikon används, vilket lägger till ytterligare ett anrop och renderingsfördröjning.
Eftersom du redan har lokal Font Awesome (steg 2) är det logiskt att byta Eicons till det: en teckensnittsfil istället för två. Den här tekniken ersätter CSS-klasserna .eicon och .eicon-menu-bar med glyfer från Font Awesome.
Börja med att ta bort Eicons från kön. Den här koden placeras i functions.php:
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 }
Funktionen hoppar över adminområdet så att Elementor-editorn fortsätter fungera utan problem, och tar bara bort handtaget elementor-icons på frontend.
Lägg nu till CSS-ersättningen, antingen via Appearance → Customize → Additional CSS eller i ditt barntemas stilmall:
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 }
Det första blocket omtilldelar Eicons basklasser till FontAwesome-typsnittet. Det andra och tredje sätter specifika glyfer: \f0c9 för hamburgerikonen (fa-bars) och \f00d för stängknappen (fa-times). Andra ikoner ersätts på samma sätt: öppna devtools, hitta widgetens klass och lägg till content med glyfkoden från Font Awesome cheat sheet.
Efter implementationen, kontrollera webbläsarens konsol efter teckensnittsladdningsfel och kör sidan genom PageSpeed Insights. Anropet till eicons.woff2 bör försvinna från rapporten.
⁉️🤔 Vanliga frågor
Fungerar den här metoden på aktuella Elementor-versioner?
Ja, alla tre tipsen är relevanta för den aktuella Elementor-serien. Hookarna
elementor/frontend/after_enqueue_stylesochwp_enqueue_scriptsär en del av tilläggets publika API och upprätthåller bakåtkompatibilitet. Den officiella Elementor-dokumentationen om att inaktivera Google Fonts beskriver den inbyggda växeln under Elementor → Inställningar → Prestanda. För tips #1, använd den först och behåll koden som en fallback för icke-standardteman.
Vad ska jag göra om ikoner försvinner i editorn efter att jag har ersatt Eicons?
Koden för att inaktivera Eicons kringgår adminområdet. Kontrollerna
is_admin()ochcurrent_user_can( 'manage_options' )säkerställer att teckensnittet ligger kvar i Elementor-editorn. Om ikoner ändå försvinner, kontrollera att du har lagt till koden ifunctions.phpför ditt aktiva tema, inte via ett snippet-tillägg som också kan köras på adminsidor.
Behöver jag installera ett cachingtillägg för dessa optimeringar?
För tips #1 och #3 krävs inget cachingtillägg; koden i
functions.phpräcker. För tips #2 (Critical Font) behöver du ett verktyg som bygger en nedbantad Font Awesome: Swift Performance, LiteSpeed Cache, OMGF Pro eller manuell sammanställning med verktygetfonttools. Utan detta steg flyttar du bara den fullständiga Font Awesome-laddningen från Elementors CDN till din server, med nästan inga besparingar.
Hur stor verklig förbättring av PageSpeed-poängen ger dessa tre tips?
Varje fall är olika, men här är en riktlinje: att inaktivera Google Fonts kapar 200-400 ms laddtid, lokal Font Awesome sparar ytterligare 150-300 ms, och att ersätta Eicons tar bort ett HTTP-anrop och sparar 50-150 ms. Totalt upp till en sekund av full laddtid, vilket på typisk hosting för 100-200 kr/månad höjer det mobila PageSpeed Insights-resultatet med 5-15 poäng.
Kan jag ta bort Font Awesome och Eicons helt?
Det kan du, om du är beredd att bygga om alla ikoner i Elementor som SVG. Det innebär att manuellt ersätta ikoner i widgets med uppladdade SVG-filer eller använda ett tillägg som Iconic. Arbetsinsatsen är hög (dussintals widgets på en sajt), men resultatet är den lättast möjliga frontend. För de flesta projekt är ett lokalt Critical Font (steg 2) en rimlig kompromiss.
Vad uppnår dessa förändringar på en riktig sajt?
De tre beskrivna teknikerna kräver inga premiumtillägg, ingen CDN och inget webbhotellsbyte. Det här är rent arbete med teckensnittsanrop, den mest underskattade hastighetskostnaden på Elementor-sajter.
Om du inte har gjort grundläggande WordPress-optimering än, börja med den kompletta guide för sajthastighet, som täcker caching, CSS/JS-komprimering och bildoptimering. När du kommer till teckensnitt, återvänd till dessa tre steg och implementera dem ett i taget, och kontrollera PageSpeed Insights efter varje.
Testa på en kopia av din sajt, säkerhetskopiera innan du redigerar functions.php och pressa ut maximal hastighet ur Elementor.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.