Frage Teil A ▉ (100 Kopfgelder, vergeben) Die
Hauptfrage war, wie diese Site schneller geladen werden kann. Zuerst mussten wir diese Wasserfälle lesen. Vielen Dank für Ihre Vorschläge zur Analyse der Wasserfallanzeige. Aus den verschiedenen hier gezeigten Wasserfalldiagrammen geht der Hauptengpass hervor: die von PHP generierten Miniaturansichten. Das von David empfohlene protokolllose Laden von Abfragen von CDN hat mein Kopfgeld erhalten, obwohl meine Website insgesamt nur 3% schneller ist und der Hauptengpass der Website nicht beantwortet wird. Zeit für die Klärung meiner Frage und eine weitere Prämie:
Frage Teil B ▉ (100 Kopfgelder, vergeben)
Der neue Fokus lag nun auf der Lösung des Problems, das die 6-JPG-Bilder hatten und die den größten Teil der Ladeverzögerung verursachen. Diese 6 Bilder sind PHP-Thumbnails, winzig klein und nur 3 ~ 5 kb, aber das Laden relativ sehr langsam. Beachten Sie die " Zeit bis zum ersten Byte " in den verschiedenen Diagrammen. Das Problem blieb ungelöst, aber ein Kopfgeld ging an James, der den von RedBot unterstrichenen Header-Fehler behebte : "Eine bedingte If-Modified-Since-Anforderung gab den vollständigen Inhalt unverändert zurück." .
Frage Teil C ▉ (mein letztes Kopfgeld: 250 Punkte)
Leider blieb die durch die PHP-generierten Bilder verursachte Verzögerung unberührt, nachdem selbst der Header-Fehler von REdbot.org behoben wurde. Was um alles in der Welt denken diese winzigen, mickrigen 3 ~ 5 KB Miniaturansichten? All diese Header-Informationen können eine Rakete zum Mond und zurück schicken. Vorschläge zu diesem Engpass werden sehr geschätzt und als mögliche Antwort behandelt, da ich bereits seit sieben Monaten an diesem Engpassproblem festhalte. Mein Dank im Voraus.
[Einige Hintergrundinformationen auf meiner Website: CSS ist oben. JS unten (Jquery, JQuery UI, gekauftes Menü awm / menu.js Engines, Tabs js Engine, Video swfobject.js) Die schwarzen Linien im zweiten Bild zeigen, was das Laden initiiert. Der wütende Roboter ist mein Haustier "ZAM". Er ist harmlos und oft glücklicher.]
Wasserfall laden: Chronologisch | http://webpagetest.org
Parallele Domänen gruppiert | http://webpagetest.org
Site-Perf Wasserfall | http://site-perf.com
Pingdom Tools Wasserfall | http://tools.pingdom.com
GTmetrix Wasserfall | http://gtmetrix.com
SHOULD
) HTTP 1.1-Clients auffordert, höchstens 2 Verbindungen zu HTTP 1.1-Servern zu verwenden. HTTP 1.0 ist natürlich viel offener.Antworten:
Erstens erfordert die Verwendung dieser mehreren Domänen mehrere DNS-Suchvorgänge. Sie sollten viele dieser Bilder besser zu einem Sprite kombinieren , als die Anforderungen zu verbreiten.
Zweitens sehe ich beim Laden Ihrer Seite den größten Teil der Blockierung (~ 1,25 s) auf all.js. Ich sehe, das beginnt mit (einer alten Version von) jQuery. Sie sollten dies aus dem Google CDN heraus referenzieren, um nicht nur die Ladezeit zu verkürzen , sondern möglicherweise eine HTTP-Anforderung vollständig zu vermeiden .
Unter diesen URLs kann auf die aktuellsten jQuery- und jQuery-UI-Bibliotheken verwiesen werden (siehe diesen Beitrag, wenn Sie interessiert sind, warum ich das weggelassen habe
http:
):Wenn Sie eines der Standardthemen der jQuery-Benutzeroberfläche verwenden, können Sie auch dessen CSS und Bilder vom Google CDN abrufen .
Mit dem jQuery optimiert Hosting, sollten Sie auch kombinieren
awmlib2.js
undtooltiplib.js
eine einzige Datei in.Wenn Sie diese Dinge ansprechen, sollten Sie eine signifikante Verbesserung sehen.
quelle
Ich hatte vor ein paar Tagen ein ähnliches Problem und fand es head.js . Es ist ein Javascript-Plugin, mit dem Sie alle JS-Dateien parallel laden können. Hoffentlich hilft das.
quelle
Ich bin weit entfernt von einem Experten, aber ...
In Bezug auf dieses: "Eine bedingte If-Modified-Since-Anforderung hat den vollständigen Inhalt unverändert zurückgegeben." und meine Kommentare.
Der zum Generieren der Miniaturansichten verwendete Code sollte Folgendes überprüfen:
Wenn eine dieser Angaben falsch ist, sollte die Miniaturansicht generiert und zurückgegeben werden, egal was passiert. Wenn beide wahr sind, sollte die folgende Prüfung durchgeführt werden:
Wenn eine dieser Angaben falsch ist, sollte die zwischengespeicherte Miniaturansicht zurückgegeben werden.
Wenn beide zutreffen, sollte ein 304-http-Status zurückgegeben werden. Ich bin nicht sicher, ob es erforderlich ist, aber ich gebe auch persönlich die Header Cache-Control, Expires und Last-Modified zusammen mit dem 304 zurück.
In Bezug auf GZipping wurde mir mitgeteilt, dass keine GZip-Bilder erforderlich sind. Ignorieren Sie daher diesen Teil meines Kommentars.
Bearbeiten: Ich habe Ihre Hinzufügung zu Ihrem Beitrag nicht bemerkt.
Ich bin mir auch sicher, dass Ihr Code nach dem HTTP_IF_MODIFIED_SINCE-Header suchen und darauf reagieren muss. Nur das Setzen dieser Header und Ihrer .htaccess-Datei liefert nicht das erforderliche Ergebnis.
Ich denke du brauchst so etwas:
quelle
If Modified Since
Problem scheint jetzt zu funktionieren! Die langen Überschriften / Wartezeiten für die winzigen Daumen sind jedoch noch nicht gelöst ...Wow, es ist schwer, Dinge mit diesem Bild zu erklären. Aber hier einige Versuche:
quelle
Nur eine einfache Vermutung, da diese Art der Analyse viele A / B-Tests erfordert: Ihre .ch-Domain scheint schwer zu erreichen zu sein (lange, grüne Bänder, bevor das erste Byte eintrifft).
Dies würde bedeuten, dass entweder die .ch-Website schlecht gehostet wird oder dass Ihr ISP keinen guten Weg zu ihnen hat.
Angesichts der Diagramme könnte dies einen großen Leistungseinbruch erklären.
Nebenbei bemerkt, es gibt dieses coole Tool Cuzillion , mit dem Sie die Dinge in Abhängigkeit von Ihrer Reihenfolge beim Laden der Ressourcen sortieren können.
quelle
Führen Sie Y! Slow- und Page Speed-Tests auf Ihrer Site / Seite durch und befolgen Sie die Richtlinien, um mögliche Leistungsengpässe zu beheben. Sie sollten enorme Leistungssteigerungen erzielen, wenn Sie in Y! Slow oder Page Speed eine höhere Punktzahl erzielen.
Diese Tests zeigen Ihnen, was falsch ist und was Sie ändern müssen.
quelle
Ihr PHP-Skript generiert also die Miniaturansichten bei jedem Laden der Seite? Wenn sich die Bilder, die als Miniaturbilder angezeigt werden, nicht so oft ändern, können Sie dann zunächst einen Cache einrichten, damit sie nicht jedes Mal analysiert werden müssen, wenn die Seite geladen wird. Zweitens verwendet Ihr PHP-Skript so etwas wie
imagecopyresampled()
das Erstellen der Miniaturansichten? Das ist ein nicht triviales Downsample und das PHP-Skript gibt nichts zurück, bis es fertig ist. Wenn Sieimagecopymerged()
stattdessen verwenden, wird die Bildqualität verringert, der Vorgang wird jedoch beschleunigt. Und wie viel reduzieren Sie? Sind diese Miniaturansichten 5% so groß wie das Originalbild oder 50%? Eine größere Größe des Originalbilds führt wahrscheinlich zu einer Verlangsamung, da das PHP-Skript das Originalbild im Speicher ablegen muss, bevor es verkleinert und eine kleinere Miniaturansicht ausgegeben werden kann.quelle
readfile()
und nichtfile_get_contents()
von einem Echo gefolgt wird, das auf die Ausgabe wartet, bis die gesamte Datei in den Speicher des PHP-Skripts verschoben wurde.Ich habe die URL Ihrer Website gefunden und eine einzelne JPG-Datei von der Homepage überprüft. Während die Ladezeit jetzt angemessen ist (161 ms), wartet sie auf 126 ms, was viel zu viel ist.
Deine zuletzt geänderten Header sind alle auf Sa, 01. Januar 2011, 12:00:00 GMT eingestellt, was zu "rund" aussieht, um das eigentliche Generierungsdatum zu sein ;-)
Da die Cache-Steuerung "public, max-age = 14515200" ist, können beliebige zuletzt geänderte Header nach 168 Tagen Probleme verursachen.
Dies ist jedoch nicht der wahre Grund für Verzögerungen.
Sie müssen überprüfen, was Ihr Miniaturbildgenerator tut, wenn das Miniaturbild bereits vorhanden ist, und was so viel Zeit in Anspruch nehmen kann, um das Bild zu überprüfen und zu liefern.
Sie könnten xdebug installieren um das Skript zu profilieren und , wo die Engpässe liegen.
Vielleicht verwendet das Ganze ein Framework oder stellt für nichts eine Verbindung zu einer Datenbank her. Ich habe auf einigen Servern sehr langsames mysql_connect () gesehen, hauptsächlich, weil sie eine Verbindung über TCP und nicht über Socket herstellten, manchmal mit einigen DNS-Problemen.
Ich verstehe, dass Sie Ihren bezahlten Generator hier nicht posten können, aber ich fürchte, es gibt zu viele mögliche Probleme ...
quelle
Wenn es keinen wirklich guten Grund gibt (normalerweise nicht), sollten Ihre Bilder den PHP-Interpreter nicht aufrufen.
Erstellen Sie eine Umschreiberegel für Ihren Webserver, die das Image direkt verwaltet, wenn es im Dateisystem gefunden wird. Wenn dies nicht der Fall ist, leiten Sie zu Ihrem PHP-Skript um, um das Bild zu generieren. Wenn Sie das Bild bearbeiten, ändern Sie den Dateinamen des Bilds, um Benutzer mit einer zwischengespeicherten Version zu zwingen, das neu bearbeitete Bild abzurufen.
Wenn es zumindest nicht funktioniert, hat es jetzt nichts mit der Art und Weise zu tun, wie die Bilder erstellt und überprüft werden.
quelle
Untersuchen Sie die Verwendung von Sitzungsdaten durch PHP. Vielleicht (nur vielleicht) wartet das bildgenerierende PHP-Skript darauf, eine Sperre für die Sitzungsdaten zu erhalten, die durch die noch gerenderte Hauptseite oder andere bildgebende Skripte gesperrt wird. Dies würde alle JavaScript / Browser-Optimierungen fast irrelevant machen, da der Browser auf den Server wartet.
PHP sperrt die Sitzungsdaten für jedes Skript, das ausgeführt wird, vom Beginn der Sitzungsbehandlung bis zum Ende des Skripts oder beim Aufruf von session_write_close (). Dies serialisiert effektiv Dinge. Schauen Sie sich die PHP-Seite zu Sitzungen an, insbesondere die Kommentare wie diese .
quelle
Dies ist nur eine wilde Vermutung, da ich Ihren Code nicht angesehen habe, aber ich vermute, dass Sitzungen hier eine Rolle spielen könnten. Folgendes stammt aus dem Eintrag im PHP-Handbuch
session_write_close()
:Wie gesagt, ich weiß nicht, was Ihr Code tut, aber diese Grafiken scheinen seltsamerweise verdächtig. Ich hatte ein ähnliches Problem, als ich eine mehrteilige Datei-Serving-Funktion codierte, und ich hatte das gleiche Problem. Beim Bereitstellen einer großen Datei konnte ich weder die mehrteilige Funktionalität zum Laufen bringen noch eine andere Seite öffnen, bis der Download abgeschlossen war. Das Anrufen hat
session_write_close()
meine beiden Probleme behoben .quelle
exit();
Funktion in ähnlichen Zeilen wie diesession_write_close();
? Derzeit untersucht der ursprüngliche Verfasser des Codes das Problem, aber es scheint, dass er auch ein bisschen im Dunkeln liegt, da die großzügige Aktualisierung des Codes mit besserer If-Modified-Since-Behandlung die gleichen Verzögerungen zu haben scheint (neuer Wasserfall) Diagramme erzeugten dieselben Diagramme, obwohl echte Worls-Ergebnisse schneller geladen / gefühlt wurden! Es ist ein sehr seltsames Problem ...Haben Sie versucht, die von PHP generierten Thumnails durch reguläre Bilder zu ersetzen, um festzustellen, ob es einen Unterschied gibt? Das Problem könnte auftreten - ein Fehler in Ihrem PHP-Code, der bei jedem Serveraufruf zu einer Neuerstellung des Miniaturbilds führt - eine Verzögerung in Ihrem Code (sleep ()?), Die mit einem Uhrproblem verbunden ist - ein Festplattenproblem, das einen sehr schlechten Rennzustand verursacht da alle Thumbnails gleichzeitig geladen / generiert werden.
quelle
Ich denke, anstatt dieses Thumbnail-Generator-Skript zu verwenden , müssen Sie TinySRC geben für eine schnelle, schnelle und in der Cloud gehostete Thumbnail-Generierung ausprobieren. Es hat eine sehr einfache und benutzerfreundliche API, die Sie wie folgt verwenden können: -
http://i.tinysrc.mobi/ [Höhe] / [Breite] /http://domain.tld/path_to_img.jpg
[width] (optional): - Dies ist eine Breite in Pixel (die die adaptive oder Familiengröße überschreibt). Wenn '-' oder 'x' vorangestellt wird, wird die ermittelte Größe von der festgelegten Größe abgezogen oder auf einen bestimmten Prozentsatz verkleinert.
[Höhe] (optional): - Dies ist eine Höhe in Pixel, wenn auch Breite vorhanden ist. Es überschreibt auch die adaptive Größe oder die Familiengröße und kann mit '-' oder 'x' versehen werden.
Sie können die API-Zusammenfassung hier überprüfen
FAQ
Was kostet mich tinySrc?
Nichts.
Wann kann ich mit tinySrc beginnen?
Jetzt.
Wie zuverlässig ist der Service?
Wir übernehmen keine Garantie für den tinySrc-Service. Es läuft jedoch auf einer großen, verteilten Cloud-Infrastruktur und bietet daher weltweit eine hohe Verfügbarkeit. Es sollte für alle Ihre Bedürfnisse ausreichen.
Wie schnell ist es
tinySrc speichert die Größe von Bildern bis zu 24 Stunden im Speicher und in unserem Datenspeicher zwischen , und es wird nicht jedes Mal Ihr Originalbild abgerufen . Dies macht die Dienste aus Anwendersicht blitzschnell . (Und reduziert Ihre Serverlast als netten Nebeneffekt.)
Viel Glück. Nur ein Vorschlag, da Sie uns den Code nicht zeigen: p
quelle
Da einige Browser nur 2 Parallel-Downloads pro Domain herunterladen, können Sie keine zusätzlichen Domains hinzufügen, um die Anforderungen über zwei bis drei verschiedene Hostnamen zu verteilen. zB 1.imagecdn.com 2.imagecdn.com
quelle
Zuallererst müssen Sie
If-Modified-Since
Anfragen und dergleichen angemessen behandeln, wie James sagte. Dieser Fehler besagt: "Wenn ich Ihren Server frage, ob dieses Image seit dem letzten Mal geändert wurde, sendet es das gesamte Image anstelle eines einfachen Ja / Nein."Die Zeit zwischen der Verbindung und dem ersten Byte ist im Allgemeinen die Zeit, die Ihr PHP-Skript zum Ausführen benötigt. Es ist offensichtlich, dass etwas passiert, wenn dieses Skript ausgeführt wird.
Das Generieren geeigneter Header über die Anwendung ist etwas schwierig und kann vom Server überschrieben werden. Und Sie sind Missbrauch ausgesetzt, da jeder, der Header ohne Cache-Anforderungen sendet, dazu führt, dass Ihr Miniaturbildgenerator kontinuierlich ausgeführt wird (und die Lasten erhöht). Versuchen Sie also nach Möglichkeit, diese generierten Daumen zu speichern, rufen Sie die gespeicherten Bilder direkt von Ihren Seiten auf und verwalten Sie die Überschriften von
.htaccess
. In diesem Fall benötigen Sie nicht einmal etwas in.htaccess
Ihrem Server, wenn Ihr Server ordnungsgemäß konfiguriert ist.Abgesehen von diesen können Sie einige der brillanten Optimierungsideen aus den Leistungsteilen dieser insgesamt netten SO-Frage anwenden, wie Sie Websites richtig machen , z. B. Ihre Ressourcen in kochfreie Subdomains aufteilen usw. Aber auf jeden Fall ein 3k-Bild Das Laden sollte keine Sekunde dauern. Dies ist im Vergleich zu anderen Elementen in den Diagrammen offensichtlich. Sie sollten versuchen, das Problem zu erkennen, bevor Sie es optimieren.
quelle
Haben Sie versucht, unter NGINX-Webserver mehrere Subdomains speziell für die Bereitstellung statischer Daten wie Bilder und Stylesheets einzurichten ? In diesem Thema war bereits etwas Hilfreiches zu finden .
quelle
straight from hdd
. Meinst du stattdessenstraight from DDR3 RAM
/straight from Solid State Disk
Ich weiß, dass Festplatten im Gegensatz zu DDR3-RAM oder Solid State Discs eine sehr langsame Zugriffszeit haben. Aber ich denke, das ist nicht der Engpass hier ...Versuchen Sie in Bezug auf die verzögerten Miniaturansichten, einen Aufruf von flush () unmittelbar nach dem letzten Aufruf von header () in Ihrem Skript zur Erstellung von Miniaturansichten zu tätigen. Wenn Sie fertig sind, regenerieren Sie Ihr Wasserfalldiagramm und prüfen Sie, ob die Verzögerung jetzt auf dem Körper statt auf den Kopfzeilen liegt. In diesem Fall müssen Sie sich die Logik ansehen, mit der die Bilddaten generiert und / oder ausgegeben werden.
Das Skript, das die Miniaturansichten verarbeitet, sollte hoffentlich eine Art Caching verwenden, damit alle Aktionen, die für die von Ihnen bereitgestellten Bilder ausgeführt werden, nur ausgeführt werden, wenn dies unbedingt erforderlich ist. Es sieht so aus, als ob jedes Mal, wenn Sie die Miniaturansichten bereitstellen, eine teure Operation stattfindet, die die Ausgabe (einschließlich der Header) des Skripts verzögert .
quelle
flush();
scheint sich nach dem Hinzufügen direkt nach den Überschriften überhaupt nichts zu ändern! Was könnte das bedeuten?<img src="thumbprocessor.php?src=/folder/image.jpg&w=100&h=200" id="thumbnail"/>
Der größte Teil des langsamen Problems ist, dass Ihr TTFB (Time to First Byte) zu hoch ist. Dies ist schwer zu lösen, ohne mit Ihren Serverkonfigurationsdateien, dem Code und der zugrunde liegenden Hardware vertraut zu werden, aber ich kann sehen, dass es bei jeder Anfrage weit verbreitet ist. Sie haben zu viele grüne Balken (schlecht) und sehr kleine blaue Balken (gut). Vielleicht möchten Sie das Frontend für eine Weile nicht mehr optimieren, da ich glaube, dass Sie in diesem Bereich viel getan haben. Trotz des Sprichworts, dass " 80% -90% der Antwortzeit des Endbenutzers für das Frontend aufgewendet wird ", glaube ich, dass Ihre Antwort im Backend stattfindet.
TTFB ist Backend-Zeug, Server-Zeug, Vorverarbeitung vor der Ausgabe und Handshake.
Planen Sie die Ausführung Ihres Codes, um langsame Dinge wie langsame Datenbankabfragen zu finden, und geben Sie Funktionen / Methoden ein, um langsame Funktionen zu finden. Wenn Sie PHP verwenden, versuchen Sie es mit Firephp . Manchmal werden während des Starts oder der Initialisierung ein oder zwei langsame Abfragen ausgeführt, z. B. das Abrufen von Sitzungsinformationen oder das Überprüfen der Authentifizierung und was nicht. Das Optimieren von Abfragen kann zu guten Leistungsgewinnen führen. Manchmal wird Code mit PHP Prepend oder Spl Autoload ausgeführt, damit sie auf allem ausgeführt werden. In anderen Fällen kann es zu einer Fehlkonfiguration von Apache Conf und Optimierungen kommen, die den Tag retten.
Suchen Sie nach ineffizienten Schleifen. Suchen Sie nach langsamen Abrufaufrufen von Caches oder langsamen E / A-Vorgängen, die durch fehlerhafte Laufwerke oder hohe Speicherplatznutzung verursacht werden. Suchen Sie nach Speichernutzung und was verwendet wird und wo. Führen Sie einen wiederholten Webpagetest-Test mit 10 Läufen für ein einzelnes Bild oder eine einzelne Datei durch, wobei Sie nur die erste Ansicht von verschiedenen Orten auf der ganzen Welt und nicht vom gleichen Ort aus verwenden. Lesen Sie Ihre Zugriffs- und Fehlerprotokolle, zu viele Entwickler ignorieren sie und verlassen sich nur auf ausgegebene Bildschirmfehler. Wenn Ihr Webhost Unterstützung hat, bitten Sie ihn um Hilfe. Wenn er ihn ohnehin nicht höflich um Hilfe bittet, tut dies nicht weh.
Sie können DNS Prefetching ausprobieren, um die vielen Domänen und Ressourcen zu bekämpfen. Http://html5boilerplate.com/docs/DNS-Prefetching/
Ist der Server Ihr eigener ein guter / anständiger Server? Manchmal kann ein besserer Server viele Probleme lösen. Ich bin ein Fan der Mentalität " Hardware ist billig, Programmierer sind teuer ", wenn Sie die Chance und das Geld haben, einen Server zu aktualisieren. Und / oder verwenden Sie ein CDN wie maxcdn oder cloudflare oder ähnliches.
Viel Glück!
(ps ich arbeite nicht für eines dieser Unternehmen. Auch der Cloudflare-Link oben wird argumentieren, dass TTFB nicht so wichtig ist, ich habe das da reingeworfen, damit Sie eine andere Einstellung bekommen können.)
quelle
Leider geben Sie nur wenige Daten an. Und Sie hatten bereits einige gute Vorschläge.
Wie bedienen Sie diese Bilder? Wenn Sie diese über PHP streamen, machen Sie eine sehr schlechte Sache, selbst wenn sie bereits generiert wurden.
STREAMEN SIE BILDER NIEMALS MIT PHP. Es wird Ihren Server verlangsamen, egal wie Sie ihn verwenden.
Legen Sie sie in einem zugänglichen Ordner mit einer aussagekräftigen URI ab. Rufen Sie sie dann direkt mit ihrer realen URI an. Wenn Sie eine sofortige Generierung benötigen, sollten Sie eine .htaccess-Datei in das Images-Verzeichnis stellen, die nur dann zu einem Generator-PHP-Skript umleitet, wenn das Anforderungs-Image fehlt. (Dies wird als Cache-on-Request-Strategie bezeichnet.)
Dadurch werden PHP-Sitzung, Browser-Proxy, Caching und ETAGS auf einmal repariert.
WP-Supercache verwendet diese Strategie, wenn sie richtig konfiguriert ist.
Ich habe dies vor einiger Zeit geschrieben ( http://code.google.com/p/cache-on-request/source/detail?r=8 ), die letzten Revisionen sind defekt, aber ich denke, 8 oder weniger sollten funktionieren und Sie können Nehmen Sie das .htaccess als Beispiel, um die Dinge zu testen (obwohl es bessere Möglichkeiten gibt, das .htaccess zu konfigurieren als früher).
Ich habe diese Strategie in diesem Blogbeitrag beschrieben ( http://www.stefanoforenza.com/need-for-cache/ ). Es ist wahrscheinlich schlecht geschrieben, aber es kann helfen, die Dinge zu klären.
Weiterführende Literatur: http://meta.wikimedia.org/wiki/404_handler_caching
quelle