Das Aufstellen einer Website ist zumindest an der Oberfläche nicht mehr schwierig. Jeder kann behaupten, eine Website für Sie einzurichten. Das Geheimnis einer leistungsstarken Website liegt jedoch im Backend der Serverebene und ist von technischer Komplexität geprägt, an der die meisten Webdesigner kein Interesse oder Wissen haben. Lassen Sie uns einige dieser Geheimnisse untersuchen, die Ihre Website mit besseren PageSpeed- und YSlow-Ergebnissen (für eine bessere SEO) und insbesondere für mobile Benutzer in den Himmel treiben würden.

Der Irrtum des Webdesigns

Für einige Kunden ist alles, was sie interessiert, eine „hübsche“ Website. Sie wollen auffällige Blings mit Vollbildbildern, Hochleistungsvideos und auffälligen Skripten aller Art. Für diese Kunden haben sie die falsche Vorstellung, dass zahlende Kunden und Besucher Websites auf diese Weise mögen. Leider ist es ein Irrtum, der immer noch von einigen Agenturen und Webdesignern unterstützt wird, die es entweder nicht besser wissen oder zu viel Angst haben, Zeit zu investieren, um zu erklären, wie Websites tatsächlich funktionieren.

Sie sehen, eine gute Website soll Informationen mit Call-to-Action (CTA) bereitstellen, damit Besucher an Leads und Kunden weitergeleitet werden können. Eine gute Website muss daher zwei Hauptziele erfüllen:

  1. Kann gefunden werden von Besuchern über die Suchmaschinen (denken Sie an Google).
  2. Muss schnell sein für jeden Besucher auf der ganzen Welt, zumal wir jetzt in einer globalen Wirtschaft leben, mit Amazon als Paradebeispiel.

Beide Hauptziele sind eng miteinander verbunden. Google indiziert Ihre Website nur, wenn sie relevant (nicht voller Spam), sicher (ohne Malware oder Werbung), schnell (optimierter Inhalt) und mobilfreundlich ist. Wenn eines dieser Kriterien nicht erfüllt wird, wird Ihre Website bestraft, und die Senken im Google-Index liegen immer weiter zurück.

Und für Benutzer? Benutzer sind ungeduldig und zunehmend auch.

Wenn Ihre Website im öffentlichen WLAN oder auf einem Mobiltelefon sehr langsam geladen wird, werden sie fortgesetzt (in einer messbaren Metrik, die als „Absprungrate“). Wenn Ihre Website schwer und langsam ist, warten die Besucher einige Sekunden und klicken an einer anderen Stelle weg. Sie haben gerade die einzige Gelegenheit verloren, einen neuen Interessenten zu gewinnen.

Einige Webdesigner führen Ihre Prototyp-Website auf einer lokalen Festplatte aus, die offensichtlich keine Geschwindigkeitseinbußen aufweist, und Sie erkennen möglicherweise nicht, wie langsam Ihre Website im wirklichen Leben sein wird. Einige hosten Ihre Prototyp-Website möglicherweise in einem lokalen Glasfaser-Backbone, und Sie denken möglicherweise auch, dass die Website ziemlich schnell ist. Die Realität ist jedoch, dass die Website nur dann schnell erscheint, wenn Sie sich auf demselben Rückgrat befinden und nicht zu viele Hops durchlaufen.

Das Entwerfen für Mobiltelefone ist auch nicht so einfach, wie es scheint. Die meisten Webdesigner verwenden ein CMS-Thema (Content Management System), das „reaktionsschnell“ ist. Unter normalen Umständen kann Ihre Website auf einem Mobiltelefon angezeigt werden.

Der Teufel steckt jedoch im Detail, und viele dieser Themen verwenden sehr schwere Frameworks, die die Geschwindigkeit Ihrer Website verringern, insbesondere für Mobiltelefone, und bei mobilen Tests einen schlechten Rang haben.

