Slik løser jeg et sakte elementorside: 16 Optimalisering som hjalp meg å få 100% PageSpeed-karakterer og umiddelbare belastningstider på nettstedet mitt

Elementor sier at de er den raskeste sidebyggeren for WordPress.


Så hva er årsaken til nettstedet ditt med langsom lasting??

Det er vanligvis noen få enkle justeringer som kan forbedre belastningstiden og GTmetrix-score betydelig. Elementor sier de vanligste årsakene til et tregt WordPress-nettsted er servere, media, eksterne skript (f.eks. Google Fonts), plugins, ingen CDN og bruk av en middelmådig cache-plugin. De går imidlertid ikke så detaljert inn på listen trinnvise instruksjoner.

Derfor skrev jeg denne opplæringen.

Du lærer hvordan du fikser det langsomme Elementor-nettstedet ditt ved å følge nøkkelanbefalinger fra WordPress-optimaliseringsveiledningen og Elementors anbefalinger. Jeg vil gi skjermbilder, detaljerte instruksjoner, og vil svare på alle kommentarer hvis du fortsatt trenger hjelp. Jeg klarte å få 100% GTmetrix score på hjemmesiden min. Selv innlegg med 100+ bilder og 400+ kommentarer (5 MB sidestørrelse og 170 forespørsler) laster fortsatt inn omtrent <2s. Ja, jeg er en WordPress speed nerd :)

Elementorhastighetsoptimalisering

1. Oppgrader til PHP 7.4

Mange vertsselskaper har allerede gitt ut PHP 7.4.

Å oppgradere PHP-versjoner er en av de enkleste måtene å få fart på Elementor-nettstedet. Kinsta s PHP-benchmarks viser hvordan høyere PHP-versjoner kan kjøre 2-3 ganger raskere. Elementor også anbefaler høyere PHP-versjoner og øke minnegrensen til 256 MB (se neste trinn).

Først må du sjekke din nåværende PHP-versjon under Elementor > Systeminformasjon.

Elementor PHP-versjon

Logg deretter på hostingkontoen din, finn PHP-versjonsbehandleren (eller lignende) og velg en høyere PHP-versjon. Det er også en god idé å ta en sikkerhetskopi på forhånd. Ellers er det det!

Kinsta PHP 7.4

Viktig: sørg for at pluginsene dine er kompatible med høyere PHP-versjoner. Jeg brukte WP Rich Snippets (som ikke vedlikeholdes lenger), men det var inkompatibelt med PHP 7.2+, så jeg slettet plugin og fant en erstatning. Det er ikke verdt å beholde ikke-vedlikeholdte plugins.

2. Øk hukommelsesgrensen til 256 MB

Igjen, sjekk minnegrensen din under Elementor > Systeminformasjon.

Både Elementor, WordPress og WooCommerce anbefaler en 256 MB minne-grense.

Elementor Memory Limit

Du kan vanligvis endre minnegrensen i hostingkontoen din:

Minnebegrensning

Ellers legger du denne koden til functions.php.

definere (‘WP_MEMORY_LIMIT’, ‘256M’);

3. Bruk selvhostede skrifter

Hvis Google-skrifter sprenger GTmetrix-rapporten din, kan du prøve å arrangere fonter lokalt.

Hvis du har Elementor Pro, vil du bruke tilpassede skrifter (finnes i innstillingene).

Her er en YouTube-opplæringen.

Elementor tilpassede skrifter

Har ikke Elementor Pro?

Mange plugins kan hjelpe deg med å optimalisere Google-skrifter: WP Rocket, Autoptimize, Google Host-self-host, OMGF og Asset Clean Up. Hvis du ikke ønsker å bruke en plugin, følg disse instruksjonene.

Trinn 1: Bekreft at skriftene bremser ditt Elementor-nettsted i GTmetrix.

Google Fonts GTmetrix

Steg 2: Last ned skriftene dine direkte fra Google Font-nettstedet. Last ned bare skriftene og fontvektene du absolutt trenger (flere skrifter og vekter kan også bety flere forespørsler).

Trinn 3: Bruk et verktøy som Transfonter å konvertere dem til nettstedsfiler.

Transfonter-Google-Font-konvertering

Trinn 4: Last opp de nye webfontfilene til WordPress og legg dem til din CSS.

Trinn 5: Test skrifttypene, legg til en standardfeil, og ha alltid fontbackbacks.

4. Optimaliser tredjepartsforespørsler

Akkurat som om Google Fonts er en forespørsel fra tredjepart, så kan AdSense, Analytics, Maps, Tag Manager, innebygde videoer, og til og med Gravatars eller plugins for sosiale delinger føre til forespørsler fra tredjepart.

