Angeben von Bildabmessungen zur Verbesserung der Browserleistung

10

Ich habe kürzlich mit den Google Developer Tools ein Audit auf meiner Website durchgeführt. Meine Bilder haben alle die gleiche Größe (500 horizontale und 300 vertikale Pixel), daher dachte ich, es wäre besser, wenn ich die Bildgrößenattribute weglasse, da keine Bildgröße berechnet werden muss, wenn sie bereits die richtige Größe hat.

Geben Sie unter Netzwerkauslastung Bildabmessungen an. Ich sehe Folgendes

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Jetzt bin ich verwirrt. Sollte ich meinen Bildern wirklich Attribute für Breite und Höhe hinzufügen, obwohl sie bereits die richtige Größe haben? Es scheint überflüssig.

FastElephant
quelle

Antworten:

10

Browser laden Daten parallel herunter und versuchen, die Seite so schnell wie möglich zu rendern.

Wenn Sie die Größe nicht angeben, hat der Browser keine Ahnung, wie groß das Bild sein wird, bis der Bilddownload vollständig abgeschlossen ist.

Diese Verzögerung zwingt den Browser, das Layout neu zu zeichnen oder neu zu fließen, wodurch die Ladezeit der Seite verzögert wird.

Je mehr Bilder mit diesem Problem angezeigt werden, desto langsamer wird die Seite geladen.

Wenn Sie die Bildgrößen entweder in HTML oder CSS angeben, kann der Browser Neulackierungen und Rückflüsse von Inhalten vermeiden.

Aus diesem Grund sollten Sie immer Bildgrößen angeben. Google hat einige Tipps dazu.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Weitere Informationen zum Rendern des Browsers finden Sie unter: http://taligarsiel.com/Projects/howbrowserswork1.htm

Sie sind sich nicht sicher, wie aktuell dies ist, geben aber Einblicke in die Funktionsweise von Browsern und warum Sie beispielsweise Inline-CSS nicht zum Überschreiben von Stylesheets verwenden möchten.

jeffatrackaid
quelle
Komisch, dass sie sagen, es in das CSS aufzunehmen. Ich nehme an, sie starten das Rendern nicht, bevor das CSS geladen wird, was sinnvoll wäre, da die Seite ohne das CSS im Allgemeinen völlig anders aussieht ...
Alexis Wilke
1
Tatsächlich verarbeiten die meisten aktuellen Browser das Rendern von Informationen aus HTML / CSS parallel. Diese werden dann in die Rendering-Engine eingespeist, um mit dem Malen zu beginnen. Wenn Sie Bilder und andere Layouts richtig angeben, kann das Seitenlayout bereit sein, während andere nicht blockierende Assets heruntergeladen werden.
Jeffatrackaid
1
Wenn ich in diesem Fall für die Bildgröße möchte, dass meine Seite aufgrund unterschiedlicher Bildschirmabmessungen reagiert, ist es besser, Prozent anstelle von Pixeln anzugeben? Ein Bild würde auf einem Laptop ganz anders aussehen als auf einem Telefon.
FastElephant
1
Ich möchte den Leuten sagen, dass sie immer etwas tun sollen, in der Hoffnung, dass sie es mindestens 80% der Zeit tun. :)
Jeffatrackaid
1
Ist diese Antwort noch gültig? Google scheint die Empfehlung von seiner PageSpeed-Website entfernt zu haben.
David Eyk
5

Responsive Design verwendet normalerweise keine Breiten- oder Höhenattribute

Google Development Tools ist ein Leitfaden, und Sie sollten nicht alles erzwingen müssen, was Sie auf ihrer Website lesen. Tatsächlich sind einige der Inhalte veraltet. Die meisten reaktionsschnellen Websites verwenden diese nicht widthoder heightweil sie möchten, dass sich die Bilder an die Bildschirmgröße anpassen und eine feste Breite und Höhe verwenden, <img>was die Nutzererfahrung beeinträchtigen würde, und Google hat dies zu einem der wichtigsten Faktoren erklärt.

CSS-Problemumgehung

Sie können sich für ein Element auf Blockebene entscheiden, das die Breite und Höhe hat. Ich persönlich würde keines verwenden, aber hier ist, was Google über die Blockebene sagt.

Stellen Sie sicher, dass Sie Bemaßungen für das Bildelement oder das übergeordnete Element auf Blockebene angeben. Stellen Sie sicher, dass Sie die Bemaßungen für das Element selbst oder ein übergeordnetes Element auf Blockebene festlegen. Wenn das übergeordnete Element nicht auf Blockebene ist, werden die Dimensionen ignoriert. Legen Sie keine Dimensionen für einen Vorfahren fest, der kein unmittelbarer Elternteil ist.

