css asynchroon laden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer / lease-auto / projecten / salaris

Vind je het leuk om je te verdiepen in technische integratie-vraagstukken die veel uitzoekwerk vergen en waarbij je met nieuwe technieken werkt? Wil je graag bij een organisatie werken waar je geen nummer bent en die goede arbeidsvoorwaarden heeft? Functieomschrijving Vind je het leuk om je te verdiepen in technische integratie-vraagstukken die veel uitzoekwerk vergen en waarbij je met nieuwe technieken werkt? Wil je graag bij een organisatie werken waar je geen nummer bent en die goede arbeidsvoorwaarden heeft? Reageer dan nu! Het koppelen van systemen met elkaar voor data verrijking waar vervolgens business-apps en dashboards op worden gebouwd middels

Bekijk vacature »

Oracle SOA-OSB Developer

Ben jij een ervaren Oracle SOA-OSB Developer? Ben jij een gedreven Oracle SOA-OSB developer met ambitie en minimaal 2 jaar ervaring als integratie specialist bij klanten en wil je werken binnen complexe (internationale) opdrachten bij Capgemini? Dan hebben wij een passende vacature voor jou! Integratie is het hart in alle projecten. Als Oracle SOA – OSB developer ben jij onderdeel van dat hart en zorg je dat binnen Oracle implementaties integraties zo efficiënt en onderhoudbaar moegelijk worden gerealiseerd. Je werkt op een prettige manier samen in teams met ervaren professionals van Capgemini middel SCRUM/Agile. Met jouw specialistische integratie kennis voeg

Bekijk vacature »

Oracle SOA-OSB Developer

Ben jij een ervaren Oracle SOA-OSB Developer? Ben jij een gedreven Oracle SOA-OSB developer met ambitie en minimaal 2 jaar ervaring als integratie specialist bij klanten en wil je werken binnen complexe (internationale) opdrachten bij Capgemini? Dan hebben wij een passende vacature voor jou! Integratie is het hart in alle projecten. Als Oracle SOA – OSB developer ben jij onderdeel van dat hart en zorg je dat binnen Oracle implementaties integraties zo efficiënt en onderhoudbaar moegelijk worden gerealiseerd. Je werkt op een prettige manier samen in teams met ervaren professionals van Capgemini middel SCRUM/Agile. Met jouw specialistische integratie kennis voeg

Bekijk vacature »

AngularJS Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA GEOS werken onze consultants als Developer 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 Developers om ons development team te versterken. Je bent creatief en draagt met je enthousiasme positief bij aan de teamgeest binnen een projectteam. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande interesse in het applicatie landschap.

Bekijk vacature »

Java Full Stack Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Full Stack Developers om ons development team te versterken. Als Full Stack developer werk je in Agile teams bij onze klanten en ben je verantwoordelijk voor alle lagen van de stack. Ben je beter in de backend, dan helpen we je verder met de front-end en andersom natuurlijk. Je gaat hoogwaardige software maken voor verschillende opdrachtgevers in jouw regio. Je ontwikkelt, adviseert over architectuur en past de nieuwste technologieën toe. Je bent een professional die het IT-vak serieus

Bekijk vacature »

C#.NET Developer

Als C#.NET Developer kom je bij deze marktleider op het gebied van een geografische oplossing in een C#.NET Agile Scrum team te werken. Het is een flexibele en familiaire omgeving waar je veel kan leren, opleidingen kan volgen en veel samen gedaan wordt. Samen met je collega's ontwikkel je aan een geografisch pakket waar een aantal databases op aangesloten zijn. Met dit pakket kunnen gebieden, dorpen en steden in kaart gebracht worden. Het is geen probleem als je nog geen ervaring met GEO of GIS hebt. Het gehele team bestaat uit 5 C#.NET Developers en 1 Tester in Nederland en

Bekijk vacature »

Met spoed gezocht: Medior/Senior C# Developer!

Functieomschrijving Je komt terecht in meerdere Scrumteams. Er is veel sprake van overlappende stories, dus je werkt vaak met andere collega's. Hierdoor leer je al je collega's goed kennen, wat erg prettig is voor het teamgevoel. Als Medior of Senior Ontwikkelaar wordt er zelfstandigheid van je verwacht. Uiteraard zul je de eerste periode ingewerkt worden, maar daarna dien je snel op volle toeren mee te kunnen draaien. Een proactieve houding, waarbij je actief meedenkt over passende oplossingen die de organisatie vooruit helpen, is belangrijk. Verder krijg je hier heel veel ruimte om je functie in te richten zoals jij dat

Bekijk vacature »

Oplossingsgerichte Full Stack Developer in Utrecht

Functieomschrijving Ben jij de Full Stack Developer die zich focust op de backend en altijd op zoek is naar de beste oplossingen? Is jouw kennis binnen dit vakgebied up-to-date om te werken aan een applicatie? Dan ben jij zeker geschikt voor deze functie! Is backend helemaal jouw ding, maar kan jij je ook goed vinden in de front-end? Wil jij jouw kennis delen met jouw collega’s, werken in een klein team én werken aan een veelgebruikte applicatie? Reageer dan snel op deze vacature! Solliciteer jij bij iSense en krijg jij vervolgens deze baan? Dan krijg jij toegang tot het iSense