Du må optimalisere disse også.

Eksterne skript

Noen forespørsler fra tredjepart er enkle å optimalisere:

WP Rocket har en Tilleggs-fane som kan hjelpe vert analytics lokalt og legge til nettleserbufring til Facebook Pixel. Med WP Rockets Media-innstillinger lar du deg laste videoer mens du erstatter iframe med et forhåndsvisningsbilde. Hvis du legger inn innlegg fra sosiale medier, kan du prøve å ta et skjermbilde og bruke et bilde i stedet. Disqus Conditional Load, utsetter parsing av JavaScript i cache-plugin-innstillingene og selektiv deaktivering av skripter / plugins i Asset Clean Up kan bidra til å optimalisere skript.

WP Rocket Local Analytics

Andre forespørsler fra tredjepart er ikke så enkle å optimalisere:

Google AdSense kan være en GTmetrix-morder. Annet enn å laste det asynkront, er det lite du kan gjøre. Jeg har heller ikke funnet noen løsning for å få Gravatars til å lastes raskere, og jeg har prøvd alle Gravatar cache-pluginene (så jeg har dem deaktivert). Google Tag Manager bør vanligvis bare brukes til store, uoptimerte Elementor-nettsteder, ellers gjør det vanligvis mer skade enn godt.

5. Unngå høye CPU-plugins

Noen plugins du bare bør holde deg unna.

Høye CPU-plugins som bremser Elementor-nettsteder har vanligvis å gjøre med statistikk, sikkerhetskopieringer, sosial deling, porteføljer, live chat, kontaktskjemaer, glidebrytere, JetPack og enhver plugin som hele tiden er nødvendig for å “fungere” på nettstedet ditt (tenk Broken Link Checker pågående skanninger).

  1. Legg til dette
  2. AdSense klikksvindelovervåking
  3. Alt-i-ett-arrangementskalender
  4. Backup Buddy
  5. Beaver Builder
  6. Bedre WordPress Google XML-nettkart
  7. Broken Link-kontroller (bruk Dr. Link Check)
  8. Konstant kontakt for WordPress
  9. Kontaktskjema 7
  10. Innhold relatert til kontekst
  11. Digi Auto Links
  12. Disqus-kommentarsystem
  13. Divi Builder
  14. Essensielt nett
  15. Vis hele listen over 65 sakte plugins

Hvis du har en treg plugin, kan du enten slette den og finne en erstatning, selektiv deaktivere plugin på bestemte sider (neste trinn), eller fortsette å bruke den og ha et tregt Elementor-nettsted.

6. Deaktiver ubrukte plugins selektivt

Asset CleanUp og Perfmatters er gode for selektiv deaktivering av plugins, manus og stiler.

Det vanligste eksemplet er bare å laste inn kontaktskjema-plugin på kontaktsiden og deaktivere det andre steder. Men har du tenkt på å deaktivere din sosiale delingsplugin på sidene dine (siden de fleste bare bruker den på innlegg)? Eller deaktivere glidebryteren på sider som ikke har glidebryteren? Gjennom selektiv deaktivering kan du lage færre HTTP-forespørsler på sider.

Trinn 1: Installer Asset CleanUp eller Perfmatters.

Asset CleanUp-plugin

Steg 2: Rediger en side eller et innlegg og bla nedover for å se alt som lastes inn på siden.

Trinn 3: Deaktiver (loss) plugins, skript og stiler som ikke brukes på siden. Du kan også deaktivere den etter posttype, eller Asset CleanUp Premium (samt Perfmatters) lar deg bruke RegEx.

Rengjøring av aktivering av alle

7. Deaktiver WooCommerce-skript, stiler, vognfragmenter

Akkurat som du selektivt deaktiverte plugins i forrige trinn, kan du bruke Perfmatters og Asset CleanUp for å gjøre det samme med WooCommerce-skript, stiler og handlekurver..

Asset CleanUp WooCommerce

Perfmatters lar deg faktisk gjøre dette med 1-klikk:

perfmatters woocommerce optimalisering

8. Bytt redigeringslastermetode i Elementor

Elementor sier:

“Hvis du har problemer med hosting eller server ved å bruke Elementor, har vi inkludert en enkel bryter som kan løse problemet ditt.”

Du finner dette under Elementor > innstillinger > Avansert > Editor Loader.

Elementor Switch Editor Loader Method

9. Endre størrelse på bilder for å korrigere dimensjoner

Når du bruker Elementor, er det viktig å skalere (endre størrelse på) bilder for å passe til de riktige dimensjonene.

Server skalerte bilder

