| klant | +2019 | +2020 | +Verandering | +
|---|---|---|---|
| Desktop | +391 | +444 | +13,4% | +
| Mobile | +359 | +411 | +14,4% | +
+ Even terzijde: toen we het hadden over hoeveel JavaScript eerder op een pagina is geladen, hield dat totaal geen rekening met de grootte van deze inline scripts - omdat ze deel uitmaken van het HTML-document, worden ze meegeteld bij de opmaak-grootte . Dit betekent dat we nog meer script laden dat de cijfers laten zien. +
+ +{{ figure_markup( + image="external-inline-mobile.png", + caption="Verdeling van het aantal externe en inline scripts per mobiele pagina.", + description="Cirkeldiagram laat zien dat 41,0% van de mobiele scripts inline is en 59,0% extern.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=1326937127&format=interactive", + sheets_gid="1991661912", + sql_file="breakdown_of_scripts_using_async_defer_module_nomodule.sql" +) }} + +Van die externe scripts wordt slechts 12,2% geladen met het `async`-attribuut en 6,0% ervan wordt geladen met het `defer`-attribuut. + +{{ figure_markup( + image="async-defer-mobile.png", + caption="Verdeling van het aantal `async` en `defer`-scripts per mobiele pagina.", + description="Cirkeldiagram dat laat zien dat 12,2% van de externe mobiele scripts `async` gebruikt, 6,0% gebruikt `defer` en 81,8% geen van beide.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=662584253&format=interactive", + sheets_gid="1991661912", + sql_file="breakdown_of_scripts_using_async_defer_module_nomodule.sql" +) }} + +Gezien het feit dat `defer` ons de beste laadprestaties biedt (door ervoor te zorgen dat het downloaden van het script parallel met ander werk gebeurt, en de uitvoering wacht tot nadat de pagina kan worden weergegeven), hopen we dat dit percentage iets hoger ligt. In feite is die 6,0% lichtjes opgeblazen. + +Toen het ondersteunen van IE8 en IE9 vaker voorkwam, was het relatief gebruikelijk om _allebei_ de `async`- en `defer`-attributen te gebruiken. Met beide attributen op hun plaats, zal elke browser die beide ondersteunt `async` gebruiken. IE8 en IE9, die `async` niet ondersteunen, vallen terug op `defer`. + +Tegenwoordig is het patroon voor de overgrote meerderheid van de sites niet nodig en elk script dat met het patroon wordt geladen, zal de HTML-parser onderbreken wanneer deze moet worden uitgevoerd, in plaats van uit te stellen totdat de pagina is geladen. Het patroon wordt nog steeds verrassend vaak gebruikt, met 11,4% van de mobiele pagina's die ten minste één script met dat patroon weergeven. Met andere woorden, ten minste enkele van de 6% van de scripts die `defer` gebruiken, profiteren niet van de volledige voordelen van het `defer`-attribuut. + +There is an encouraging story here, though. + +Harry Roberts [tweette over het antipatroon op Twitter](https://twitter.com/csswizardry/status/1331721659498319873), wat ons ertoe aanzette om te kijken hoe vaak dit in het wild voorkwam. [Rick Viscomi controleerde wie de grootste boosdoeners waren](https://twitter.com/rick_viscomi/status/1331735748060524551), en het blijkt dat "stats.wp.com" de bron was van de meest voorkomende overtreders. @Kraft van Automattic antwoordde, en het patroon wordt nu [in de toekomst verwijderd](https://twitter.com/Kraft/status/1336772912414601224). + +Een van de geweldige dingen aan de openheid van het web is hoe één observatie kan leiden tot betekenisvolle verandering en dat is precies wat hier gebeurde. + +### Hulpbronnenhints + +Een ander hulpmiddel dat we tot onze beschikking hebben om een deel van de netwerkkosten voor het laden van JavaScript te compenseren, zijn [hulpbronnenhints](./resource-hints), in het bijzonder `prefetch` en `preload`. + +Met de `prefetch`-hint kunnen ontwikkelaars aangeven dat een bron zal worden gebruikt bij de volgende paginanavigatie, daarom moet de browser proberen om het te downloaden wanneer de browser niet actief is. + +De `preload`-hint geeft aan dat een bron op de huidige pagina zal worden gebruikt en dat de browser deze meteen met een hogere prioriteit moet downloaden. + +In totaal zien we 16,7% van de mobiele pagina's die ten minste één van de twee bronhints gebruiken om JavaScript proactiever te laden. + +Daarvan is bijna al het gebruik afkomstig van `preload`. Terwijl 16,6% van de mobiele pagina's ten minste één `preload` hint gebruikt om JavaScript te laden, gebruikt slechts 0,4% van de mobiele pagina's ten minste één `prefetch`-hint. + +Er is een risico, vooral bij `preload`, dat er te veel hints worden gebruikt en de effectiviteit ervan wordt verminderd, dus het is de moeite waard om naar de pagina's te kijken die deze hints gebruiken om te zien hoeveel ze gebruiken. + +{{ figure_markup( + image="prefetch-distribution.png", + caption="Verdeling van het aantal `prefetch`-hints per pagina met eventuele `prefetch`-hints.", + description="Staafdiagram met de verdeling van `prefetch`-hints per pagina met eventuele `prefetch`-hints. Het 10, 25 en 50e percentiel voor desktop- en mobiele pagina's is 1, 2 en 3 `prefetch`-hints per pagina. Bij het 75e percentiel voor desktoppagina's is dat 6 en 4 voor mobiel. Op het 90e percentiel gebruiken desktoppagina's 14 `prefetch`-hints per pagina en 12 voor mobiele pagina's.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=1874381460&format=interactive", + sheets_gid="1910228743", + sql_file="resource-hints-preload-prefetch-distribution.sql" +) }} + +{{ figure_markup( + image="preload-distribution.png", + caption="Verdeling van het aantal `preload`-hints per pagina met eventuele `preload`-hints.", + description="Staafdiagram met de verdeling van `preload` hints per pagina met eventuele `preload` hints. 75% van de desktop- en mobiele pagina's die `preload`-hints gebruiken, gebruikt dit precies één keer. Het 90e percentiel is 5 `preload` hints per pagina voor desktop en 7 voor mobiel.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=320533828&format=interactive", + sheets_gid="1910228743", + sql_file="resource-hints-preload-prefetch-distribution.sql" +) }} + +Bij de mediaan gebruiken pagina's die een `prefetch`-hint gebruiken om JavaScript te laden er drie, terwijl pagina's die een `preload`-hint gebruiken er slechts één gebruiken. De lange staart wordt een beetje interessanter, met 12 `prefetch`-hints gebruikt op het 90e percentiel en 7 `preload`-hints die ook op de 90e worden gebruikt. Voor meer informatie over hulpbronnenhints, bekijk het hoofdstuk [Hulpbronnenhints](./resource-hints) van dit jaar. + +## Hoe serveren we JavaScript? + +Zoals met elke op tekst gebaseerde bron op internet, kunnen we een aanzienlijk aantal bytes besparen door middel van minimalisatie en compressie. Dit zijn geen van beide nieuwe optimalisaties - ze bestaan al een tijdje - dus we zouden verwachten dat ze in meer gevallen worden toegepast dan niet. + +Een van de audits in [Lighthouse](./methodology#lighthouse) controleert op niet-geminimaliseerd JavaScript en geeft een score (0,00 is de slechtste, 1,00 is de beste) op basis van de bevindingen. + +{{ figure_markup( + image="lighthouse-unminified-js.png", + caption="Verdeling van niet-verkleinde JavaScript Lighthouse-auditscores per mobiele pagina.", + description="Staafdiagram toont 0% van de mobiele pagina's die niet-verkleinde JavaScript krijgen Lighthouse-auditscores onder de 0,25, 4% van de pagina's met een score tussen 0,25 en 0,5, 10% van de pagina's tussen 0,5 en 0,75, 8% van de pagina's tussen 0,75 en 0,9 en 77% van de pagina's tussen 0.9 en 1.0.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=158284816&format=interactive", + sheets_gid="362705605", + sql_file="lighthouse_unminified_js.sql" +) }} + +De bovenstaande grafiek laat zien dat de meeste geteste pagina's (77%) een score van 0,90 of hoger halen, wat betekent dat er maar weinig niet-verkleinde scripts worden gevonden. + +In totaal is slechts 4,5% van de geregistreerde JavaScript-verzoeken niet geminimaliseerd. + +Interessant is dat, hoewel we een beetje hebben gekozen voor verzoeken van derden, dit een gebied is waar scripts van derden het beter doen dan scripts van eersten. 82% van de gemiddelde niet-verkleinde JavaScript-bytes van een mobiele pagina is afkomstig van eigen code. + +{{ figure_markup( + image="lighthouse-unminified-js-by-3p.png", + caption="Gemiddelde distributie van niet-verkleinde JavaScript-bytes per host.", + description="Cirkeldiagram dat laat zien dat 17,7% van de niet-verkleinde JS-bytes scripts van derden zijn en 82,3% eigen scripts.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=2073491355&format=interactive", + sheets_gid="1169731612", + sql_file="lighthouse_unminified_js_by_3p.sql" +) }} + +### Compressie + +Minificatie is een geweldige manier om de bestandsgrootte te helpen verkleinen, maar compressie is nog effectiever en daarom belangrijker: het levert vaker wel dan niet het grootste deel van de netwerkbesparingen op. + +{{ figure_markup( + image="compression-method-request.png", + caption="Verdeling van het percentage JavaScript-verzoeken per compressiemethode.", + description="Staafdiagram met de verdeling van het percentage JavaScript-verzoeken per compressiemethode. De waarden voor desktop en mobiel lijken erg op elkaar. 65% van de JavaScript-verzoeken gebruikt Gzip-compressie, 20% gebruikt br (Brotli), 15% gebruikt geen compressie, en lopen leeg, UTF-8, identiteit, en geen enkele lijkt 0% te hebben", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=263239275&format=interactive", + sheets_gid="1270710983", + sql_file="compression_method.sql" +) }} + +Bij 85% van alle JavaScript-verzoeken is een bepaald niveau van netwerkcompressie toegepast. Gzip maakt het grootste deel daarvan uit, met 65% van de scripts waarop Gzip-compressie is toegepast, vergeleken met 20% voor Brotli (br). Hoewel het percentage van Brotli (dat effectiever is dan Gzip) laag is in vergelijking met de browserondersteuning, gaat het in de goede richting, met een stijging van 5 procentpunten in het afgelopen jaar. + +Nogmaals, dit lijkt een gebied te zijn waar scripts van derden het eigenlijk beter doen dan eerste partij scripts. Als we de compressiemethoden uitsplitsen door eerste en derde partij, zien we dat 24% van de scripts van derden Brotli heeft toegepast, vergeleken met slechts 15% van de scripts van derden. + +{{ figure_markup( + image="compression-method-3p.png", + caption="Verdeling van het percentage mobiele JavaScript-verzoeken per compressiemethode en host.", + description="Staafdiagram met de verdeling van het percentage mobiele JavaScript-verzoeken per compressiemethode en host. 66% en 64% van de JavaScript-verzoeken van eerste en derde partijen gebruiken Gzip. 15% van de eerste partij en 24% van de derden scriptverzoeken gebruikt Brotli. En 19% van de eerste partij scripts en 12% van de derden scripts hebben geen compressiemethode ingesteld.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=1402692197&format=interactive", + sheets_gid="564760060", + sql_file="compression_method_by_3p.sql" +) }} + +Scripts van derden worden ook het minst waarschijnlijk zonder enige compressie aangeboden: 12% van de scripts van derden heeft noch Gzip noch Brotli toegepast, vergeleken met 19% van de eerste partij scripts. + +Het is de moeite waard om die scripts die _geen_ compressie hebben van naderbij te bekijken. Compressie wordt efficiënter in termen van besparingen naarmate het meer inhoud moet gebruiken. Met andere woorden, als het bestand klein is, wegen de kosten voor het comprimeren van het bestand soms niet op tegen de minuscule verkleining van de bestandsgrootte. + +{{ figure_markup( + caption="Percentage niet-gecomprimeerde JavaScript-verzoeken van derden onder 5 KB.", + content="90,25%", + classes="big-number", + sheets_gid="347926930", + sql_file="compression_none_by_bytes.sql" +) }} + +Gelukkig is dat precies wat we zien, vooral in scripts van derden, waar 90% van de niet-gecomprimeerde scripts minder dan 5 KB groot is. Aan de andere kant is 49% van de niet-gecomprimeerde eerste partij scripts minder dan 5 KB en 37% van de ongecomprimeerde eerste partij scripts groter dan 10 KB. Dus hoewel we veel kleine niet-gecomprimeerde eerste partij scripts zien, zijn er nog steeds een flink aantal die baat zouden hebben bij enige compressie. + +## Wat gebruiken we? + +Omdat we steeds meer JavaScript hebben gebruikt om onze sites en applicaties van stroom te voorzien, is er ook een toenemende vraag naar open-source bibliotheken en frameworks om de productiviteit van ontwikkelaars en de algehele onderhoudbaarheid van de code te verbeteren. Sites die _niet_ een van deze hulpmiddelen gebruiken, zijn beslist de minderheid op het internet van vandaag - jQuery alleen is te vinden op bijna 85% van de mobiele pagina's die worden bijgehouden door HTTP Archive. + +Het is belangrijk dat we kritisch nadenken over de hulpmidellen die we gebruiken om het web te bouwen en wat de afwegingen zijn, dus het is logisch om goed te kijken naar wat we vandaag in gebruik zien. + +### Bibliotheken + +HTTP Archive gebruikt [Wappalyzer](./methodology#wappalyzer) om technologieën te detecteren die op een bepaalde pagina worden gebruikt. Wappalazyer houdt zowel JavaScript-bibliotheken bij (zie deze als een verzameling fragmenten of helperfuncties om de ontwikkeling te vergemakkelijken, zoals jQuery) en JavaScript-frameworks (dit zijn waarschijnlijker steigers en bieden sjablonen en structuur, zoals React). + +De populaire bibliotheken die in gebruik zijn, zijn grotendeels ongewijzigd ten opzichte van vorig jaar, waarbij jQuery het gebruik blijft domineren en slechts één van de 21 beste bibliotheken valt uit (lazy.js, vervangen door DataTables). Zelfs de percentages van de topbibliotheken zijn nauwelijks veranderd ten opzichte van vorig jaar. + +{# TODO(analysts): table? showing rank, library, percentage and last years rank #} + +{{ figure_markup( + image="frameworks-libraries.png", + caption="Overname van de beste JavaScript-frameworks en -bibliotheken als percentage van de pagina's.", + description="Staafdiagram dat de acceptatie van de belangrijkste frameworks en bibliotheken weergeeft als percentage van de pagina's (niet paginaweergaven of npm-downloads). jQuery is de overweldigende leider, te vinden op 83% van de mobiele pagina\'s. Het wordt gevolgd door jQuery migrate op 30%, jQuery UI op 21%, Modernizr op 15%, FancyBox op 7%, Slick en Lightbox op 6%, en de resterende frameworks en bibliotheken op 4% of 3%: Moment.js, Underscore.js, Lodash, React, GSAP, Select2, RequireJS en prettyPhoto.", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRn1IaMxnTl0jhdC-C-vC5VLN_boJfLAaOfGJ968IalK1vPc8-dz0OkVmNY0LjMxZ6BIwSRB7xtRmIE/pubchart?oid=419887153&format=interactive", + sheets_gid="1654577118", + sql_file="frameworks_libraries.sql" +) }} + +Vorig jaar stelde [Houssein een paar redenen voor waarom de dominantie van jQuery voortduurt](../2019/javascript#open-source-libraries-and-frameworks): + +> WordPress, dat op meer dan 30% van de sites wordt gebruikt, bevat standaard jQuery. +> Het overschakelen van jQuery naar een nieuwere klantzijde bibliotheek kan enige tijd duren, afhankelijk van hoe groot een applicatie is, en veel sites kunnen bestaan uit jQuery naast nieuwere klantzijde bibliotheken. + +Beide zijn zeer goede gissingen, en het lijkt erop dat de situatie op geen van beide fronten veel is veranderd. + +In feite wordt de dominantie van jQuery nog verder ondersteund als je bedenkt dat van de top 10 bibliotheken er 6 jQuery zijn of jQuery nodig hebben om te kunnen worden gebruikt: jQuery UI, jQuery Migrate, FancyBox, Lightbox en Slick . + +### Frameworks + +Als we naar de frameworks kijken, zien we ook niet veel van een dramatische verandering in termen van adoptie in de belangrijkste frameworks die vorig jaar naar voren kwamen. Vue.js heeft een aanzienlijke toename gezien en AMP is een beetje gegroeid, maar de meeste zijn min of meer waar ze een jaar geleden waren. + +{# TODO(analysts): Compare same frameworks from last year's chapter to this year in bar chart? #} + +Het is vermeldenswaard dat het [detectieprobleem dat vorig jaar werd opgemerkt nog steeds van toepassing is](https://github.com/AliasIO/wappalyzer/issues/2450), en nog steeds van invloed is op de resultaten hier. Het is mogelijk dat er een aanzienlijke verandering in populariteit _is_ opgetreden voor nog een paar van deze hulpmddelen, maar we zien het gewoon niet met de manier waarop de gegevens momenteel worden verzameld. + +### Wat het allemaal betekent + +Interessanter voor ons dan de populariteit van de hulpmiddelen zelf is de impact die ze hebben op de dingen die we bouwen. + +Ten eerste is het vermeldenswaard dat hoewel we misschien denken aan het gebruik van de ene hulpmiddel in plaats van de andere, we in werkelijkheid zelden slechts één enkele bibliotheek of framework gebruiken bij de productie. Slechts 21% van de geanalyseerde pagina's rapporteert slechts één bibliotheek of framework. Twee of drie frameworks komen vrij vaak voor, en de lange staart wordt erg lang, erg snel. + +Als we kijken naar de veel voorkomende combinaties die we in de productie zien, zijn de meeste te verwachten. Gezien de dominantie van jQuery, is het niet verwonderlijk dat de meeste populaire combinaties jQuery en een willekeurig aantal jQuery-gerelateerde plug-ins bevatten. + +| Combinaties | +Pagina's | +(%) | +
|---|---|---|
| jQuery | +1.312.601 | +20,7% | +
| jQuery, jQuery Migrate | +658.628 | +10,4% | +
| jQuery, jQuery UI | +289.074 | +4,6% | +
| Modernizr, jQuery | +155.082 | +2,4% | +
| jQuery, jQuery Migrate, jQuery UI | +140.466 | +2,2% | +
| Modernizr, jQuery, jQuery Migrate | +85.296 | +1,3% | +
| FancyBox, jQuery | +84.392 | +1,3% | +
| Slick, jQuery | +72.591 | +1,1% | +
| GSAP, Lodash, React, RequireJS, Zepto | +61.935 | +1,0% | +
| Modernizr, jQuery, jQuery UI | +61.152 | +1,0% | +
| Lightbox, jQuery | +60.395 | +1,0% | +
| Modernizr, jQuery, jQuery Migrate, jQuery UI | +53.924 | +0,8% | +
| Slick, jQuery, jQuery Migrate | +51.686 | +0,8% | +
| Lightbox, jQuery, jQuery Migrate | +50.557 | +0,8% | +
| FancyBox, jQuery, jQuery UI | +44.193 | +0,7% | +
| Modernizr, YUI | +42.489 | +0,7% | +
| React, jQuery | +37.753 | +0,6% | +
| Moment.js, jQuery | +32.793 | +0,5% | +
| FancyBox, jQuery, jQuery Migrate | +31.259 | +0,5% | +
| MooTools, jQuery, jQuery Migrate | +28.795 | +0,5% | +
| Combinatie | +Zonder jQuery | +Met jQuery | +
|---|---|---|
| GSAP, Lodash, React, RequireJS, Zepto | +1,0% | ++ |
| React, jQuery | ++ | 0,6% | +
| React | +0,4% | ++ |
| React, jQuery, jQuery Migrate | ++ | 0,4% | +
| Vue.js, jQuery | ++ | 0,3% | +
| Vue.js | +0,2% | ++ |
| AngularJS, jQuery | ++ | 0,2% | +
| GSAP, Hammer.js, Lodash, React, RequireJS, Zepto | +0,2% | ++ |
| Eindtotaal | +1,7% | +1,4% | +
| Bibliotheek | +Kwetsbare pagina's | +
|---|---|
| jQuery | +80,86% | +
| jQuery UI | +15,61% | +
| Bootstrap | +13,19% | +
| Lodash | +4,90% | +
| Moment.js | +2,61% | +
| Handlebars | +1,38% | +
| AngularJS | +1,26% | +
| Mustache | +0,77% | +
| Dojo | +0,58% | +
| jQuery Mobile | +0,53% | +