Bekijk vacature »

PHP Developer voor state-of-the-art webapplicatie

Functieomschrijving Werk jij graag met de nieuwste technieken? Wil jij graag een bijdrage leveren aan de maatschappij? Wil jij een applicatie van scratch af aan opbouwen? Lees dan snel verder! Ontwikkelen van een PHP objectgeoriënteerde applicatie; Meedenken in de architectuur; Keuzes maken over de te gebruiken tooling; Requirements verzamelen; Ontwikkelen van nieuwe functionaliteiten; Ontwikkelen van nieuwe modules; Zo nu en dan een legacy code onderhouden. Functie-eisen HBO werk en denk niveau; Minimaal 5 jaar werkervaring als PHP ontwikkelaar (OO); Ervaring met frameworks; Je ontwikkelt clean code; Je bent communicatief vaardig. Bedrijfsomschrijving De organisatie waar je komt te werken is een

Bekijk vacature »

Medior PHP Developer Vakantie Branche CakePHP

Medior PHP Developer Vakantie Branche CakePHP Wat ga je doen? Als Medior PHP Developer ga je in Amsterdam aan de slag bij een online reisbedrijf. Ze zijn gespecialiseerd in het verkopen zonvakanties, busreizen, stedentrips, sportreizen en groepsreizen op maat voor consumenten en bedrijven. Zij beheren meerdere succesvolle domeinnamen waarbij de gebruikte CRM-platformen gekoppeld staan met de API's van diverse leveranciers om het klantenbestand te beheren, het boeken van reizen en real-time updates te krijgen van lopende boekingen. Wegens uitbreiding zijn ze van plan om een nieuwe domeinnaam te starten met een soortgelijk CRM-Platform met andere koppelingen. Daarnaast ben jij bezig

Bekijk vacature »

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 »

Senior PHP Developer Onderwijssoftware SaaS oploss

Senior PHP Developer Onderwijssoftware SaaS oplossing Wat ga je doen als Senior PHP developer? Als Senior PHP Developer uit de omgeving Amsterdam, ga jij werken aan onderwijs-software pakketten voor basis- en het voorgezet onderwijs, en voor volwasseneducatie. Het pakket voor basisonderwijs is een overzichtelijke communicatie tool (Laravel) voor leerkrachten. Met de tool kunnen zij ouders en verzorgers meer betrekken bij de vooruitgang van het kind. Denk hierbij aan nieuwsbrieven, oudergesprekken inplannen, persoonlijke berichten en absentie registratie. De overige pakketten (Symfony) worden aangeboden als een SAAS-online leerplatform. Het geeft leerkrachten de mogelijkheden om extra lesmaterialen van uitgevers om op maat onderwijs

Bekijk vacature »

Medior Business Process management developer

Functieomschrijving In 2015 startte de Belastingdienst een ingrijpend meerjarig veranderprogramma; de Investeringsagenda. Inzet is te zorgen voor een Belastingdienst die beter, goedkoper en meer in control is. Jij ondersteunt de Belastingdienst in deze strategische doelstellingen met je expertise en de modernst denkbare infrastructuur. Als Business Process Management Developer werk je in een internationaal, jong en dynamisch team dat gewend is om te werken met korte prints én deadlines. jij focust op het verbeteren van jezelf, jouw team én de Belastingdienst. Functie-eisen je hebt een hbo werk- en denkniveau en bij voorkeur een diploma in een voor de functie relevante opleiding

Bekijk vacature »

Mobile Web Developer

Apps om te betalen met je vingerafdruk, de rekening in de bar te delen of je huiskamer een sfeer kleurtje te geven met licht! Wil jij Mobile Apps realiseren die mensen echt raken? Apps maken die het leven van ons als gebruikers vereenvoudigen? Wij stellen onszelf ten doel dat we op elke smartphone in NL een App van onze hand kunnen aanwijzen. En jij? Wil jij dat soort gave projecten ook doen bij de Nederlandse topbedrijven? Impact met Apps Bij Sogeti Mobile zitten we super dicht op de huid van de gebruiker. We leveren gebruiksvriendelijke oplossingen op jouw favoriete kanaal.

Bekijk vacature »

Senior PHP-developer

Wil jij aan de slag met interne start-ups, bestaande applicaties verbeteren en in een jong en bruisend onderwijsbedrijf werken? Dan is de functie van backend developer bij Lyceo iets voor jou! Gezocht: Senior PHP-developer, minimaal 32 uur per week Als developer bij Lyceo ben je één van die geniale types binnen de organisatie. Je gebruikt jouw kwaliteiten achter de schermen om top online services te bouwen. Je zorgt ervoor dat Lyceo ook op technisch vlak de beste onderwijsondersteuner van Nederland is. Dit doe je door het verder ontwikkelen van bestaande applicaties, maar ook door deel te nemen aan interne start-ups

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

22/02/2019 14:41:57
 
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.