Ellers vil du se servere skalerte bilderfeil i GTmetrix. Hvis du ser noen, kan du ta tak i de anbefalte dimensjonene fra GTmetrix og endre størrelsen på bildet til disse dimensjonene, og deretter bytte ut bildet. Jeg anbefaler at du lager et “image dimensjon jukseark” som viser dimensjonene til alle områdene på nettstedet ditt (glidebrytere, omtalte bilder, blogg i full bredde, logo). På den måten kan du endre størrelsen på bildet til riktige dimensjoner før du laster opp det.

10. Ditch Shared Hosting And Upgrade to Cloud

Ha en langsom responstid på serveren?

Kjør nettstedet ditt gjennom Google PageSpeed ​​Insights og sørg for at det er det <200 ms som Google anbefaler. Serveren din (hosting) er den Faktor 1 i WordPress optimaliseringsveiledning.

Jeg anbefaler vanligvis SiteGround (delt hosting) som er bra hvis du har lite trafikk og plugins. Men når du først går på skyhosting (f.eks. Cloudways DigitalOcean), er forskjellen natt og dag. Jeg migrerte fra SiteGround til Cloudways, og ladetiden min ble halvert. Til og med innlegg med 100+ bilder og 400+ kommentarer (5 MB sidestørrelse, 170 forespørsler) laster fortsatt inn under 2 sekunder.

Elementor Hosting

Siteground-vs-Cloudways-Cloud-Hosting

GTmetrix-rapport-for-lenge-post

Andre menneskers opplevelser med Cloudways:

Cloudways responstid

WP-motor til Cloudways

DigitalOcean Pingdom-rapport

Cloudways server svartid

Forbedring av Cloudways lastetid

Cloudways vs WP Engine

Uten navn

Cloudways Pingdom Load Times

Cloudways Pingdom-rapport

Namecheap To Cloudways Migration

Cloudways WooCommerce Migration

Cloudways AWS Migration

De var også nummer 1 i mange meningsmålinger på Facebook og har det bra TrustPilot anmeldelser:

Hosting-anbefalinger Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

WordPress Hosting-forslag

Cloudways-Facebook-omtale

Cloudways Facebook anmeldelse

Cloudways vs SiteGround

Bunnlinjen: delt hosting er bra hvis du ikke kjører WooCommcerce, AdSense, plugins med høy CPU eller har anstendig trafikk. Men når du har en av dem, kan du se på netthosting. Ja, jeg er tilknyttet Cloudways), men det er mange andre som migrerte og la ut resultatene. Koden OMM25 vil gi deg 25% avslag på de to første månedene av hosting hos Cloudways.

11. Grøft-gratis hurtigbuffer-plugins og bruk WP-rakett

Hvorfor er WP Rocket vanligvis nr. 1 i avstemningene på Facebook?

Fordi den har flere hastighetsfunksjoner enn de fleste andre cache-plugins (databaseopprydding, lokal analyse, kombinasjon av Google-skrifter, late innlastingsbilder + videoer, CDN + Cloudflare-integrasjon, hjerteslagskontroll, WebP-hurtigbufring, forhåndshenting, Facebook Pixel-nettleserbufring).

Det er grunnen til at WP Rocket gir bedre score + lastetider i GTmetrix, og betyr mindre plugins på ditt Elementor-nettsted. Den er alltid oppdatert med nye funksjoner og vedlikeholdt av et pålitelig team.

Så hvis du fremdeles bruker WP Fastest Cache eller W3 Total Cache, bør du virkelig gi den en virvel.

2016 beste cache plugin poll

Cache-plugin-avstemning fra 2019

Swift vs WP Rocket

2016 cache plugin poll

Beste avstemning for cache-plugins 2018

wp rakett vs w3 totla cache

Du vil se forskjellen:

WP-rakett før etter

12. Rengjør databasen

Planlegger du pågående databaseopprydding?

Når du fortsetter å bygge ditt Elementor-nettsted, vil du samle innleggsversjoner, gamle databasetabeller fra plugins / temaer du ikke bruker lenger, søppelkommentarer og andre søppelfiler.

Du kan bruke plugins som WP Rocket og WP-Optimize til rengjør WordPress-databasen din. Bare sørg for at du vurderer alt som blir slettet og tar en sikkerhetskopi på forhånd.

WP-optimaliser ren database

13. Bruk Cloudflare’s CDN

Å bruke Cloudflare er en no-brainer.

Det er gratis, har over 200 datasentre, og CDN-er er det anbefalt av WordPress.

Cloudflare-logo

Noen verter som SiteGround lar deg aktivere Cloudflare i dashbordet. Ellers kan du registrere deg for Cloudflares gratis plan, logge deg på domeneregistratoren og endre til Cloudflare-navneservere.

