css asynchroon laden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Young Professional Program - Cloud Expert

Wil jij na je studie direct aan de slag met innovatieve cloud-oplossingen bij grote bedrijven waar je echt impact maakt? Wil jij onderdeel zijn van een club waar je veel kan leren maar ook hard kan feesten? Dan is dit Cloud Expert programma echt iets voor jou! Middels dit programma helpen we je om binnen een korte tijd alle kennis en ervaring op te doen die je nodig hebt om als succesvolle Cloud Expert aan de slag te gaan. Je gaat drie maanden trainen op gesimuleerde klantomgevingen, o.a. met het bouwen en managen van cloud-omgevingen, het migreren van applicaties naar

Bekijk vacature »

Systeem- en Applicatiebeheerder

Systeem- en Applicatiebeheerder (36 uur) Systemen en applicaties beheren is jouw ding, al houdt het daar niet bij op. Onder de radar liggen er namelijk nog veel mooiere projecten op je te wachten. Met als basis de functie systeem- en applicatiebeheerder trek je ook projecten naar je toe! Veelzijdig? Zo kun je de functie van systeem- en applicatiebeheerder wel noemen. Misschien is dat zelfs een understatement, want in deze baan komt er werkelijk van alles op je af. Je zorgt in de eerste plaats dat de primaire systemen en bedrijfsapplicaties werken zoals zou moeten. En daarnaast ben je achter de

Bekijk vacature »

Huursector zoekt PHP medior/senior (Symfony) devel

Functieomschrijving Als PHP developer werk je aan hun platform binnen een multidisciplinair Scrum team. Je gaat samenwerken met andere developers binnen een multidisciplinair Scrum team. Jouw werkzaamheden richten zich voornamelijk op de Backend met Symfony. Je zorgt ervoor dat grote hoeveelheden data goed verwerkt worden. Dat doe je door een oplossing te bedenken in kleine hoeveelheden die snel worden gereleased. Dat doe je ook middels cloud met technieken als Docker en Kubernetes. In de rol van developer krijg je veel vrijheid om samen met je team te zoeken naar goede oplossingen dus je krijgt de mogelijkheid om te experimenteren met

Bekijk vacature »

WordPress Developer PHP

BEDRIJFSPROFIEL Onze klant bestaat al meer dan 25 jaar en is werkzaam in de communicatie en media design branche. Met inzet, enthousiasme en passie worden diverse projecten aangegaan. De klant geeft inhoud en vorm aan nieuwsbrieven, social media campagnes en online marketing en zijn dagelijks bezig met het ontwerpen, programmeren en onderhouden van websites, apps en andere publicaties. Kernwoorden van onze klant zijn: doelgericht, creatief, flexibel en enthousiast. FUNCTIE OMSCHRIJVING Als Software Developer WordPress / PHP ben je verantwoordelijk voor een breed scala aan producten voor de eindklant. Van het eerste moment dat je samen met de Account Manager aan

Bekijk vacature »

Mobile App Developer

Ons Mobile ontwikkelteam zoekt een fanatieke Mobile App Developer. Ben jij creatief en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. De apps doen het erg goed bij de zorginstellingen. Je kunt hierbij denken aan apps verpleegkundigen, thuiszorgmedewerkers, de logistieke dienst en - natuurlijk - de artsen zelf. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg).

Bekijk vacature »

C# Developer

De uitgebreide versie Jij hebt ruim twee jaar ervaring als developer. Nu wil je graag je tanden zetten in nog complexere projecten. Samen met je team bereik je nieuwe hoogtes en zelfstandig maak je meters. Je hebt behoefte aan collegae die jou alles leren op het gebied van technologie maar wilt tegelijkertijd ook graag je eigen opgedane kennis delen. Alles wat vandaag nog onbekend is, moet je morgen toepassen in de volgende uitdaging en dàt is wat jou scherp houdt. Je hebt geen zin in een 60-urige werkweek maar haalt wel plezier uit zo nu en dan een technische meeting,

Bekijk vacature »

Technisch Applicatiebeheerder

Ben jij toe aan een boost in je carrière en wil je graag werken aan uitdagende en maatschappelijk relevante projecten als Technisch Applicatiebeheerder? Ben jij een bevlogen specialist die applicaties tot in het diepst weet te doorgronden en die snel en adequaat reageert bij verstoringen? Heb jij de ambitie én potentie om door te groeien in onze organisatie? Dan zijn wij op zoek naar jou! Wat ga je doen? Als Technisch Applicatiebeheerder zorg je voor het continue beschikbaar zijn van applicaties. Je houdt je bezig met het inrichten, monitoren, analyseren en verbeteren van de technische infrastructuur en de procedures rondom

Bekijk vacature »

C# Developer /SaaS applicaties/MVC/ SQL/ 4.000 eur

