css asynchroon laden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front End Developer / Javascript / CSS / HTML / UX

Functieomschrijving Ben je een Front End Developer en heb je ervaring met UX Design? Wil jij samenwerken met de beste (hyperintelligente) ontwikkelaars binnen het vakgebied om hoogwaardige software te maken voor onder andere de medische industrie en de luchtvaartindustrie? Solliciteer dan nu! Front End ontwikkelen (Javascript, CSS en HTML) en het verbeteren van het huidige design; Samenwerken/sparren binnen het scrumteam, waarin men werkt met korte tweewekelijkse sprints; Onderhouden van contact met klanten en deze bezoeken (het ophalen van requirements en het maken van designs); Trendwatching (het in de gaten houden van nieuwe relevante technologieën); Functie-eisen Een technische hbo/universitaire-opleiding (bij voorkeur

Bekijk vacature »

Daniel van Seggelen

Daniel van Seggelen

08/04/2017 22:45:49
Quote Anchor link
Ik gebruik: https://github.com/filamentgroup/loadCSS

en in de header laad ik 7 css bestanden.
Het punt is dat de css niet laad zoals het hoort. Bepaalde elementen hebben bijv een display:none, maar die worden toch eerst getoond voor 1 seconde.
Als ik het niet doe dan laad hij wel goed, maar duurt het laden langer.

Weet iemand hoe ik zeker kan zijn dat de css net zo geordend laad als de standaard wijze?
 
PHP hulp

PHP hulp

17/12/2018 21:45:18
 
Ozzie PHP

Ozzie PHP

08/04/2017 23:03:36
Quote Anchor link
Dus als ik je goed begrijp ... je het 7 CSS-bestanden? En omdat het laden daarvan te lang duurt, gebruik je een tool waarmee je de bestanden asynchroon inlaadt. Eerst de bestanden die per se nodig zijn, en daarna bestanden die minder relevant zijn?
 
Daniel van Seggelen

Daniel van Seggelen

08/04/2017 23:18:45
Quote Anchor link
Ja ik krijg dat door van goog pagespeed insight, dat ze boven de vouw geladen worden. Dit probeer ik dus te verhelpen met die tool.
 
Ozzie PHP

Ozzie PHP

08/04/2017 23:22:32
Quote Anchor link
Aha ... nu ken ik de situatie niet ... maar is het niet veel handiger om het oorspronkelijke probleem op te lossen (het gebruik van maar liefst 7 css bestanden) in plaats van de boel te 'fixen' met een noodgreep?
 
Daniel van Seggelen

Daniel van Seggelen

08/04/2017 23:41:06
Quote Anchor link
Nou ik kan alle css wel in 1 bestand zetten en hij is geminimaliseerd, maar ik wil dus geen render blocking hebben, maar dat heb ik nog steeds op de standaard wijze.
Dat maakt mijn website langzamer met laden en dat wil ik absoluut niet.
Alles wat ik kan doen om de site sneller te laden, daar ga ik voor. Dat is geen noodgreep, dat is gewoon de beste manier vinden om mijn site sneller te maken.
Asynchroon laden,
 
Ben van Velzen

Ben van Velzen

08/04/2017 23:57:52
Quote Anchor link
Correctie. Dat is *een* manier. Je kan ook kijken naar het verwijderen van zinloze css, gebruikmaken van handige(re) css regels etc. Daarnaast: wat is de werkelijke vertraging die je ziet?
 
Ozzie PHP

Ozzie PHP

08/04/2017 23:58:51
Quote Anchor link
>> render blocking

Wat bedoel je hier precies mee?

De meer algemene vraag luidt ... hoe kom je dan in godsnaam aan 7 CSS-bestanden ... het lijkt me dat je eerder daar het probleem moet oplossen. Werk je met een of andere framework/cms in combinatie met een thema ofzo?
 
Daniel van Seggelen

Daniel van Seggelen

09/04/2017 01:13:43
Quote Anchor link
Nee ik werk niet met een framework , alles custom made.
Met render blocking lees hier meer: https://varvy.com/pagespeed/render-blocking-css.html , google werkt nog altijd:)

Eerst alles laden voordat er iets weergegeven word komt het op neer.
Ok ik heb er nu 5 css van gemaakt, het ging even om het idee, niet om hoeveel csses er zijn. Zoals ik eerder aangaf, ook al combineer ik alle 7 css in 1 bestand, dan nog heb je met render blocking te maken. Ik wil dus weten of ik hem sneller kan maken om dit op te lossen.

Ik probeerde zelf een tool te schrijven in PHP om met preg_match te kijken welke css classes ik niet meer gebruik. Uiteraard ga ik daar ook achteraan.
 
Ben van Velzen

Ben van Velzen

09/04/2017 01:21:43
Quote Anchor link
Om merkbare blocking te zien heb je toch echt te maken met een gigantische hoeveelheid CSS. Hoe heb je dat voor elkaar gekregen?
 
Ozzie PHP

Ozzie PHP

09/04/2017 01:47:35
Quote Anchor link
>> Om merkbare blocking te zien heb je toch echt te maken met een gigantische hoeveelheid CSS. Hoe heb je dat voor elkaar gekregen?

Precies ... dit dus.
 
Daniel van Seggelen

Daniel van Seggelen

09/04/2017 10:04:26
Quote Anchor link
Ok, geminimaliseerd komt alles bij elkaar uit op 200kb.
het meeste in style.css, zowel voor alle apparaten, mobiel tab, portrait/landscape etc en het is een vrij groot project.

Deze bestanden zijn het, nu laat ik het elk apart zien:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="preload" href="<?=HTML_ROOT?>css/style.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?=HTML_ROOT?>css/style.css"></noscript>


<link rel="preload" href="<?=HTML_ROOT?>css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?=HTML_ROOT?>css/font-awesome.min.css"></noscript>

<link rel="preload" href="<?=HTML_ROOT?>css/jquery.mmenu.all.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?=HTML_ROOT?>css/jquery.mmenu.all.css"></noscript>

<link rel="preload" href="<?=HTML_ROOT?>css/jquery.mmenu.positioning.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?=HTML_ROOT?>css/jquery.mmenu.positioning.css"></noscript>

<link rel="preload" href="<?=HTML_ROOT?>css/jquery-ui.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?=HTML_ROOT?>css/jquery-ui.css"></noscript>


En 200 kb is niet zoveel. grote sites als bijv kieskeurig.nl gebruikt 1 css bestand van 250 kb geminimaliseert. Hun krijgen geen render blocking melding van google pagespeed insight.
Dus vraag me dan af waar dit aan ligt.
Gewijzigd op 09/04/2017 10:21:41 door Daniel van Seggelen
 
Ben van Velzen

Ben van Velzen

09/04/2017 11:26:43
Quote Anchor link
Vergelijk de opbouw van hun CSS eens met die van jou. Structuren qua overerving etc. Misschien valt er dan wel wat op.
 
Ward van der Put
Moderator

Ward van der Put

09/04/2017 11:45:18
Quote Anchor link
Zolang je nog 5 CSS-bestanden gebruikt, kun je die om te beginnen één voor één uitschakelen: dan zie je vanzelf bij welk uitgeschakelde CSS-bestand de snelheid merkbaar toeneemt.

De volgende stap is de knelpunten opsporen. Dat kan bijvoorbeeld via het tabblad Timeline in de developer tools van Google Chrome. Je ziet daar precies hoe een webpagina wordt opgebouwd. Als je Screenshots inschakelt, wordt ook de schermopbouw getoond, wat handig is als je meer visueel ingesteld bent: je ziet welk schermonderdeel de boel heeft opgehouden omdat het na een langere vertraging ineens opduikt.
Gewijzigd op 09/04/2017 11:50:28 door Ward van der Put
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.