Lassen Sie uns nun untersuchen, wie Sie Ihre Website testen können, um festzustellen, ob sie Google-freundlich, bandbreiten- und mobilfreundlich ist.

Bildungsbias ist ein Problem

Viele Schulen konzentrieren sich auf Webdesign und vergessen, dass ENTWICKLUNG genauso oder sogar wichtiger ist als Design, wenn es darum geht, eine gute Website aufzubauen.

Und da sich viele Menschen eher auf Ästhetik als auf technische Komplexität konzentrieren, fehlt bei vielen Website-Mitarbeitern die Entwicklungskomponente. Ich weiß, da ich unzählige Kandidaten interviewt habe und die meisten nicht die Arbeit geleistet haben, die ich erledigen musste. Auch Webhosting-Anbieter sind nicht ausgenommen.

Ich habe mit sehr freundlichen Kollegen im Bereich des technischen Supports von Webhosting-Unternehmen gesprochen, und sie waren ehrlich genug, um mir zuzugeben, dass das, was ich mit ihnen kommunizierte, „über ihrer Gehaltsstufe“ lag (unter Angabe ihrer Worte). Ich musste selbst viele technische Komplexitäten auf der langen, mühsamen Reise von 1996 bis heute (21 Jahre!) Beheben und lösen.

Ist die Website wirklich mobilfreundlich?

Es ist einfach, ein mobilfreundliches (responsives) Thema automatisch zum Laufen zu bringen. Was viele Menschen nicht merken, ist, dass eine Website nicht nur visuell mit einem Smartphone kompatibel sein muss, sondern auch bandbreitenkompatibel sein muss - dh tatsächlich schnell genug auf einem Mobiltelefon mit einer 3G- oder vielleicht 4G-Verbindung geladen werden muss.

Die kostenlose und einfache Möglichkeit, Ihre Website zu testen, besteht darin, genau den Browser zu verwenden, den der König der Suchmaschinen erstellt hat - den Google Chrome Browser.

Unter dem Browser Entwicklertools Option auswählen Netzwerk, und Drosselung Optionen und wählen Sie “Gutes 3G"(Eine gute Schätzung für viele Smartphone-Nutzer in diesem Teil der entwickelten Welt), und klicken Sie auf"Cache deaktivieren".

Am unteren Bildschirmrand sehen Sie 3 Anzeigen:

  • Anfragen,
  • (Daten) Übertragen, und
  • Ende (Zeit zum vollständigen Laden der Seite).

Je weniger Anfragen, je kleiner die übertragenen Daten und je kürzer die Fertigstellung (Zeit zum vollständigen Laden der Seite), desto mobiler ist Ihre Website in Bezug auf die mobile Bandbreite.

Unsere Website stellt beispielsweise 23 Anfragen, ist 640 KB groß und wird auf einer mobilen 6.6G-Verbindung in 3 Sekunden vollständig geladen.

20170423_chrome3g_mb1
Chrome Network Throttling Test - unsere eigene Website

Hier ist ein Beispiel für eine Webdesign-Agenturseite, die 79 Anfragen stellt, satte 1.5 MB groß ist und in 9.81 Sekunden auf eine mobile 3G-Verbindung geladen wird.

20170423_chrome3g_webdevcd1
Chrome Network Throttling-Test - eine Webdesign-Agentur

Hier ist ein von uns entworfener E-Commerce-Webshop, der 50 Produktauswahlmöglichkeiten auf dieser Seite hostet, 70 Anfragen stellt, 1.1 MB groß ist (aufgrund der 50 Produkte) und das Laden in 9.76 Sekunden beendet.

20170423_chrome3g_ecommepshub1
Chrome Network Throttling-Test - eine von uns entwickelte E-Commerce-Website