I dashbordet er det noen få finjusteringer du bør vurdere:

  • Hastighet: aktiver Brotli og Rocket Loader
  • Skrap skjold: aktiver hotlink-beskyttelse
  • brannmur: blokkerer dårlige roboter fra Wordfences live trafikkrapport
  • Sideregler: Cloudflare har masse side regler for hastighet, sikkerhet, kompatibilitet

14. Bruk et lett tema

Eventyr tid.

Jeg brukte et ThemeForest-tema som ble forlatt av utvikleren (en risiko du tar når du kjøper et tema fra en uavhengig utvikler, selv om det har gode anmeldelser). Jeg hadde også mareritt når jeg kjøpte oppblåste temaer for klienter som gjorde at WordPress-nettstedet deres gikk tregt.

Jeg mener, å ha alt innebygd gjør det så mye enklere, ikke sant?

Nei! Du vil velge et lett tema som er minimalt og kodet godt, og stole på plugins for bare å legge til funksjoner du trenger. Temaoptimalisering er vanskeligere enn å slette en plugin.

De fleste av dere bruker forhåpentligvis Astra-, Flatsome- eller StudioPress-temaer, som er de viktigste jeg anbefaler.

15. Finn flaskehalser i GTmetrix

Annet enn å måle score + belastningstider, kan du avdekke ganske mange ting i GTmetrix. Siden hvert Elementor-nettsted er forskjellig, vil du finne nøyaktig hva som bremser ditt.

Tid til første byte

Tid til første byte

Uoptimerte bilder

Bildeoptimaliseringer i GTmetrix

Sakte plugins

Sakte WordPress-plugin

16. Fullfør de siste 10% av hastigheten med perfeksjonister

Perfmatters (av Kinsta) tar seg av det jeg liker å kalle diverse hastighetsoptimaliseringer:

perfmatters funksjoner

Noen av disse er ekstremt nyttige; skriptbehandleren som lar deg selektiv deaktivere plugins / scripts fra bestemte sider, endre autosave-intervallet, begrense innleggsversjoner, forhåndsforbinde og deaktivere WooCommerce-skript, stiler og handlekurver. Når det gjelder disse optimaliseringene, vet jeg ikke om noen plugin som gjør en bedre jobb enn Perfmatters.

Hva forventer du, det er Kinsta. Selvfølgelig er det en flott plugin.

ofte stilte spørsmål

&# X1f680; Hva er de vanligste årsakene til et langsomt Elementor-nettsted?

Å ikke bruke en god cache-plugin, ikke konfigurere cache-plugin-innstillingen optimalt, sakte hosting, uoptimerte bilder, bruke Google-skrifter og eksterne skript, høye CPU-plugins og ikke bruke en CDN er noen av de vanligste årsakene til et tregt Elementor-nettsted.

&# X1f680; Hva kan jeg gjøre for å få fart på Elementor?

Bruk Elementors tilpassede skrifttypealternativ for å redusere mengden forespørsler fra Google Font eller Font Awesome. Du kan også selektivt deaktivere ubrukte Elementor-funksjoner på sider / innlegg ved å bruke en plugin som Asset CleanUp eller Perfmatters av Kinsta. Resten er generiske hastighetsoptimaliseringer som ikke har noe med Elementor å gjøre.

&# X1f680; Hvordan bruker du tilpassede skrifter for å få dem til å laste raskere?

Du trenger en Elementor Pro-konto for å gjøre dette. Last ned fontfiler (f.eks. Fra Google Font) og last dem opp i den tilpassede skrifttypeseksjonen i Elementor.

&# X1f680; Tapper Elementor nettstedet mitt?

Elementor forårsaket ingen feil i min GTmetrix-rapport og antas å være den raskeste WordPress-sidebyggeren. Det bør ikke bremse nettstedet ditt mye, i det hele tatt. Men hvis du tror det gjør det, kan du sjekke fanen GTmetrix Foss for å se hva som virkelig forårsaker problemet.

&# X1f680; Hvilken hosting anbefales for Elementor-nettsteder?

I den populære Elementor Facebook-gruppen er SiteGround og Cloudways vanligvis de topprangerte vertene som er tatt i Facebook-avstemninger.

Har fortsatt et sakte elementorside?

Jeg vil si dette: Cloudways og WP Rocket bør fikse 80% av problemene dine. Hosting og cache-plugin-en din er av de største faktorene i WordPress-optimaliseringsveiledningen. Men hvis Elementor-nettstedet ditt fortsatt er tregt, kan du gi meg en kommentar med GTmetrix-rapporten, og jeg er glad for å ta en titt. Teamet vårt tilbyr også WordPress-hastighetstjenester med før + etter GTmetrix-rapporter.

Jubel,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map