Laden van JS en CSS

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Laden van JS en CSS

Post by Gregor »

Ben bezig te kijken welke meldingen Pagespeed geeft en een daarvan is:
JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen
Vervolgens krijg ik een lijstje te zien met JS- en CSS-files die extern worden aangeroepen. Ik vroeg me af hoe ik dit kan oplossen. Wat ik me afvroeg, los ik het op door de inhoud van de externe file in een template te plaatsen?
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Laden van JS en CSS

Post by Rolf »

Poeh, daar ben ik ook al zo vaak mee bezig geweest... Het heeft mij nog nooit wat opgeleverd.
Een simpele website zonder jQuery en erg weinig CSS, dan lukt het je volgens mij pas...
Ben benieuwd of iemand een andere ervaring heeft!
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Het lijkt erop dat de laadsnelheid voor mobiel hier ook behoorlijk mee wordt beïnvloed. Wat ik lees is dat voor het verkorten van de laadtijd voor mobiel is dat css en js niet meer extern zou moeten worden aangeroepen (introductie AMP), vandaar de gedachte om js en css in templates te zetten.
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

Dit is eenvoudig te regelen voor "static" / "static generated" websites. Voor CMS(ms) gedreven websites een stuk lastiger en meer een "micro"optimalisatie.

99% van de websites kan beter voor het laag hangend fruit gaan: Minder afbeeldingen of compressie op afbeeldingen toepassen. JavaScript minimaliseren door het gebruik van JQuery plugins terug te dringen / JQuery te vervangen voor vanilla JavaScript. Webfonts te vervangen voor inline svg files. Asynchroon inladen van .js en .css bestanden etc... Above the fold CSS, pas veel later.

Om iets te leren is het natuurlijk wel aantrekkelijk. Ik zou beginnen met JavaScript buildtools (voor mijn projecten gebruik ik Gulp en Webpack), dit maakt ontwikkelen makkelijker en heeft veel mogelijkheden voor geautomatiseerde optimalisatie.

Als je een en ander hebt draaien kan je een module als criticalCSS invoegen. Een dergelijke module kan je pagina analyseren en de above the fold CSS wegschrijven naar bijvoorbeeld een generic (CSS) CMSMS template. Deze generic template include je dan weer in je pagina template.

https://github.com/filamentgroup/criticalcss en blog: https://www.filamentgroup.com/lab/
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Dank je voor je uitgebreide antwoord Arnoud.

Ben aan het experimenteren met het samenvoegen van js-files en daar haal ik wel de eerste verbetering in. Heb naar Vanilla-js gekeken, maar ik denk dat je me op programmeergebied iets te hoog inschat.... Wil wel proberen of ik bijv. de tekst cylce op de homepage kan ombouwen mbv Vanilla-js en wellicht ook de cookies-code.

Over svg fonts heb ik enkele artikelen gelezen en hoewel het er veelbelovend uitziet, krijg ik de indruk dat het niet breed door browsers wordt ondersteund https://caniuse.com/#feat=svg-fonts Of heb jij andere info.

Als ik bij Pingdom een test doe is er nog wel iets raars aan de hand bij het ophalen van de site; er lijkt een server connection error te zijn en die "kost" een paar seconden. Daarna wordt de site wel opgehaald. Ben al met de provider hierover in de mail, maar nog geen oplossing. https://tools.pingdom.com/#!/b9KrgG/htt ... mmelbeslag
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

JQuery Cycle2 is ook niet zo gek zwaar:
http://jquery.malsup.com/cycle2/

Ik bekommer me niet meer zo erg om ver(ouderde)browsers <= IE 8 daar ontwikkel ik niet meer voor.

Ik maak gebruik van een svg sprite techniek waarbij er 1 .svg bestand ingeladen wordt (dit bestand kan ook embeded worden in de header van een template, scheelt 1 request).

De aanroep ziet er zo uit:

Code: Select all

