Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

3 Möglichkeiten, Ihre Site mit PHP zu beschleunigen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Heutzutage, da Breitbandverbindungen die Norm sind, müssen wir uns nicht mehr so ​​sehr um die Internetgeschwindigkeit oder die Dateigröße unserer Seiten kümmern. Das heißt jedoch nicht, dass wir das immer noch nicht tun sollten. Wenn Sie die Ladezeiten auf Ihrem Server reduzieren möchten, die Anzahl der HTTP-Anforderungen reduzieren und dieses zusätzliche Bit für Ihre Besucher verwenden möchten, gibt es einige Techniken, die Sie verwenden können. Dieses Tutorial behandelt eine Reihe von PHP-Tricks, einschließlich Caching und Komprimierung.

1. CSS-Verschmelzung mit PHP

Als Webentwickler teilen wir unser CSS häufig auf mehrere separate Dateien auf, um eine logische Trennung zu gewährleisten und Änderungen zu vereinfachen. Dies erhöht jedoch die Anzahl der Anforderungen an den Server, was zu einem langsameren Laden der Seite führt. Mit etwas PHP können wir das Beste aus beiden Welten haben; Speichern mehrerer Dateien auf unserer Seite und Verwenden einer einzigen Anforderung zum Abrufen aller Dateien.

Vorbereitung

Bevor wir CSS-Dateien optimieren können, benötigen wir CSS, um damit arbeiten zu können! Lassen Sie uns also drei Dateien erstellen und CSS hinzufügen.

Das PHP

Wir müssen den Inhalt dieser Dateien abrufen und in einer bestimmten Reihenfolge aneinander anhängen. Unser Skript muss also die Namen der CSS-Dateien über URL-Parameter erhalten, alle Dateien öffnen und zusammenstellen. Eine Erklärung des Codes folgt.

Brechen sie ab

Es sieht ziemlich kompliziert aus, aber bleib bei mir, es ist wirklich ziemlich einfach.

Dieser Codeabschnitt legt den Pfad für den CSS-Ordner fest und überprüft, ob uns einige Dateien zur Bearbeitung geschickt wurden. Der CSS-Pfad muss nachgestellte Schrägstriche haben, ansonsten werden wir uns mit Fehlern beladen. Wenn wir wollten, könnten wir automatisch nach einem Schrägstrich suchen und ihn bei Bedarf hinzufügen. Der Einfachheit halber habe ich dieses Verhalten jedoch weggelassen.

Als Nächstes überprüfen wir jeden Dateinamen und entfernen alle Punkte und / oder Schrägstriche. Dadurch wird verhindert, dass Benutzer im Dateisystem navigieren, indem sie Dateinamen wie '../../secret/file' übergeben.

Jetzt müssen wir unsere CSS-Daten aus den einzelnen Dateien erstellen. Dazu durchlaufen wir das Datei-Array mit foreach, öffnen jede Datei und hängen den Inhalt an unsere Daten an. Das "\ n" fügt einfach ein neues Linienzeichen hinzu, um die Dinge ordentlich zu halten. Die filesize () - Funktion wird verwendet, um die Länge der Datei zu ermitteln, sodass wir fread () mitteilen können, wie viel wir wollen (die gesamte Datei).

Das letzte Bit des Skripts besteht darin, die CSS-Daten an den Browser zu senden. Das bedeutet, wir müssen PHP mitteilen, dass wir CSS-Daten senden und dass der Browser darüber informiert werden muss. Wir machen dies mit der Header-Funktion und setzen den Inhaltstyp auf 'text / css'. Dann senden wir das CSS an den Client. Wir prüfen zunächst, ob CSS-Daten gesendet werden sollen. Ist dies nicht der Fall, bedeutet dies, dass keine Namen von CSS-Dateien gesendet wurden. Wenn dies der Fall ist, antworten wir einfach mit einem CSS-Kommentar. Wenn wir jedoch einige Daten zum Senden haben, senden wir diese und fügen eine Nachricht hinzu, wann sie generiert wurde. Wenn Sie beispielsweise alle CSS in einem Schritt mit Copyright-Informationen versehen möchten, wäre dies ein idealer Ort.

Teste es

