Sådan optimeres dit webstedslayout med Elementor

Vil du vide, hvordan du optimerer layoutet på din hjemmeside med Elementor ?

Optimering af webstedets ydeevne er et af de vigtigste aspekter af dets brugeroplevelse. Et websted med langsom indlæsning kan frustrere enhver bruger, hvilket ofte resulterer i en afvisningsprocent høj, hvilket kan påvirke succesen for vores forretning negativt.

Webstedets ydeevne kan påvirkes af mange faktorer, for eksempel: store billedstørrelser, serverkonfigurationer, for mange plugins, blandt andre faktorer.

Websitetes ydeevne er en af ​​vores stærkeste værdier som webskabere. Derfor lavede vi dette kursus i 5 dele.

Nu kan du lære at oprette layout og indlæg ved hjælp af optimale teknikker. Denne viden sikrer, at dine websteder ikke indeholder redundante sektioner, kolonner eller widgets, der bare ikke er nødvendige. Vi vil også undersøge nogle indbyggede widgetfunktioner for at forbedre indlæsningstiden.

Ved afslutningen af ​​denne vejledning vil du være helt klar til at optimere ydeevnen på hvert websted Elementor du skaber og høster straks frugterne.

Lektion 1: Layoutoptimering Bedste praksis

I vores første lektion vil vi dække den mest effektive måde at oprette dine sider og indlæg på i editoren Elementor. Vi ser ofte brugen af ​​alt for mange sektioner, kolonner, interne sektioner og widgets, når det samme layout kunne være opnået med langt færre elementer.

Brug af store mængder elementer bremser dit websteds ydeevne, så lad os dykke ned i og lære at bygge websteder med Elementor på den mest effektive måde.

Vi vil dække følgende emner:

• Et nærmere kig på strukturen på en korrekt side
• Visning og test af dit websteds ydeevne
• Optimering af din sidehoved, sidefod og sideindhold
• Eksempler på gode og dårlige websites layoutpraksis
• Korrekt brug af widgets, positionering og globale stilarter
• Tips til at undgå belastningsforsinkelse, forbedre SEO og øge indlæsningstiden
• Tilgængelighed optimering
• Reduktion af mængden af ​​DOM -elementer
• Og meget mere !

For bedre at forstå de optimale layout i Elementor, vil vi undersøge en Elementor -skabelon, der viser almindelige misbrug af sektioner, kolonner og widgets. Ved afslutningen af ​​denne lektion vil vi have genopbygget hele denne side ved at reducere antallet af kolonner og widgets. Vores indledende side består af ni sektioner, 31 kolonner, fem interne sektioner og 44 widgets.

I slutningen af ​​selvstudiet reduceres vores optimerede side til seks sektioner, syv kolonner og 16 widgets.

Vi vil bruge det gratis, lette Hej temaog vi vil genskabe hver sektion i skabelonen og forbedre webstedets samlede ydeevne ved hjælp af bedste praksis.

Test for dårlig praksis

Før vi dykker ned i optimering af webstedslayout, lad os køre en test på vores side for fuldt ud at forstå, hvad der sker, når nogen besøger vores websted. Når alle vores optimeringer er udført, gentager vi testen og sammenligner resultaterne.

Trin 1: Bekræft dit websted i et inkognitovindue

• Åbn et nyt vindue i "Inkognitotilstand", og indtast webadressen til den webside, du tester.

Trin 2: Kontroller, at du bruger den direkte URL -sti

Hvis du er usikker på dit sidelink, kan du nemt finde det ved at gå til dit WP -dashboard:

• Klik på "Sider" for at se alle siderne på dit websted.
• Hold markøren over din side, og klik på "Vis" -indstillingen. Dette fører dig direkte til din side.
• Kopier og indsæt denne URL i inkognitovinduet, og når hjemmesiden er indlæst, er du klar til at teste den!

Testning og visning af resultatresultater

Trin 1: Test resultaterne

Du har muligvis tidligere brugt Chrome Developer Tools.

Hvis ikke, for at inspicere og vise HTML- og CSS -indholdet på din side:

• Højreklik hvor som helst på din side, og klik på vælg “Inspekter.” Du vil se flere faner, hvor du kan læse din HTML og CSS, finde fejl, få SEO -resultater og køre forskellige tests.
• Vælg fanen Netværk, og tryk på knapperne cmd eller ctrl + R for at indlæse resultaterne.

Som du kan se, tager vores nuværende layout 2,88 sekunder at indlæse og udfører 81 anmodninger.

