Tegenwoordig, met breedbandverbindingen de norm, hoeven we ons minder zorgen te maken over internetsnelheden of de bestandsgrootte van onze pagina's. Dat wil echter niet zeggen dat we dat nog steeds niet zouden moeten doen. Als u de laadtijden op uw server wilt verminderen, het aantal HTTP-aanvragen wilt verminderen en dat extra bit voor uw bezoekers wilt gebruiken, zijn er een paar technieken die u kunt gebruiken. Deze tutorial behandelt een aantal PHP-tricks, inclusief caching en compressie.

1. CSS-samenvoeging met PHP

Als webontwikkelaars splitsen we onze CSS vaak op tussen verschillende afzonderlijke bestanden om een ​​logische scheiding te behouden en om aanpassingen eenvoudiger te maken. Dit verhoogt echter het aantal verzoeken aan de server, wat resulteert in een langzamere paginalading. Met behulp van wat PHP kunnen we het beste van beide werelden hebben; meerdere bestanden aan onze kant bewaren en één verzoek gebruiken om ze allemaal op te halen.

Voorbereiding

Voordat we CSS-bestanden kunnen optimaliseren, hebben we een aantal CSS nodig om mee te werken! Laten we dus drie bestanden maken en er CSS in plaatsen.

 // main.css // Slechts een voorbeeld van een CSS-body width: 800px; marge: 0 auto; kleur: grijs;  #wrapper margin-top: 30px; achtergrond: url (... /images/cats.png);  

 // typography.css // Gewoon een voorbeeld van een CSS-body font-family: Arial, san-serif; lettertype: vet;  sterk font-size: 120%;  

 // forms.css // Gewoon een voorbeeld van een CSS-vorm position: relative; top: 400 px; z-index: 99;  invoer hoogte: 50px; breedte: 400 px;  

De PHP

