Beheben von Leistungsproblemen an langsamen Standorten

Wenn sich Ihre Site in Zootopia wie eines dieser Faultiere aus dem DMV bewegt, gibt es Möglichkeiten, wie Sie beheben können, was das Tempo verlangsamt. Herauszufinden, was das Problem verursacht, ist die halbe Miete. Sobald Sie die Ursachen isoliert haben, haben Sie zumindest die Antworten zur Lösung des Problems.

Hosting mit niedriger Qualität ist der wahrscheinlichste Schuldige

In Bezug auf Webhosting bedeutet das Konzept der niedrigen Qualität nicht immer dasselbe wie in anderen Zusammenhängen. Zum Beispiel spiegelt der Preis, den Sie für das Hosting zahlen, nicht immer die Qualität wider, die Sie erwarten können. Ebenso wenig ist die Popularität des Dienstes oder wie bekannt der Markenname ist.

In der Tat sind einige der beliebtesten Hosting-Marken die schlechteste Wahl, einfach weil zu viele Menschen sie verwenden. Das hängt etwas von der Qualität ihrer Infrastruktur ab. Wenn sie richtig in ihre Technologie investieren, treten möglicherweise keine wesentlichen Leistungsprobleme auf. Auf der anderen Seite teilen Sie sich möglicherweise einen einzigen Server mit Hunderten von anderen Standorten. Dieses Problem wird mit zunehmender Festplattenspeicherkapazität zunehmen.

In dieser Situation ist es daher möglich, dass ein Wechsel zu einem kleineren, weniger bekannten Webhosting-Service mit guter Technologie die bessere Wahl ist. Dies kann auch bedeuten, dass Sie mehr persönlichen Kundenservice auf einem höheren Qualitätsniveau erhalten, als Sie von einem Giganten erhalten würden. Es lohnt sich, darüber nachzudenken, und es ist einfach zu testen, indem Sie einfach ein einmonatiges Abonnement für den neuen Host kaufen und die Leistung mit Ihrer vorhandenen Site vergleichen.

Verwenden Sie Ihren F12-Schlüssel

Die meisten Webbrowser sind so eingestellt, dass ihre Debug-Konsole über den F12-Schlüssel aufgerufen wird, und Ihre ist wahrscheinlich keine Ausnahme. Apropos Ausnahmen, das ist genau das, wonach Sie suchen, oder genauer gesagt, Fehler in Ihrem JavaScript-Code, die Ausnahmen auslösen und die Leistung beeinträchtigen.

Sie finden diese Fehler sowohl in Ihrem eigenen Code als auch in importierten Codebibliotheken wie jQuery. Nur weil jQuery groß und beliebt ist, heißt das nicht, dass es fehlerlos ist. Hier ist ein Beispiel für das, was Sie suchen:

Bei den blau markierten Fehlern handelt es sich lediglich um CSS-Fehler. Grundsätzlich können Sie davon ausgehen, dass Entwickler beim Erstellen von Stylesheets Shimming anwenden müssen, weil es noch keinen einzigen Standard gibt, der von allen Browsern übernommen wurde. Sie sollten normalerweise keinen Einfluss auf die Leistung haben, es sei denn, Sie verwenden viele Animationen oder Übergangseffekte.

Dieser in Orange markierte Fehler ist jedoch ein JavaScript-Fehler, und nicht nur das. In diesem Fall ist es der Jackpot, da uns ausdrücklich gesagt wird, dass dieser Fehler dazu führt, dass der Code sehr langsam läuft.

Lassen Sie sich von Google kostenlos beraten

Wussten Sie, dass Google Ihre Webseite kostenlos analysieren kann und Ihnen Tipps zur Behebung von Problemen gibt? Alles, was Sie tun müssen, ist die Google Page Speed ​​Insights-Seite aufzurufen und die URL der Seite einzugeben, die Sie analysieren möchten.

Es könnte wirklich nicht einfacher sein, obwohl Sie nicht unbedingt allen ihren Ratschlägen religiös folgen wollen. Das System von Google ist gut darin herauszufinden, was Ihre Seite möglicherweise verlangsamt. Einige Korrekturen lösen jedoch möglicherweise nicht so viele Probleme, wie sie verursachen.

Idealerweise möchten Sie Werte oberhalb von 85 sehen. Obwohl niemand mit Sicherheit weiß, wird davon ausgegangen, dass Seitenladezeiten einen erheblichen Einfluss auf Ihren Seitenrang bei Google haben. Verzweifeln Sie nicht, wenn Ihre Website nicht ganz oben in der grünen Zone liegt, da viele große Websites keine fantastischen Ergebnisse erzielen.

Einige bemerkenswerte Beispiele sind:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

Keines dieser Beispiele ist wirklich eine Entschuldigung dafür, dass Ihre eigene Website schlecht funktioniert. Sie beweisen jedoch, dass eine träge Website nicht unbedingt gleichbedeutend ist mit einem Misserfolg.

Verwenden Sie Bilder richtig

Wenn jemand die richtigen Bildformate kennen würde und wann, sollten es Designer sein, oder? Aber erstaunlicherweise scheint es, dass viele von Ihnen nicht wissen, oder wenn Sie es tun, denken Sie, dass es keine Rolle spielt. Nun, hier sind die Nachrichten: Es ist immer wichtig.

Dieses Problem hat an Bedeutung gewonnen, seit ein bestimmter Vorlagenstil als Standard für defacto für Business-Sites angenommen wurde. Dieser Trend zeigt keine Anzeichen einer Verlangsamung. Als professioneller Designer schulden Sie es sich und Ihren Kunden, nicht in die Falle fauler Designverknüpfungen zu geraten.

