Leistungssteigerung durch Hinzufügen von Breite und Höhe Attribute zu Bild-Tags in HTML

Question

Ich pflege ein Django-Forum, wo Benutzer Nachrichten und Fotos für einander (oder die gesamte Öffentlichkeit im Allgemeinen) lassen können. Stellen Sie sich das wie ein Gegenstück zu 9gag vor.

Ich bewertete die Leistung meiner Website über GTmetrix. Eine der Dinge, die ich niedrig bewertete, ist die Spezifität der Bilddimensionen. Genauer gesagt, rät es mir, Bildbreite und -höhe in allen <img> Tags hinzuzufügen, damit Browser die Seite leichter rendern können, wodurch das Neulackieren minimiert wird.

Alle hochgeladenen Bilder werden dynamisch neu sortiert und in der Datenbank gespeichert, wobei das Seitenverhältnis beibehalten wird. Die einzige Möglichkeit für mich, ihre Höhen und Breiten in ihre Tags auf der Vorlage einzufügen, ist, wenn ich ihre Breite oder Höhe auch in der DB gespeichert habe. ODER, wenn ich ihre Breite und Höhe lese, wenn sie ihnen zur Ansicht dienen.

So oder so, es wird einige Rechenleistung auf meiner Seite brauchen. Es scheint, als ob der Kompromiss zwischen der Rechenzeit des Servers und den Browsern der Benutzer besteht. I.e. Server-Ende oder Client-Ende. Ich möchte die Erfahrung für meine Benutzer optimieren, und meine Server-Ressourcen sind anständig.

Ein neues Bild wird alle paar Sekunden auf den öffentlichen Bereich meiner Website hochgeladen. Sie können sagen, es ist so ziemlich ein Grundnahrungsmittel der Website. Hat jemand Erfahrung mit einem großen Leistungsschub, wenn er die Bildbreite und -höhe in seine Vorlage einbezieht? Ich würde gerne ein paar Ratschläge dazu hören, also kann ich weitermachen (oder die Idee einfach wegwerfen).

Vielen Dank im Voraus.

Answer 1

Wenn Sie das genaue Layout Ihrer Site kennen, können Sie die Größe des Bildes beim User-Upload ändern und Ihre Abmessungen mit CSS angeben.

Wenn Ihre Website reaktionsschnell ist und die Bilder entsprechend der Geräteabmessungen skaliert werden, dann würde ich mich mit diesem Optimierungsvorschlag nicht zu sehr sorgen. Twitter bewertet ein F (0) dafür auf GTmetrix, und hat eine D- bzw. B-Klasse, aber hat immer noch eine schnellere Ladezeit als die meisten Standorte.

Ein nachträglicher Einfall, wie Hassan vorgeschlagen:

Mein Vorschlag ist, dass Sie auf die Interna von Django konzentrieren (zB Caching-Vorlagen, mit memcache etc..) Und dann die Lieferung von statischen Inhalten (zB optimieren. Komprimierung in Nginx, sagen wir) und konfigurieren Sie die Caching-Richtlinien Ihres Webservers. Hier bemerken Sie einen großen Leistungszuwachs. Wenn Sie eine Menge Seitenaufrufe haben, sollten Sie eventuell die Bereitstellung von Varnish oder Squid vor Ihrem Webserver in Erwägung ziehen.