Trin 2: Se resultatresultater

• Skift til fanen Fyr, hvor vi kan køre en revisionsrapport på vores side.

Dette vil give os mere information om sidens aktuelle ydelse.

• Vælg "Generer rapport". Efter et øjeblik vil din rapport blive vist.

Vi modtager i øjeblikket en ydelsesvurdering på 73/100, som vi helt sikkert kan arbejde videre med.

Ideelt set vil vi gerne have, at alle disse tal er grønne. Lad os nu gå videre til at optimere vores side og forbedre vores statistik.

Husk, at vi efter hvert optimeringstrin, vi foretager, muligvis tager nogle gode fremgangsmåder fra ændringerne og husker dem for fremtidige websteder, vi opretter.

Optimering af sideelementer

Trin 1: Optimer overskriften

Lad os starte med Header.

Som du kan se i dette design, blev overskriften lavet med tre kolonner.

I den første kolonne består vores logo af to widgets:

1. Un Billedwidget som viser en .png -billedfil af vores logo
2. En titel -widget.

I den anden kolonne består overskriftsmenuen af ​​vores Navigationsmenu -widget.

Den tredje kolonne indeholder:

1. En intern sektionswidget (som styrer placeringen af ​​ikonwidgeten).
2. Vores kontaktoplysninger til overskriften

Lad os se, hvordan vi kan minimere antallet af sektioner, widgets og sektioner her.

Trin 2: Opret det nye overskrift

Kolonne 1:

• Opret 1 sektion med kun 1 kolonne.
• Tilføj Website -logo -widget og træk det ind i afsnittet.

Bedste fremgangsmåder til billeder:

• Giv hver billedfil på dit websted en relevant titel og alt -tekst i mediebiblioteket.

Dette vil forbedre din sidetilgængelighed og din søgemaskineplacering. I det logo, vi oprindeligt brugte, er titlen irrelevant for det faktiske billede, og der er ingen alt -tekst.

• Definer billedets dimensioner inde i widgeten.

Dette gør det muligt at oprette siden med den korrekte plads, før billeder indlæses, og undgå layoutforsinkelse (en faktor målt af browsere).

I eksemplet, vi arbejder på sammen, kan du løse dette problem ved at gå til fanen Stil og indstille billedbredden til 200px.

Kolonne 2

Vend tilbage til widgets -panelet:

• Træk og slip navigationsmenu -widgeten under logoet
• Indstil markøren til "Ingen"
• Gå til fanen "Stil", og tilføj skrifttypen efter dine præferencer (så den matcher vores tidligere design)

Bedste fremgangsmåder til overordnet styling:

• Undgå at bruge mere end 2 forskellige skrifttyper, der indeholder flere vægte (Globale skrifttyper).
• Undgå at vælge forskellige farver for hvert element med farvevælgeren (Globale farver).
• Forbedre dit websteds indlæsningshastighed ved at generere færre forespørgsler (overordnede skrifttyper).
• Gentag unødvendig kode to gange (globale farver).
• Bevar konsistensen og kontrollen over din model (overordnet stil).

Globale skrifttyper:

Dette kan gøres ved hjælp af funktionen Globale skrifttyper:

• Gå til fanen "Stil", og tilføj din foretrukne skrifttype (så den matcher vores tidligere design) ved at vælge en, foretag en lille ændring og hold musen over plusikonet.
• Klik på plus -ikonet, og vælg den skriftfamilie, du har brug for
• Gem de typografier, du vil bruge i skabelonen som globale skrifttyper

Du kan derefter bruge denne stil på hver widget, du opretter.

Globale farver:

Den samme metode kan bruges til dine overordnede farver:

• Klik på "Global"
• Hold markøren over farvevælgeren, og klik på den
• Vælg en farve, og peg på plusikonet
• Klik på "Global" >> vælg "Principal"

Når du har gjort det, gemmes farven i din skabelons farvepalet, så du kan vælge den fra din globale farveriste, når du har brug for den til et element eller en widget.

Inden vi fortsætter med vores header, lad os sætte den lodrette polstring til nul.

Trin 3: Rediger overskriften

Kolonne 3

• Gå til panelet "Widgets"
• Træk Icon List Widget under menuen.
• Fjern yderligere listeelementer
• Tilføj din tekst
• Vælg det ønskede ikon
• Gå til fanen "Style"
• Definer de overordnede farver og skrifttyper efter eget valg