We moeten de inhoud van deze bestanden ophalen en ze in een opgegeven volgorde aan elkaar toevoegen. Dus ons script moet de namen van de CSS-bestanden ontvangen via URL-parameters, alle bestanden openen en ze samenvoegen. Hierna volgt een uitleg van de code.

  $ file) $ files [$ key] = str_replace (array ('/', '\\', '.'), ", $ file); $ cssData ="; foreach ($ bestanden als $ bestand) $ cssFileName = $ cssPath. $ bestand. ' .Css'; $ fileHandle = fopen ($ cssFileName, 'r'); $ cssData. = "\ n". fread ($ fileHandle, bestandsgrootte ($ cssFileName)); fclose ($ filehandle);  // Vertel de browser dat we een CSS-bestand hebben en de gegevens verzenden. header ("Content-type: text / css"); if (isset ($ cssData)) echo $ cssData; echo "\ n \ n // Gegenereerd:". date ( "r");  else echo "// Bestanden niet beschikbaar of geen bestanden opgegeven."; ?> 

Het neerhalen

Het ziet er nogal ingewikkeld uit, maar blijf bij me, het is echt vrij eenvoudig.

  $ bestand) $ bestanden [$ sleutel] = str_replace (array ('/', '\\', '.'), ", $ bestand); 

Dit stuk code stelt het pad in voor de CSS-map en controleert of er enkele bestanden zijn verzonden om mee te werken. Het CSS-pad moet slashes hebben anders zullen we onszelf met emmertjes vol fouten bevinden. Als we wilden, konden we automatisch een schuine streep controleren en deze indien nodig toevoegen. Eenvoudigheidshalve heb ik dat gedrag echter weggelaten.

Vervolgens controleren we elke bestandsnaam en verwijderen alle volledige stops en / of schuine strepen. Dit voorkomt dat mensen het bestandssysteem navigeren door bestandsnamen door te geven, zoals '... / ... / secret / file'.

 $ cssData = "; foreach ($ bestanden als $ bestand) $ cssFileName = $ cssPath. $ file. '.css'; $ fileHandle = fopen ($ cssFileName, 'r'); $ cssData. =" \ n ". fread ($ fileHandle, bestandsgrootte ($ cssFileName)); fclose ($ fileHandle); 

Nu moeten we onze CSS-gegevens uit de afzonderlijke bestanden samenstellen. Om dit te doen, doorlopen we de array van bestanden met foreach, openen we elk bestand en voegen we de inhoud toe aan onze gegevens. De "\ n" voegt gewoon een nieuw lijnteken toe om de dingen netjes en opgeruimd te houden. De functie bestandsgrootte () wordt gebruikt om de lengte van het bestand te vinden, zodat we fread () kunnen vertellen hoeveel we willen (het hele bestand).

 // Vertel de browser dat we een CSS-bestand hebben en de gegevens verzenden. header ("Content-type: text / css"); if (isset ($ cssData)) echo $ cssData; echo "\ n \ n // Gegenereerd:". date ( "r");  else echo "// Bestanden niet beschikbaar of geen bestanden opgegeven."; ?> 

Het laatste deel van het script is om de CSS-gegevens naar de browser te verzenden. Dit betekent dat we PHP moeten vertellen dat we CSS-gegevens verzenden en dat dit de browser moet informeren. We doen dit met de header-functie, door het inhoudstype in te stellen op 'text / css'. Vervolgens sturen we de CSS naar de klant. We controleren eerst of er CSS-gegevens kunnen worden verzonden. Als dat niet het geval is, betekent dit dat er geen namen van CSS-bestanden zijn verzonden. Als dit het geval is, antwoorden we eenvoudigweg met een CSS-opmerking. Als we echter nog wat gegevens moeten verzenden, verzenden we die en voegen we een bericht toe waarin wordt vermeld wanneer het is gegenereerd. Als je bijvoorbeeld in één keer wat auteursrechtelijke informatie aan al je CSS wilt toevoegen, dan zou dit een ideale plek zijn.

Breng het naar de test

Oké, nu is het tijd om het script te testen; we moeten eerst een directorystructuur bouwen en dan onze script- en CSS-bestanden plaatsen. Bekijk de afbeelding hieronder en probeer die structuur te repliceren. Als u iets anders wilt, vergeet dan niet om de paden te veranderen om die veranderingen weer te geven.

Zodra alles op de juiste plaats staat, kunnen we ons script testen. De directorystructuur moet in de 'htdocs' of 'www' map van een webserver met PHP worden geplaatst (vrijwel elke webserver tegenwoordig). Navigeer naar het index.php-bestand. U moet worden begroet door een enkele opmerking: 'Bestanden niet beschikbaar of geen bestanden opgegeven'. Dit betekent dat we er geen bestanden voor hebben gegeven om samen te trekken. Het goede nieuws is echter dat dit een geldig CSS-commentaar is en geen problemen veroorzaakt.

Laten we iets wat lastiger doen; typ 'index.php? q [] = main', je zou de CSS van je bestand main.css moeten krijgen en een bericht onderaan.

Als we meerdere bestanden samen willen trekken (omdat dit eigenlijk het volledige punt van het script was), kunnen we dit verzoek verzenden: 'index.php? Q [] = main & q [] = forms'. Zoals je kunt zien, kunnen we 'q [] =' zo vaak herhalen als we willen, omdat het elke waarde aan een array toevoegt. U kunt mogelijk 50 CSS-bestanden samen toevoegen als u dit script wilt gebruiken.

afsluitende

Het gebruik van deze methode kan zeer nuttig zijn en voordelen bieden, zoals het kunnen beschikken over een standaard stylesheet voor elke pagina en een extra CSS-bestand voor pagina's met formulieren. Het is ook eenvoudig te implementeren als u al een soort CSS-verwerking met PHP gebruikt. Als je wilt, kun je index.php zelfs hernoemen naar index.css zolang je .htaccess instelt om CSS-bestanden te behandelen als PHP.

U merkt misschien dat ik verschillende CSS-ordenbestanden als verschillend behandel. Dit is omdat u misschien wilt dat één stylesheet een andere overschrijft en daarom is de volgorde van de bestanden belangrijk. Als dit geen probleem voor u is, wilt u misschien een sorteerfunctie uitvoeren op de array met bestanden voordat u gaat verwerken.

Slechts een woord van waarschuwing; Als u het index.php-bestand in een andere map plaatst dan de map die de CSS bevat, moet u uw relatieve achtergrondafbeeldingspaden schrijven alsof index.php uw stylesheet was. Dit is omdat dat is wat de browser denkt dat het is. U kunt ook een code toevoegen om deze URL's te herschrijven die buiten het bestek van deze zelfstudie vallen.

2. Strites witten van je HTML en CSS

Velen van ons gebruiken grote hoeveelheden witruimte bij het schrijven van code. Het goede nieuws is dat witruimte in PHP niet daadwerkelijk naar de browser wordt verzonden. Dit doet het echter in HTML.

Browsers hebben de neiging om slechts één spatie weer te geven, ongeacht het aantal tabbladen dat u in uw code gebruikt. Dit betekent dat er een verspilling van bandbreedte is. Met een paar eenvoudige PHP kunnen we deze witruimte met lageserende bandbreedte echter verwijderen.

Voorbereiding

Nogmaals, we zullen wat ruwe gegevens nodig hebben om mee te werken; dus kopieer het volgende voorbeeld HTML- en CSS-code. Sla het volgende op in een .htm- en een .css-bestand in een map in de webroot-map van uw server.

        
 
 
Kittens te koop!
 
 Er zijn hier veel ruimtes! Maar we moeten ze kwijtraken! 
 
 
 Lorem Ipsum dol ... 
 
   

 body min-height: 800px; achtergrond: zwart; lettergrootte: 18px;  #wrapper width: 960px; marge: 20px auto; opvulling: 15px;  #hoer h1 text-indent: -99999em; achtergrond: url (... /images/header.png); weergave: blok; breedte: 100%; hoogte: 48 px;  #mainbody font-weight: bold;  

De PHP

Een van de voordelen van deze methode is dat hetzelfde script zowel met HTML als CSS werkt. Ons script moet een bestandsnaam accepteren als onderdeel van het verzoek. Als het bestand eenmaal is geladen, moet het alle witruimten tot slechts één spatieteken verwijderen. Dit komt omdat we niet alle spaties tussen woorden willen verwijderen!

Nogmaals, er is hier een hoop PHP, maar ik zal het zorgvuldig met je doornemen.

Nauwere blik

Deze is niet zo lastig, maar we zullen het nog steeds uit elkaar halen en ervoor zorgen dat we begrijpen wat er aan de hand is.

We krijgen de bestandsnaam via een parameter die is doorgegeven met het GET-verzoek en controleren of het een toegestaan ​​bestandstype is. Vervolgens gaan we verder met het ophalen van de gegevens en verwerken deze om overtollige witruimte te verwijderen. Deze methode is relatief primitief en zal niet alle onnodige witruimte verwijderen, maar het zal het meeste in slechts een paar coderegels verwerken!

  
Dit fragment stelt slechts enkele variabelen in. Nogmaals, we geven onze gegevens door 'q' omdat het leuk en kort is. Dit geeft ons ook een plek om onze directory voor bestanden te definiëren en de bestandsextensie uit te pakken. De functie explode () scheurt de bestandsnaam omhoog wanneer deze een '.' en plaatst de bits in een array.
 
 if ($ ext! = 'css' AND $ ext! = 'htm' AND $ ext! = 'html') // Controleer of kwaadwillende mensen ... sterven ('Hackers ...!');  else  
 
Hier controleren we of het bestand CSS of HTML is. Als het iets anders was, zouden we hackers een gat in onze site kunnen geven, zoals ze hun instellingen laten zien.php! Dus nadat we de hackers de film hebben gegeven, kunnen we verder gaan met het verwerken van onze gegevens!
 
 // Laten we beginnen met $ handle = fopen ($ fileName, 'r'); $ fileData = fread ($ handle, bestandsgrootte ($ fileName)); // Nu voor wat regex wizzardry! $ newData = preg_replace ('/ \ s + /', ", $ fileData); fclose ($ handle); // Tijd om de gegevens uit te voeren. if ($ ext == 'css') header (" Inhoudstype: text / css "); echo $ newData;?> 
 
Nu voor de hoofdattractie; het enige dat we hier echt doen, is het bestand openen en lezen - zoals we in het eerste script hebben gedaan - en vervolgens zoveel mogelijk witruimte verwijderen. Dit wordt bereikt door een relatief eenvoudige reguliere expressie die door het bestand zoekt naar spaties, tabs of nieuwe regels en deze vervolgens vervangt door een enkele spatie.
 
Ten slotte sturen we de gegevens terug en stellen we de vereiste headers in als we te maken hebben met CSS.
 
Maar werkt het?
 
Als u naar uw browser gaat en naar 'index.php? Q = css.css' navigeert, dan zien we een regel CSS over de pagina. Dit laat zien dat alles in orde is! We kunnen ook hetzelfde effect zien op de broncode voor het html-voorbeeld. In feite hebben we in dat kleine voorbeeld een CSS-bestand van 314 tekens gereduceerd tot 277 tekens en een html-bestand van 528 tekens tot 448 tekens. Niet slecht voor 15 regels code.
  
Conclusie
 
Dus dat is een goed voorbeeld van hoe we heel veel kunnen doen met heel weinig werk. Als u de bron van pagina's zoals Google bekijkt, zult u merken dat ze bijna geen witruimte hebben, omdat wanneer u miljoenen verzoeken ontvangt, een paar extra kilobytes per aanvraag echt oplopen. Helaas hebben de meesten van ons niet zoveel geluk! 
 
3. Caching in je PHP Scripts
 
In dit deel zal ik je laten zien hoe je caching in je scripts kunt 'retrofitten' met behulp van het bovenstaande script als een voorbeeld. Het doel is om dingen te versnellen door de gegevens niet telkens opnieuw te genereren als iemand om een ​​bestand vraagt. Het genereren van de inhoud van elke aanvraag is gewoon een verspilling, vooral op statische gegevens zoals onze CSS.
 
Om caching toe te voegen, moeten we drie dingen toevoegen aan ons script. Allereerst moeten we de gegevensinvoer naar het script verzamelen en een bestandsnaam genereren die uniek is voor die reeks ingangen. Ten tweede moeten we zoeken naar een cache-bestand en kijken of het voldoende recent is. Ten slotte moeten we de kopie in de cache gebruiken of nieuwe inhoud genereren en deze voor de volgende keer in de cache opslaan.
  
De stroom doorbreken
 
Dit deel van het proces hangt echt af van het individuele script, maar ik zal laten zien waar ik de stroom van dit script voor de caching zal doorbreken.
 
  
 
Het in actie brengen
 
We zullen nu de code voor caching in dit script schrijven. Ik zal eerst het script voltooid laten zien en vervolgens door elk stuk gaan. 
  (time () - 86400)) $ cacheHandle = fopen ($ cacheName, 'r'); $ newData = fread ($ cacheHandle, bestandsgrootte ($ cacheName)); fclose ($ cacheHandle); $ isCached = TRUE;  else // Laten we beginnen met $ handle = fopen ($ fileName, 'r'); $ fileData = fread ($ handle, bestandsgrootte ($ fileName)); // Nu voor wat regex-tovenarij! $ newData = preg_replace ('/ \ s + /', ", $ fileData); fclose ($ handle); // Laat cache toe! $ cacheHandle = fopen ($ cacheName, 'w +'); fwrite ($ cacheHandle, $ newData) ; fclose ($ cacheHandle); $ isCached = FALSE; // Tijd voor het uitvoeren van de gegevens. if ($ ext == 'css') header ("Content-type: text / css"); if ($ isCached) echo "// opgehaald uit cachebestand. \ n "; else if ($ isCached) echo '';  echo $ newData; ?> 
 
