Geschwindigkeit ist Benutzerfreundlichkeit.
Um es genauer zu sagen: Website-Geschwindigkeit ist ein wichtiger Teil der Benutzerfreundlichkeit. Die intuitivste Schnittstelle, die jemals von den Gedanken des Menschen geschaffen wurde, wird dir nichts nützen, wenn der Benutzer zum Zeitpunkt des Ladens abgepisst wird.
Das ist es. Der Artikel ist fertig ... Ok, also gibt es tatsächlich viel mehr, aber dieser erste Satz ist ungefähr die Hälfte von dem, was du wissen musst. Wir müssen unsere Websites schnell machen.
Ich könnte eine Menge superlative Ausdrücke wie "blitzschnell" oder "extrem schnell" oder sogar "schneller als eine schnelle Kugel" verwenden, aber sie wären unzureichend. Es ist einfacher zu sagen, dass es so etwas wie "zu schnell" nicht gibt.
Wir müssen uns eine Minute Zeit nehmen, um darüber zu sprechen, auf welche Geschwindigkeit ich mich beziehe. Kurz gesagt, die ganze Geschwindigkeit. Genauer gesagt, drei Arten von Geschwindigkeit:
Dies ist die Zeit, die benötigt wird, um alle Informationen auf die Geräte Ihrer Benutzer herunterzuladen. Dies wird in erster Linie von der Geschwindigkeit der Internetverbindung und der tatsächlichen Größe der Dateien beeinflusst.
Sie können nicht viel über die Verbindung tun, aber Sie können viel über die Dateigröße tun.
Nachdem Ihre Dateien heruntergeladen wurden, müssen sie vom Browser verarbeitet und gerendert werden. Die gesamte Verarbeitung und das Rendering hängen davon ab, wie gut Ihr Code geschrieben wurde und was sonst noch auf dem Smartphone, Tablet oder Laptop / Desktop des Benutzers passiert.
Das einzige, was Sie steuern können, ist Ihr eigener Code, aber das macht einen großen Unterschied.
Und dann ist da noch der psychologische Faktor. Schnelle Websites können aussehen und sich anfühlen, als ob sie langsam werden. Langsame Webseiten können durch die gerichtliche Anwendung einiger Tricks ein klein wenig schneller wirken.
In diesem Teil geht es darum, Ihren Nutzer zu untersuchen und ihn darüber zu informieren, was bei der Interaktion mit Ihrer Website oder App passiert.
Sie müssen auf alle drei Aspekte der Website-Geschwindigkeit achten, damit Ihre Website sich schnell anfühlt. Und je größer die Website ist, desto mehr muss optimiert werden.
Dann fangen wir an.
Viele Male, besonders bei kleineren, experimentellen Projekten, die ich so sehr liebe, verbringe ich mehr Zeit mit CSS als jeder andere Teil des Codes. Oft wird auch mehr CSS geschrieben als HTML oder JavaScript. So, genau dort, ist ein Indikator dafür, wie sehr Ihr CSS die Dateigröße beeinflussen kann.
Dann ist natürlich die Frage, wie schnell Ihre Website tatsächlich auf dem Desktop, Laptop, Tablet oder Telefon Ihres Benutzers läuft. Ein Großteil der tatsächlichen "Arbeit" oder Rendering einer Webseite wird von der Software erledigt, mit ein wenig Hilfe von Ihrer GPU.
Es wird möglicherweise schnell geladen, aber blättern Sie langsam. Die Art, wie Ihr CSS geschrieben wird, wirkt sich direkt darauf aus, wie schnell ein bestimmtes Gerät die Webseite tatsächlich anzeigen kann, nachdem die Dateien heruntergeladen wurden.
Bei der Optimierung einer Website, um schneller zu laufen, ist das CSS in der Regel ein guter Anfang.
CSS, das in Ihrem Stylesheet sitzt und nichts macht, macht Ihre Dateien unnötig größer. Okay, dieser könnte wie ein Kinderspiel aussehen; aber es passiert immer noch den Besten von uns.
Sie nehmen etwas Inhalt heraus und vergessen, das alte CSS zu löschen. Sie ändern die Klasse oder ID eines Containerelements und vergessen, das alte CSS zu löschen. Du schreibst etwas CSS, erkenne, dass es einen besseren Weg gibt, und vergiss ... du bekommst es.
Werfen Sie mehrere Front-End-Entwickler in den Mix, und Sie haben ein Rezept für ein schwerfälliges, nicht handhabbar Stylesheet oder eine Sammlung von ihnen, wenn Sie nicht vorsichtig sind. Nicht verwendeter Code verlangsamt das Laden von Seiten aufgrund seiner Existenz als Daten. Es verlangsamt die Entwicklung, weil es Leute verwirren kann, die das Stylesheet lesen.
Es kann auch zu langsameren Renderzeiten führen, da nur mehr CSS für den Browser angezeigt wird, während das gesamte CSS mit den entsprechenden HTML-Elementen übereinstimmt.
Egal, ob Sie alle alten CSS manuell überprüfen und löschen, automatische Tools verwenden, um unbenutzte CSS-Selektoren zu finden oder einfach Dinge zu löschen, bis etwas kaputt geht (tun Sie das nicht), Sie müssen diesen alten Code entfernen.
Apropos, wie der Browser das CSS mit dem passenden HTML vergleicht, es ist Zeit, sich die CSS-Selektoren anzusehen. Es wurde viel darüber geschrieben, welche Selektoren am schnellsten rendern, welche langsam sind, ob man sich überhaupt mit den langsamen befassen sollte, und so weiter.
Das Problem ist, dass viele dieser Informationen alt sind. Im Jahr 2000 schrieb Dave Hyatt (ein Entwickler von Safari und aktives Mitglied der CSS Working Group des W3C) folgendes:
Die traurige Wahrheit über CSS3-Selektoren ist, dass sie überhaupt nicht verwendet werden sollten, wenn Sie Wert auf Seitenleistung legen.
Wenn Sie einen Blick darauf werfen das Dokument Dieses Zitat stammt von dir, du wirst sehen, dass er über Selektoren gesprochen hat wie : Erstes Kind und andere Pseudo-Selektoren. Und er hatte Recht.
Er ist immer noch; Aber in den letzten fünfzehn Jahren sind Computer ein wenig fortgeschritten. Heutzutage sollte der zusätzliche Aufwand, den der Computer zum Rendern dieses CSS benötigt, für niemanden wahrnehmbar sein, außer denjenigen, die das billigste von billigen mobilen Geräten verwenden.
Das ist ein Problem für sich, also wirklich, es wird von dem vorliegenden Projekt abhängen, von Ihrer Zielgruppe und so weiter. Geben Sie einfach Ihr bestes Urteilsvermögen und gehen Sie vielleicht nicht über die Pseudo-Selektoren hinaus.
Wenn Ihre Seiten die Buchlänge nicht erreichen, sollten die von Ihnen verwendeten Selektoren nur sehr geringe Auswirkungen auf die Leistung Ihrer Website haben. Sehen Sie sich dennoch das oben verlinkte Dokument an und machen Sie sich mit dem vertraut, was am schnellsten rendert und was nicht. Sie können die Informationen immer noch nützlich finden.
Sie können auch sehen Dieser Artikel von CSS-Tricks für eine etwas jüngere Version des Themas.
Natürlich gibt es auch CSS-Eigenschaften, die länger zum Rendern benötigen als andere. Die klassischen Eigenschaften wie Breite, Höhe und Farbe sind immer noch die schnellsten. Diejenigen, die dazu neigen, ein wenig länger zu dauern (und von Browser zu Browser variieren können), neigen dazu, CSS3-Eigenschaften wie Box-Shadow zu sein.
Der Vorgang des Hinzufügens eines Schlagschattens zu einem Element ist komplex, was das Rendern von Webseiten betrifft. Interessant ist, dass, wie bereits erwähnt wurde HTML5 Felsen Die erforderliche Verarbeitungsleistung kann je nach den spezifischen Abmessungen des Schlagschattens stark variieren.
Dieser Artikel zeigt an, dass das Gleiche für andere Eigenschaften gilt, z. B. border-radius und transform.
Auch dies würde sich kaum auf das Rendern einer Seite auf Ihrem durchschnittlichen Desktop oder Laptop auswirken. Mobile Geräte könnten jedoch einen größeren Schaden erleiden, und die Erfahrung könnte darunter leiden. Jeder hasst abgehacktes Scrollen.
Dies muss jedoch gegen die Kosten der Verwendung von Bildern abgewogen werden, um die gleichen Effekte zu erzielen. Jeder erinnert sich an die Dinge, die wir getan haben, um einmal abgerundete Ecken zu bekommen?
Gehen Sie nicht über Bord, und Ihre Stile sollten schnell genug rendern.
Jetzt kommen wir in anderes Territorium. CSS-Animationen können blitzschnell sein, oder sie können den Browser so weit verlangsamen, dass Gaming-Rigs Schwierigkeiten haben, mitzuhalten.
Dies liegt zum Teil daran, dass nicht alle Animationen gleichmäßig wiedergegeben werden. Ein Teil des Heavy Liftings wird von der Hardware erledigt, während andere Arten von Animationen vollständig durch die eigenen Funktionen des Browsers gerendert werden müssen. Dies ist besonders teuer auf mobilen Geräten.
Im ein anderer Artikel Bei HTML5 Rocks sind Position , Skalierung , Drehung und Deckkraft die am schnellsten zu animierenden CSS-Eigenschaften .
In dem Artikel finden Sie einen vollständigen Überblick darüber, was animiert werden kann, während die "Kosten" niedrig gehalten werden.
Hier biete ich Ihnen den praktischsten Rat, den ich, der Autor, Ihnen geben kann. Verwenden Sie CSS-Präprozessoren wie LESS, SASS und Stylus. Sicher, wenn Sie sie falsch verwenden, können Sie größere Stylesheets generieren als Sie beabsichtigt haben; aber die potenziellen Vorteile sind es wert.
Wenn Sie beispielsweise die Anzahl der HTTP-Anforderungen reduzieren möchten, die an den Server gesendet werden (immer eine gute Idee), fügen Sie alle Resets und Frameworks in eine LESS / SASS-Datei ein. Wenn es kompiliert wird, ist alles in einem einzigen Stylesheet. Außerdem bieten die meisten Präprozessoren die Möglichkeit, das gesamte CSS in verkleinerter Form auszugeben.
Auf diese Weise können Sie so viele verschiedene Dateien verwenden, wie für die Codeorganisation erforderlich sind, ohne die Dateigröße zu beeinträchtigen.
JavaScript kann sehr langsam sein. Um genauer zu sein, kann JavaScript eine viel direktere Auswirkung auf den "Verarbeitungs" -Teil der Geschwindigkeitsgleichung als das CSS haben. Schlimmer noch, JS kann in Bezug auf die Dateigröße exponentiell schwerer werden, um scheinbar triviale Dinge zu erreichen.
Es ist ein doppelter Schlag schmerzhafter Langsamkeit, und unsere Benutzer sind oft die Opfer, besonders diejenigen in mobilen Browsern. Dies ist jedoch nicht die Schuld der Sprache. Wie vermasselt unsere JS bekommen ist oft in direktem Verhältnis zu unserer Unkenntnis der Programmierung im Allgemeinen.
Ich bin kein Entwickler. Ich habe oft Bibliotheken wie jQuery oder einzelne eigenständige JS-Plugins verwendet, um Dinge zu erledigen. Je mehr ich tun muss, desto mehr Plugins muss ich machen, damit alles funktioniert. Diese Plugins und Frameworks sind mit zusätzlichen Optionen und Funktionen ausgestattet, die ich möglicherweise nie verwenden werde.
Da ist der bandbreitenstehlende Bloat, genau da.
Außerdem funktionieren Plugins möglicherweise nicht gut zusammen. Sie könnten sich gegenseitig verlangsamen, oder man könnte einen anderen davon abhalten, zusammen zu arbeiten.
Da ist die vergeudete Rechenleistung, genau da.
Wenn Sie Ihre Website wirklich beschleunigen möchten, sollten Sie Millisekunden (oder ganze Sekunden, in einigen Fällen) sparen. Hier müssen Sie Folgendes tun:
Wie bei CSS ist es am besten, JS in externen Dateien zu belassen und in Ihr HTML zu verlinken. Sie denken vielleicht nicht, dass es so eine große Sache ist, wenn Sie nicht viel JS-Code haben, und es fügt eine HTTP-Anfrage hinzu, aber hier ist die Sache: externe CSS- und JS-Dateien werden vom Browser zwischengespeichert.
Wenn diese Seite erneut angefordert wird oder andere Seiten auf Ihrer Site angefordert werden, die dieselbe CSS- oder JS-Anforderung verwenden, werden diese zwischengespeicherten externen Dateien verwendet und nicht erneut heruntergeladen. Das bedeutet schnellere Ladezeiten und eine etwas schnellere Verarbeitung. Es lohnt sich, den zusätzlichen Anruf zum Server hin und wieder zu wiederholen.
Die Theorie läuft im Wesentlichen so ab: Der Browser gibt zuerst das aus, was am Anfang des Quellcodes einer Seite steht. Deshalb gehen Dinge wie das Tag fast ganz nach oben.
JavaScript-Dateien können jedoch alles verlangsamen, indem Sie verhindern, dass der Browser Ihren HTML-Code rendern kann, bis er geladen ist. Da die meisten der häufig verwendeten JS-Effekte und Plugins nur funktionieren müssen, nachdem der Rest der Seite auf dem Bildschirm angezeigt wird, ist dies nicht ideal.
Verbessern Sie die Benutzererfahrung und reduzieren Sie die wahrgenommene Ladezeit, indem Sie direkt vor dem Tag auf diese externen Dateien am unteren Rand der Seite verlinken.
Wenn ein Benutzer mit allem, was JS benötigt, interagiert, sollte es bereit sein zu gehen.
Wenn Sie eine vollwertige App entwickeln, können und sollten Sie diesen Abschnitt möglicherweise ignorieren. Ein gutes, flexibles und leichtes Framework kann Entwicklern einen großen Vorteil verschaffen. Für kleine bis mittelgroße Websites ist ein JavaScript-Framework jedoch möglicherweise zu viel. Auf diesen Websites wird JS hauptsächlich im Backend des CMS zur Verwaltung von Inhalten verwendet. Am Front-End können Sie einen Bild-Slider oder ein Maurer-Layout oder zwei haben. Wenn Sie wirklich etwas Besonderes sind, haben Sie möglicherweise eine automatische Vervollständigung in der Suchleiste.
Die meisten Inhalte müssen nicht so aufgefächert und animiert werden. JavaScript sollte so weit wie möglich für die Verbesserung der Benutzerfreundlichkeit reserviert werden. Sich darauf zu verlassen, eine Website einfach schön zu gestalten, kann insbesondere auf mobilen Geräten zu einer langsamen, langsamen Website führen.
In gewisser Weise sind alle Code-Frameworks alle gleich, egal ob es sich um JavaScript, PHP, Python, HTML oder CSS handelt: Jede Funktion ist eine Menge Code. Wenn Sie sich für ein Framework oder ein Plugin für einen Job entscheiden, sollten Sie sich fragen, ob Sie alle Funktionen oder sogar die meisten davon nutzen werden.
Wenn nicht, ist das Framework modular? Können Sie nur die Teile auswählen, die Sie tatsächlich benötigen? Wenn ja, und Sie glauben, dass der Kompromiss der Dateigröße es wert ist, dann gehen Sie auf jeden Fall darauf zu! Ansonsten ist es die beste Vorgehensweise zu sehen, was Sie mehr herausnehmen können, als Sie hineinstopfen können.
Nicht dauerhaft! Denken Sie darüber nach, gibt es irgendwelche Inhalte oder Funktionen auf Ihrer Seite, die JS versteckt hat? Können Personen darauf zugreifen, ohne JS in ihren Browsern aktiviert zu haben?
Wenn ja, dann großartig. Wenn jedoch Personen wichtige Informationen nicht sehen, sich nicht mit Ihnen in Verbindung setzen oder ohne JavaScript korrekt navigieren, haben Sie ein Problem. Sicher, Sie können sich darauf verlassen, dass die meisten Leute es immer noch aktiviert haben, aber Sie haben immer diese Randfälle.
Wie verhält es sich mit der Geschwindigkeit der Website? Stellen Sie sich vor, wie langsames Surfen wird, wenn ein Teil Ihrer Website plötzlich nicht funktioniert.
Nein, ernsthaft, wenn du kein Entwickler bist, und du hast das Budget für eins, geh und hol dir eins, sogar für kleine, einfache Jobs. Es ist auf lange Sicht billiger, jemanden einzustellen, der es einmal richtig gemacht hat.
Für den Fall, dass die Dinge fürchterlich falsch laufen (und wir reden hier über Computer, damit etwas schief geht), werden sie herausfinden, was schief gelaufen ist. Sie werden Erfahrung darin haben, diese Art von Problemen zu finden und sie zu lösen. Wenn nichts anderes, werden sie diese speziellen Themen besser googeln können.
Am wichtigsten ist, dass sie wissen, wie man mit weniger Code vorgeht. Weniger Code läuft (normalerweise) schneller und (immer) schneller herunter. Das ist der einfachste Rat, den ich geben kann.
(Wenn Sie ein Entwickler sind oder gerade lernen, habe ich eine Liste von Tutorials zusammengestellt, die am Ende dieses Artikels aufgeführt sind. Enthalten sind einige Anfängerleitfäden zum Schreiben von JavaScript, das schnell ausgeführt wird.)
Wenn Sie das Video aus der Gleichung herausnehmen, ist das Größte auf einer beliebigen Content-gesteuerten Site die Bilder. Bilder sind in der Regel groß, sperrig und langsam, wenn sie nicht optimiert sind.
Jetzt, mit der Verbreitung von Retina-Screens, die uns zwingen, größere Bilder zu verwenden, wenn wir wollen, dass die Dinge auf jedem Gerät gut aussehen, wird das Problem nicht einfacher zu lösen sein. Und schlimmer noch, es ist ein Problem, das leicht zu vergessen ist, bis Sie am Ende mehr ausgeben als für die Bandbreite vorgesehen.
Wenn jedes Byte zählt, können wir es uns nicht leisten zu vergessen.
Die gute Nachricht ist, dass dies kein neues Problem ist. Warum ist das gut? Es bedeutet, dass es viele mögliche Lösungen gibt, von denen Sie auswählen können, und Sie können mehrere gleichzeitig verwenden. In der Tat ist das im Allgemeinen eine gute Idee.
Bis ISPs und Hosting-Unternehmen beginnen, uns unbegrenzte freie Bandbreite zu geben (halten Sie nicht die Luft an), hier sind einige Dinge, die Sie tun können:
Einfach gesagt, machen Sie so viel wie möglich visuell mit CSS und JavaScript, bevor Sie sich an Bilder wenden. Code wird immer billiger zu übertragen als Bilder, also bleiben Sie dabei so viel wie Sie können. Berücksichtigen Sie trotz der Verarbeitungsleistung, die von CSS-basierten Drop-Shadows, Farbverläufen und dergleichen verwendet wird, die Kompromisse.
Beachten Sie auch, dass SVG-Bilder in diesem Fall als "Code" gezählt werden, da dies alles ist, was sie sind: XML-Code, der als Bild gerendert wird. Daher sollten sie immer dann verwendet werden, wenn Sie etwas Vektorbezogenes brauchen.
Zurück zu den oben genannten Retina-Bildschirmen, was machen wir nun mit ihnen? Wie sparen wir dort Bandbreite?
Hier wenden wir uns dem Element und der Eigenschaft image-set zu . Sie sind relativ neu und werden nicht vollständig unterstützt, aber sie ermöglichen es den Browsern, die geeignete Bildgröße für das verwendete Gerät auszuwählen.
Das spart Ihnen zwar keine Bandbreite, wenn Sie Ihre Website im iMac ansehen, aber es ist nicht so wichtig, weil sie wahrscheinlich Breitband haben. Jemand auf ihrem Telefon erhält eine kleinere Version des gleichen Bildes, so dass sie nicht zu lange warten müssen.
Viele Bildgrößenprobleme werden behoben, sobald Sie erfahren, welches Bildformat in einer bestimmten Situation verwendet werden soll. Ich könnte über die speziellen Bildformate, über die Funktionsweise der Komprimierung usw. sprechen, aber Sie müssen sich nur an einige Dinge erinnern:
Das ist wirklich alles. Wenn Sie dies tun und beim Speichern der Bilder mit den Optimierungseinstellungen spielen, können Sie bei relativ kleinen Dateigrößen oft eine ziemlich gute Qualität erzielen.
Es gibt jedoch ein neues Format namens WebP, das automatisch von Chrome und Opera unterstützt wird. Google Ansprüche dass WebP-Dateien 26% kleiner als PNGs und 25-34% kleiner sind, abhängig von einigen Faktoren.
Das sind großartige Neuigkeiten, abgesehen von zwei Dingen: Firefox und IE. Wenn es Ihnen nichts ausmacht, Fallbacks und ein zusätzliches Skript zu verwenden, können Sie das WebP-Format jetzt, heute, verwenden. Einfach herunterladen WebPJS und du bist gut zu gehen.
WebPJS verwendet JavaScript und ein wenig Flash ( seufz ... aber das ist nur für IE), damit es funktioniert, aber es funktioniert. Sie können es in Erwägung ziehen, wenn Sie viele und viele größere Bilder schnell liefern müssen, mit dem Nachteil, dass es ohne JS nicht funktionieren wird.
Es gibt zwei Arten der Komprimierung, die Sie für Ihre Bilder verwenden können. Erstens haben wir eine verlustbehaftete Komprimierung . Dies wird für verlustbehaftete Formate wie JPEG verwendet. Es erlaubt Ihnen, jedes Bild so viel wie Sie möchten zu komprimieren mit dem Verständnis, dass die Qualität immer schlechter und schlechter wird. Die Dinge werden verpixelt und verlieren ihre Definition.
Verlustfreie Komprimierung wird für Formate wie PNG verwendet und kann die Dateigröße in gewissem Umfang reduzieren. Es hat jedoch Grenzen. Es kommt immer zu einem Punkt, an dem es unmöglich ist, ein Bild zu verkleinern, ohne an Qualität zu verlieren.
Wenn Sie Photoshop oder einen ähnlich fortgeschrittenen Bildeditor haben, empfiehlt es sich oft, diese zu verwenden, um Ihre Bilder zu komprimieren, sodass Sie sehen können, wie die Ausgabe aussehen wird, wenn Sie fertig sind.
(Automatische Tools, vor allem Online-Tools, neigen meiner Meinung nach dazu, die Dinge ein wenig zu weit zu komprimieren. Trotzdem werde ich die besten Kompressionstools auflisten, die ich im Abschnitt "Links" unten gefunden habe.)
Wenn Sie ein CMS wie WordPress verwenden, wird die Größe von Bildern, die zu groß sind, automatisch angepasst. Es ist auch einfach, Plugins zu finden, die sie automatisch für Sie komprimieren.
Wohlgemerkt, ich empfehle nur die automatische Komprimierung in Fällen, in denen Sie wissen, dass Sie Lose hochladen werden, und viele Bilder mit ähnlicher Qualität für den gleichen Zweck. Ein Foto-Blog ist ein Beispiel.
Wenn Sie eine Website betreiben, auf der Nutzer ihre eigenen Bilder hochladen, dann ist die automatische Größenanpassung und Komprimierung ein absolutes Muss, und das ist es, was jedes soziale Netzwerk tut.
Hier sind ein paar Ratschläge, die nicht in eine der drei oben genannten Kategorien passen.
Wenn Sie Ihren Code "verkleinern", bedeutet dies, dass alle zusätzlichen Leerzeichen und Zeilenumbrüche entfernt werden. Dies kann die Dateigröße erheblich reduzieren.
Das hört sich nach viel Arbeit an, aber es gibt Tools, die CSS und JS automatisch minimieren und die verkleinerten Dateien für die Quelldateien aus recht offensichtlichen Gründen getrennt halten.
Wie bereits erwähnt, können verschiedene CSS-Präprozessoren den gesamten Code in minimierter Form ausgeben.
Wenn Ihr Server richtig eingerichtet ist, kann Ihr gesamter Code in einem komprimierten Format an den Browser gesendet werden. Textdateien werden sehr gut komprimiert, wodurch die Größe der gesendeten Dateien erheblich reduziert wird.
Nun muss Ihr Server ein oder zwei Sekunden brauchen, um die gesendeten Dateien zu komprimieren, und der Browser des Benutzers muss sie dekomprimieren, aber das ist normalerweise den Bandbreiten-Kompromiss wert.
Für eine vollständige Erklärung, wie das funktioniert, siehe So optimieren Sie Ihre Website mit GZIP-Komprimierung .
Browser-Caching geschieht dank moderner Browser teilweise automatisch. Ein Browser geht zu einer Site und speichert vorübergehend die Bilder und andere Informationen, die er dort findet.
Wenn derselbe Benutzer innerhalb eines bestimmten Zeitraums zurückkehrt, muss der Browser nicht erneut nach denselben Bildern fragen. Es lädt nur die bereits vorhandenen und fordert neue Bilder an, die es möglicherweise nicht hat.
Es gibt jedoch etwas, was Sie tun können, um Browsern mitzuteilen, was und wie lange im Cache gespeichert werden soll dieser Leitfaden .
Und dann gibt es Server-Caching. Server-Caching nimmt im Grunde nur Ihre Website und legt eine Art "Kopie" zwischen Ihren Benutzern und Ihrem tatsächlichen Server. Warum solltest du dich kümmern?
Nun, es ist besonders nützlich für Leute, die Content-Management-Systeme in großem Umfang verwenden. Wenn Ihre Benutzer auf eine temporäre Kopie Ihrer Site anstatt auf die eigentliche Site zugreifen, verringert sich die Anzahl der Aufrufe an Ihre Datenbank. Informationen werden schneller angezeigt und geladen, da sie nicht jedes Mal neu verarbeitet werden müssen.
Abhängig davon, wie es eingerichtet ist, kann das Server-Caching auch die Bandbreitenkosten im Allgemeinen reduzieren. Grundsätzlich gilt: Je größer Ihre Website ist, desto mehr müssen Sie sich darum kümmern, sie zu cachen.
Und jetzt, auf den Abschnitt, auf den Sie alle gewartet haben: die Liste der Links! Wir haben hauptsächlich Tutorials und Anleitungen sowie einige Tools zur Bildkomprimierung zu empfehlen.
Yahoo! ist vielleicht kein so großer Deal wie früher, aber das Entwickler-Netzwerk hat eine Menge guter Dinge drauf. Dies beinhaltet ihre Best Practices für die Beschleunigung Ihrer Website , die einige der grundlegenden Dinge abdecken, die Sie tun können. Einige davon decken den gleichen Grund wie dieser Artikel ab, aber es gibt noch mehr.
In der Einleitung erwähnte ich die wahrgenommene Geschwindigkeit der Website, auch bekannt als wahrgenommene Leistung. Wenn du mehr darüber lesen möchtest, sieh dir das an Ein Leitfaden für Anfänger zur wahrgenommenen Leistung: 4 Möglichkeiten, Ihre mobile Website wie eine native App zu gestalten .
Effeckt.css ist eine Reihe von CSS-basierten Animationen, die darauf ausgelegt sind, schnell zu rendern, egal auf welcher Plattform sich der Benutzer befindet.
Dies ist eine Anleitung, um sicherzustellen, dass Ihr CSS so schnell wie möglich vom Browser heruntergeladen und verarbeitet wird.
Wenn du gerade anfängst, richtig programmieren lernen kann eine genauso große Geschwindigkeitssteigerung sein wie irgendwelche zufälligen Tricks, die Sie vielleicht lernen. Schlechter Code kostet mehr Verarbeitungszeit, also lernen Sie, die Dinge richtig zu machen.
Hier ist ein grundlegende Anleitung das konzentriert sich mehr auf das Schreiben von JavaScript, das schnell läuft.
Genau wie der Titel sagt, Dies Alle Ratschläge sind speziell auf JavaScript V8 ausgerichtet.
Und manchmal werden Sie wahrscheinlich am Ende mit jQuery arbeiten. Wenn Sie das tun, sollten Sie zumindest wissen, wie Sie jQuery-Selektoren schreiben, die Sie nicht verlangsamen. Und hier ist wo Sitepoint hat dich abgedeckt .
Lesen Sie dies Weitere Informationen zu Bildformaten im Web Die Informationen sind ein bisschen alt, aber immer noch gültig und gut zu wissen.
Dies ist ein eher technischer Leitfaden zur Bildoptimierung, der vom Google Developer Network bereitgestellt wird.
Kompressor.io ist eines der beeindruckendsten Werkzeuge, die ich persönlich kennengelernt habe. Es ist eine Online-App, also müssen Sie alle Dateien hochladen, die Sie komprimieren möchten, aber es kann Wunder für JPGs bewirken. Es bietet sowohl verlustbehaftete als auch verlustfreie Komprimierungsoptionen mit jeweils erstaunlichen Ergebnissen und kann auch stapelweise verarbeitet werden.
Trimage ist auf verlustfreie Komprimierung spezialisiert, kann aber auf Ihrem eigenen Computer, unter Windows, Mac oder Linux installiert werden. Da es auf Ihrem Computer installiert wird (und ja, kommt mit verschiedenen Befehlszeilenoptionen sowie eine GUI), kann es leicht automatisch als Teil eines Entwicklungs-Workflow ausgeführt werden.
Wie immer gibt es noch viel mehr zu lernen. Mit den bereitgestellten Informationen und den Ressourcen, mit denen wir verbunden sind, sind Sie auf dem besten Weg, Websites und Apps zu erstellen, die Ihre Nutzer nicht in die Irre führen.
Und das ist der erste Schritt, um sie zu beeindrucken.