Okay, jetzt ist es Zeit, das Skript zu testen. Wir müssen zuerst eine Verzeichnisstruktur erstellen und dann unsere Skript- und CSS-Dateien platzieren. Schauen Sie sich das Bild unten an und versuchen Sie, diese Struktur zu replizieren. Wenn Sie etwas anderes wünschen, vergessen Sie nicht, die Pfade entsprechend diesen Änderungen zu ändern.

Sobald alles am richtigen Ort ist, können wir unser Skript testen. Die Verzeichnisstruktur muss mit PHP in den Ordner 'htdocs' oder 'www' eines Webservers gestellt werden (heutzutage fast jeder Webserver). Navigieren Sie zur Datei index.php. Sie sollten mit einem einzigen Kommentar begrüßt werden: "Dateien nicht verfügbar oder keine Dateien angegeben". Dies bedeutet, dass wir keine Dateien für das Zusammenführen gegeben haben. Die gute Nachricht ist jedoch, dass dies ein gültiger CSS-Kommentar ist und keine Probleme verursachen wird.

Lassen Sie uns etwas etwas Kniffligeres versuchen; Geben Sie 'index.php? q [] = main' ein. Sie sollten das CSS von Ihrer main.css-Datei und einen Hinweis unten erhalten.

Wenn wir mehrere Dateien zusammenführen möchten (da dies wirklich der gesamte Punkt des Skripts war), können wir diese Anfrage senden: 'index.php? Q [] = main & q [] = forms'. Wie Sie sehen, können wir 'q [] =' beliebig oft wiederholen, da jeder Wert einem Array hinzugefügt wird. Sie können möglicherweise 50 CSS-Dateien zusammen hinzufügen, wenn Sie dieses Skript verwenden möchten.

Abschließend

Die Verwendung dieser Methode kann sehr nützlich sein und Vorteile bieten, z. B. für jede Seite ein Standard-Stylesheet und eine zusätzliche CSS-Datei für Seiten mit Formularen. Es ist auch einfach zu implementieren, wenn Sie bereits eine CSS-Verarbeitung mit PHP verwenden. Wenn Sie möchten, können Sie index.php sogar in index.css umbenennen, solange Sie .htaccess so einrichten, dass CSS-Dateien als PHP behandelt werden.

Sie stellen möglicherweise fest, dass ich unterschiedliche Reihenfolge von CSS-Dateien als unterschiedlich behandele. Dies liegt daran, dass Sie möchten, dass ein Stylesheet ein anderes überschreibt, und daher ist die Reihenfolge der Dateien wichtig. Wenn dies kein Problem für Sie ist, möchten Sie möglicherweise vor dem Verarbeiten eine Sortierfunktion für das Datei-Array ausführen.

Nur ein Wort der Vorsicht; Wenn Sie die Datei index.php in einem anderen Ordner als dem Ordner ablegen, der das CSS enthält, müssen Sie Ihre relativen Hintergrundbildpfade so schreiben, als wäre index.php Ihr ​​Stylesheet. Dies liegt daran, dass der Browser dies für den Browser hält. Alternativ können Sie auch etwas Code hinzufügen, um diese URLs neu zu schreiben. Dies würde jedoch den Rahmen dieses Tutorials sprengen.

2. Entfernen Sie Whitespace von HTML und CSS

Viele von uns verwenden beim Schreiben von Code große Mengen an Leerzeichen. Die gute Nachricht ist, dass Whitespace in PHP nicht wirklich an den Browser gesendet wird. Dies gilt jedoch für HTML.

Browser zeigen normalerweise nur ein Leerzeichen an, unabhängig davon, wie viele Registerkarten Sie in Ihrem Code verwenden. Dies bedeutet, dass etwas Bandbreite verschwendet wird. Mit ein paar einfachen PHP-Dateien können wir jedoch diese Bandbreite beseitigen.

Vorbereitung

Wieder benötigen wir einige Rohdaten, um damit arbeiten zu können. Kopieren Sie daher den folgenden HTML- und CSS-Code. Speichern Sie die folgenden Dateien in einer HTM- und einer CSS-Datei in einem Ordner im Webroot-Verzeichnis Ihres Servers.

Das PHP

