So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update

So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update

Vor Kurzem hat das Unternehmen damit begonnen, alle Sites unterhalb der Unternehmenswebsite auszuwerten, angefangen mit itpub. Informieren Sie sich zu diesem Zweck darüber, wie Sie eine Website optimieren können, um ihre Zugriffsgeschwindigkeit zu erhöhen. Ich habe erfahren, dass Page Speed ​​ein gutes Tool ist, also habe ich es heruntergeladen. Lassen Sie mich dieses Tool vorstellen. Page Speed ​​​​ist ein Open-Source-Plugin für Firefox/Firebug. Webmaster und Webentwickler können mit Page Speed ​​die Performance ihrer Webseiten auswerten und Vorschläge zur Leistungsverbesserung erhalten. Führen Sie mehrere Tests der Webserverkonfiguration und des Front-End-Codes der Website durch. Diese Tests basieren auf einer Reihe bewährter Methoden, die nachweislich die Leistung von Webseiten verbessern. Webmaster, die Page Speed ​​auf ihren Seiten ausführen, erhalten für jede Seite eine Reihe von Bewertungen sowie hilfreiche Vorschläge zur Verbesserung der Leistung der Seite. Dadurch wird Ihre Website schneller und die Bandbreitenkosten werden gesenkt.

Nachfolgend finden Sie eine kurze Beschreibung unserer itpub-Site:

1 Zuerst müssen Sie dieses Plug-In installieren. Ich werde die spezifischen Anweisungen überspringen.

2 Drücken Sie nach der Installation F12, um das folgende Bild anzuzeigen

3 Klicken Sie auf den Kranz im Bild oben und es erscheint folgendes Bild:

Diese 82/100 ist die Punktzahl, die Ihre Site gemäß der Seitengeschwindigkeitsbewertung erhält.

Es ist gut, selbst zu entscheiden.

Gelb zeigt Warnungen an, die weiter optimiert werden können

Grün steht für gute Arbeit

Die Roten zeigen an, dass die Arbeit nicht gut läuft und optimiert werden muss.

(Itpub schafft es gut, auf Rot zu verzichten)

4 Siehe „Keep-Alive aktivieren“. Ich werde in einem anderen Blogbeitrag mehr über Keep-Alive schreiben. fortgesetzt werden

Dies bedeutet, dass der Host it168.com Keep-Alive aktivieren muss, dies ist jedoch der Host eines anderen Projektteams und ich bin nicht berechtigt, dies zu ändern. Lassen Sie mich also Folgendes sagen: Wenn der Host von nun an nicht in Ihren Zuständigkeitsbereich fällt, ignorieren Sie ihn einfach.

5 Lassen Sie uns über das folgende komprimierte Javascript sprechen

Pagespeed empfiehlt Ihnen, die folgenden 2 JS zu komprimieren. Sie klicken auf das OP dahinter ... es wird ein komprimiertes JS für Sie generiert. Dann können Sie das ursprüngliche JS ersetzen. Hier wird einfach erklärt, wie es geht. Natürlich verfügt jQuery auch über eine Mindestversion von komprimiertem JS.

6. CDN

Tatsächlich gibt es bei all dem noch einen wichtigeren Aspekt. Wenn Ihr Unternehmen kein Geld hat, können Sie es wie oben beschrieben machen. Wenn das Unternehmen Geld hat, kann es dynamisches CDN hinzufügen

Ab morgen und übermorgen werden wir für ITPUB ein dynamisches CDN verwenden und die Bildanhänge durch einen eigenen Domänennamen trennen. Die aktuelle First-Screen-Time der Homepage beträgt 3,156 s

Ich hoffe, dass sich die Internetgeschwindigkeit durch die Verwendung von CDN deutlich verbessert! ! !

===============================================================================================

Hier sind einige Einblicke in Techniken zur Leistungsoptimierung, die zugleich die im Internet weit verbreiteten „Militärregeln“ darstellen:

1 Aktivieren Sie gzip.

Gzip-Komprimierung ist ein entwickelter Komprimierungsalgorithmus, der von den aktuellen Mainstream-Browsern (Firefox, Safari, Chrome, IE4 und höher) und Mainstream-Servern (Apache, Lighttpd, Nginx) gut unterstützt wird. Die Gzip-Komprimierung ist durch Content-Encoding: gzip im HTTP 1.1-Protokoll gekennzeichnet, wodurch die Größe von Textdateien erheblich reduziert und somit Bandbreite und Ladezeit gespart werden können. Bei einem meiner Experimente stellte ich fest, dass sich die Größe der minimierten Version von jQuery 1.2.6 bei aktiviertem gzip von 54,4 KB auf 16 KB verringerte, also um 70 %. Gzip eignet sich für:

