Skip to content

Alt om WordPress, webutvikling — og mer til

🚀 Slik øker du hastigheten på et Elementor-nettsted: 3 tips for PageSpeed Insights i 2026
WordPress-temaerSEO
6 min1,136 ord

🚀 Slik øker du hastigheten på et Elementor-nettsted: 3 tips for PageSpeed Insights i 2026

Elementor bygger sider av widgets, stiler og skript, og hver forespørsel til en ekstern ressurs legger til millisekunder i lastetid. Google Fonts, Font Awesome, Eicons: tre skriftforespørsler som plugin-en oppretter som standard, selv om du ikke bevisst bruker dem.

Resultatet: lavere poengsum i PageSpeed Insights, en oppblåst vannfallsgraf i GTMetrix, og besøkende som forlater siden før den er ferdig rendret. Likevel gir Elementor selv verktøy for å deaktivere hver av disse forespørslene; du trenger bare å vite hvilke spaker du skal dra i.

Nedenfor finner du tre målrettede optimaliseringer som til sammen kan kutte opptil ett sekund av lastetiden uten caching-plugins eller et CDN. Hver av dem kommer med ferdig kode for functions.php.

💡 Rask oversikt:

  • Deaktiver Google Fonts fra Elementor ved hjelp av en innebygd innstilling eller en hook i temaet ditt, og host skriftene lokalt
  • Erstatt Elementors Font Awesome med en lokal Critical-versjon slik at nettleseren bare laster ikonene som faktisk brukes
  • Bytt ut Eicons (Elementors egne ikoner) med Font Awesome via CSS: én fil i stedet for to skriftpakker

1. Deaktiver Google Fonts fra Elementor

Google Fonts-forespørsler fra Elementor i Nettverk-panelet

Som standard laster Elementor Google Fonts for hver skrift som brukes i designet ditt, selv om du allerede hoster disse skriftene lokalt. I forespørsels-vannfallet vises dette som et separat HTTP-kall til fonts.googleapis.com som blokkerer tekstrendring til det er ferdig lastet.

Den enkleste tilnærmingen er Elementors innebygde innstilling. Gå til Elementor → Settings → Performance og aktiver Deaktiver Google Fonts. Etter dette vil plugin-en slutte å generere forespørsler til Googles CDN, og du kan koble til skrifter lokalt via et child theme eller en plugin som OMGF (Optimize My Google Fonts).

Hvis innstillingen er utilgjengelig av en eller annen grunn, eller du trenger programmatisk kontroll, legg til denne koden i child theme-ets functions.php:

1add_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 kjøres etter at Elementor har satt sine stiler i kø og fjerner dem før de skrives ut i <head>. Etter deaktivering kobler du til skriftene lokalt: last ned de nødvendige vektene i WOFF2, plasser dem i temamappen din, og legg til @font-face-regler i stilsettet ditt.

2. Erstatt Elementors Font Awesome med en lokal versjon

Elementor laster hele Font Awesome-pakken (hundrevis av ikoner) når et typisk nettsted faktisk bare bruker 5-7 av dem. De resterende bytene brenner rett og slett opp lastbudsjettet ditt.

Løsningen er en lokal Critical Font. Caching-plugins (Swift Performance, LiteSpeed Cache) og spesialiserte verktøy (OMGF) kan skanne siden, samle en liste over ikoner som faktisk brukes, og bygge en trimmet webfont.css som bare inneholder de nødvendige glyfene. Filen legges i /wp-content/fonts/ på serveren din: null eksterne forespørsler.

For å stoppe Elementor fra å laste sin versjon og i stedet plukke opp din lokale, legg til dette i 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}

Den første linjen setter din lokale versjon i kø med høy prioritet. Den andre fjerner Elementor-versjonen med handle-en font-awesome rett etter at plugin-en har registrert den. Funksjonen replace_elementor_fa spesifiserer filbanen; erstatt den med den som genereres av caching-pluginen din.

Etter oppsett, sjekk vannfallsgrafen i GTMetrix: forespørselen til Elementors font-awesome.min.css skal forsvinne, og den lokale webfont.css skal lastes fra ditt domene.

3. Erstatt Elementor-ikoner (Eicons) med Font Awesome

Forespørsler til eicons-skrifttypen i GTMetrix-vannfallet

Elementor bruker sin egen Eicons-skrift for ikoner i widgets: glidepil, hamburgermeny-ikon, lukkeknapp. Hele pakken lastes når et ikon brukes, noe som legger til enda en forespørsel og rendringsforsinkelse.

HTTP-forespørselsdetaljer for eicons-filen i GTMetrix-rapporten