Einer der Vorteile dieser Methode ist, dass dasselbe Skript sowohl mit HTML als auch mit CSS arbeitet. Unser Skript muss einen Dateinamen als Teil der Anfrage akzeptieren. Nachdem die Datei geladen wurde, muss sie alle Leerzeichen auf nur ein Leerzeichen reduzieren. Das liegt daran, dass wir nicht alle Leerzeichen zwischen Wörtern entfernen möchten!

Wieder gibt es hier eine Menge PHP, aber ich werde es sorgfältig mit Ihnen durchgehen.

Einen genaueren Blick haben

Dies ist nicht so knifflig, aber wir werden es trotzdem auflösen und sicherstellen, dass wir verstehen, was los ist.

Wir erhalten den Dateinamen über einen Parameter, der mit der GET-Anforderung übergeben wurde, und überprüfen, ob es sich um einen zulässigen Dateityp handelt. Dann holen wir die Daten ab und verarbeiten sie, um überschüssigen Leerraum zu entfernen. Diese Methode ist relativ primitiv und entfernt nicht alle unnötigen Leerzeichen, aber sie wird den Großteil davon in nur wenigen Zeilen Code behandeln!

Dieser Ausschnitt legt nur einige Variablen fest. Wir übermitteln unsere Daten erneut durch 'q', da es kurz und knapp ist. Dies gibt uns auch die Möglichkeit, unser Verzeichnis für Dateien zu definieren und die Dateierweiterung zu extrahieren. Die Funktion explode () ruft den Dateinamen auf, wenn ein '.' und setzt die Bits in ein Array.

Hier überprüfen wir, ob die Datei entweder CSS oder HTML ist. Wenn es etwas anderes wäre, könnten wir Hackern ein Loch in unsere Site geben, wie das Einstellen von Settings.php! Nachdem wir den Hackern die Chance gegeben haben, können wir mit der Verarbeitung unserer Daten fortfahren!

Nun zur Hauptattraktion; Alles, was wir hier wirklich tun, ist, die Datei zu öffnen und zu lesen - wie im ersten Skript - und dann so viel Whitespace wie möglich herauszureißen. Dies wird durch einen relativ einfachen regulären Ausdruck erreicht, der die Datei nach Leerzeichen, Tabulatoren oder Zeilenumbrüchen durchsucht und diese dann durch ein Leerzeichen ersetzt.

Zuletzt senden wir die Daten zurück und setzen die erforderlichen Header, wenn wir uns mit CSS beschäftigen.

Aber geht das?

Wenn Sie in Ihren Browser gehen und zu "index.php? Q = css.css" navigieren, sollten wir eine Zeile CSS auf der gesamten Seite sehen. Das zeigt, dass alles in Ordnung ist! Wir können den gleichen Effekt auch im Quellcode für das HTML-Beispiel sehen. In diesem kleinen Beispiel haben wir eine 314-stellige CSS-Datei auf 277 Zeichen und eine 528-Zeichen-HTML-Datei auf 448 Zeichen reduziert. Nicht schlecht für 15 Zeilen Code.

Fazit

Das ist ein gutes Beispiel dafür, wie wir mit sehr wenig Arbeit viel erreichen können. Wenn Sie sich die Quelle von Seiten wie Google ansehen, werden Sie feststellen, dass sie fast keine Leerzeichen enthalten, da bei Millionen von Anfragen tatsächlich ein paar zusätzliche Kilobyte pro Anfrage addiert werden. Leider sind die meisten von uns nicht so glücklich!

3. Caching in Ihren PHP-Skripten

In diesem Teil zeige ich Ihnen, wie Sie das Zwischenspeichern in Ihren Skripten anhand des obigen Skripts als Beispiel "nachrüsten". Das Ziel besteht darin, die Dinge zu beschleunigen, indem die Daten nicht jedes Mal neu erstellt werden müssen, wenn jemand eine Datei anfordert. Die Erstellung des Inhalts jeder Anfrage ist nur eine Verschwendung, insbesondere bei statischen Daten wie unserem CSS.

