Javascript en CSS in inhoud boven de vouw die het weergeven blokkeren, verwijderen???

**R. Roeven** · 02-09-2014, 10:27

Beste Sitedeals members,

Heeft er iemand toevallig tips of ervaring met hoe je de volgende melding vanuit de Google Pagespeed Insights tool kan verhelpen/oplossen? Hoor graag van jullie. De website waar het om gaat is lionhead-rabbit*com

----------------------------------------------------------------------------------------------------
JavaScript en CSS in inhoud boven de vouw die het weergeven blokkeren, verwijderen

Uw pagina heeft 2 blokkerende scriptbronnen en 5 blokkerende CSS-bronnen. Dit veroorzaakt vertraging bij het weergeven van uw pagina.

Geen van de inhoud boven de vouw op uw pagina kan worden weergegeven zonder te wachten totdat de volgende bronnen zijn geladen. Probeer blokkerende bronnen uit te stellen of asynchroon te laden of parseer de essentiële gedeelten van die bronnen rechtstreeks in de HTML.

**Wilbert E.** · 02-09-2014, 13:43

Deze regels:
(beetje ruk lezen, maar het zijn de vijf stylesheets en de twee javascript bronnen)

Code:

<link rel='stylesheet' id='contact-form-7-css'  href='http://lionhead-rabbit.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.6' type='text/css' media='all' />
<link rel='stylesheet' id='frontier-font-css'  href='//fonts.googleapis.com/css?family=Roboto+Condensed%3A400%2C700%7CArimo%3A400%2C700&ver=3.9.2' type='text/css' media='all' />
<link rel='stylesheet' id='frontier-icon-css'  href='http://lionhead-rabbit.com/wp-content/themes/frontier/includes/genericons/genericons.css?ver=1.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='frontier-main-css'  href='http://lionhead-rabbit.com/wp-content/themes/frontier/style.css?ver=1.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='frontier-responsive-css'  href='http://lionhead-rabbit.com/wp-content/themes/frontier/responsive.css?ver=1.2.0' type='text/css' media='all' />
<script type='text/javascript' src='http://lionhead-rabbit.com/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://lionhead-rabbit.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

staan in de <head>. Deze moet je daar weghalen en voor de </body> zetten. Dan is de melding verdwenen.

Simpel gezegd komt het hier op neer:

De browser laadt je website en komt in de <head> tags een <script> tag tegen.
Op dit moment stopt de browser met het laden van de pagina en gaat het eerst het javascript bestand in de <script> tag downloaden.
Dit is de blokkade die Google bedoelt. De browser wacht namelijk eerst tot de javascripts én de css bestanden binnen zijn en gaat vervolgens verder om je pagina weer te geven.
Haal je ze uit de head, dan treed deze blokkade niet op.

Een andere oplossing (voor moderne browsers) is om het async attribuut te gebruiken.
Plaats in de <script> en <link> tags het async attribuut om ze asynchroon te laten downloaden (ook dan blokkeert de browser niet.

Code:

<script type='text/javascript' src='http://javascript.js' async></script>

**Stefan_B** · 02-09-2014, 16:53

het gaat zo allemaal wel erg complex worden om een site te maken :P

**R. Roeven** · 03-09-2014, 01:08

Beste Wilbert, bedankt voor je reactie. Ik begrijp exact wat je bedoeld maar het wil nog niet lukken. Misschien een hele domme vraag maar waar kan ik deze wijzigingen maken? In de header.php kom ik alleen het volgende script tegen maar de styles die je hierboven post niet, waar tref ik deze aan? Heb jij wellicht enig idee hoe ik dit kan aanpassen? Alvast heel erg bedankt in ieder geval.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4881674476-5', 'auto');
ga('send', 'pageview');
</script>

**Anne Maria** · 28-02-2017, 12:21

@Wilbert:

<link rel='stylesheet' href='http://domeinnaam.com' type='text/css' media='all' async> werkt niet.Kijk hier voor een oplossing: http://stackoverflow.com/questions/1...ing-javascript

**Roderik Peeters** · 28-02-2017, 13:25

Je hebt daar verschillende bestanden die door o.a. door plugins worden ingeladen. je kan een functie schrijven in functions.php die dit alles naar beneden zet. Je kan ook de plugin Autoptimize installeren, hiermee compress je alles en zet hij het ook in de footer.

Heb je direct weer een paar optimalisaties te pakken! Dit geldt overigens alleen voor je eigen JS bestanden, het bestand van Google Fonts doet hij dit niet mee. Maar je kan zeggen dat je geen Google Fonts wil inladen. Is altijd beter voor je performance.

Javascript en CSS in inhoud boven de vouw die het weergeven blokkeren, verwijderen???