Hier ist ein E-Commerce-Webshop eines anderen Unternehmens mit 244 Anfragen, einer Größe von 6.7 MB und einem Ladevorgang in 39.91 Sekunden. Es ist für einen mobilen Benutzer äußerst unfreundlich und die Absprungrate ist hoch. Es wäre klüger gewesen, die Anzahl der Anforderungen auf jeder Seite mit einem intelligenteren Design zu reduzieren und dadurch die Gesamtseitengröße und die Ladezeit zu reduzieren.

20170423_chrome3g_ecommchallgr1
Chrome Network Throttling-Test - eine große lokale E-Commerce-Website

Während wir messen können, wie benutzerfreundlich eine Website für Mobilgeräte und die entsprechende Bandbreite ist, was bestimmt diese Leistung? Wir werden es gleich herausfinden.

Serveradministration und Sicherheitskenntnisse sind von entscheidender Bedeutung

Bei einer typischen CMS-Website bastelt der typische Webdesigner nur am WordPress-Teil, an Themen, Plugins und Inhalten (Text, Bilder und Links zu Videos und anderen Inhalten). Es ist wirklich keine Hexerei, und selbst dann scheitern viele Webdesigner an der entscheidenden Komponente, um die WordPress-Site richtig zu sichern.

Ich habe das Privileg, seit 1996 Sicherheitspraktiker zu sein, habe Sicherheitsprogramme erstellt und mich auf strategischer Ebene beraten, um zumindest zu verstehen, was zu tun ist. Aber viele junge Designer werden diese Amtszeit oder dieses Wissen nicht haben. Bei WordPress-Sicherheits-Plugins kann eine Fehlkonfiguration die Website zum Erliegen bringen (500 verbotene Fehler) und sogar legitime Benutzer insgesamt sperren. Und der Mangel an Sicherheit kann die Website durch die häufigen DDoS- (Distributed Denial of Service) und Brute-Force-Angriffe sehr leicht zum Erliegen bringen. Es ist ein kritischer Faktor und nicht leichtfertig zu behandeln.

Einige Webdesigner konzentrieren sich nicht auf die Serververwaltung (oder haben keine Erfahrung damit), was den Unterschied in Ihrem Server ausmacht PageSpeed- und YSlow-Scoressowie die mobile Leistung, da viele dieser Parameter nur auf dem Server konfiguriert werden können.

Eine gute Website mit qualitativ hochwertigem SEO (Suchmaschinenoptimierung) und Inhaltsoptimierung erfordert Programmier- und Serververwaltungskenntnisse, wie z Apache Webserver Konfiguration / Sicherheit, PHP Skriptsprache und SQL Datenbankverwaltung zum Optimieren WordPress CMS. Diese technischen Fähigkeiten sind die Domäne von Programmierern und Entwicklern.

Einige Trivia, die die Leistung und Sicherheit Ihrer Website verbessern, aber von bloßen Designern vernachlässigt werden können, sind auch die Versionen Ihrer Apache-Webserver-Software (oder einer anderen vergleichbaren Webserver-Software), PHP und SQL.

Führen Sie beispielsweise mindestens Apache 2.4x, PHP 7 und MariaDB 10 aus? Auch hier sind einige Anpassungen erforderlich, damit Ihre Website ordnungsgemäß funktioniert.

GTmetrix zur Rettung

GTmetrix ist eine großartige Testplattform, um die Geschwindigkeit und Optimierung Ihrer Website zu überprüfen. Wenn Sie einen Webdesigner oder eine Agentur auswählen, verwenden Sie GTmetrix als Lackmustest für deren Fähigkeiten. Ein guter Designer oder eine gute Agentur sollte zumindest in der Lage sein, ihre Website auf Geschwindigkeit zu optimieren.

Es gibt 2 Punkte, über die Sie Bescheid wissen müssen: Pagespeed, und YSlowDies sind gängige Methoden für Branchenkenner, um die Geschwindigkeit und Optimierung einer Website zu messen und herauszufinden, wie die Website entsprechend verbessert werden kann.

