{"id":60937,"date":"2019-11-08T00:16:28","date_gmt":"2019-11-08T00:16:28","guid":{"rendered":"https:\/\/www.websiteseocheck.nl\/seocheck\/?p=60937"},"modified":"2019-11-08T00:16:30","modified_gmt":"2019-11-08T00:16:30","slug":"wat-is-het-kritieke-weergavepad","status":"publish","type":"post","link":"https:\/\/www.websiteseocheck.nl\/seocheck\/wat-is-het-kritieke-weergavepad\/","title":{"rendered":"Wat is het kritieke weergavepad?"},"content":{"rendered":"
\n

<\/p>\n\n\n\n

Het optimaliseren van deze evenementen resulteert in aanzienlijk snellere webpagina’s.
tijdlijn en middelen Het kritieke weergavepad kan iets heel moois doen \u2026<\/p>\n\n\n\n

Het geeft u de mogelijkheid om een \u200b\u200bgrote webpagina met veel bronnen sneller te laden dan een kleine webpagina met weinig bronnen. Dat vind ik leuk.<\/p>\n\n\n\n

Aangezien de meeste webpagina’s veel verschillende componenten bevatten, is het niet altijd mogelijk om alles gewoon te verwijderen om een \u200b\u200bpagina sneller te laden. Als je je ooit hebt afgevraagd: “Wat kan ik nog meer doen om mijn pagina’s snel te maken?” of “Hoe verwacht Google dat pagina’s in \u00e9\u00e9n seconde worden geladen?” dan is dit concept iets voor jou.
\nHet optimaliseren van het kritieke weergavepad
\nwebpagina laden<\/p>\n\n\n\n

Laten we voor de duidelijkheid een paar dingen defini\u00ebren:<\/p>\n\n\n\n

kritisch - absoluut noodzakelijk\nrender - display of show (in ons geval worden onze webpagina's \"gerenderd\" wanneer ze door een gebruiker kunnen worden gezien)\npad - de reeks gebeurtenissen die ertoe leiden dat onze webpagina in een browser wordt weergegeven\nbeginweergave - ook bekend als \"boven de vouw\", de beginweergave is het gedeelte van een webpagina dat zichtbaar is voor een gebruiker voordat deze schuift<\/code><\/pre>\n\n\n\n
Met andere woorden, het weergavepad is gewoon een reeks gebeurtenissen die plaatsvinden om uw webpagina in een browser te laten verschijnen.<\/p>\n\n\n\n
Aangezien vrijwel elke website op internet onnodige stappen neemt om te renderen, is dit de plek waar echt zinvolle en merkbare optimalisaties kunnen plaatsvinden.<\/p>\n\n\n\n
Het optimaliseren van het kritieke weergavepad kan seconden duren voordat uw pagina is geladen. Het is echt de snelste weg naar snellere webpagina’s.
\nHet pad
\nhtml, css en javascript<\/p>\n\n\n\n
Om een \u200b\u200bwebpagina weer te geven, moet een browser alle bronnen ophalen die door de webpagina worden opgeroepen. Een eenvoudig voorbeeld is een webpagina met \u00e9\u00e9n afbeelding, \u00e9\u00e9n css-bestand en \u00e9\u00e9n javascript-bestand.<\/p>\n\n\n\n
Laten we eens kijken naar het pad dat deze pagina neemt voordat deze wordt weergegeven \u2026<\/p>\n\n\n\n
browser downloadt het html-bestand\nbrowser leest de html en ziet dat er \u00e9\u00e9n css-bestand, \u00e9\u00e9n javascript-bestand en \u00e9\u00e9n afbeelding zijn\nbrowser begint met het downloaden van de afbeelding\nbrowser besluit dat het de webpagina niet kan weergeven zonder eerst de css en javascript te krijgen\nbrowser downloadt het CSS-bestand en leest het om ervoor te zorgen dat er niets anders wordt aangeroepen\nbrowser besluit dat het de webpagina nog steeds niet kan weergeven totdat het javascript heeft\nbrowser downloadt het javascript-bestand en leest het om ervoor te zorgen dat er niets anders wordt aangeroepen\nBrowser besluit nu dat deze de webpagina kan weergeven<\/code><\/pre>\n\n\n\n
Het bovenstaande pad is voor een zeer eenvoudige webpagina, geef nu aan hoe uw pad eruit moet zien.<\/p>\n\n\n\n
Je hebt waarschijnlijk sociale knoppen, verschillende CSS-bestanden, verschillende javascript-bestanden, veel afbeeldingen, widgets en misschien ook audio of video.
\nDit betekent dat je renderpad waarschijnlijk een grote puinhoop is
\nrommelige set bestanden die naar elkaar wijzen<\/p>\n\n\n\n
De meeste websites hebben absoluut vreselijke renderpaden omdat ze zoveel dingen aanroepen dat de browser moet laden voordat de webpagina kan worden weergegeven.<\/p>\n\n\n\n
Dit is uw voordeel ten opzichte van anderen. Als u uw pagina’s sneller maakt dan uw concurrenten, gaat u bezoekers blij maken (Google vindt het leuk als u dat doet).
\nHet renderen
\nPagina wordt langzaam geladen<\/p>\n\n\n\n
Er zijn bepaalde soorten bronnen die onze webpagina’s noemen en die de weergave van onze webpagina’s daadwerkelijk blokkeren.<\/p>\n\n\n\n
De twee meest voorkomende zijn de CSS-bestanden en de javascript-bestanden.<\/p>\n\n\n\n
Het maakt niet uit hoeveel van deze je hebt, de browser moet elk van deze bestanden downloaden en parseren voordat het iets aan de gebruiker kan tonen. Laten we eens kijken naar een al te vaak scenario \u2026<\/p>\n\n\n\n
WordPress-blogs gebruiken thema’s. Bijna elk WordPress-thema heeft verschillende CSS-bestanden.<\/p>\n\n\n\n
Velen hebben zes of zeven css-bestanden (dit is de reden waarom de paginasnelheid richtlijn “externe CSS-bestanden combineren” bestaat). Al die CSS kan in slechts \u00e9\u00e9n bestand zijn, maar wanneer u uw thema toevoegt, is het feit dat het verschillende CSS-bestanden heeft. Dus voordat er zelfs maar \u00e9\u00e9n letter van uw blog kan worden weergegeven, moet de browser elk van die bestanden laden en ontleden (zes of zeven retourreizen naar een server om te beginnen). Dit staat bekend als het blokkeren van css.<\/p>\n\n\n\n
De bezoeker van uw pagina staart naar een leeg wit scherm terwijl dit gebeurt omdat er niets zal verschijnen totdat deze “kritieke” stappen zijn voltooid.
\nmiddelen om \u00e9\u00e9n webpagina te laden<\/p>\n\n\n\n
Maar zelfs nadat je CSS is gedownload, kan je blog nog niet worden weergegeven omdat het ook bekend is dat WordPress-thema’s verschillende JavaScript-bestanden hebben. De pagina wordt nog steeds niet weergegeven omdat deze in veel gevallen JavaScript-bestanden ontvangt. Dit staat bekend als het blokkeren van JavaScript.<\/p>\n\n\n\n
Een typische weergave van een WordPress-blogpagina kan dus twintig rondreizen vereisen om alleen de belangrijkste CSS- en JavaScript-bestanden te krijgen. Maar wacht, nu heb je ook sociale knoppen of widgets \u2026 uh oh, voor elk van die verschillende CSS- en JavaScript-bronnen zijn ook nodig.<\/p>\n\n\n\n
Je laadt misschien tientallen dingen voordat je bericht aan een gebruiker wordt getoond. Ouch. (om te weten te komen wat uw pagina laadt, gebruikt u onze tool voor paginaverzoeken)<\/p>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"
Het optimaliseren van deze evenementen resulteert in aanzienlijk snellere webpagina’s. tijdlijn en middelen Het kritieke weergavepad kan iets heel moois doen \u2026 Het geeft u de mogelijkheid om een \u200b\u200bgrote webpagina met veel bronnen sneller te laden dan een kleine webpagina met weinig bronnen. Dat vind ik leuk. Aangezien de meeste webpagina’s veel verschillende componenten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[83],"tags":[],"_links":{"self":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts\/60937"}],"collection":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/comments?post=60937"}],"version-history":[{"count":0,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts\/60937\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/media?parent=60937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/categories?post=60937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/tags?post=60937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}