<svg><use xlink:href="{$theme_relative_url}/svg/shape.svg#iconname"/></svg>
Als je brede browser ondersteuning zoekt kan dit middels een polyfill: https://github.com/jonathantneal/svg4everybody

Pingdom ken ik niet meer wellicht kan je 3 testen uitvoeren en daarmee zaken uitsluiten:

1) Request van statisch html bestand
2) Request van php bestand zonder database verbinding
3) Request van php bestand met database verbinding

Het opzetten van een database verbinding is opzich wel een "dure/resource itensieve" operatie. Bij websites die er zo nu en dan uitliggen of de eerste connectie erg lang duurt kunnen test 1 en 2 snel gaan en 3 "de database verbinding" het probleem zijn.

Soms heeft een mysql server een maximum aan verbindingen, als dit bereikt is kunnen scripts eruit klappen of vertragen. Er zijn hostingpartijen die voorschrijven om niet op localhost te verbinden maar op een ander adres of ipnummer: (mysqlserver.hostname.xx of 111.111.111.11 [fictief]).

Is test 2) langzaam maar test 1) snel dan is de kans groot dat er een probleem is met de php interpreter. Weinig / beperkt server geheugen of cpu.

Soms is de DNS configuratie brak dan kan test 1 bij de eerste request erg lang duurt en bij de 2e request vlot is.

Dit zijn erg algemene zaken, vaak hebben shared hosting partijen pieken in het verkeer en plempen servers te vol. Geen garantie maar een VPS setup werkt meestal beter.

Er kunnen nog 1000 en 1 ander problemen zijn weet wel, het ligt nooit aan CMSMS ;)
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Cycle2 lijkt een bepaalde volgorde van het laden van js-files te hebben, bijv. asynchroon laden leidt ertoe dat de tekst als een lange lijst weergegeven wordt.

Je SVG-suggestie bekijken Arnoud.

Ik heb een drietal testen gedaan:
- Statische pagina opvragen. Geen connection error
https://tools.pingdom.com/#!/bjoNLf/htt ... 0elbow.jpg

- Middels php de info opvragen. Geen connection error
https://tools.pingdom.com/#!/eQHYVy/htt ... hpinfo.php

- Middels php een database-actie gedaan. Hierbij dezelfde connectie-gegevens gebruikt als in de config.php staan. Geen connection error
https://tools.pingdom.com/#!/bH4zPc/htt ... datest.php

- Middels php een bevraging over twee tabellen. Geen connection error
https://tools.pingdom.com/#!/dDgHhb/htt ... atest2.php

- Bij het opvragen van een niet bestaande php-files, dan heb ik 404-error, de 404-pagina wordt geladen, maar in de testresulaten geen connection error.
https://tools.pingdom.com/#!/bBnmNG/htt ... atest3.php

Als het niet aan CMSMS kan liggen ;D dan ligt het dus aan mijn site ??? ZIe hier bij het opvragen van de root
https://tools.pingdom.com/#!/d48WcY/htt ... -beatha.eu

Ben zo vrij geweest om de cmscanbesimple-site tegen pingdom te testen, wetend dat we bij dezelfde provider zitten, en daar krijg ik geen connection error.

Ik weet dat er een dns-foutmelding is op mijn site zit:
Invalid SOA RNAME syntax for uisge-beatha.eu: HostmasterEmail

The email address specified in SOA RNAME is specified incorrectly. A common error is to use @ in the address field - an address like hostmaster@example.com must be specified as hostmaster.example.com.
Hier heb ik met de provider contact over gehad en zij laten weten:
Het Soa DNS record wordt automatisch aangemaakt bij ons, je kunt deze echter niet inzien/bewerken vanuit je klanten-account.
De log files die ik kan inzien laten geen errors zien. Zijn er tools op het net die een laag dieper laten zien wat er bij het laden van een site gebeurd waar hier op het forum ervaring mee is?
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