Um das Caching hinzuzufügen, müssen wir unserem Skript drei Dinge hinzufügen. Zuerst müssen wir die Dateneingaben für das Skript sammeln und einen Dateinamen generieren, der für diese Menge von Eingaben eindeutig ist. Zweitens müssen wir nach einer Cache-Datei suchen und prüfen, ob sie ausreichend aktuell ist. Schließlich müssen wir entweder die zwischengespeicherte Kopie verwenden oder neue Inhalte generieren und für das nächste Mal zwischenspeichern.

Den Fluss unterbrechen

Dieser Teil des Prozesses hängt wirklich von dem einzelnen Skript ab. Ich werde jedoch zeigen, wo ich den Fluss dieses Skripts für das Caching unterbrechen werde.

In die Tat umsetzen

Wir werden jetzt den Code für das Caching in dieses Skript schreiben. Ich werde das fertige Skript zuerst zeigen und dann jedes Stück durchgehen.

Die Erklärung

Dies ist ein bisschen kniffliger und ein bisschen wahrscheinlicher, dass Sie Ihren Kopf kratzen. Aber keine Sorge, nicht viel hat sich geändert und wir werden jeden Abschnitt durchgehen. Eine zusätzliche Funktion, die wir enthalten haben, ist die Aktualisierung des Cache alle 24 Stunden. Dies ist praktisch, wenn Sie also etwas ändern, können Sie entweder 24 Stunden warten oder einfach das Cache-Verzeichnis leeren. Wenn Sie ein anderes Aktualisierungsintervall wünschen, berechnen Sie es einfach in Sekunden.

Dieses Bit Code erhält nur den Namen und die Erweiterung der Datei, klebt sie zusammen und fügt das Cache-Verzeichnis und die entsprechende Erweiterung '.tmp' hinzu.

Hier überprüfen wir, ob eine Cache-Datei gespeichert ist und ob die Cache-Datei innerhalb von 24 Stunden erstellt wurde. Wenn beide Bedingungen erfüllt sind, öffnen wir die Datei und extrahieren deren Inhalt, um die Ausgabe der Skripts zu ersetzen. Wir haben auch $ isCached auf true gesetzt, damit wir am Ende einige Meldungen ausgeben können.

Jetzt zwischenspeichern wir die Ausgabe des Skripts für spätere Anforderungen. Wir öffnen einfach eine Datei im Schreibmodus, legen sie unsere Daten ab und schließen sie dann. Streng genommen müssen Sie keine Dateien in PHP schließen, aber es ist eine gute Praxis, also habe ich es hier gemacht.

Dies ist ein weiterer Teil des Skripts, das ein wenig geändert wurde, damit wir über den Browser etwas Feedback geben können. Wenn die Datei aus dem Cache abgerufen wurde, können Sie der Skriptausgabe eine Nachricht hinzufügen. Beachten Sie, dass die Nachricht für CSS-Skripts am Ende '\ n' ist. Dies liegt daran, dass die Zeichen '//' unsere gesamte Zeile kommentieren und '\ n' alles andere auf eine andere Zeile drücken. Wenn Sie die Nachrichten deaktivieren möchten, müssen Sie nur die Zeile '$ isCached = TRUE;' auskommentieren.

Ich gebe einen Wirbel

Wenn wir unser Skript erneut verwenden, werden wir keine Änderung feststellen, bis wir ein zweites Mal aktualisieren, wenn eine Meldung angezeigt wird, dass die Datei aus dem Cache abgerufen wurde. Süßer Erfolg! Dieses Caching-Setup kann mit wenigen Änderungen auch auf das erste Skript angewendet werden. Dies ist jedoch für den Leser eine Übung.

Abschließend

In der Lage zu sein, schnell ein einfaches, aber effektives Caching zu jedem Skript hinzuzufügen, an dem Sie gerade arbeiten, ist eine äußerst nützliche Fähigkeit. Es fügt dem Skript nur dieses zusätzliche Bit hinzu, wodurch die Belastung Ihres Servers verringert und die Site für Benutzer beschleunigt wird. Das ist Win-Win!

Zusammenfassend

In diesem Tutorial habe ich Ihnen einige praktische, aber einfache Möglichkeiten gezeigt, wie Sie Ihre Site mit einem Schuss PHP beschleunigen können. Ich hoffe wirklich, dass Sie sie nützlich finden und in Zukunft auf ein Projekt anwenden können. Wie verbessern Sie die Leistung Ihrer Website?

  • Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.