Siden du allerede har lokal Font Awesome (steg 2), er det fornuftig å bytte Eicons til denne: én skriftfil i stedet for to. Denne teknikken erstatter CSS-klassene .eicon og .eicon-menu-bar med glyfer fra Font Awesome.

Først fjerner du Eicons fra køen. Denne koden legges i 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}

Funksjonen hopper over admin-området slik at Elementor-editoren fortsetter å fungere uten problemer, og fjerner bare elementor-icons-handle-en på frontend.

Legg nå til CSS-erstatningen, enten via Appearance → Customize → Additional CSS eller i child theme-ets stilsett:

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}

Den første blokken omdefinerer de grunnleggende Eicons-klassene til FontAwesome-skrifttypen. Den andre og tredje setter spesifikke glyfer: \f0c9 for hamburgerikonet (fa-bars) og \f00d for lukkeknappen (fa-times). Andre ikoner erstattes på samme måte: åpne devtools, finn widget-ens klasse, og legg til content med glyf-koden fra Font Awesome-jukselappen.

Etter implementering, sjekk nettleserkonsollen for skriftlastingsfeil og kjør siden gjennom PageSpeed Insights. Forespørselen til eicons.woff2 skal forsvinne fra rapporten.

⁉️🤔 Ofte stilte spørsmål

Fungerer denne metoden på gjeldende Elementor-versjoner?

Ja, alle tre tipsene er relevante for den gjeldende Elementor-linjen. Hookene elementor/frontend/after_enqueue_styles og wp_enqueue_scripts er en del av plugin-ens offentlige API og opprettholder bakoverkompatibilitet. Den offisielle Elementor-dokumentasjonen om deaktivering av Google Fonts beskriver den innebygde bryteren i Elementor → Innstillinger → Ytelse. For tips #1, bruk den først og behold koden som en fallback for ikke-standard temaer.

Hva bør jeg gjøre hvis ikoner forsvinner i editoren etter at jeg har erstattet Eicons?

Eicons-deaktiveringskoden omgår admin-området. Sjekkene is_admin() og current_user_can( 'manage_options' ) sikrer at skriften forblir på plass i Elementor-editoren. Hvis ikoner likevel forsvinner, sørg for at du la til koden i functions.php til ditt aktive tema, ikke via en snippet-plugin som også kan kjøre på admin-sider.

Trenger jeg å installere en caching-plugin for disse optimaliseringene?

For tips #1 og #3 er en caching-plugin ikke nødvendig; koden i functions.php er nok. For tips #2 (Critical Font) trenger du et verktøy som bygger en trimmet Font Awesome: Swift Performance, LiteSpeed Cache, OMGF Pro, eller manuell sammenstilling ved hjelp av fonttools-verktøyet. Uten dette steget bytter du bare den fulle Font Awesome-lasten fra Elementors CDN til din server, med nesten ingen besparelse.

Hvor mye reell PageSpeed Score-gevinst gir disse tre tipsene?

Hvert tilfelle er forskjellig, men her er en rettesnor: deaktivering av Google Fonts kutter 200-400 ms lastetid, lokal Font Awesome sparer ytterligere 150-300 ms, og erstatning av Eicons fjerner én HTTP-forespørsel og sparer 50-150 ms. Totalt opptil ett sekund av full lastetid, noe som på typisk hosting til 10-20 dollar/måned øker den mobile PageSpeed Insights-poengsummen med 5-15 poeng.

Kan jeg droppe Font Awesome og Eicons helt?

Det kan du, hvis du er klar til å bygge om alle ikoner i Elementor som SVG. Dette betyr manuell erstatning av ikoner i widgets med opplastede SVG-filer eller bruk av en plugin som Iconic. Innsatsen er høy (dusinvis av widgets på et nettsted), men resultatet er den lettest mulige frontend. For de fleste prosjekter er en lokal Critical Font (steg 2) et adekvat kompromiss.

Hva oppnår disse endringene på et reelt nettsted?

De tre beskrevne teknikkene krever ikke premium-plugins, et CDN eller et hostingbytte. Dette er utelukkende arbeid med skriftforespørsler, den mest undervurderte hastighetsutgiften på Elementor-nettsteder.

Hvis du ikke har gjort grunnleggende WordPress-optimalisering ennå, start med den komplette guiden for sidehastighet, som dekker caching, CSS/JS-komprimering og bildeoptimalisering. Når du kommer til skrifter, kom tilbake til disse tre stegene og implementer dem én etter én, og sjekk PageSpeed Insights etter hvert.

Test på en kopi av nettstedet ditt, ta sikkerhetskopi før du redigerer functions.php, og press maksimal hastighet ut av Elementor.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.