Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation of the 2020 mobile web chapter to Dutch #2064

Merged
merged 8 commits into from
Mar 12, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions src/content/en/2020/mobile-web.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ Beyond organic traffic from search engines, **Ad clicks** could be a key source

First impressions matter. Delivering page content in a timely manner is critical for avoiding visitor abandonment and user frustration. Loading performance is a key aspect of the acquisition phase, poor loading performance results in users abandoning this journey.

A <a hreflang="en" href="https://web.dev/milliseconds-make-millions/">recent study</a> showed that 0.1s mSpeed improvement increased conversion rates by +8.4% for retail sites and +10.1% for travel sites.
A <a hreflang="en" href="https://web.dev/milliseconds-make-millions/">recent study</a> showed that 0.1s mobile speed improvement increased conversion rates by +8.4% for retail sites and +10.1% for travel sites.

Loading performance is a vast topic, so we picked a couple of aspects to cover here.

Expand All @@ -167,8 +167,7 @@ A good LCP score is 2.5s at p75. We found that the median LCP at p75 is 2.6s on

{{ figure_markup(
image="median-p75-lcp-score.png",
alt="Median p75 LCP score",
caption='Median p75 LCP score',
caption="Median p75 LCP score",
description="A chart showing that the median LCP at p75 is 2.6s on mobile and 2.3s on desktop",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQNyVui4x9yanLKpp8Zz92IJ9c2NKCN_2g7SH-vRoelqT3nABB_uTQnXXScCUo6D-Uis1_wDzwcdGzx/pubchart?oid=964425991&format=interactive",
sheets_gid="872081120"
Expand All @@ -185,8 +184,7 @@ Improperly sized and unoptimized images are frequent sources for image performan

{{ figure_markup(
image="pages-with-properly-sized-images.png",
alt="Pages with properly sized images",
caption='Pages with properly sized images',
caption="Pages with properly sized images",
description="A chart showing that 41.20% of mobile pages have improperly sized images.",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQNyVui4x9yanLKpp8Zz92IJ9c2NKCN_2g7SH-vRoelqT3nABB_uTQnXXScCUo6D-Uis1_wDzwcdGzx/pubchart?oid=1030767824&format=interactive",
sheets_gid="699494809"
Expand Down
6 changes: 3 additions & 3 deletions src/content/nl/2019/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Als we aan gebruikers met een handicap denken, moeten we niet vergeten dat hun g

Vaak heeft het verbeteren van de toegankelijkheid van uw site voordelen voor iedereen. Hoewel we mensen met een handicap doorgaans zien als mensen met een blijvende handicap, kan iedereen een tijdelijke of situationele handicap hebben. Iemand kan bijvoorbeeld permanent blind zijn, een tijdelijke ooginfectie hebben of, in bepaalde situaties, buiten onder een felle zon staan. Dit kan allemaal verklaren waarom iemand zijn scherm niet kan zien. Iedereen heeft situationele handicaps, en dus het verbeteren van de toegankelijkheid van uw webpagina zal de ervaring van alle gebruikers in elke situatie verbeteren.

De <a hreflang="en" href="https://www.w3.org/WAI/WCAG21/quickref/">Richtlijnen voor Toegankelijkheid van Webinhoud</a> (WCAG) adviseren hoe je een website toegankelijk kunt maken. Deze richtlijnen zijn gebruikt als basis voor onze analyse. In veel gevallen is het echter moeilijk om de toegankelijkheid van een website programmatisch te analyseren. Het webplatform biedt bijvoorbeeld verschillende manieren om vergelijkbare functionele resultaten te bereiken, maar de onderliggende code die ze aandrijft, kan compleet anders zijn. Daarom is onze analyse slechts een benadering van de algehele webtoegankelijkheid.
De <a hreflang="en" href="https://www.w3.org/WAI/WCAG21/quickref/">Richtlijnen voor Toegankelijkheid van Webinhoud</a> (WCAG) adviseren hoe u een website toegankelijk kunt maken. Deze richtlijnen zijn gebruikt als basis voor onze analyse. In veel gevallen is het echter moeilijk om de toegankelijkheid van een website programmatisch te analyseren. Het webplatform biedt bijvoorbeeld verschillende manieren om vergelijkbare functionele resultaten te bereiken, maar de onderliggende code die ze aandrijft, kan compleet anders zijn. Daarom is onze analyse slechts een benadering van de algehele webtoegankelijkheid.

We hebben onze meest interessante inzichten opgedeeld in vier categorieën: leesgemak, media op internet, gemakkelijke paginanavigatie en compatibiliteit met ondersteunende technologieën.

Expand Down Expand Up @@ -122,7 +122,7 @@ Hoewel dit uitzonderlijk belangrijk is, moeten we ervoor zorgen dat onze pagina'

Koppen zijn niet alleen visueel nuttig, maar ook voor schermlezers. Ze stellen schermlezers in staat snel van sectie naar sectie te springen en helpen aan te geven waar de ene sectie eindigt en de andere begint.

Om verwarring van gebruikers van schermlezers te voorkomen, moet u ervoor zorgen dat u nooit een kopniveau overslaat. Ga bijvoorbeeld niet rechtstreeks van een `H1` naar een `H3` en sla de `H2` over. Waarom is dit zo belangrijk? Omdat dit een onverwachte wijziging is, waardoor een gebruiker van een schermlezer denkt dat hij een stukje inhoud heeft gemist. Dit kan ertoe leiden dat ze helemaal opnieuw gaan zoeken naar wat ze hebben gemist, zelfs als er niets ontbreekt. Bovendien help je al je lezers door een consistenter ontwerp te behouden.
Om verwarring van gebruikers van schermlezers te voorkomen, moet u ervoor zorgen dat u nooit een kopniveau overslaat. Ga bijvoorbeeld niet rechtstreeks van een `H1` naar een `H3` en sla de `H2` over. Waarom is dit zo belangrijk? Omdat dit een onverwachte wijziging is, waardoor een gebruiker van een schermlezer denkt dat hij een stukje inhoud heeft gemist. Dit kan ertoe leiden dat ze helemaal opnieuw gaan zoeken naar wat ze hebben gemist, zelfs als er niets ontbreekt. Bovendien help u al uw lezers door een consistenter ontwerp te behouden.

Met dat gezegd zijnde, hier zijn onze resultaten:

Expand Down Expand Up @@ -186,7 +186,7 @@ Bij veel populaire schermlezers kunnen gebruikers ook navigeren door snel door k

Een <a hreflang="en" href="https://webaim.org/techniques/skipnav/">vermijdingslink</a> is een link die bovenaan een pagina wordt geplaatst en waarmee schermlezers of gebruikers met alleen toetsenbord direct naar de hoofdinhoud kunnen gaan. Het "slaat" effectief alle navigatielinks en menu's boven aan de pagina over. Vermijdingslinks zijn vooral handig voor toetsenbordgebruikers die geen schermlezer gebruiken, aangezien deze gebruikers gewoonlijk geen toegang hebben tot andere modi voor snelle navigatie (zoals Hoofdinhoudsgebieden en koppen). 14,19% van de pagina's in onze steekproef bleken vermijdingslinks te hebben.

Als je zelf een vermijdingslink in actie wilt zien, dan kan dat! Voer gewoon een snelle Google-zoekopdracht uit en klik op "<kbd>tab</kbd>" zodra u op de pagina's met zoekresultaten terechtkomt. U wordt begroet met een eerder verborgen link, net als die in afbeelding 9.7.
Als u zelf een vermijdingslink in actie wilt zien, dan kan dat! Voer gewoon een snelle Google-zoekopdracht uit en klik op "<kbd>tab</kbd>" zodra u op de pagina's met zoekresultaten terechtkomt. U wordt begroet met een eerder verborgen link, net als die in afbeelding 9.7.

{{ figure_markup(
image="example-of-a-skip-link-on-google.com.png",
Expand Down
2 changes: 1 addition & 1 deletion src/content/nl/2020/cms.md
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ De top 5 CMS'en zouden hier kunnen verbeteren. Slechts 50% van de webpagina's di

#### SEO

Zoekmachineoptimalisatie (of SEO) is het optimaliseren van websites om ervoor te zorgen dat de inhoud van uw website gemakkelijker vindbaar is in zoekmachines. Dit wordt dieper behandeld in ons hoofdstuk [SEO](./seo), maar een deel betreft het verzekeren dat de site zo is gecodeerd dat de crawlers van zoekmachines zoveel mogelijk informatie kunnen verstrekken om het hen zo gemakkelijk mogelijk te maken om uw site op de juiste manier weer te geven in de resultaten van zoekmachines. In vergelijking met een op maat gemaakte website, zou je verwachten dat een CMS goede SEO-mogelijkheden biedt, en de Lighthouse-scores in deze categorie laten hoge cijfers zien:
Zoekmachineoptimalisatie (of SEO) is het optimaliseren van websites om ervoor te zorgen dat de inhoud van uw website gemakkelijker vindbaar is in zoekmachines. Dit wordt dieper behandeld in ons hoofdstuk [SEO](./seo), maar een deel betreft het verzekeren dat de site zo is gecodeerd dat de crawlers van zoekmachines zoveel mogelijk informatie kunnen verstrekken om het hen zo gemakkelijk mogelijk te maken om uw site op de juiste manier weer te geven in de resultaten van zoekmachines. In vergelijking met een op maat gemaakte website, zou u verwachten dat een CMS goede SEO-mogelijkheden biedt, en de Lighthouse-scores in deze categorie laten hoge cijfers zien:

{{ figure_markup(
image="cms-seo-lighthouse-score.png",
Expand Down
4 changes: 2 additions & 2 deletions src/content/nl/2020/compression.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Voor op afbeeldingen gebaseerde middelen is op tekst gebaseerde compressie minde
)
}}

## Hoe gebruik je HTTP-compressie?
## Hoe gebruikt u HTTP-compressie?

Om de grootte van de bestanden die we willen aanbieden te verkleinen, kan men eerst enkele minimizers gebruiken, bijv. <a hreflang="en" href="https://github.com/kangax/html-minifier">HTMLMinifier</a>, <a hreflang="en" href="https://github.com/ben-eb/cssnano">CSSNano</a> of <a hreflang="en" href="https://github.com/mishoo/UglifyJS2">UglifyJS</a>. Er worden echter grotere voordelen verwacht van het gebruik van compressie.

Expand Down Expand Up @@ -95,7 +95,7 @@ Omdat voorcompressie vooraf wordt gedaan, kunnen we meer tijd besteden aan het c

Momenteel wordt praktisch alle tekstcompressie uitgevoerd door een van de twee HTTP-inhoudscoderingen: <a hreflang="en" href="https://tools.ietf.org/html/rfc1952">Gzip</a> en <a hreflang="en" href="https://github.com/google/brotli">Brotli</a>. Beide worden breed ondersteund door browsers: <a hreflang="en" href="https://caniuse.com/?search=brotli">kan ik Brotli gebruiken</a>/<a hreflang="en" href="https://caniuse.com/?search=gzip">kan ik Gzip gebruiken</a>

Als je Gzip wilt gebruiken, overweeg dan om [Zopfli](https://en.wikipedia.org/wiki/Zopfli) te gebruiken, die kleinere Gzip-compatibele bestanden genereert. Dit moet vooral worden gedaan voor voorgecomprimeerde bronnen, aangezien hier de grootste <a hreflang="en" href="https://cran.r-project.org/web/packages/brotli/vignettes/brotli-2015-09-22.pdf">winst wordt verwacht</a>. Zie deze <a hreflang="en" href="https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/">vergelijking tussen Gzip en Zopfli</a> die rekening houdt met verschillende compressieniveaus voor Gzip.
Als u Gzip wilt gebruiken, overweeg dan om [Zopfli](https://en.wikipedia.org/wiki/Zopfli) te gebruiken, die kleinere Gzip-compatibele bestanden genereert. Dit moet vooral worden gedaan voor voorgecomprimeerde bronnen, aangezien hier de grootste <a hreflang="en" href="https://cran.r-project.org/web/packages/brotli/vignettes/brotli-2015-09-22.pdf">winst wordt verwacht</a>. Zie deze <a hreflang="en" href="https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/">vergelijking tussen Gzip en Zopfli</a> die rekening houdt met verschillende compressieniveaus voor Gzip.

Veel [populaire servers](https://en.wikipedia.org/wiki/HTTP_compression#Servers_that_support_HTTP_compression) ondersteunen dynamisch en/of voorgecomprimeerd HTTP en veel van hen ondersteunen [Brotli](https://en.wikipedia.org/wiki/Brotli).

Expand Down
6 changes: 3 additions & 3 deletions src/content/nl/2020/fonts.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ We kunnen het effect van deze instellingen op First Contentful Paint en Largest
)
}}

Er zijn twee andere interessante gevolgtrekkingen uit deze gegevens. Je zou kunnen verwachten dat de instelling `block` een aanzienlijke impact heeft op FCP, vooral op mobiel, maar in de praktijk is het effect niet zo groot. Dat suggereert dat het wachten op lettertypen zelden de beperkende factor is voor de prestaties van de webpagina als geheel, hoewel het zeker een belangrijke factor zou zijn op pagina's zonder veel bronnen, zoals afbeeldingen. De `auto` instelling (wat je ook krijgt als je het niet specificeert) is aan de browser. Het lijkt veel op `block` omdat <a hreflang="en" href="https://nooshu.github.io/blog/2020/02/23/improving-perceived-performance-with-the-css-font-display-property/">de standaard in de meeste gevallen blokkeren is</a>.
Er zijn twee andere interessante gevolgtrekkingen uit deze gegevens. U zou kunnen verwachten dat de instelling `block` een aanzienlijke impact heeft op FCP, vooral op mobiel, maar in de praktijk is het effect niet zo groot. Dat suggereert dat het wachten op lettertypen zelden de beperkende factor is voor de prestaties van de webpagina als geheel, hoewel het zeker een belangrijke factor zou zijn op pagina's zonder veel bronnen, zoals afbeeldingen. De `auto` instelling (wat u ook krijgt als u het niet specificeert) is aan de browser. Het lijkt veel op `block` omdat <a hreflang="en" href="https://nooshu.github.io/blog/2020/02/23/improving-perceived-performance-with-the-css-font-display-property/">de standaard in de meeste gevallen blokkeren is</a>.

Ten slotte is een rechtvaardiging voor het gebruik van `fallback` het verbeteren van de Largest Content Paint-tijden in vergelijking met `swap` (wat waarschijnlijker de visuele bedoeling van de ontwerper respecteert), maar de gegevens ondersteunen dit geval niet; deze prestatiestatistiek is niet beter. Misschien is dit de reden waarom de instelling niet populair is, die door slechts ongeveer 1% van de pagina's wordt gebruikt.

Expand Down Expand Up @@ -220,7 +220,7 @@ Vervolgens zullen we kijken of deze bron-hints een invloed hebben op de paginapr
)
}}

Analyse van deze gegevens suggereert dat de `dns-prefetch`-instelling, hoewel de meest populaire, de prestaties niet veel of helemaal niet verbetert. Vermoedelijk wordt de DNS voor populaire weblettertypeservers waarschijnlijk toch in de cache opgeslagen. De andere instellingen geven veel meer waar voor je geld, waarbij `preconnect` een goede plek is voor gebruiksgemak, flexibiliteit en prestatieverbetering. Vanaf maart 2020 raadt Google Fonts aan om deze regel toe te voegen aan de HTML-bron, direct voor de CSS-link:
Analyse van deze gegevens suggereert dat de `dns-prefetch`-instelling, hoewel de meest populaire, de prestaties niet veel of helemaal niet verbetert. Vermoedelijk wordt de DNS voor populaire weblettertypeservers waarschijnlijk toch in de cache opgeslagen. De andere instellingen geven veel meer waar voor uw geld, waarbij `preconnect` een goede plek is voor gebruiksgemak, flexibiliteit en prestatieverbetering. Vanaf maart 2020 raadt Google Fonts aan om deze regel toe te voegen aan de HTML-bron, direct voor de CSS-link:

```html
<link rel="preconnect" href="https://fonts.gstatic.com">
Expand Down Expand Up @@ -356,4 +356,4 @@ Ten slotte is het de moeite waard om een nieuw concept in de weblettertypetechno

Het concept in zijn eenvoudigste bewoordingen is dat slechts een deel van een bepaald lettertypebestand hoeft te worden gedownload om de inhoud op een bepaalde pagina weer te geven. Als de pagina daarna wordt geladen, wordt er een 'patch' aan het lettertypebestand geleverd die alleen de glyphs bevat die nodig zijn om elke nieuwe pagina weer te geven. De gebruiker hoeft dus nooit het hele lettertypebestand in één keer te downloaden.

Er zijn verschillende details die moeten worden uitgewerkt, waaronder gegevens die de privacy en compatibiliteit met eerdere versies zullen helpen waarborgen - maar het eerste onderzoek was buitengewoon veelbelovend en het is te hopen dat deze technologie ergens in de komende jaren het grotere web zal bereiken. Je kunt er meer over leren in <a hreflang="en" href="https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance">deze inleiding door Jason Pamental</a>, en lees <a hreflang="en" href="https://www.w3.org/TR/2020/NOTE-PFE-evaluation-20201015/">de volledige <span lang="en">Working Group Evaluation Report</span></a> op de W3C-site.
Er zijn verschillende details die moeten worden uitgewerkt, waaronder gegevens die de privacy en compatibiliteit met eerdere versies zullen helpen waarborgen - maar het eerste onderzoek was buitengewoon veelbelovend en het is te hopen dat deze technologie ergens in de komende jaren het grotere web zal bereiken. U kunt er meer over leren in <a hreflang="en" href="https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance">deze inleiding door Jason Pamental</a>, en lees <a hreflang="en" href="https://www.w3.org/TR/2020/NOTE-PFE-evaluation-20201015/">de volledige <span lang="en">Working Group Evaluation Report</span></a> op de W3C-site.
Loading