Eine Website zum Laufen zu bringen ist nicht mehr schwierig, zumindest oberflächlich. Jeder kann behaupten, eine Website für Sie eingerichtet zu haben. Aber das Geheimnis einer Hochleistungswebsite liegt im Backend der Serverebene und ist von technischer Komplexität durchdrungen, an der die meisten Webdesigner kein Interesse oder Wissen haben. Lassen Sie uns einige dieser Geheimnisse erkunden, die Ihre Website mit besseren PageSpeed- und YSlow-Ergebnissen (für besseres SEO) und insbesondere für mobile Benutzer in die Höhe treiben würden.

Der Irrtum des Webdesigns

Für einige Kunden ist alles, was ihnen wichtig ist, eine „hübsche“ Website. Sie wollen auffällige Schmuckstücke 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 Trugschluss, der immer noch von einigen Agenturen und Webdesignern unterstützt wird, die es entweder nicht besser wissen oder zu viel Angst haben, Zeit damit zu verbringen, 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.

Diese beiden primären Ziele sind eng miteinander verbunden. Google indexiert Ihre Website nur, wenn sie relevant (nicht voller „Spam“), sicher (ohne Malware oder Malvertising), schnell (optimierter Inhalt) und für Mobilgeräte optimiert ist. Wenn eines dieser Kriterien nicht bestanden wird, wird Ihre Website bestraft und sinkt im Google-Index 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 weitergehen (in einer messbaren Metrik, bekannt als „Absprungrate“). Wenn Ihre Website schwer und langsam ist, warten die Besucher einige Sekunden und klicken woanders hin. Sie haben gerade die einzige Gelegenheit verpasst, 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 (Content Management System)-Design, das „responsive“ ist, und 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 in den Bereichen des technischen Supports von Webhosting-Unternehmen gesprochen, und sie waren ehrlich genug, mir gegenüber zuzugeben, dass das, was ich mit ihnen kommunizierte, „über ihrer Gehaltsklasse“ lag (Zitat aus ihren Worten). Auf dem langen, beschwerlichen Weg seit 1996 bis heute (21 Jahre!) musste ich viele technische Probleme selbst beheben und lösen.

Ist die Website wirklich mobilfreundlich?

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

Die kostenlose und einfache Möglichkeit, Ihre Website zu testen, ist genau der Browser, den der König der Suchmaschinen entwickelt hat – der Google Chrome Browser.

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

Am unteren Bildschirmrand sehen Sie 3 Anzeigen:

  • Anfragen,
  • (Daten) Übertragenund
  • Veredelung (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-Netzwerkdrosselungstest – 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-Netzwerkdrosselungstest – 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 ihre Fähigkeiten. Ein guter Designer oder eine gute Agentur sollte zumindest in der Lage sein, seine Website auf Geschwindigkeit zu optimieren.

Es gibt 2 Punkte, über die Sie Bescheid wissen müssen: Pagespeedund 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 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 einige Leute es verwenden können“faule Ladung“, um Bilder asynchron zu laden, aber Benutzer müssen immer noch die ganze Seite laden, um alles zu lesen.

2) Gesamtseitengröße – ist es klein genug für Handys? Ist die Webseite bei langsamem öffentlichem WLAN oder 3G bandbreitenfreundlich? Hier brauchen Sie Vernunft statt Besessenheit. Einer der häufigsten Fehler von Webdesignern (einschließlich einiger großer Shops) ist, dass Bilder nicht für das Web optimiert sind. Zum Beispiel brauchen Sie KEIN Bild mit 4,000 Pixeln (Breite) für das Web, das eher für den Druck gedacht ist. Ein 1,200 Pixel (Breite) Bild mit optimaler Bildkomprimierung ist gut genug. Servieren Sie auch „skalierte Bilder“, die mehr vom Webdesigner verlangen, aber bei PageSpeed ​​und Leistung helfen. 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 interaktiven Mediendesign seit 1986 versichere ich Ihnen, dass es viele unglaubliche Tricks gibt, die man anwenden kann, um die Bildgröße dramatisch zu reduzieren und die Website leicht zu machen.

3) Anfragen – die Anzahl der HTTP-Anforderungen an verschiedene Sites und Server, um die Bereitstellung der gesamten Seite zu erfüllen. Einige Websites stellen Hunderte von Serveranfragen, die viel zu viele sind. Kombinieren und minimieren Sie sie für legitime Anfragen 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, Fehlerraten erhöhen, die Geschwindigkeit verringern und auch 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 rationalisieren Sie Anfragen.

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, wenn Ihre Besucher zurückkehren, da sie einen Teil des Inhalts zwischengespeichert hätten. Sie können dies im Server-Backend konfigurieren. Und konfigurieren Sie auf Ihrer Website ein hochwertiges Caching-Plugin.

5) Gzip – Konfigurieren Sie Ihren Server, um komprimierte Inhalte bereitzustellen, 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 – noch eine weitere Konfiguration auf Serverebene, die auf Server- oder Website-Ebene konfiguriert werden kann. Die meisten Inhalte können einen festgelegten Ablauf-Header haben, wobei flüchtige Inhalte wie Text eine kürzere Ablaufzeit haben können, während Bilder, Videos, Dokumente und Skripte eine längere Ablaufzeit haben können, da sie sich seltener ändern. Die Einschränkung besteht bei einigen externen Skripten (z. B. den Skripten von Google), da wir über diese keine Kontrolle auf Serverebene haben und ihnen daher keine Ablauf-Header zuweisen 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, obwohl es nicht unbedingt erforderlich ist, wenn Sie eine qualitativ hochwertige Konfiguration vorgenommen haben, um eine A-Bewertung für PageSpeed ​​zu ermöglichen. YSlow misst CDNs einen Wert bei. Wenn Sie also kein CDN betreiben, verringert sich Ihr YSlow-Score. Es gibt verschiedene CDNs da draußen, und GEBEN Sie so viel wie möglich für ein gutes CDN aus, da kostenlose CDNs niemals so effektiv sein werden wie ein kostenpflichtiges dediziertes CDN. Es gibt kein kostenloses Mittagessen auf der Welt.

Wenn Sie also eine Website haben, schlage ich vor, sie sofort mit GTmetrix und Google Chrome zu testen und ein Gefühl dafür zu bekommen, was verbessert werden kann. Wenn die Ergebnisse miserabel und beunruhigend sind, machen Sie sich keine Sorgen, denn es gibt bewährte Techniken auf Ihrem Server-Back-End, um die Dinge richtig zu machen. Es wird kein einfacher Spaziergang im Park sein, aber es wird sich lohnen, wenn Sie Ihre Punktzahl verbessern und Strafen für SEO reduzieren. Und wenn Sie noch keine Website haben und mit potenziellen Webdesignern und Agenturen sprechen, testen Sie ihre eigenen Websites gegen GTmetrix und Google Chrome. Dann finden Sie die richtigen Leute, die Sie voranbringen.