css asynchroon laden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Technisch Ontwerper / Applicatieontwikkelaar max.

Wie zoeken we? Je bent de beste in je vak of hebt de ambitie en de potentie om de beste te worden. Je hebt de passie om nieuwe technologieën te blijven leren en continu jezelf te ontwikkelen. Je hebt de pioniersgeest en drive om nieuwe technologieën, methodieken en concepten toe te passen in projecten en bij klanten. Je vindt het leuk om kennis te delen met collega’s, klanten en vakgenoten. Je bent een ware professional en ambassadeur voor CIMSOLUTIONS. Je voelt je thuis in een informele, collegiale en professionele sfeer waar de aandacht voor de klant en voor de medewerker

Bekijk vacature »

Medior PHP Developer

Organisatie Deze jonge club uit Eindhoven is momenteel hard op zoek naar development talent op het gebied van PHP Software Development. Je komt terecht in een organisatie dat meerdere grote klanten bediend op het gebied van Software Development door hen te ondersteunen in verschillende projecten. Zo zijn zij continu bezig met het ontwikkelen van (web)applicaties, complexe backend systemen en websites, zeer gevarieerd dus! Je komt terecht in een ontwikkelclub met echte vakidioten, het niveau in het team varieert ook van zeer getalenteerde developers tot doorgewinterde senior developers waar je mee kunt sparren en/of jezelf aan op kunt trekken. Functie Jouw

Bekijk vacature »

Reporting Analyst Automation

Voor onze Intelligence en Insights afdeling zijn wij op zoek naar versterking. Ben jij die scherpe, gedreven en analytische information expert op zoek naar een baan als Reporting Analist Automation? Dan is T-Mobile op zoek naar jou! Wat ga jij doen? Als Reporting Analyst Automation ben je werkzaam binnen de afdeling Intelligence & Insights (I&I). Dit is dé centrale afdeling die zorgt voor synergie en efficiency in data visualisatie, data governance en BI trajecten voor T-Mobile. In dit kloppende hart van de organisatie wordt de data in al haar gedaantes omgezet in kennis en inzichten via Reporting, Dashboarding en Analysis.

Bekijk vacature »

junior analist cybercrime

Wat ga je doen? Als junior analist cybercrime verzamel en valideer je onderzoeksgegevens en zorg je voor het vertalen van informatie naar opsporingsmogelijkheden op het brede gebied van cybercriminaliteit. Je structureert informatie en schat de consequenties van ontwikkelingen en besluiten in. Je zet dit om in bijvoorbeeld onderzoeksvoorstellen, analyses en adviezen ten behoeve van de lopende opsporingsonderzoeken. Zo ben je betrokken bij het opstellen van intelligenceproducten ten aanzien van cybercriminaliteit, veiligheidsbeelden, monitorberichten en informatierapporten. Je bent flexibel inzetbaar en weet jouw cyber kennis breed in te zetten. Waar ga je werken? Je gaat werken bij het cybercrimeteam van Eenheid Zeeland-West-Brabant.

Bekijk vacature »

PHP ontwikkelaars gezocht voor een leuk jong en dy

Vacature Omschrijving Deze ambitieuze partij is dertien jaar geleden opgericht en heeft twee jaar geleden een ander MKB-bedrijf overgenomen. Het is een jong en dynamisch informeel team van vijftig medewerkers en ze hebben een work hard, play hard mentaliteit. Bij dit bedrijf gaan ze alleen voor de allerbeste resultaten en dit zie je ook terug in hun trouwe klanten, zoals een groot Rotterdam openbaarvervoersbedrijf. De visie is dat design en technologie de mens verder brengt. Dat digital in dienst staat van de mens. Met hun ontwerpen daaraan bijdragen is wat hen drijft en hun werk zin geeft. In 2005 begon

Bekijk vacature »

Junior PHP Developer

Organisatie Je komt te werken in het centrum van Eindhoven in een jong gepassioneerd team bestaande uit Backend ontwikkelaars een UX Designer en Web Developers. We zoeken iemand die aan het begin van zijn of haar carrière staat, die creatief is, oplossingsgericht en het leuk vindt om samen in een team van ervaren ontwikkelaars te werken. Stel je voor, maandag ochtend, je komt op kantoor aan. Eerst lekker even wat drinken en bijkletsen hoe dat jouw weekend en het weekend van jou collega’s is geweest. Rond de klok van 09:30 uur ga je samen met het team bespreken welke taken

Bekijk vacature »

PHP Ontwikkelaar gezocht in Tilburg

Organisatie Deze grote organisatie in Tilburg is een grote speler binnen haar niche. Er werken meer dan 250 medewerkers aan B2B oplossingen en interne systemen. Hierbij is het grootste project het hervormen van alle interne systemen naar één groot allesomvattend systeem. Deze gigantische organisatie is, ondanks haar formaat, niet hiërarchisch ingericht en de lijnen zijn kort. Het is gewoon mogelijk om bij de directie binnen te stappen om jouw ideeën te bespreken en het leuke is dat er vervolgens ook echt wat mee wordt gedaan. Wegens de omvang van deze organisatie is er natuurlijk veel mogelijk op het gebied van

Bekijk vacature »

Medior .NET developer / Medische sector /

