Gjør som VSCode: 7 tips for effektive nettsider, helt uten rammeverk

Avmystifisering av indekseringsteknikker, W3C med klar cookie-beskjed, effektiv DOM-manipulering og OL-påvirkning på internettrafikk i ukas ForrigeUke.

VSCode bruker ingen rammeverk for å tegne DOM-en sin, så hvorfor skal du? 📸: <a href="https://unsplash.com/@afgprogrammer?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash">Mohammad Rahmani</a> / <a href="https://unsplash.com/photos/black-samsung-flat-screen-computer-monitor-LrxSl4ZxoRs?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash">Unsplash</a>
VSCode bruker ingen rammeverk for å tegne DOM-en sin, så hvorfor skal du? 📸: Mohammad Rahmani / Unsplash Vis mer

I god OL-ånd var dette uken for stuping, turning og hekkeløp 🥴 — og 1146 ting skjedde i frontend-verdenen!

Avmystifisering av indekseringsteknikker 🕵️

Har du noen gang grublet på hvordan Google bruker JavaScript når de crawler og indekserer nettsider?

Vercel har nylig samarbeidet med MERJ, et ledende SEO og data engineering firma, og gjennomført nye eksperimenter for å undersøke Google´s crawling-teknikker.

Arbeidet baserer seg på 4 gamle myter som har skapt usikkerhet rundt best pracices for søkemotoroptimalisering (SEO):

  1. Google kan ikke rendre client-side JavaScript.
  2. Google behandler JavaScript-sider ulikt.
  3. Rendering queue og timing har betydelig innvirkning på SEO.
  4. JavaScript-tunge nettsteder har langsommere page discovery.

Artikkelen tar for seg disse 4 mytene, og fremlegger tester og resultater fra disse testene. Basert på dette legger de frem generelle anbefalinger knyttet til disse mytene.

W3C med klar cookie-beskjed 🍪

Google annonserte nylig at de ikke lenger planlegger å avvikle tredjeparts informasjonskapsler, og i den forbindelse har W3C skrevet en artikkel for å gjøre sin posisjon klar:

De mener disse informasjonskapslene, kjent som third party cookies på engelsk, ikke er bra for nettet generelt 🚫.

Hovedårsaken de trekker fram er at disse informasjonskapslene aktiverer skjult sporing av aktivitet, og derfor er skadelig for personvernet til brukerne.

De trekker også frem at denne sporingen og datainnsamlingen kan støtte målretting av politiske budskap, noe som i kan ha en skadelig innvirkning på samfunnet.

Effektiv DOM-manipulering med vanilla JS 🍨

Frontend Masters har nylig skrevet et blogginnlegg om hvordan å gjøre DOM-optimalisering, og har noen interessante takeaways.

Målet med dette er å unngå overflødig minnebruk, og dermed gjøre appene man skriver raskere. DOM (Document Object Model) er live-viewet av HTML-en til en nettside som rendres i nettleseren, og DOMen har en trestruktur.

Hvorfor skal man bry seg om dette? I følge artikkelen er hovedgrunnen til at man ønsker å manipulere DOMen selv bedre ytelse, og VS Code er et eksempel på et prosjekt som er skrevet i vanilla JavaScript for å kunne være så nærme DOMen som mulig, og dermed unngå unngå potensielle unødvendige data-strukturer og re-renders som kan følge med moderne web-rammeverk.

Til slutt lister de opp en rekke tips som kan være med å øke ytelsen på nettsider vha. effektiv DOM-manipuering:

  1. Foretrekk å endre eksisterende elementer fremfor å opprette nye når det er mulig.
  2. Bruk effektive metoder som textContent, insertAdjacentHTML og appendChild.
  3. Administrer referanser nøye, og bruk WeakMap og WeakRef for å unngå minnelekkasjer.
  4. Rydd opp i event-listeners riktig for å forhindre unødvendig overhead.
  5. Vurder teknikker som event-delegation for mer effektiv håndtering av hendelser.
  6. Bruk verktøy som AbortController for enklere håndtering av flere event-lyttere.
  7. Bruk DocumentFragments for batch-innsettinger og forstå konsepter som det virtuelle DOM for bredere optimaliseringsstrategier.

OL-påvirkning på internettrafikk🚦

Har du noen gang tenkt over hvordan store internasjonale begivenheter påvirker internettrafikken?

Cloudflare har data som gir et globalt bilde av hva som skjer på internett, og har nylig publisert en bloggartikkel som fokuserer på hvordan åpningsseremonien og de første dagene av de olympiske lekene i Paris har påvirket internettrafikken.

De legger frem en del interessant statistikk som blant annet at tenningen av OL-ilden og Celin Dion’s solonummer var det øyeblikket som skapte den største nedgangen i internettrafikk, at det var en signifikant global nedgang i global internettrafikk på åpningsdagen av lekene, og at interessen for ofisielle OL-nettsider har økt mye.

Det var alt for denne gang, sees neste uke👋