De toelichting
 
Deze is een beetje lastiger en een beetje meer kans om je te laten krabben aan je hoofd. Maar maak je geen zorgen, er is niet veel veranderd en we zullen elke sectie doorlopen. Een extra functie die we hebben opgenomen, is het vernieuwen van de cache om de 24 uur. Dit is handig, dus als u iets verandert, kunt u 24 uur wachten of gewoon de cachemap leegmaken. Als u een ander verversingsinterval wilt, berekent u het in seconden.
 
 $ cacheName = './cache/'. $ nameExplode [0]. $ nameExplode [1]. 'Tmp'; 
 
Dit stukje code krijgt alleen de naam en extensie van het bestand, plakt ze aan elkaar en voegt de cachedirectory en de juiste '.tmp'-extensie toe.
 
 if (file_exists ($ cacheName) AND filemtime ($ cacheName)> (time () - 86400)) $ cacheHandle = fopen ($ cacheName, 'r'); $ newData = fread ($ cacheHandle, bestandsgrootte ($ cacheName)); fclose ($ cacheHandle); $ isCached = TRUE;  else  
 
Hier controleren we of we een cachebestand hebben opgeslagen en of het cachebestand binnen 24 uur is aangemaakt. Als aan beide voorwaarden is voldaan, openen we het bestand en extraheren we de inhoud ervan om de uitvoer van de scripts te vervangen. We hebben ook $ isCached ingesteld op true, zodat we aan het einde enkele berichten kunnen uitvoeren.
 
 // Laat cache toe! $ cacheHandle = fopen ($ cacheName, 'w +'); fwrite ($ cacheHandle, $ newData); fclose ($ cacheHandle); $ isCache = FALSE;  
 