Nu skal vi rette en ting mere - de tre overskriftselementer er i øjeblikket stablet og ikke justeret med hinanden. Vi kan løse dette problem ved at ændre bredden af ​​hvert element til dets faktiske størrelse, så det ikke fylder al pladsen i kolonnen.

For at løse dette problem:

• Vælg fanen Webstedslogo >> 'Avanceret'
• Vælg "Positionering", og indstil dens bredde til "Inline"

Gentag dette nøjagtige trin for navigationsmenuen og for ikonlisten.

Nu hvor alle overskriftselementerne er på linje, er det kun tilbage at placere dem korrekt.

Definere placeringen af ​​kolonnen med inline -elementer

• Vælg din kolonne >> gå til fanen "Layout"
• I "Lodret justering" skal du vælge "Bund"
• "I vandret justering" vælg "Mellemrum mellem"

Ved at vælge "Mellemrum" -justeringen placeres den første og sidste widget i begge ender, hvilket giver lige stor afstand mellem alle andre widgets.

Den første og sidste widgets har dog forskellige bredder, så det samme rum er ikke altid centreret i vores interne widget.

Vi kan løse dette problem ved at justere margenerne:

• Vælg widget Navigationsmenu >> fanen "Avanceret"
• Opdel marginen, og fjern afstanden med en negativ værdi

Trin 4: Gør overskriften lydhør

Lad os nu se, hvordan den aktuelle version af vores websted ser ud på mobile enheder.

Bedste fremgangsmåder til mobil lydhørhed:

• Forenkle dit design og tænk på måder, hvorpå du kan gøre de samme sektioner lydhøre, for at undgå at bruge dobbelt så meget kode, som vil påvirke din sidehastighed.

Ligesom du ser i dette overskrift - Det er almindeligt at se det samme afsnit redesignet specifikt til tablets og mobile enheder. Dette er, hvad vi ser her: to versioner af designet blev oprettet: en version til desktop og en til mobil.

Når dit design og din kode reagerer i stedet, forbedres din sidehastighed, fordi den bruger mindre kode.

Lad os se, hvordan vi kan opnå dette ved hjælp af indstillingen "Brugerdefineret bredde" til vores widgets og elementer.

Indstilling af en tilpasset bredde til tablet

• Klik på 'Nav Menu' >> 'Avanceret' fanen
• Vælg "Positionering" >> indstil bredden til "Custom".
• Vælg "%" >> giv widgeten samme bredde (i procent) af det tomme rum omkring det.
• Klik på fanen "Indhold" >> "Toggle Align" >> vælg "Right".

Dette giver dig mulighed for at justere skiftemenuen hvor som helst inden for widgetens bredde.

Lad os nu afslutte tilpasningen af ​​skiftemenuen.

• "Indhold" >> Klik på "Full Width" -skifteren og indstil den til "Ja".
• "Style" >> Fjern baggrunden ved at trække "Color Picker" -linjen helt til venstre.

Lad os nu se, hvordan tingene ser ud på en mobil skærm.

Definere en tilpasset bredde til mobil

I dette scenario bevarer vi de tre header -widgets inde i visningsporten. Men husk på, at det for nogle websteder kan være mere fornuftigt at udelade bestemte elementer fra overskriften, når det ses på mobil eller tablet.

I dette tilfælde sker det med vores header, når den vises på mobilen, at navigationsmenuen og logo -widgets ikke kan passe ind i en enkelt række.

For at løse dette problem:

Placering af Nav -menuen

• Klik på "Nav Menu" >> fanen "Avanceret"
• Vælg "Positionering" >> indstil bredden til "Custom"
• Vælg "%" >> Giv widgeten en bredde på 30%, så den passer ud for vores logo

Placering af ikonlisten

• Klik på fanen "Ikonliste" >> '' Avanceret ''
• Vælg "Udfyld" >> Opdel grupperingsværdier
• Tilføj 12px polstring til "TOP"

Kan du tro det?

Vores header blev oprindeligt brugt 2 sektioner, 12 widgets og 10 kolonner. Nu bruger vores header 1 sektion, 3 widgets og 1 kolonne.

Og resultatet er det samme!

Trin 5: Optimer Hero -sektionen

Lad os gå videre til det næste afsnit af vores websted: heltsektionen

Bedste fremgangsmåder for heltsektioner:

• Sørg for, at teksten i din heltsektion er let synlig, især når den har et baggrundsbillede.

Kontrol af widgets placering i en kolonne

En almindelig fejl, vi ser begået i Elementor -editoren, er at bruge ekstra kolonner og mellemrum til at styre placeringen af ​​en widget.

