Vraag, 16 javascript-bestanden, hoe te verkleinen?

**Ronnie M.** · 06-01-2021, 19:39

Als ik mijn website door een seo checker haal,
Probeer het aantal gebruikte JavaScript-bestanden te verminderen.
Deze website laadt 11 CSS-bestanden. Dit kan de laadtijd van de pagina negatief beïnvloeden.
Deze website laadt 16 javascript-bestanden. Dit kan de laadtijd negatief beïnvloeden.

Zelf vindt ik dit heel veel, zijn ze allemaal wel nodig?
Weet iemand hier een (eenvoudige) oplossing voor?

**J. Haan** · 06-01-2021, 20:19

CSS bestanden combineren tot 1 of 2? Alle overlap eruit halen als dat er is.
Javascript kan misschien ook gecombineerd worden, dat weet ik niet.

**David G** · 06-01-2021, 20:24

Wellicht heb je iets aan de plugin "WP Rocket". Werkt als een zonnetje.

**B. van der Weerd** · 06-01-2021, 20:32

Als je WordPress gebruikt is de plugin Autoptimize een aanrader. Geen WordPress? Dan kun je gebruik maken van Cloudfare (kwestie van de nameservers omzetten), en daar de minify-optie voor javascript activeren.

**Ronnie M.** · 06-01-2021, 20:33

Dank je wel, mijn site is echter geen WP maar een php site...

**Ewout Goosmann** · 06-01-2021, 23:55

Zowel css als javascript kun je "minify'en" en samenvoegen tot 1 css en 1 javascript bestand. Als je googled op "css minify" kom je vast een online tool tegen om al je css in te gooien om zo 1 bestand te genereren.

**Ronnie M.** · 07-01-2021, 11:12

Ewout, dank je!
Ik denk dat dit ie goede oplossing kan zijn, ga het proberen.

**Ronnie M.** · 07-01-2021, 12:09

Amateur die niet goed kijkt......
Er is 1 css map, my-style.css, de rest wordt extern geladen.
<link href="<?=HomeUrl()?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
<link href="<?=HomeUrl()?>js/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="<?=HomeUrl()?>js/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="<?=HomeUrl()?>js/owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="<?=HomeUrl()?>js/datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="<?=HomeUrl()?>js/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?=HomeUrl()?>js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" href="<?=HomeUrl()?>css/my-style.css">
<link rel="stylesheet" href="<?=HomeUrl()?>fontawesome/css/font-awesome.min.css">

Zijn die allemaal nodig en is daar wat aan te versnellen?

**J. Haan** · 07-01-2021, 16:41

Of ze nodig zijn kan alleen jij zien, wij weten niet om welke website het gaat.
carousel.css is nodig als je een carousel hebt.
fancybox/jquery.fancybox.css is nodig... je begrijpt het denk ik wel.

Je kunt ze natuurlijk ook allemaal downloaden en samenvoegen via de genoemde methode.

Zover ik minify'en in het verleden heb begrepen zet het ook alles in je css achter elkaar i.p.v. netjes onder elkaar.
Als je daarna iets wilt aanpassen is het onvindbaar. Daarom heb ik het nooit gebruikt.
Als het anders is dan wordt ik vast wel verbeterd.

Vraag, 16 javascript-bestanden, hoe te verkleinen?