Nu plaatsen we de uitvoer van het script in de cache die we in latere aanvragen kunnen gebruiken. We openen simpelweg een bestand in de schrijfmodus, dumpen onze gegevens erin en sluiten het vervolgens. Strikt genomen hoef je geen bestanden in PHP te sluiten, maar het wordt als een goede oefening beschouwd, dus ik heb het hier gedaan.
 
 // Tijd om de gegevens uit te voeren. if ($ ext == 'css') header ("Content-type: text / css"); if ($ isCached) echo "// Opgehaald uit cachebestand. \ n";  else if ($ isCached) echo '';  
 
Dit is een ander deel van het script dat een beetje is aangepast, zodat we via de browser feedback kunnen bieden. Als het bestand uit de cache is opgehaald, kunnen we een bericht toevoegen aan de uitvoer van het script. Merk op dat het bericht voor CSS-scripts aan het einde '\ n' heeft. Dit komt omdat de karakters '//' onze hele regel becommentariëren en '\ n' de rest op een andere regel drukt. Als u de berichten wilt uitschakelen, hoeft u alleen maar de regel '$ isCached = TRUE;' uit te geven..
 
Het geeft een werveling
 
Als we ons script opnieuw gebruiken, merken we geen verandering totdat we een tweede keer vernieuwen wanneer we een bericht te zien krijgen dat het bestand is opgehaald uit de cache. Zoet succes! Deze caching-setup kan ook worden toegepast op het eerste script met weinig aanpassingen, maar dat blijft achter als een oefening voor de lezer.
  
afsluitende
 
Snel eenvoudig maar effectief cachen toevoegen aan elk script waar je aan werkt is een uiterst nuttige vaardigheid. Het voegt net dat extra beetje toe aan het script, waardoor de belasting van uw server afneemt en de site sneller voor gebruikers wordt. Dat is nu win-win! 
Samenvattend
 
In deze tutorial heb ik je enkele handige maar eenvoudige manieren getoond om je site te versnellen met een vleugje PHP. Ik hoop echt dat je ze nuttig vindt en dat je ze in de toekomst op een project kunt toepassen. Hoe verbetert u de prestaties van uw site?
 
 
Volg ons op Twitter, of abonneer je op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.
 
 
 
 



		
			
	   
	




Code