Functieomschrijving Ben jij een .NET (C#) Developer wil werken in een IT-minded organisatie? Heb je kennis van MVC en SQL? Wil jij werken aan in-house ontwikkelde applicaties? Houd jij de nieuwste technieken in de gaten om het ontwikkelproces beter te laten verlopen? Lees dan snel verder! Nieuwbouw, onderhoud en bugfixing van de applicaties; Het produceren van code met een hoge kwaliteit; Hulp bieden aan jouw collega's met verschillende (complexe) technische kwesties; Kwaliteitsmonitoring van het gehele project, incl. de opgeleverde wijzigingen; Het waarnemen van verbetermogelijkheden en deze op de planning zetten. Functie-eisen Uitgebreide werkervaring met C#; Kennis van MVC en SQL;

Bekijk vacature »

senior Java ontwikkelaar

Functie­omschrijving Als senior Java ontwikkelaar werk je aan de ontwikkeling van nieuwe software en onderhoud aan bestaande applicaties en systemen. Jij werkt met de nieuwste frameworks, op basis van het continuous delivery gedachtegoed. Vanuit jouw kennis en ervaring weet jij bij te dragen aan de digitale ambitie van KVK: het leven van ondernemers makkelijker maken met betekenisvolle informatie, toegang tot het Handelsregister, onze data, kennis en netwerken. Denk daarbij aan mooie uitdagingen zoals het volledig digitaal inschrijven mogelijk maken en het ontwikkelen van meerdere registers. Samen met ondernemers, steden en rijksoverheid initiëren we creatieve projecten waarmee we ondernemend Nederland faciliteren.

Bekijk vacature »

Senior Java Developer vacature

Senior Java Developer Jij volgt ontwikkelingen op de voet. Sterker nog: jij bent er onderdeel van. Jij loopt voorop. Jij denkt met klanten mee en helpt hen innoveren. Bijvoorbeeld met de ontwikkeling van de Rabobank-app, een verbetering van de beveiliging van treinen voor Pro-rail of geef je een boost aan de website van ING! Focus op Java Wij bouwen State of the Art applicaties met de nieuwste Java technologie en frameworks. Dit doen we door ons te richten op de open source-oplossingen binnen de wereld van Java, alle nieuwe ontwikkelingen te volgen en onze kennis te delen binnen onze eigen

Bekijk vacature »

PHP Developer

Enthousiaste PHP Developer Voor onze vestiging in Wanneperveen (Ov.) zijn wij op zoek naar een PHP-developer met affiniteit voor back-end development. Wij bieden je een baan met veel afwisseling en verantwoordelijkheid tegen een goed salaris. Behalve voor hard werken is er ook zeker ruimte voor ontspanning. Wie wij zijn ... Unity-X ontwikkelt CRM-systemen, AMS (acquisitiemanagementsystemen), boekingssystemen, websites en andere webapplicaties voor een diverse opdrachtgevers. Het accent ligt op applicaties voor de financiële dienstverlening. Behalve voor bekende namen als ABN AMRO, Payroll Select en Van Lanschot werken wij ook voor verschillende organisaties in het MKB. Unity-X kent een informele werksfeer. We

Bekijk vacature »

.NET Developer Zorg-ICT

In een sector waarin de ontwikkelingen op het vlak van zorg-ICT in een stroomversnelling zitten, biedt ChipSoft een ultramodern en ziekenhuisbreed geïntegreerd elektronisch patiëntendossier. Dankzij ons groeiende marktaandeel in België is ChipSoft op zoek naar nieuwe collega’s. Jouw job Je bent verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van jouw eigen module. Het gaat om complexe ICT-producten die feilloos moeten functioneren binnen de zorgorganisatie. Je werkt zowel zelfstandig als in een team. ChipSoft maakt gebruik van een zelf ontwikkeld multi-tier framework. Tijdens een interne opleiding leren wij jou hoe je zelf aan de slag kan binnen deze architectuur. Jouw

Bekijk vacature »

Senior cloud engineer / full stack developer

Functie­omschrijving Het Koninklijk Meteorologisch Instituut is 'data driven' sinds 1854. Waarnemen, data verzamelen, modelleren, analyseren en duiding geven zijn de kernactiviteiten van het instituut. Waarnemingen komen van satellieten, radar, vliegtuigen in de lucht, maar ook van de meer dan 300 vrijwilligers die neerslagmetingen doen. De ICT van het instituut is zeer omvangrijk en voor de uitvoering van onze modellen beschikken we over een eigen HPC (supercomputer). Veel systemen zijn hoog beschikbaar uitgevoerd en kennen geen downtime. Als senior cloud engineer ben je in de lead bij de opzet en inrichting van het cloud platform, bij het vormgeven van applicaties voor

Bekijk vacature »

Medior SQL Ontwikkelaar / Database Developer / Ana

Functieomschrijving Medior SQL Ontwikkelaar / Database Developer / Analist De requirements in kaart brengen van de klant Het analyseren en ontwerpen maken de bedrijfsprocessen van de klant Het maken van functioneel ontwerp Ondersteunen van het ontwikkelteam De database ontwikkelen en onderhouden Queries schrijven Tabellen maken in SQL Software ontwikkelen met behulp van een lowcode platform Het bieden van customer support Functie-eisen HBO werk en/of denkniveau; Minimaal 2 jaar relevante werkervaring; Zowel Nederlands als Engels spreken en schrijven; Ervaring met SQL query's maken; Ervaring met programmeren is een pré; Ervaring met lowcode oplossingen is een pré; Ervaring met procesmodelleren is een

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

05/07/2020 09:56:55
 
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.