I vores eksempelmodel, vores helt billede består af et afsnit med et baggrundsbillede. Titlen og teksten placeres vandret ved hjælp af to kolonner. Der er også en afstandsstykker inde i sektionen for at placere elementerne lodret.

Lad os se, hvordan vi kan skabe det samme design med kun et afsnit:

• Slet den ekstra kolonne til højre for teksten.
• Fjern afstandsstykket.

I stedet for at placere vores helttekst, hvor vi vil, bruger vi kolonnejusteringsindstillingerne:

• Vælg kolonnen.
• Indstil "Vertikal justering" til "Mellem".
• Gå til fanen "Avanceret".
• Vælg "Udfyld" >> Opdel grupperingsværdier
• Indstil højre polstring til 50%.

• Vælg sektionen.
• Vælg "Minimumshøjde" >> indstil den til 80.

Fast kontrast mellem tekster og baggrunde

Det er vigtigt, at hvert websted har en god kontrast mellem teksten og baggrunden. Ulæselig information påvirker dit websteds score og kan også drive besøgende væk. Uanset hvad skal teksten altid være let læselig.

Der er flere måder at forbedre klarheden af ​​et afsnit, hvis baggrund er et farvet billede (som vi ser i denne skabelon):

• Klik på dit overskrift.
• Gå til fanen "Stil" >> Vælg "Tekstskygge".

Dette vil forbedre tekstens læsbarhed ved at få den til at skille sig ud fra sit baggrundsbillede.

En anden måde at gøre din tekst tydeligere på er at bruge overlejringer.

• Vælg sektionen >> 'Style' fanen >> 'Baggrundsoverlay'
• Vælg en af ​​dine overordnede farver og leg med uigennemsigtigheden, indtil du får det ønskede resultat

Trin 6: Optimer afsnittet med ikonbokse

Lad os nu gå videre til vores næste afsnit, hvor vi i øjeblikket har en indre sektion med fire kolonner. I øjeblikket indeholder hver kolonne tre widgets: Image Widget, Title Widget og Text Editor Widget.

Lad os se, hvordan vi kan forenkle dette afsnit for at forbedre dets ydeevne.

Indhold af ikonområde

• Vælg knappen »Widget Icon Box« i widgetmenuen, og træk den ind i kolonnen
• Vælg "Ikonboks"
• Peg på ikonbilledet
• Vælg "Download SVG" **
• Indsæt dit brugerdefinerede ikon

** Bemærk: Badges er SVG -filer. Hvis du ikke har gjort det, skal du gå til WordPress dashboard og derefter gå til Elementor >> Indstillinger. Du skal aktivere Aktiver ufilterede filoverførsler.

• Indtast din "titel"
• Skriv din "Beskrivelse"
• Vælg "Style" >> Vælg en overordnet farve
• Vælg "Størrelse" og træk bjælken til den størrelse, du ønsker
• Vælg "Polstring" og træk bjælken til det ønskede nummer

Trin 8: Optimer sektionen "Services"

Vi skal nu genopbygge sektionen "Services", der i øjeblikket bruger to kolonner, to billeder, titel -widgeten og tekstredigeringswidgeten.

Lad os oprette det samme design i en ny sektion, men med kun en kolonne.

• Opret en ny sektion med en kolonne
• I "Layout" >> indstil "Indholdsbredde" til "Fuld bredde"
• Vælg "Widget Image Box" i widgetpanelet, og træk det ind i kolonnen

(Vi vil kunne integrere alle sektionens aktiver i denne widget)

• Skriv titlen
• Skriv beskrivelsen

For billedet vil vi beholde det nuværende design, vi brugte til vores billeder.

• Indsæt det samme billede fra mediebiblioteket
• Gå til fanen "Indhold" >> Indstil "Billedposition" til "Højre"

• Gå til fanen "Style"
• Forøg afstanden mellem elementer
• Forøg billedets "bredde"
• Udvid sektionen "Indhold"
• Vælg "center" justering
• Indstil "Vertikal justering" til "Mellem"
• Definer de overordnede farver og skrifttyper efter eget valg
• Gå til fanen "Avanceret"
• Tilføj 10% udfyldning til widgeten

Nu har sektionen Services samme design, men med færre aktiver.

Trin 9: Optimer sektionen med opfordring til handling

Bedste fremgangsmåder for CTA -links:

