Breeze og Hyvä er to moderne frontends til Magento 2, som begge erstatter det tunge standardtema Luma og giver markant hurtigere sider. Den største forskel er, hvor meget der skal bygges om: Hyvä er en ny frontend skrevet fra bunden, mens Breeze bevarer Lumas struktur og derfor typisk kræver mindre tilpasning af dine eksisterende moduler.
Som Magento-udviklere hos CLKWEB arbejder vi med begge løsninger. Her gennemgår vi forskellene på teknik, modul-kompatibilitet, hastighed og omfanget af et projekt, så du kan vælge den frontend, der passer til din webshop.
Hvorfor skifte væk fra Luma?
Luma er Magento 2's standardfrontend. Den bygger på RequireJS, Knockout.js og jQuery, og på en typisk produktside indlæses mange JavaScript-filer, før siden er klar til brug. Det giver dårligere resultater i Core Web Vitals, især på mobil, og det gør frontend-udvikling tung, fordi en lille ændring ofte kræver, at man kender flere lag af JavaScript og layout-XML.
Både Breeze og Hyvä løser det grundlæggende problem: de fjerner eller erstatter Lumas tunge JavaScript-stak, så browseren skal hente og afvikle langt mindre kode. Resultatet er hurtigere sider og en kodebase, der er nemmere at vedligeholde. Men de gør det på to forskellige måder, og det har betydning for dit projekt.
Hvad er Hyvä?
Hyvä er et frontend-tema til Magento 2 (og Adobe Commerce), der er bygget fra bunden med Tailwind CSS og Alpine.js. Lumas RequireJS- og Knockout-baserede JavaScript er helt fjernet, og templates er skrevet om, så de er lette og enkle at arbejde med.
- Tailwind CSS bruges til styling i stedet for Lumas LESS-filer.
- Alpine.js håndterer interaktivitet som minikurv, menuer og produktvalg med meget lidt JavaScript.
- Ren kodebase uden Lumas arv, hvilket gør videreudvikling overskuelig for udviklere, der kender moderne frontend-værktøjer.
Prisen for den rene kodebase er, at moduler med egen frontend (for eksempel checkout-tilføjelser, produktkonfiguratorer eller fragtvalg) ikke virker af sig selv. De skal have et kompatibilitetsmodul, som oversætter modulets Luma-frontend til Hyvä. Til mange populære moduler findes der allerede kompatibilitetsmoduler, men til egne specialmoduler og mindre kendte udvidelser skal frontenden ofte skrives om. Checkout er et særligt kapitel, som du bør afklare tidligt i et Hyvä-projekt.
Læs mere om, hvordan vi arbejder med det, på vores side om Hyvä-webshops til Magento 2.
Hvad er Breeze (Breezefront)?
Breeze er udviklet af Swissup Labs og præsenteres på breezefront.com. Det er en open source-frontend, der erstatter Lumas tunge afhængigheder med en let JavaScript-løsning, men som bevarer Lumas struktur af templates, layout og styling. Det betyder, at et Breeze-tema ligner Luma under motorhjelmen, bare uden den tunge JavaScript-stak.
Fordelen er kompatibiliteten. Fordi strukturen er den samme, virker de fleste Magento-moduler med Breeze, og når et modul kræver tilpasning, er det typisk et mindre arbejde end en egentlig omskrivning. For en eksisterende webshop med mange moduler kan det betyde et kortere og mere forudsigeligt projekt.
Vi har specialiseret os i Breeze og har bygget en Magento-webshop med Breezefront, der scorer grønt på alle parametre i Google PageSpeed. Se mere om vores Breeze-webshop til Magento 2.
Breeze vs. Hyvä: sammenligning
Tabellen viser de vigtigste forskelle, som de typisk viser sig i praksis. Det konkrete billede afhænger altid af din webshop, dine moduler og dit design.
| Område | Breeze | Hyvä |
|---|---|---|
| Teknik | Let JavaScript, bevarer Lumas struktur og LESS | Tailwind CSS og Alpine.js, ny kodebase |
| Modul-kompatibilitet | De fleste moduler virker, enkelte kræver mindre tilpasning | Moduler med egen frontend kræver kompatibilitetsmodul eller omskrivning |
| Ombygning af eksisterende shop | Ofte mindre arbejde, især med mange moduler | Typisk større projekt, da frontenden bygges om |
| Hastighed | Markant hurtigere end Luma | Markant hurtigere end Luma |
| Videreudvikling | Kendt Luma-struktur for Magento-udviklere | Moderne værktøjer, kræver kendskab til Tailwind og Alpine.js |
| Bedst egnet til | Eksisterende shops med mange moduler, der vil være hurtigere uden stor ombygning | Nye shops eller redesign, hvor frontenden alligevel skal laves om |
Hastighed og Core Web Vitals
Begge frontends giver en stor forbedring i forhold til Luma, og i praksis er forskellen mellem dem sjældent det, der afgør din PageSpeed-score. Det, der oftest trækker ned, er tredjepartsscripts (chat, tracking, anmeldelser), store billeder uden moderne formater og moduler, der indlæser deres egen JavaScript på alle sider.
Derfor bør et frontend-skifte gå hånd i hånd med en gennemgang af resten af webshoppen: billeder i WebP, lazy-load, cache og en server, der svarer hurtigt. Vi har samlet de konkrete tiltag i guiden om Magento hastighedsoptimering.
Hvad påvirker prisen på et skifte?
Vi kan ikke give en fast pris uden at se webshoppen, men det er de samme faktorer, der afgør omfanget, uanset frontend:
- Antal moduler med egen frontend. Det er den største enkeltfaktor. Gennemgå din liste over installerede moduler og marker dem, der viser noget for kunden, for eksempel i kurv, checkout eller på produktsiden.
- Checkout. Bruger du en one step checkout eller fragtmoduler med pakkeshopvalg, skal de testes grundigt med den nye frontend.
- Design. Skal designet genbruges, eller er skiftet en anledning til et nyt design? Et nyt design øger omfanget, men passer ofte godt sammen med Hyvä.
- Egne tilpasninger. Specialudviklet frontend-kode i det nuværende tema skal flyttes eller skrives om.
- Test. Afsæt tid til at teste hele købsflowet på mobil og desktop, inden den nye frontend går live.
Har du mange moduler, og er målet først og fremmest en hurtigere shop, er Breeze ofte den mest direkte vej. Skal webshoppen alligevel have nyt design og en gennemgribende opdatering, kan Hyvä være et godt valg. Har du specialmoduler, kan vi hjælpe med tilpasningen gennem Magento-udvikling, og du kan se vores egne Magento 2-moduler her.
Sådan vælger du: en hurtig tjekliste
- Lav en liste over alle moduler, og find ud af, hvilke der har frontend-funktioner.
- Tjek, om der findes Hyvä-kompatibilitetsmoduler til de vigtigste af dem, eller om de virker med Breeze.
- Beslut, om designet skal bevares eller fornyes.
- Vurder, hvem der skal videreudvikle frontenden fremover, og hvilke værktøjer de kender.
- Sørg for, at hosting og cache er på plads, så frontenden ikke venter på en langsom server. Se hvad du bør kræve i guiden om Magento hosting.
Ofte stillede spørgsmål
Er Breeze eller Hyvä hurtigst?
Begge er markant hurtigere end Luma, og begge kan give gode resultater i Google PageSpeed. Forskellen i hastighed afhænger mere af billeder, tredjepartsscripts, moduler og hosting end af valget mellem de to frontends.
Kan jeg skifte til Breeze eller Hyvä på en eksisterende Magento 2-webshop?
Ja. Begge kan installeres på en eksisterende Magento 2-shop. Med Breeze er tilpasningen af moduler typisk mindre, fordi Lumas struktur bevares. Med Hyvä skal frontenden bygges om, og moduler med egen frontend kræver kompatibilitetsmoduler eller tilpasning.
Virker mine moduler med den nye frontend?
Moduler uden frontend, for eksempel integrationer og administrationsværktøjer, påvirkes normalt ikke. Moduler, der viser noget for kunden, skal testes. Med Breeze virker de fleste, mens de med Hyvä typisk kræver et kompatibilitetsmodul. Kontakt os for at få gennemgået netop dine moduler.
Skal jeg vælge frontend, før jeg starter en ny webshop?
Ja, det er en fordel at beslutte det fra start, fordi valget påvirker design, valg af moduler og udviklingsarbejdet. Starter du forfra, er begge løsninger realistiske, og valget handler mest om dine moduler og om, hvem der skal videreudvikle shoppen.
Vil du have hjælp til at vælge mellem Breeze og Hyvä, eller have en vurdering af, hvad et skifte kræver på din webshop? Kontakt CLKWEB for en uforpligtende snak med en af vores Magento-udviklere.