Ich stelle mir vor, das würde ungefähr so ​​aussehen:

Statisches Design .ic {width:500px;height:500px;}

Sich anpassendes Design:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Dann müssten Sie JavaScript oder eine andere Lösung verwenden, um den Blickwinkel zu erkennen und 4 verschiedene Versionen des Bildes bereitzustellen, was wiederum weniger als praktisch ist. Wenn Sie also responsives Design verwenden, würde ich sicher weitermachen und mir nicht die Mühe machen, Breite und Höhe hinzuzufügen, damit Ihre Website flüssig ist, egal auf welchem ​​Bildschirm sie angezeigt wird.

Simon Hayter
quelle
Ich bin mir nicht sicher, ob Sie keine Informationen zu Breite / Höhe verwenden, sondern ob die Informationen relativ zum Ansichtsfenster sind.
Jeffatrackaid
Sie werden im Allgemeinen max-width:100%;im CSS verwendet, wenn Sie Responsive Design verwenden. Die Verwendung von Höhe und Breite würde die Skalierung und Verkleinerung der Flüssigkeit deaktivieren
Simon Hayter
Haben Sie Informationen darüber, wie dies das Malen oder den Rückfluss von Inhalten beeinflusst? Ich würde intern annehmen, dass der Browser diesen relativen Betrag möglicherweise nur in eine feste Größe übersetzt, damit Sie ihn nicht neu streichen müssen.
Jeffatrackaid
2

Ich habe gerade eine ähnliche Frage zu Wordpress Stack Exchange beantwortet . Reposting hier (Admins / Moderatoren: Wenn dies nicht erlaubt ist, lassen Sie mich wissen, wie ich helfen kann).

bedeutet nicht wirklich, dass Sie Breite und Höhe im HTML angeben müssen. Dies bedeutet, dass Sie den richtigen Speicherplatz reservieren müssen und der Browser beim Laden des Bildes nicht neu fließen und die Seite neu streichen muss.

Wenn Sie die Dimensionen fest codieren, wird außerdem das Reaktionsverhalten beeinträchtigt. Wenn Ihr Layout nicht reagiert, ist dies in Ordnung. Wenn Sie jedoch eine gewisse Reaktionsfähigkeit beibehalten möchten, können Sie nur CSS verwenden, um die Ergebnisse zu erzielen.

Meistens verwenden Sie beide Breiten und max-width:100erledigen die Arbeit, aber dieser Beitrag aus dem Smashing Magazine hat eine interessante Technik: Anstatt die maximale Breite: 100% zu verwenden, können Sie The Padding-Bottom Hack verwenden :

"Mit dieser Technik definieren wir die Höhe als Maß für die Breite. Polsterung und Rand haben solche intrinsischen Eigenschaften, und wir können sie verwenden, um Seitenverhältnisse für Elemente zu erstellen, die keinen Inhalt enthalten. Weil Polsterung diese Fähigkeit besitzt können wir padding-bottom relativ zur Breite eines Elements festlegen. Wenn wir auch height auf 0 setzen, erhalten wir, was wir wollen. [...]

Der nächste Schritt besteht darin, ein Bild in den Behälter zu legen und sicherzustellen, dass es den Behälter füllt. Dazu müssen wir das Bild absolut im Container positionieren, wie folgt: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
Celso Bessa
quelle
1

Der Prozess läuft ungefähr so ​​ab:

  1. HTML-Datei lesen
  2. Lesen Sie aus dem HTML-Dateikopf .css-, .js-Dateien (.js sollte NACH .css sein ...)
  3. Lesen Sie IMG und Skript von der Seite

Somit werden Bild-Tags "spät" gelesen. Um die Formatierung Ihrer Seite zu berechnen, ist es jedoch eine gute Sache, die Größe des Bildes zu haben (andernfalls verwenden Browser eine "zufällige" Größe wie 1x1, 25x25, ... unabhängig davon, was der Browser programmiert hat.)

Um zu vermeiden, dass eine Seite beschädigt aussieht, bis die Bilder gelesen werden, kann der Browser durch Eingabe der Attribute width und height sofort das richtige Seitenlayout berechnen. Deshalb ist es eine gute Idee, sie dort zu haben, auch wenn sie die gleiche Größe haben.

Alexis Wilke
quelle