Als een script pas uitgevoerd kan worden voordat afhankelijkheden ingeladen zijn zal je geen

Code: Select all

<__script__ async>
maar

Code: Select all

<__script__ defer>
moeten gebruiken.

Het vervelende van deze techniek is dat deze niet werkt voor IE <=9.
In oudere browsers is de inlaad volgorde voor scripts met "defer" niet gegarandeerd.

Het eenvoudigste om gewoon gebruikt te maken van de standaard

Code: Select all

<__script__>
aanroep. Plaats deze onder aan de pagina. Eerst jquery inladen, dan jquery plugins (liefst samen gevoegd in 1 bestand) en als laatste je zelf geschreven scripten / initialisatie (ook samengevoegd tot 1 bestand).

Ik gebruik zelf een script loader op basis van babeljs en async/await dit is niet eenvoudig op te zetten.

Met JQuery en Ajax kan je ook css en js files on-demand inladen, ik weet alleen niet of dit veel toegepast wordt.

Dat CMSMS nooit problemen heeft was een wat "gekscherende" opmerking. In elke software zitten problemen en bugs, zolang deze zich niet openbaren is er niets aan de hand. Waar het bij jouw website aan ligt is erg lastig te bepalen.

Vandaag wat websites geanalyseerd met Google Lighthouse. Zo kwam ik er achter dat op 1 van mijn websites een icon niet ingeladen werd. Na dit opgelost te hebben ging de speed index van 82% naar 92%.

Nu kan je met Lighthouse geen hosting / netwerk problemen analyseren (dit is ook meer iets voor de hostingpartij). Het is wel een mooie analyse tool die volgens mij nog niet zo heel lang ook SEO rapportage heeft.

Overigens is jouw seo score 90% en zoals je waarschijnlijk al vermoed je performance niet geweldig :(

Een die er opvalt is lage response-tijd van de server:

https://developers.google.com/web/tools ... nce/issues
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Heb de site een paar keer door Lighthouse gehaald en de SEO melding (zoals door Arnoud aangegeven) over de tekst heb ik opgelost. Kreeg wel af en toe de melding dat de canonical url op de root-pagina niet zou kloppen [url]blob:chrome-extension://blipmdconlkpinefehnmjammfjpmpbjk/588c5869-aea9-42d1-ad9e-383474a57548#seo[/url]
Document does not have a valid rel=canonical
Canonical links suggest which URL to show in search results. Read more in Use canonical URLs.
Points to a root of the same origin
Lijkt erop dat ik niet de enige ben die tegen deze melding aanloopt.

De vertraging op de server, daar is nog geen oplossing voor.

Heb wel het carousel javascript vervangen door een compactere oplossing https://flickity.metafizzy.co. Bij het nazoeken kwam ik erachter dat ik voor de foto's in de header cgsmartimage nog kan inzetten.

Het inzetten van SVG (of variant) als vervanging voor de bestaande Google fonts, daar zie ik nog geen oplossing voor. Ik gebruik Open sans en Livingstone. Deze laatste haal ik lokaal op.
@Arnoud: heb je een voorbeeld hoe ik dit kan aanpakken?
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

Wat betreft je trage webserver als laatste test kan je misschien een hele minimalistische CMS template + pagina aanmaken en kijken hoe snel deze reageert. Verkeerd gebruik van CMSMS caching of het ontbreken van caching op bij voorbeeld een module als CGSmartImage zouden ook zomaar de bottleneck kunnen zijn. Toch CMSMS gerealteerd zou toch niet ;)

Je hebt fonts voor typografie "webfonts" en fonts voor iconen "iconfonts".

* Webfonts:

- Het snelste is om helemaal geen webfonts te gebruiken.
- Soms heb je een ontwerp wat beter tot zijn recht komt wanneer er webfonts gebruikt worden,
soms worden webfonts gebruikt maar zie je nauwelijks verschil, pas dit niet roekeloos toe.