• Sørg for, at alle dine sociale medielinks fungerer korrekt, og at knappen indeholder linket.
• Når du tilføjer et link til et andet websted, skal du inkludere denne attribut: "rel | noopener"

(Du kan gøre dette ved at klikke på tandhjulsikonet og skrive attributten i "Brugerdefinerede attributter"). Dette åbner linket i en ny browser -fane og øger din præstationsscore.

Det følgende afsnit præsenterer en opfordring til handling for vores tjenester.

Sektionen har i øjeblikket to kolonner, som indeholder:

1. Et baggrundsbillede med et afstandsstykke
2. To overskrifter, en intern sektion, en tekstredigerer og en knap

Lad os oprette det samme design i en ny sektion, men med kun en kolonne.

• Gå til fanen "Layout" >> indstil "Indholdsbredde" til "Fuld bredde"
• Gå til fanen "Avanceret" >> Fjern eventuel yderligere fyldning

• Vælg "Call To Action Widget" i widgetpanelet, og træk det ind i kolonnen
• Indstil "Billedposition" til "Venstre"
• Vælg dit billede fra mediebiblioteket
• Udvid sektionen "Indhold"
• Skriv overskriften
• Skriv beskrivelsen
• Indtast knappen tekst

• Gå til fanen "Style"
• Tilføj "polstring" mellem elementerne
• Juster billedbredde
• Udvid sektionen "Indhold"
• Vælg den globale skrifttype til din titel
• Forøg mellemrummet mellem beskrivelsen og knappen
• Vælg de globale farver, der passer til hver ressource
• Udvid sektionen "Knap"
• Indstil sin størrelse til "Large"
• Tilpas det efter dine behov, f.eks. Baggrundsfarve og kantradius

Indtil videre har det været en sektion med 2 kolonner med 6 widgets. Nu er det en 1 kolonne sektion med kun 1 widget!

Trin 10: Optimer billedkarrusellen

Det nuværende design af vores Image Carousel -sektion har en almindelig fejl med måden, det viser flere billeder på.

Dette design består af 5 kolonner, en praksis, som mange brugere har en tendens til at gøre for at kontrollere størrelsen på deres billeder.

Lad os undersøge en enklere måde, der også optimerer dit websteds ydeevne.

• Opret en ny sektion med 1 kolonne
• Gå til fanen "Layout" >> indstil "Indholdsbredde" til "Fuld bredde"
• Vælg knappen »Image Carousel Widget« fra widgetpanelet, og træk den ind i kolonnen
• Tilføj ønskede billeder fra mediebiblioteket

• Gå til fanen "Indhold"
• Indstil "Billedstørrelse" til "Medium - 300 x 300"
• Juster "Dias til visning", "Dias for at rulle" og "Navigation" i henhold til dine præferencer

• Gå til fanen "Style"
• Indstil "Vertikal justering" til "Center"
• Tilpas "afstand"

• Gå til fanen "Avanceret"
• Tilsæt den nødvendige fyldning

Det, der engang var en sektion med 5 kolonner, er nu kun 1 kolonne.

Lad os gå videre til det næste afsnit, hvor vi kan optimere videoerne på vores websted.

Trin 11: Optimer videosektionen

Bedste fremgangsmåder for videoindhold:

• Brug Lazy Load når det er muligt for at forbedre indlæsningstiderne på dine websteder.

Hvad sker der, når vi anvender indstillingen "Lazy Load"?

Teknisk set erstattes videoindlejringskoden af ​​et statisk billede. På denne måde indlæses videoen kun, når brugeren klikker på billedet - hvilket virkelig hjælper med vores sideindlæsningstider.

Det, vi skal gøre nu, er at ændre den måde, vi bruger Video Widget på, så det ikke forsinker vores sidehastighed eller webstedets ydeevne.

• Vælg "Video Widget"
• Gå til fanen "Style"
• Vælg "Lazy Load"

Trin 12: Optimer sidefoden og hold den opdateret

En almindelig fejl, der ses på mange websteder, er, at deres sidefod bruger flere overskrifter til dato og beskrivelse, samt et ikon for ophavsretssymbolet.

Lad os se, hvordan du optimerer sidefoden og sørger for, at den altid er opdateret.

Vi konfigurerer denne kontinuerlige opdateringsproces ved hjælp af Dynamiske tags. På denne måde behøver vi ikke at ændre overskriftsindholdet hvert år, da de dynamiske tags automatisk opdateres til det aktuelle år.

For at gøre dette vil vi fortsætte som følger:

• Fjern de ekstra widgets, så kun Titel -widgeten efterlades
• Vælg widgeten Titel
• Klik på symbolet "Dynamiske mærker" til højre for feltet "Titel" (også kendt som "Forældreknap"

• Vælg menupunktet "Aktuel dato og klokkeslæt" i rullemenuen
• Klik på nøglens forælderikon
• Klik på fanen "Datoformat", og vælg menupunktet "Brugerdefineret"
• Slet det, der i øjeblikket er i feltet "Brugerdefineret format", undtagen "Y"
• Vælg fanen "Avanceret"
• Fremhæv feltet "Fremad", og hold tasterne "option" og "G" nede samtidigt (eller "kontrol", alt "og" C "samtidigt) for at skrive symbolet" © ".
• Tilføj et mellemrum efter "©"

• Vælg feltet "Efter"
• Indtast et mellemrum, og skriv den tekst, du vil have vist efter året, f.eks. "Alle rettigheder forbeholdt"

Du vil muligvis bemærke, at i eksempelwebstedet i denne vejledning har hver widget sit eget afsnit. Vi har gjort dette for at gøre øvelsen klarere og lettere at følge.

Ideelt set, jo færre sektioner du har, desto mindre ekstra HTML -KODE har du.

Du kan flette nogle widgets i den samme sektion ved at trække og slippe dem i ovenstående sektion og derefter slette den tomme sektion.

Og det er det, dit layout er optimeret!

Ny evaluering af webstedets ydeevne

Vi kontrollerer resultaterne i DevTools (Inspector) -vinduet:

• Vælg fanen "Netværk":

Der er nogle gode og positive ændringer her:

• Webstedet tager nu 568 millisekunder at indlæse
• Vi gik fra 81 anmodninger til 46
• Vælg fanen "Fyr", hvor du vil se, at vores præstationsscore er steget fra 73 til 98

Husk, at vi har optimeret vores ydeevne uden at bruge nogen tredjeparts plugins. Alt det krævede var enkle tweaks og bedste praksis.

Trin 13: Test resultaterne med bevægelseseffekter

Vi ønsker at gøre vores websted mere interaktivt og sjovt, men hvordan påvirker det vores præstationsresultater? Lad os se, hvad vi kan gøre.

Gør overskriften til et "fast" element:

• Vælg overskriften
• Gå til fanen "Avanceret"
• Udvid fanen "Bevægelseseffekter"
• Indstil "Sticky" til "Top"

Gør heltsektionen til et "fast" element:

• Vælg heltsektionen
• Gå til fanen "Style"
• Vælg rullelisten "Vedhæftet fil", og vælg "Fixed"

Brug a Indgangsanimation for heltens tekst (header):

• Vælg header -widgeten
• Gå til fanen "Avanceret"
• Udvid fanen "Bevægelseseffekter"
• Vælg Input Animation og indstil den til "Fade In"

Brug en inputanimation til heltenes tekstbeskrivelse (tekstredigeringswidget):

• Vælg widgeten Text Editor
• Gå til fanen "Avanceret"
• Udvid fanen "Bevægelseseffekter"
• Vælg "Input -animationen", og indstil den til "Fade In"

Gør det samme for de widgets, der kommer efter, for subtile effekter, når siden indlæses.

Lad os nu køre præstationstesten igen for at se, hvordan bevægelseseffekterne påvirkede vores score:

• Vend tilbage til vinduet "Inspektør"
• Vælg fanen "Fyr"
• Klik på "Opret en rapport"

Nu ser vi, at vores præstationsscore er reduceret til 97 - dette er bestemt ikke den store forskel, og det gør webstedet mere interessant og sjovt.

Kan du tro vores nye præstationsscore?

Vi er glade for, at du nu er fuldt udstyret til at øge din præstationsscore fra hvert Elementor -websted, du opretter. Det vil gøre en stor forskel for dit websteds opbygningsmål og succesen for din virksomhed.

Vi foreslår, at du bogmærker denne vejledning til fremtidig reference, så du kan undersøge effektiviteten af ​​dine websides sider og anvende bedste praksis til at optimere dit layout.

Og det er kun begyndelsen - den næste del af dette kursus dækkerbilledoptimering.

I selvstudiet vil vi gennemgå hvert billede på prøvewebstedet og lære at forbedre dem for endnu mere effektive indlæsningstider.

Hent Elementor Pro nu!

Konklusion

Så! Det er det for denne artikel, der viser dig, hvordan du optimerer dit webstedslayout med Elementor. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...