Eine dieser unglücklichen Abkürzungen war die Verwendung von großen PNG-Bildern für Heldeneinheiten am oberen Rand einer Seite (oder anderswo, aber dort werden sie normalerweise gefunden). Es versteht sich von selbst, dass Sie dies niemals tun sollten, selbst wenn Sie transparente Bereiche im Bild benötigen.

Hier sind die Grundlagen, die Sie bei der Erstellung dieses Meisterwerks beachten sollten:

  • Verwenden Sie große Bilder wenn überhaupt nur sparsam

Große Bilder sind eine schreckliche Idee, denn je größer das Bild ist, desto länger dauert das Laden. Nun gibt es ein paar verschiedene Techniken, mit denen große Bilder wesentlich effizienter arbeiten können. Bevor wir uns jedoch damit beschäftigen, lassen Sie uns einfach sagen, dass Sie meistens kleinere Bilder verwenden und große für immer speichern müssen wirklich gebraucht

  • Stellen Sie den PPI / DPI-Wert entsprechend ein

Je nachdem, welchen Grafikeditor Sie verwenden, werden möglicherweise Werte für DPI oder PPI angezeigt. Letzteres ist besser, da es anzeigt, dass Ihr Grafikeditor für die Verwendung im Web anstelle des Druckens entwickelt wurde. Das Problem beim Ändern der DPI in einigen Versionen von PhotoShop besteht darin, dass nicht nur die DPI, sondern auch die Abmessungen des Bildes angepasst werden. In der neuesten Version von PhotoShop (die PPI verwendet) ist dies kein Problem. Wenn Sie eine ältere Version verwenden, ist ein Upgrade erforderlich. Oder verwenden Sie stattdessen GIMP.

  • Schneiden Sie große Bilder

Hier beginnt die Magie. Viele Leute sagen Ihnen, dass das Aufteilen Ihrer Bilder die Ladezeiten nicht verbessert, da Sie immer noch die gleiche Anzahl von Bytes herunterladen und jede wahrgenommene Verbesserung rein psychologisch ist. Diese Leute verwenden die faulste Version des Image-Slicings, daher kennen sie die wahren Möglichkeiten nicht.

Nachdem Sie Ihr Bild in Scheiben geschnitten haben, haben Sie die Möglichkeit, es zu optimieren. Unter der Annahme, dass das Originalbild im PNG-Format war, können Sie jetzt alle nicht transparenten Teile in das JPG-Format konvertieren und viele Byte speichern, wobei die Teile, die Transparenz erfordern, als PNG-Bilder verbleiben.

Als Nächstes können Sie mit der Komprimierungsstufe jedes einzelnen Slice spielen, bis das Slice perfekt optimiert ist. Der Gesamteffekt dieser Optimierung kann im Vergleich zum ursprünglichen, nicht optimierten Bild zu Einsparungen von mehr als 50% führen.

Video kann auch optimiert werden

Die Kunst der Videokomprimierung beruht auf zwei Dingen: dem Zielformat und dem Codec, den Sie zum Kodieren verwenden. Welches Format Sie wählen, hängt ganz von Ihren Bedürfnissen ab. Wenn Sie eine hohe Qualität benötigen, liefert MP4 mit H.264-Kodierung die beste Qualität bei hoher Komprimierung. Wenn Sie jedoch keine hohe Qualität benötigen, bieten WebM und FLV kleinere Dateigrößen. Ihre Videobearbeitungssoftware bietet möglicherweise weiterhin FLV als Option an, es wird jedoch nicht empfohlen, dieses Format zu verwenden.

Wenn Sie DVD-Qualität benötigen, liefert MP4 mit H.264-Kodierung zwar hervorragende Ergebnisse, kostet jedoch einen ordentlichen Download. Beim Streaming von Videos bietet WebM eine wesentlich bessere Komprimierung. Das Problem ist, dass noch nicht alle mobilen Betriebssysteme WebM unterstützen (sie sollten, aber sie scheinen einen verrückten Grund zu haben, möglicherweise nicht die goldene Regel des mobilen Entwicklers zu befolgen: Sie werden Unannehmlichkeiten haben und Ihren Kunden so sehr verwirren wie möglich).

Sollten Sie den MPEG-4-Codec anstelle von H.264 mit MP4-Videos verwenden? Im Allgemeinen nicht, da dies zu größeren Dateigrößen bei gleichem Qualitätsniveau führt. Wenn Ihr Video jedoch kleine physische Abmessungen haben soll und Sie eine perfekte Übertragung des Videos für das Streaming wünschen, ist MPEG-4 ein guter Codec, da es über eine integrierte Fehlerkorrektur zur Gewährleistung der Datenintegrität verfügt.

Was ist mit WMV? Nun, das ist ein Sonderfall. Es bietet praktisch die gleiche Videoqualität wie MP4, jedoch mit noch besserer Komprimierung. Der Nachteil ist, dass Mac- und iOS-Benutzer Ihr Video nur mit einem Payware-Videokonverter anzeigen können, der die Wiedergabe verzögert. Dies ist genau das, was wir bei der Optimierung unserer Seite vermeiden wollten.

WMV-Dateien haben keine Probleme für Android-, Windows- oder Linux-Benutzer. Mit 12.5% der Internet-Community, die Apple-Geräte verwendet, müssen Sie entscheiden, ob es sich lohnt, diese zu beeinträchtigen. Ich persönlich würde nicht empfehlen, dass Sie das tun, nur um eine schnellere Ladezeit zu erhalten.

Und schließlich, da es sich um Internetvideos handelt, reduzieren Sie die physische Größe des Videos auf die Größe, die Sie auf Ihrer Seite anzeigen, und sehen Sie, wie viele Bytes Sie speichern können, wenn Sie keine Wiedergabe im Vollbild- oder Theatermodus zulassen .

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.