Veel CSS, wat is handig
ik heb inmiddels al veel css in mijn site zitten. Zo heeft het menu alleen al ongeveer 250 regels code.
Nu vroeg ik me af: wat is de beste manier om de boel overzichtelijk te houden?
Ik heb nu de css opgedeeld in meerdere bestanden, bv stijl_menu.css, stijl_head.css etc.
Ik heb alleen geen idee wat het aanroepen van meerdere (in mijn geval inmiddels 10)kleine .css bestanden aan laadtijd kost tov 1 groot bestand.
Nadeel van 1 bestand is de hoeveelheid scrolltijd als je iets wilt aanpassen.
Eventueel zou je met losse css bestanden kunnen werken en deze via een script aan elkaar kunnen plakken. In je code zeg je dan, op de homepage heb ik main.css en form.css nodig (dit is maar een voorbeeldje) en jouw code genereert dan 1 bestand form_main.css. Als vervolgens een andere bezoeker op je site komt, dan ziet de code... hé ik moet main.css en form.css aanroepen maar dat bestand (form_main.css) bestaat al en hoef ik dus niet opnieuw te genereren.
Gewijzigd op 29/07/2011 09:39:20 door Ozzie PHP
Met name naar dat strippen, comprimeren en gecached naar de browser sturen ben ik ook wel benieuwd eigenlijk!
Ik zou inderdaad niet weten hoe ik dat moet doen
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
?>
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
?>
CSS aanmaakdatum opslaan in database (oid).
In je applicatie verwijzen naar style.php?v=123456789 (time() van de aanmaakdatum)
In style.php haal je de versie op die word gevraagd, en stuur je headers mee dat ze pas over een jaar niet meer geldig zijn.
Of zit de tijdwinast in het feit dat het maar 1 keer gebeurt
De tijdwinst voor de gebruiker zit hem in de volgende feiten:
1. Er is maar 1 bestand ipv (bijvoorbeeld) 5 stylesheets
- Dit betekend dat er 4 minder requests zijn
2. Het bestand is verkleind
- Scheelt weer wat KB
3. Het bestand is te cachen
- Scheelt weer want dan hoeft het bestand niet iedere keer te worden opgehaald, maar uit zijn eigen cache gehaald!
Chris Horeweg op 29/07/2011 12:31:02:
Het maken van dat bestand duurt, tenzij je een hele slechte server hebt, minder dan 0.1 seconde.
Je kunt dit bestand toch ook eenmalig maken?
volgns mij moet dat handiger kunnen aan de hand van de last-modified datum ofzo... maar goed... da's voor later :)
Manier 1:
- controleer voordat je je view toont of het css bestand bestaat, zo nee genereer het bestand en plaats het in de (publieke) css map
- aangezien het bestand bestaat, kun je het gewoon aanroepen als normaal css bestand, bijvoorbeeld: <link rel="stylesheet" type="text/css" href="/css/main-form.css" />
of
Manier 2:
- roep het css bestand aan via een php file, bijvoorbeeld: <link rel="stylesheet" type="text/css" href="/css/css.php?file=main-form" />
- het css.php bestand kijkt of dit bestand bestaat. Ja, dan wordt de output naar de browser gestuurd, nee dan wordt het bestand gegenereerd en vervolgens naar de browser gestuurd.
Correct me if I'm wrong:
Manier 1 heeft in tegenstelling tot manier 2 volgens mij als voordeel dat het "echte" fysieke css bestanden zijn waardoor ze door de browser goed zullen worden gecached. Manier 2 heeft weer als voordeel dat je de data gezipt kunt oversturen naar de browser.
Welke manier verdient de voorkeur... of is er wellicht nog een betere manier?
Gewijzigd op 01/08/2011 02:30:37 door Ozzie PHP
(omdat ik op shared hosting werk kan ik niet zelf de server configureren. Daarom zou het handig zijn als ik dit in de code kan doen, maar volgens mij kan dat allen met manier 2?)
Pim - op 01/08/2011 05:35:52:
Ik heb het over manier 1, je moet dan dus cachen naar een gewoon bestand. Apache configureren kan ook met een .htaccess bestand.
Ik wist niet dat je die zip instellingen in je .htaccess bestand kon zetten. Ik dacht eigenlijk dat dat niet kon. Heb je hier misschien een voorbeeldje van? Zou ik erg fijn vinden!
Pim - op 01/08/2011 03:04:28:
Direct aanvragen is sowieso sneller. Via je apache config kan je dan gzip en de juiste cache-control headers instellen.
Of je het nu direct aanvraagt of dat je het een script laat genereren merk je nauwelijks. Al helemaal niet als het resultaat gecached wordt. Als het een een aantal ms zou schelen zou me dat verbazen. Dat is niets vergeleken met de tijdswinst die je kan behalen door al je bestanden te comprimeren, gzippen en samen te voegen. Zie de link die ik hierboven heb gepost. 1,5 seconden afhalen van 3,5 seconden laadtijd, dat zijn cijfers die er toe doen.
Ozzie PHP op 01/08/2011 10:57:46:
Ik wist niet dat je die zip instellingen in je .htaccess bestand kon zetten. Ik dacht eigenlijk dat dat niet kon. Heb je hier misschien een voorbeeldje van? Zou ik erg fijn vinden!
http://www.samaxes.com/2008/04/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth-saving/