Bei HTML-, CSS- und JavaScript-Dateien ist der gzip-Algorithmus für Textdateien effizienter, aber Binärdateien wie jpg/gif/png/pdf wurden bereits einmal komprimiert und der Effekt der Verwendung von gzip ist nicht offensichtlich. Darüber hinaus verbraucht die GZIP-Komprimierung Serverressourcen, während die Dekomprimierung Browserressourcen verbraucht, was bei relativ großen Binärdateien einen sehr hohen Leistungsverbrauch bedeutet.
Versuchen Sie, ein einheitliches Schreibschema zu verwenden, entweder ausschließlich Großbuchstaben oder ausschließlich Kleinbuchstaben. Studierende, die Datenstrukturen und Algorithmen studiert haben, müssen wissen, dass die Komprimierung selbst darin besteht, redundante Informationsentropie zu komprimieren. Wenn zu viele Arten von Datenelementen vorhanden sind, wird die Informationsredundanz verringert, wodurch die Komprimierungsrate verringert wird.
Kleine Dateien (normalerweise weniger als 150 Byte) sollten nicht mit gzip komprimiert werden, da gzip dem Dateikopf relevante Informationen hinzufügt, wodurch die Dateilänge bei kleinen Dateien zunimmt.

(Der obige Text stammt von http://www.yakecan.com/archives/3. Ich stimme zu.)

Wie überprüfen Sie, ob Ihr Server eingeschaltet ist?

Lassen Sie mich hier einen Server als Beispiel nehmen. Mein Webserver ist nginx, also nehmen wir nginx als Beispiel:

Öffnen Sie die Nginx-Konfigurationsdatei. Sie sehen die entsprechenden GZIP-Einstellungen. Wenn nicht, bitten Sie die Betriebs- und Wartungskollegen Ihres Unternehmens, diese zu aktivieren .

Typen geben an, für welche Dateitypen GZIP verwendet werden soll.

Sie können die Webmaster-Tools verwenden, um zu überprüfen, ob Ihre Site Gzip verwendet, z. B. http://tool.chinaz.com/Gzips/.

Nehmen Sie eine meiner Websites als Beispiel.

Sie können das Ergebnis sehen und verstehen.

2. Minimieren Sie JS und Bilder

Sie können es mit einem Komprimierungstool komprimieren. In den JavaScript-Dateien selbst gibt es viel Raum für Optimierung. Bei der sogenannten JavaScript-Komprimierung werden mithilfe einiger Tools Funktions- und Variablennamen optimiert (tatsächlich geht es darum, die Länge von Variablennamen so weit wie möglich zu verkürzen), redundante Zeichen (wie Leerzeichen, Zeilenumbrüche, Kommentare usw.) zu entfernen und im endgültigen Code Leistungsverbesserungen bei Analyse und Ausführung zu erzielen. Der komprimierte Code ist für Maschinen lesbar, jedoch nicht für Menschen, da der Dateiinhalt völlig verzerrt ist. Daher wird Komprimierung im Allgemeinen im Produktionscode verwendet und kann nicht in der Entwicklungsphase eingesetzt werden.

3. JavaScript-Minimierung

Beispielsweise wird jquery.form.js nach der Minimierung auf 11,9 KB reduziert, wodurch 54,8 % des Speicherplatzes eingespart werden. Klicke auf die minimierte Version, dann wird Dir in einem neuen Fenster die von Page Speed ​​für Dich optimierte Version angezeigt. Diese kannst Du dann direkt auf dem Server aktualisieren.

4 Browser-Caching aktivieren

Dies ist eine häufig verwendete Methode. Wenn die angeforderten Ressourcen lokal im Browser zwischengespeichert werden, kann die zweite Anforderung dieser Inhalte aus dem direkten Cache erfolgen, wodurch die Anzahl der HTTP-Anfragen für die Verbindung reduziert wird.

5. Lazy Loading in JavaScript

Wenn ein Browser beim Parsen von HTML auf eine JS-Datei stößt, lädt er diese normalerweise zuerst herunter und lädt dann nach dem Parsen und Ausführen den nachfolgenden Inhalt herunter, was natürlich zu einer gewissen Verzögerung führt. Um die Leistung zu verbessern, verschieben Sie den Speicherort der JS-Dateien so weit wie möglich nach hinten und laden Sie sie, wenn möglich, asynchron über Teilcode. Wenn JS und CSS zusammen platziert werden müssen, muss JS außerdem nach CSS platziert werden, damit die CSS- und JS-Dateien synchron heruntergeladen werden können.

6 Dateispleißen, d. h. zusammenführbare Dateien werden zu einer Datei zusammengeführt

7. Reduzieren Sie HTTP-Anfragen. Dieses wird zusammen mit den oben genannten verwendet.

8 Laden Sie nur einen Teil des JS im Kopf. Der Rest kann unten geladen werden.

<<:  Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten

>>:  Leerzeichenverarbeitung in HTML/CSS und wie Leerzeichen auf der Seite beibehalten werden

Artikel empfehlen

Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder

CSS-Transformationen sind zwar cool, wurden aber ...

Wissen Sie, wie viele Verbindungen ein Linux-Server verarbeiten kann?

Vorwort Sehen wir uns zunächst an, wie eine TCP-V...

So ändern Sie das Anfangskennwort eines Benutzers in mysql5.7

Wenn Benutzer MySQL-Datenbanken zum ersten Mal in...

Installieren und konfigurieren Sie MySQL 5.7 unter CentOS 7

Dieser Artikel testet die Umgebung: CentOS 7 64-B...

Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

MySQL ist ein relationales Datenbankverwaltungssy...

Lösung für das Vue-Datenzuweisungsproblem

Lassen Sie mich ein Problem zusammenfassen, mit d...