Denne tråd er over 6 måneder gammel
Er du sikker på, at du har noget relevant at tilføje?
Optimering af hjemmeside hastighedAf Monster Nørd Juusuhako | 01-02-2019 12:37 | 3735 visninger | 13 svar, hop til seneste
Hej folkens,
sidder med en test-hjemmeside for at "lære" at bedst optimere hjemmesider igennem Wordpress.
Det problem jeg oplever nu er iflg. GTMetrix:
- Use a content delivery network (CDN)
- Add expires headers
- Make fewer HTTP requests
Den med requests gik fra 0 i score til 61 via et plugin, men der stadig 12 .js-filer.
Hvordan fanden starter man lige ud med at optimere alle de her ting? Jeg har ikke erfaring med det og jeg synes ikke det virker optimalt at blot prøve det ene plugin efter det andet? --
Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus RX580 4GB
Gør brug af mindre plugins og et eget udviklet tema så du har fuld kontrol over alle filerne, samt undgå at hente eksterne ressourcer ind (Google fonts, fontawesome, ekstern jquery, etc). -- Veni, Vidi, Vici.
dimidium facti qui coepit habet
faber est quisque fortunae suae
#1
Jeg bruger Elementor Pro til at lave hjemmesiderne. Til tema OceanWP, da det fungerer (umiddelbart?) godt med Elementor. -- Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus RX580 4GB #2
Tema builders og tilhørende pagebuilders er altid en pain in the ass og optimere. Dertil er de tests du tester ud fra kun baseret på best practices, din hjemmeside kan fint score 100% og stadig have potentiale for at være hurtigere. Tema builders har en tendens til at være bloated og inkludere scripts + filer hvor det ikke er nødvendigt, og sløver helt automatisk siden gevaldigt. Vil anbefale at udvikle custom hvor muligt.
-- Veni, Vidi, Vici.
dimidium facti qui coepit habet
faber est quisque fortunae suae
?Først og fremmest skal du droppe GT Metrix. Det er desværre ikke så godt et tool. Brug https://www.webpagetest.org[...] https://tools.pingdom.com[...] og/eller Googles Lighthouse audit (er indbygget i Chrome dev tools).
Som #1 er inde på, vil et custom tema altid performe bedst, og det vil jeg altid anbefale at lave eller få lavet.
Men når du nu bruger et tema, så er OceanWP faktisk et godt valg, for det er et af de hurtigste. Du har også mulighed for at deaktivere hver enkelt style og script, så du kun bruger det, der er nødvendigt, og du derved undgår "bloat".
Det første du kan gøre er at bruge et optimerings-plugin. Der vil du kunne hente rigtigt meget. Både pga. browser caching og dynamisk caching, men også en række andre optimeringer. WP Rocket er pt. markedets bedste, men det er ikke gratis.
Herudover er der mange mange ting, du kan forbedre. Mit hastighedsoptimerings cheat sheet, som jeg har bygget op gennem de sidste par år har 50+ punkter der kan optimeres. Så der er masser at gøre. Noget er mere teknisk end andet. Hvis du gerne vil lære det, så skal du først og fremmest have erfaring med at udvikle et custom tema. Herudover skal du researche en masse på de forskellige optimeringsteknikker, best practices osv. Og så skal du vide noget om hosting.
Et godt sted at starte er denne artikel: https://kinsta.com[...] Det er en af de mest omfattende optimeringsartikler, jeg har fundet. Den er lang, men du kommer næsten hele vejen rundt.
-- Sidst redigeret 01-02-2019 13:08 Det er mange aar sinde jeg har rodet med websites saa jeg ved ikek hvor brugt det er mere
men et tip jeg vil abefale er at store for at alt din graffiske ting (jpeg og png) er optimeret
der kna netm skrue 10-20% af disse filer uden at aendre pixels
Jeg vil anbefale at kigge paa ect
https://encode.ru[...] -- Sven Bent - Dr. Diagnostic
www.TechCenter.[...] - Home of Project Mercury #3
Det er ifb. med arbejde, så kan desværre ikke komme uden om Elementor.
#4
Tak for rådene. Jeg har desværre ingen erfaring med custom tema, hvilket er hvorfor jeg bruger OceanWP. Angående optimeringsplugins har jeg de sidste par timer rodet med Autoptimize samt Swift Performance Lite, problemet er at mit "optimerings setup" virker meget ...ustabilt. Tjekker jeg f.eks. hjemmesiden på pingdom får jeg nogle gange et resultat på 1-1.5 sekunder, andre gange +3 sekunder. Nogle gange "hænger" den i længere tid på den allerførste request.
Jo, det hjælper da at bruge de plugins, men oplevelsen svinger meget. Nogle gange kører det bare, andre gange hænger den når jeg trykker mig igennem diverse undersider.
Udover plugins er jeg faktisk ikke sikker på, hvor jeg skal kigge, hvis noget skal gøres "manuelt".
Jeg tænker dog at kigge dit link igennem i weekenden.
#5
Billederne lader jeg vente til sidst, de skal selvfølgelig have en helt anden opløsning og ikke være .png. Pt. er billederne i "raw" format, men de 3 kategorier jeg søger hjælp til burde ikke blive påvirket af billeder, så vidt jeg ved. -- Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus RX580 4GB --
Sidst redigeret 01-02-2019 17:52 #6 Okay. Men OceanWP er udemærket. :)
Der vil være en variation, når du tester. Men er den så stor, så kan det godt være pga. billig shared hosting.
Men for at tage de 3 punkter du spørger om helt konkret:
- Use a content delivery network (CDN)
Et CDN er et netværk af servere som opbevarer (cacher) css-filer, scripts og lignende. En populær og gratis CDN-udbyder er Cloudflare. Når en bruger besøger din hjemmeside, så hentes resourcerne fra nærmeste Cloudflare server i stedet for dit webhotels server. Jo kortere afstand der er til serveren, jo hurtigere hentes det. Cloudflare har også en masse anden funktionalitet der gør, at resourcerne hentes hurtigt og at din hjemmeside er beskyttet mod angreb. (Så vidt jeg ved leverer Cloudflare ikke billeder over deres netværk. Det gør eksempelvis KeyCDN, som også er en populær udbyder)
Cloudflare er nemt at opsætte. Jeg vil i øvrigt også anbefale dig at bruge deres DNS til domænet. Cloudflare har et af verdens hurtigste DNS-netværk.
- Add expires headers
Den er nem. Dette er browser caching. Dvs. når en person besøger din hjemmeside, så downloades alle resourcer første gang. Næste sidevisning, eller næste gang de behøver din hjemmeside om en uge eller to uger, så hentes resourcerne direkte fra deres computer (cache) i stedet for at downloades på ny.
Det er kun lidt kode der skal tilføjes i .htaccess, for at aktivere det. Bruger du WP-rocket, så bliver det tilføjet helt automatisk.
- Make fewer HTTP requests
Det ér bedre at reducere antallet af HTTP requests (dvs. billeder, css-filer, scripts m.m. som hentes, når en side loades), men det er faktisk en sandhed med modifikationer. Kører din host med HTTP/2, den nye version af HTTP protokollen, så hentes resourcerne faktisk parallelt. Det er derfor hurtigere at hente mange små filer i stedet for én gigantisk javascript-fil eller én gigantisk css-fil.
Men hvis der er resourcer som du helt kan elimenere, og derved bringe antallet af requests ned, så er det selvfølgelig godt. Måske er der plugins der ikke er nødvendige, fordi du med få linjers kode kan lave det samme i dit tema eller din functions.php fil. Eller også har du et Facebook feed (big no go) som tilføjer absurd mange requests og flere mb data. Det kan og skal du selvfølgelig eliminere.
At tilføje lazyloading bringer også antallet af requests ned. Dvs. at billeder som er udenfor skærmbilledet ikke bliver hentet og vist, før man scroller ned hvor billedet rent faktisk er. Lazyload er også indbygget i WP-Rocket. Lazyload kan også bruges til at loade et Facebook widget eller andet indhold der er udenfor skærmbilledet. -- Sidst redigeret 01-02-2019 18:56 #7
Tak for svaret. Har hørt CF blive nævnt en del, så det må jeg lige prøve og se, om jeg ikke kan få til at fungere. Tænker efter at have gjort det en gang eller to burde det være til at finde ud af fremover.
Headers har jeg fundet ud af, dog hjælper det ikke rigtig på "første gangs besøg", men det selvfølgelig fint nok til gentagende besøg af samme bruger.
HTTP requests er lidt hit or miss? Elementor (plus diverse plugins) har en del ubrugt CSS (backend), som ender med at komme med når det hele samles, hvilket giver unødig indlæsninger af diverse kode. Endte faktisk med at få en højere load tid på en test-side, højst sandssynlig fordi der er så meget CSS og at det tager en krig at hente det hele i ét hug.
Jeg tænker jeg lige bygger den samme side op fra bunden af og tester siden, hver gang jeg putter noget nyt på og ser hvor der evt. skulle være en flaskehals. :o) -- Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus RX580 4GB #4 hvad skulle argumentet være for at droppe GT Metrix? imo. har alle speed test sine styrker og svagheder, hvor det bedste nok vil være at anvende en kombination af dem alle, da der er gode ting ved dem alle - Forstår man at læse diverse hastighedsrapporter og optimere på det som giver mening, så er man allerede kommet langt. Derudover bør man heller ikke gå vildt meget op i points på diverse test side - Score på 100 bør aldrig være et mål i sig selv.
Derudover synes jeg også det er forkert at sige at custom tema altid performe bedst. Jeg kan finde mange eksempler på et standard tema som performer bedre end custom. Siden er i den grad styret af, hvor vidt personen bag forstår at adminsitrer den ordenligt. Man kan sagtens have et custom tema fyldt med diverse scripts som smadrer loadtiden fuldstændigt, og derfor performer langt dårligere end et tema administreret af en person som ved hvad han laver :-)
#8 Ja, CloudFlare kan klart anbefales. Der skal nok være noget at hente for dig. Eneste minus er dog, at de ikke hoster billeder over deres CDN. Til dit behov går det nok. Hvad har du gjort i forhold til optimering af billeder? Sørg for ordenlig komprimering af dine billeder, både før upload og ved upload på siden. Jeg kan personligt anbefale Shortpixel til denne del. Ligeledes kan der også være meget at hente for dig ved at anvende billeder et webp-format.
WP Rocket har lavet en sammenligning af Webp formatet, hvor resultaterne taler for sig selv:
WebP vs. JPG: https://wprocket-eb2.kxcdn.com[...]
WebP vs. PNG: https://wprocket-eb2.kxcdn.com[...]
Resultaterne er ret vilde. Ligeledes kan webp også lave transparente billeder ligesom png. Udfordringen ved webp er dog, at det er ikke alle browsere som kan læse dette format. Det kan løses ved både at være et img og picture tag i sin HTML eller i sin htaccess få opsat, så browsere som kan læse webp vil blive præsenteret for webp og ellers få vist jpeg/png.
HTTP requests og ekstra CSS bør ikke være det store problem. Forstå mig ret, helt klart så er det rart at have "clean kode", hvilket også er årsagen til, at et custom tema har været nemt. Jeg tvivler dog på, at dine stylesheets er noget af det tunge på din hjemmeside - Du har tidligere nævnt, at du bruger Autoptimize så må du vel have combined dine stylesheets samt minified koden? Hvis du dog føler det er et problem, så kan du køre din minified & combined CSS igennem en "Remove critical CSS generator" og smide denne direkte ind i Autoptimize. Frank som er udvikleren af Autoptimize har skrevet et fint blogindlæg omkring dette trick: https://aoxoa.co[...]
Det vigtigste for dig i forhold til HTTP requests er egentlig at se på, hvad det er for nogle requests som kommer - Er det for eksterne domæner? Ligeledes hvad med alle dine interne filer, bliver de alle loadet på samme måde (Bliver nogle filer måske hentet med www og andre uden?)
Hvis du smider et link til dine rapporter vil det måske være lettere at give konkrete forslag til ting som kan gøres. :-) -- Gæstebruger, opret dit eget login og få din egen signatur. #8 Det er lige netop pga. alt den ubrugte kode, at vi anbefaler at bygge sit eget tema. Gør man det, så har man jo fuld kontrol over det, og behøver kun tilføje lige nøjagtig den CSS og javascript der rent faktisk er brug for.
Jeg optimerede for en rum tid tilbage en shop med et tema. På forsiden var det kun 3% af alt CSS der blev brugt. Av.
Problemet med dem der bygger temaer er jo, at de har én agenda; at sælge så mange temalincenser som muligt. Derfor gør de sig umage med at lave temaer som kan bruges af mange forskellige virksomheder: fra billedtunge webbureauer med kreativt design til webshops, blogs og små visitkorthjemmesider for at nævne nogle. Det betyder et væld af funktioner, men det er sjældent man rent faktisk brugere mere end en brøkdel af det.
Hvis du har valgt concatination (sammenlægning af styles og javascript), så vil jeg anbefale dig, at fravælge det igen. Din host supporterer højest sandsynligt HTTP/2, og så er det bedre at hente mange filer fremfor få store. HTTP/2 kræver dog at SSL er aktiveret, men det bør alle have aktiveret alligevel.
Prøv også for hver gang, du har brug for at tilføje funktionalitet til en hjemmeside, at kigge på om det kan løses uden et plugin. Ikke alle plugins er dårlige, men tit indeholder plugins adskillige ekstra funktioner, hvor du blot skal bruge den ene, og så tilføjer det unødig performance overhead.
Men husk nu også at kigge på hosting. Det er også en af de største faktorer, hvis ikke den største. Hvis man vil under Googles anbefalede maksimum på 2 sekunder load tid, og lægge sig omkring 1 sekund, som er at foretrække, så er det nødvendigt med ordentlig hosting.
Og det er i øvrigt ikke kun Googles søgemaskine der belønner hurtige hjemmesider. Det medvirker også til billigere klikpriser/annoncepriser i Facebook annoncer og Google AdWords. -- Sidst redigeret 03-02-2019 16:36 Bare fordi der anbefales CDN, er det ikke altid en fornuftig løsning.
Er dine brugere fra DK, så vil et CDN ikek give dig en pind, andet end et lidt sløvere site og en server der smiler.
-- #11 Det kommer helt an på, hvor din host ligger. Er det f.eks. i Holland, så er Cloudflares CDN i København hurtigere.
Jeg har en kunde, hvor det er tilfældet. Herudover bliver ca. 85% af alle assets fra denne kunde hentet cached fra Cloudflare og sparer derfor hotellet fra en masse unødig belastning.
Men ellers giver jeg dig ret. Har man 0 internationale kunder, og er serveren i Danmark, så giver det ikke mening. -- #13 naturligvis, jeg gik ud fra han hoster i DK, men helt rigtigt. --
Grundet øget spam aktivitet fra gæstebrugere, er det desværre ikke længere muligt, at oprette svar som gæst.
Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.
Opret bruger | Login
|
Du skal være logget ind for at tilmelde dig nyhedsbrev.
Hvilken udbyder har du til internet? 200 personer har stemt - Mit energiselskab (Ewii f.eks) 10%
|