Voor TypeKit en Google Web fonts kan je een async webloader gebruiken:
https://github.com/typekit/webfontloader

Op basis van een techniek die hier: http://www.ebaytechblog.com/2017/09/21/ ... -strategy/
beschreven is heb ik voor "zelf hosted" webfonts en ook iconfonts een ES6 async fontloader op basis van localstorage geschreven:

https://github.com/FrontEndStudio/cmsms ... tLoader.js

Op basis van ES5 is dit ook een mooie font-loader:
https://github.com/bramstein/fontfaceobserver


* Iconfonts

In plaats van (bloated)icon fonts geeft ik de voorkeur aan zelf gecreerde icon fonts,
nog beter is om de icon fonts te vervangen voor svg image sprites.

Je ziet vaak dat websites 1 of meerdere iconfonts inladen en van de honderden icoontjes,
die in zo'n iconfont zitten er maar enkele gebruikt worden.

Een "snellere"oplossing is om een "iconfont" te genereren met alleen de fonts die je nodig hebt en deze asynchroon in te laden.
Een nog "snellere"oplossing is om een "svg image sprite" te genereren en af te stappen van iconfonts


Zie: gulp.task iconfont en svg: https://github.com/FrontEndStudio/cmsms ... e.babel.js
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by velden »

Bedankt voor het delen van al deze interessante informatie Arnoud!
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Dank je voor het gedetailleerde verhaal Arnoud.

Kijkend naar de fonts die ik op de site gebruik, dan zou het zo maar kunnen dat ik geen webfonts nodig heb, maar dat het wel zo in de templates is geïmplementeerd. Moet ik na gaan kijken.

Ga eerst verder op zoek wat de initiële vertraging veroorzaakt...
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

arnoud wrote:Wat betreft je trage webserver als laatste test kan je misschien een hele minimalistische CMS template + pagina aanmaken en kijken hoe snel deze reageert. Verkeerd gebruik van CMSMS caching of het ontbreken van caching op bij voorbeeld een module als CGSmartImage zouden ook zomaar de bottleneck kunnen zijn. Toch CMSMS gerealteerd zou toch niet ;)
Je gedachte over CGSmartImage was niet zo heel gek.... viewtopic.php?f=7&t=77990
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Eerder is cycle2 al aangehaald. Nu vond ik de volgende :

Code: Select all

@keyframes slider
{
    from, 24% { margin-left:0;         }
    31%, 53%  { margin-left:-620px;    }
    59%, 71%  { margin-left:-1240px;   }
    77%, to   { margin-left:-1860px;   }
}
Als ik het goed begrijp moet je wel bij het toevoegen van een regel die je in de slider wilt opnemen, alle percentages opnieuw berekenen. Komt me nogal omslachting over, of zie ik iets over het hoofd?
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm
Location: Deventer, Netherlands

Re: Laden van JS en CSS

Post by timdebuurman »

Hey,

Wat betreft de 'boven de vouw' melding bij Google Pagespeed, heb ik gemerkt dat je dat best letterlijk kan nemen en daarmee oplossen.

Google geeft aan dat inhoud boven de vouw, dus in het bovenste deel van je website/scherm, niet kan worden weergeven voordat bepaalde bestanden ingeladen zijn.

Wat ik dan doe, is de bestanden die Google aangeeft uitschakelen in de browser, bijv. met een Debugger in Chrome.
Dan zie je wat het effect is van de pagina zonder die bestanden.

Zorg er vervolgens voor dat er inhoud te zien is in deze stand.
Bijvoorbeeld door wat korte stijlen/css in de head van je website te zetten en zo te zorgen dat de basis tekst/inhoud van je website al wel bovenin beeld staat.

Daar dan beetje mee spelen en testen en je zult zien dat Google er meer tevreden van wordt bij die test.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
Post Reply

Return to “Dutch - Nederlands”