Es ist einfacher, einen höheren PageSpeed-Score zu erzielen, während der YSlow-Score viel strenger ist. Sie können ein B für PageSpeed ​​und ein D für YSlow erzielen. Meiner Meinung nach sollte eine gute Website ein A für PageSpeed ​​und ein B oder besser für YSlow sein.

Wie hoch ist die Punktzahl Ihrer Website?

Abgesehen von den PageSpeed- und YSlow-Werten sind andere wichtige Faktoren, die Sie von GTmetrix unterscheiden können:

1) Voll geladene Zeit - ein echtes Maß für die Geschwindigkeit und Größe einer Webseite, da manche Leute sie verwenden. “faule Ladung”, Um Bilder asynchron zu laden, aber Benutzer müssen immer noch die gesamte Seite laden, um alles zu lesen.

2) Gesamtseitengröße - Ist es klein genug für Handys? Ist die Bandbreite der Webseite für langsames öffentliches WLAN oder 3G geeignet? Hier brauchen Sie eher Vernunft als Besessenheit. Einer der häufigsten Fehler von Webdesignern (einschließlich einiger großer Geschäfte) ist, dass Bilder nicht für das Web optimiert sind. Zum Beispiel benötigen Sie KEIN Bild mit 4,000 Pixel (Breite) für das Web, das eher für den Druck gedacht ist. Ein Bild mit 1,200 Pixeln (Breite) und optimaler Bildkomprimierung ist gut genug. Stellen Sie auch "skalierte Bilder" bereit, was mehr vom Webdesigner verlangt, aber bei PageSpeed ​​und Leistung hilft. Denken Sie daran, dass unser menschliches Sehvermögen auf Fuzzy-Logik basiert und sehr ausgefeilt ist, um Details zu erkennen, ohne dass eine vollständige oder hohe Auflösung erforderlich ist. Als Pionier im Bereich interaktives Mediendesign seit 1986 versichere ich Ihnen, dass es viele unglaubliche Tricks gibt, mit denen Sie die Bildgröße drastisch reduzieren und die Website leichter machen können.

3) Anfragen - Die Anzahl der HTTP-Anforderungen an verschiedene Standorte und Server, um die Bereitstellung der gesamten Seite zu erfüllen. Einige Websites stellen Hunderte von Serveranforderungen, die viel zu viele sind. Kombinieren und minimieren Sie legitime Anforderungen wie CSS (Cascading Style Sheets) und JS (Javascript), wenn möglich. Inline kleine CSS- und JS-Dateien, wann immer Sie können. Unnötige HTTP-Aufrufe können die Benutzerfreundlichkeit einer Website beeinträchtigen, die Fehlerrate erhöhen, die Geschwindigkeit verringern sowie Sicherheits- und Datenschutzbedenken aufwerfen. Solche Anfragen treten häufig bei Cookie-Domains, Werbeanbietern, Videoplattformen, Social Media-Plattformen usw. auf. Verwenden Sie Anfragen mit Bedacht. Wählen Sie bei Bedarf den kleinsten Nenner und konsolidieren oder optimieren Sie Anforderungen.

4) Caching - Neben dem Caching auf Serverebene können Sie auch das Browser-Caching nutzen, damit Ihre Benutzer den Inhalt auf ihren eigenen Festplatten zwischenspeichern können. Dies verkürzt die Ladezeit bei der Rückkehr Ihrer Besucher, da sie einen Teil des Inhalts zwischengespeichert hätten. Sie können dies im Server-Backend konfigurieren. Konfigurieren Sie auf Ihrer Website ein qualitativ hochwertiges Caching-Plugin.

5) Gzip - Konfigurieren Sie Ihren Server so, dass komprimierte Inhalte bereitgestellt werden, insbesondere Textdateien wie HTML, JS und CSS. Einige Seiten können um bis zu 70% komprimiert werden und helfen bei Ihren Gesamtladezeiten.