Werk jij graag bij een unieke organisatie die marktleider is binnen de branche? Vind jij maatschappelijk verantwoord ondernemen belangrijk? Wil jij als individu echt impact maken met jouw werkzaamheden? En wil jij graag werken met de nieuwste technieken en frameworks? Zoek dan niet verder, want dan ben ik op zoek naar jou! De organisatie ‘Wij willen graag gezien worden als een echt familiebedrijf, maar wel een familie met ambitie en passie voor het werk’. Je bent hier geen nummer, maar echt onderdeel van het team. Je gaat werken met de nieuwste software binnen de zorgsector, waarbij jij op een maatschappelijk

Bekijk vacature »

.NET C# ontwikkelaar gezocht (C# Winforms, Xamarin

.NET C# ontwikkelaar bij een slagvaardig en hard groeiend bedrijf met korte lijnen? In een omgeving waar je onder andere direct samen met de oprichter werkt aan het verder ontwikkelen van een vernieuwend product? Dan is deze vacature zeker iets voor jou. Voor een bedrijf in Rotterdam zijn we momenteel op zoek naar een .NET C# ontwikkelaar. Het gaat om klein bedrijf dat op een punt is aanbeland waar de vraag naar hun software flink aan het toenemen is. Hierdoor zijn ze op zoek naar meerdere .NET ontwikkelaars die samen met de oprichter en nog verschillende andere collega’s hun product

Bekijk vacature »

procescoördinator cybercrime

Wat ga doen? Vanuit het LOCO worden plannen opgesteld voor de aanpak van cybercrime. Dit gebeurt zowel op eenheidsniveau als landelijk niveau. Als procescoördinator ondersteun je de eenheden en jaag je ze aan om de juiste informatie aan te leveren ten behoeve van de uit te voeren analyses. Vanuit het LOCO ben jij de netwerker die contacten onderhoudt met zowel in- als externe partners. Je bent het aanspreekpunt voor diverse partijen zoals de cybercrimeteams, Team High Tech Crime, de informatieorganisatie en het Openbaar Ministerie. Verder ben je ondersteunend aan het LOCO en ben je verantwoordelijk voor het bijhouden van de

Bekijk vacature »

Frontend developer Planning en Poolbeheer

Locatie/Standplaats Amsterdam Functieomschrijving Wil jij deel uitmaken van een DevOps teams in wording waar jij klanten van ons helpt met het indienen van hun aanvragen en het beheren van hun pool? Het I-Plan team levert o.a. core applicatie(s) waarmee onze planners en klanten de beste planningen maken. De tooling is toonaangevend en onderscheidend in de markt met bv zelfrooster functionaliteit en services voor apps. Binnen het I-Plan team werken we met proven technology en hebben we een ietwat andere kijk op front-end ontwikkeling waarbij er met pure js (ES6) - geen framework - wordt gewerkt. Er zijn verschillende redenen geweest

Bekijk vacature »

Junior C# developer gezocht voor Marktleider

Bedrijfsinformatie: Modern, innovatief en klantgericht. Dit zijn de kernwaardes van deze marktleider in de Retail branche. Deze organisatie uit Utrecht houdt zich bezig met het ontwikkelen van kassasystemen en winkel optimalisatie. Al meer dan 20 jaar zijn ze marktleider en zijn ze inmiddels ook internationaal actief. Je komt te werken bij een innovatieve organisatie met echte vakidioten. De medewerkers die hier werken hebben ieder een unieke achtergrond en diversiteit is een gegeven ideologie wat steeds terug komt. Daarnaast zijn ze erg flexibel en krijg je enorm veel vrijheid om jezelf te focussen op hetgeen wat je wil doen. Het is

Bekijk vacature »

PHP programmeren in divers team en maatwerk (web)a

Vacature Omschrijving Wil jij als ervaren PHP developer aan de slag bij een echte specialist in het schrijven van code? Dan zoeken we jou. Dit kleinschalige maar snelgroeiende bedrijf in Alphen aan den Rijn houdt zich bezig met de ontwikkeling van maatwerk (web)applicaties in diverse sectoren. Onder hun klanten mogen zij KPN, Headfirst, KWF Amsterdam en de MPlus groep rekenen. Zij richten zich voornamelijk op de complexere systemen en ontwikkelen met enige regelmaat opensource projecten. Daarnaast adviseren zij organisaties over het ontwikkelen van nieuwe workflows voor bestaande en nieuwe systemen om efficiëntie en vooral toekomstbestendigheid te garanderen. Het bedrijf is

Bekijk vacature »

Enthousiaste (medior) PHP developer gezocht met ke

Bedrijfsinfo Deze groeiende organisatie is constant bezig om verschillende bedrijven te adviseren op het gebied van E-Commerce. Naast het adviseren wordt er ook onafhankelijk advies gegeven. Voor de elke klant wordt er uitgebreide support geboden en online marketing mogelijkheden! Het bedrijf bestaat uit ruim 250 werknemers en is een onderdeel van een overkoepelende organisatie die al 12 jaar bestaat. Het is een erg platte organisatie waar je terecht komt in een team 10 webdevelopers, verdeeld in front-end en back-end. Het uiteindelijke doel is dat je doorgroeit naar een full-stack developer. Functieomschrijving Als back-ender ben je tijdens projecten de technische wederhelft

Bekijk vacature »

.Net Web Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA werken onze consultants als Web Developer / software ontwikkelaar in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Web Developers / software ontwikkelaars om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam en je ondersteunt de software architect en projectleider bij hun werkzaamheden. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit

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

18/06/2019 03:50:01
 
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.