6) Bleib am Leben - Konfigurieren Sie Ihren Apache so, dass dauerhafte HTTP-Verbindungen aktiviert werden, sodass dieselben Verbindungen synchrone Anforderungen senden und empfangen können, wodurch die Geschwindigkeit für Ihre Benutzer erhöht wird.

7) Header ablaufen lassen - Eine weitere Konfiguration auf Serverebene, die auf Server- oder Websiteebene konfiguriert werden kann. Die meisten Inhalte können einen festgelegten Ablaufkopf haben, wobei vorübergehende Inhalte wie Text einen kürzeren Ablauf haben können, während Bilder, Videos, Dokumente und Skripte einen längeren Ablauf haben können, da sie sich weniger häufig ändern. Die Einschränkung gilt für einige externe Skripte (z. B. die Skripte von Google), da wir keine Kontrolle auf Serverebene haben und daher keine abgelaufenen Header für sie festlegen können.

Hier ist ein Beispiel für unsere GTmetrix-Ergebnisse, die A für PageSpeed ​​und YSlow mit einer sehr kurzen vollständig geladenen Zeit (1.8 s), einer kleinen Gesamtseitengröße (693 kB) und 22 Anfragen anzeigen:

20170423_gtmetrix_mb1
GTmetrix Score - unsere eigene Website

Hier ist ein Beispiel eines Webhosting-Anbieters mit einem E für PageSpeed ​​und YSlow, einer vollständig geladenen Zeit von 7 Sekunden, einer Gesamtseitengröße von 2.22 MB und ungläubigen 170 Anfragen.

20170422_gtmetrix_sgwebhost1
GTmetrix Score - ein großer Webhost

Hier ist ein Beispiel einer Webdesign-Agentur mit einem A für PageSpeed, aber einem C für YSlow mit einer sehr langsamen, vollständig geladenen Zeit von 23.9 Sekunden, einer Gesamtseitengröße von 2.66 MB und 52 Anfragen.

20170422_gtmetrix_sgwebdesign1
GTmetrix Score - eine Webdesign-Agentur

CDN-Boost

Ein Content Delivery Network (CDN) kann einen zusätzlichen Schub hinzufügen, auch wenn dies nicht unbedingt erforderlich ist, wenn Sie eine qualitativ hochwertige Konfiguration vorgenommen haben, um einen A-Score für PageSpeed ​​zu aktivieren. YSlow fügt CDNs einen Wert hinzu. Wenn Sie also kein CDN ausführen, verringert sich Ihre YSlow-Punktzahl. Es gibt verschiedene CDNs, und geben Sie so viel wie möglich für ein gutes CDN aus, da kostenlose CDNs niemals so effektiv sind wie kostenpflichtige dedizierte CDNs. Es gibt kein kostenloses Mittagessen auf der Welt.

Wenn Sie also eine Website haben, empfehle ich, diese jetzt mit GTmetrix und Google Chrome zu testen und sich ein Bild davon zu machen, was verbessert werden kann. Wenn die Ergebnisse miserabel und beunruhigend sind, machen Sie sich keine Sorgen, da es auf Ihrem Server-Back-End bewährte Techniken gibt, um die Dinge richtig zu machen. Es wird kein kurzer, einfacher Spaziergang im Park sein, aber es wird sich lohnen, wenn Sie Ihre Punktzahlen erhöhen und die Strafen für SEO reduzieren. Wenn Sie noch keine Website haben und mit potenziellen Webdesignern und Agenturen sprechen, testen Sie ihre eigenen Websites mit GTmetrix und Google Chrome. Dann finden Sie die richtigen Leute, die Ihnen helfen, vorwärts zu kommen.


Dr Seamus Phan

Dr Seamus Phan ist CTO und Head of Content bei McGallen & Bolden. Er ist Experte für Technologie, Strategie, Branding, Marketing, Führungstraining und Krisenmanagement. Dieser Artikel kann gleichzeitig auf seinem erscheinen Blog. Verbinden Sie sich mit LinkedIn. © 1984-2021 Seamus Phan et al.