Web -Performance -Tricks - jenseits der Grundlagen

Dieser Artikel wurde von New Relic gesponsert. Vielen Dank, dass Sie die Sponsoren unterstützt haben, die SitePoint ermöglichen!

Wir haben im Laufe der Jahre hier bei SitePoint viel Leistungsgespräch geführt, und wir glauben, dass es an der Zeit ist, das Thema mit einigen fortgeschritteneren Aspekten noch einmal zu überdenken. Die in diesem Artikel erwähnten Ansätze sind nicht streng mit PHP verwandt, aber Sie können sicher sein, dass sie Ihre Anwendung auf eine ganz neue Ebene bringen, wenn sie ordnungsgemäß verwendet werden. Beachten Sie, dass wir die üblichen Dinge nicht abdecken - weniger Anfragen für CSS, JS und Bilder, was schnellere Websites und ähnliche Hinweise bedeutet, sind allgemein bekannt. Stattdessen konzentrieren wir uns auf einige weniger bekannte/verwendete Upgrades.

Key Takeaways

• Minimierung von HTML -Elementen und unnötigen Tags kann dazu beitragen, die Webleistung zu verbessern. Durch die Verwendung von Vorabsteuterungstechniken zum im Voraus laden Ressourcen kann auch die Geschwindigkeit und das Benutzererlebnis verbessert werden.
• Validieren Sie Ihr CSS mithilfe von Tools wie CSSLINT und CSS Erklären Sie, um Fehler und potenzielle Leistungsprobleme zu erkennen. Verwenden von CSS 2D, um Objekte anstelle von oben/links zu verschieben, kann auch die Leistung steigern.
• Das PageSpeed ​​-Modul von Google kann automatisch Best Practices für die Website -Optimierung implementieren, die Portion statischer Ressourcen verbessern, CSS und JavaScript minifizieren und optimieren und die Bildgröße reduzieren.
• Verwenden von Googles Open-Source-Komprimierungsalgorithmus Zopfli kann die Komprimierung um 3-8%erhöhen, was einen spürbaren Unterschied für Websites machen kann, die statische Inhalte für eine große Anzahl von Clients bedienen.
• kleine Leistungsfixen können erhebliche Auswirkungen auf die Gesamtleistung einer Website haben. Verwenden Sie Tools wie HAR- und Dev -Tools -Profile, um die Leistung Ihrer Website zu überwachen und die erforderlichen Verbesserungen zu implementieren.

html

• Entfernen Sie unnötige Tags

  Je weniger Elemente, desto besser. Entfernen Sie unnötige HTML.

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  vs.

  <span><span><span><div</span>></span>
  </span>    <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span><span><span><span></div</span>></span></span>

  Natürlich nicht für alle Szenarien anwendbar, sondern strukturieren Sie Ihr HTML auf eine Weise, mit der Sie so viele DOM -Elemente wie möglich entfernen können.

  Sie können auch die Dateigröße von HTML -Dokumenten reduzieren, indem Sie einige Tags weglassen, die nicht benötigt werden. Dies sieht eher hackig aus und scheint gegen Standards zu verstoßen. Daher sollte es nur beim Einsatz in der Produktion geschehen, wenn überhaupt - Sie verwechseln andere Entwickler, die an demselben Code arbeiten.

• Prefetch

  Vorbehandlung ist, wenn Sie dem Browser mitteilen, dass eine Ressource im Voraus benötigt wird. Die Ressource kann die IP einer Domäne (DNS -Prefetch), eine statische Ressource wie ein Bild oder eine CSS -Datei oder sogar eine ganze Seite sein.

  Wenn Sie erwarten, dass der Benutzer nach dem Besuch Ihrer Website zu einer anderen Domain wechselt, oder beispielsweise Ihre statischen Ressourcen auf einer subdomänenähnlichen Bilder wie Bilder wie folgt. DNS -Server, um Bilder zu beheben.example.com in eine IP -Adresse. Der Gewinn ist nicht viel, aber akkumuliert, er kann eine angemessene Ladezeit aus den Anfragen, die Sie zum Browser Ihres Benutzers machen, abrufen. Die Vorabsteuerung von DNS erfolgt mit einem im wie SO: und wird in allen wichtigen Browsern unterstützt. Wenn Sie irgendwelche Subdomains haben, von denen Sie erwarten, dass der aktuelle Besucher nach Abschluss der Seite, auf der sie sich derzeit befinden, laden wird, gibt es keinen Grund, DNS -Vorabklage nicht zu verwenden.

  Wenn Sie wissen, dass einige Ressourcen beim nächsten Besuch benötigt werden, können Sie sie vorab abbauen und im Browser -Cache speichern lassen. Wenn Sie beispielsweise einen Blog und in diesem Blog einen zweiteiligen Artikel haben, können Sie sicherstellen, dass die statischen Ressourcen (d. H. Bilder) aus dem zweiten Teil vorbelastet sind. Dies geschieht wie SO: . Picasa Webalben verwendet dies ausgiebig, um 2 folgende Bilder vorzubereiten, die Sie derzeit anzeigen. Bei älteren Browsern können Sie dies ermöglichen, indem Sie ein Phantombildelement in JavaScript laden:

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  Dies lädt das Bild in den Cache, verwendet es aber nirgendwo. Diese Methode funktioniert jedoch nicht für CSS- und JS -Dateien, daher müssen Sie mit diesen Ressourcen erfinderisch sein, wenn Sie den alten Browsern vorgeholt möchten. XMLHTTPREQUEST findet in den Sinn - laden Sie sie über Ajax und verwenden Sie sie nirgendwo. Siehe hier, wie man das abzieht.

  Eine Sache, auf die man sich bewusst werden muss, ist, nur die Ressourcen vorzubereiten, die wir sicher sind, oder fast sicher, dass der Benutzer benötigt wird. Wenn der Benutzer einen paginierten Blog -Beitrag liest, ist es sicher, vorab. Wenn sich der Benutzer auf einem Bildungsbildschirm befindet, setzen Sie auf jeden Fall die Ressourcen vor, die er auf dem Bildschirm erwarten kann, für die er nach dem Senden umgeleitet wird. Sehen Sie sich Ihre gesamte Website nicht vor und berücksichtigen Sie nicht zufällig - berücksichtigen Sie die Bandbreite und verwenden Sie sparsam vorab, wobei mobile Geräte berücksichtigt werden. Mobile Geräte befinden sich in der Regel auf begrenzte Bandbreite, und das Vorabladen eines 2-MB-Bildes wäre wahrscheinlich nicht sehr benutzerfreundlich. Sie können diese Probleme vermeiden, indem Sie selektiv vorlegen - erkennen, wann sich ein Benutzer auf einem mobilen Gerät oder auf einer begrenzten Bandbreitenverbindung befindet, und verwenden Sie in diesen Fällen keine Vorabsteuerung. Besser noch, fügen Sie Einstellungen Ihrer Website hinzu und bitten Sie die Leute, sich dem Vorabbau zuzustimmen - speichern Sie ihre Präferenz in LocalStorage und haben Sie es mit der Benutzeragentenzeichenfolge, sodass sie auf jedem Gerät separat vorabgestattet oder nicht zugelassen werden können.

  Sie können auch ganze Seiten vorlegen und vorbereiten. Seiten vor dem Abschluss von Seiten bedeutet, ihren DOM -Inhalt abzurufen - die HTML. Dies liefert normalerweise keinen großen Geschwindigkeitsschub, da die meisten Inhalte tatsächlich in JavaScript, CSS und Bildern enthalten sind - Inhalte, die nicht von der Seitenvorabsetzung abgerufen werden. Diese Art des Abrufens wird derzeit nur vollständig von Firefox unterstützt. Das Vorrangern ist eine andere Angelegenheit - das Vorrangern ist nur in Chrome und es hält nicht nur das DOM hinter den Kulissen, sondern auch alle verwandten Inhalte in Form von CSS, JS und Bildern. Tatsächlich macht es bereits die gesamte Seite im Hintergrund - die Seite sitzt im RAM, vollständig geöffnet und gerendert und wartet darauf, besucht zu werden. Dies ermöglicht die Änderung sofort, wenn ein Benutzer auf den vorgeborenen Link klickt, jedoch dieselben Probleme wie im vorherigen Absatz beschrieben einführt - die Bandbreite kann leiden. Darüber hinaus registriert Ihr Server diesen Prerender als Besuch, sodass Sie möglicherweise verzerrte Analysen erhalten, wenn der Benutzer tatsächlich seine Meinung ändert und die vorgefertigte Website nicht öffnet. Die Prerender-Syntax ist: .

  Im Moment gibt es nur einen ordnungsgemäßen Weg, um Ihre Seite zu erkennen, die vorgeholt oder vorgeholt wird, und das ist mit der Sichtbarkeits -API der Seite, die derzeit in allen wichtigen Browsern mit Ausnahme des Android -Browsers und Opera Mini unterstützt wird. Sie verwenden diese API, um sicherzustellen, dass die Seite tatsächlich beobachtet wird, und dann jede Analyseverfolgung initiieren, die Sie möglicherweise durchführen.

CSS

• css Lint

  Verwenden Sie CSSLINT, um Ihre CSS zu validieren und auf Fehler und potenzielle Leistungsprobleme hinweisen. Lesen und respektieren Sie die Regeln, die im CSSLINT -Wiki aufgeführt sind, um die effizientesten CSS zu schreiben.

• css erklären

  Ähnlich wie bei SQL Erklärung in der Datenbankwelt gibt es auch ein nützliches CSS-Erklärungswerkzeug-https://github.com/josh/css-plain. Sie können es verwenden, um Ihre CSS -Selektoren zu analysieren. Wenn Sie es sofort testen möchten, fügen Sie den Inhalt dieser Datei in die Konsole Ihres Browsers ein und geben Sie einfach einen Befehl wie csSexplain ('. Item.subclass.anotherClass').

  

  Ziel ist es, auf der Skala von 1 bis 10 die niedrigstmögliche Punktzahl zu erzielen. Sie können es auch in meinem JSFIDDLE ausprobieren. Obwohl die Ergebnisse nicht zu ernst genommen werden sollen (Sie sind besser nach dem CSSLINT -Rat), leisten sie immer noch gute Arbeit darin, die Komplexität der Selektoren zu erklären und zumindest auf mögliche Probleme zu deuten.

• übersetzen vs. top/links
  CSS 2D verwenden Übersetzen, um Objekte anstelle von oben/links zu verschieben. Es macht keinen Sinn, dies ausführlich zu erklären, wenn Paul Irish und Chris Coyer einen so fantastischen Job gemacht haben. Stellen Sie sicher, dass Sie ihr Material lesen/ansehen und dieses Wissen in -

  verwenden, wenn möglich über die Übersetzung über die Oberseite/links

• sanft 🎜> scrollen

  Sie haben vielleicht festgestellt, dass Websites wie Facebook und Google ages zum Öffnen von Bildlauf werden. Es ist fast so, als ob sie Zeit brauchen, um sich aufzuwärmen. Dies ist ein Problem auf vielen heutigen Websites und einem riesigen UX -Darm. Es ist nicht so schwierig, Ihre Seite reibungslos zu scrollen, wie es scheint - besonders wenn Sie wissen, worauf Sie achten müssen. Der Schlüssel zur Reduzierung der Bildlaufverzögerung ist die Minimierung von Farben - Farben sind das, was passiert, wenn sich der Inhalt auf Ihrem Bildschirm von Frame zum Rahmen wechselt, und der Browser muss ihn auf dem Bildschirm neu streichen - es muss einen neuen Look berechnen und diesen neuen Ausdruck aufschlagen Eine der Schichten, aus denen eine gerenderte Website besteht. Weitere Informationen zu diesen Themen und herauszufinden, wie man Lackprobleme diagnostiziert, siehe Paul Lewis 'hervorragender Beitrag.

Server

• Optimieren Sie Ihren PHP mit einigen einfachen Siegen

  Es gibt viele Dinge, die Sie tun können, um Ihre App von der PHP -Seite zu beschleunigen. Für einige einfache Siege finden Sie in Fredric Mitchells letzter Artikel oder eines der anderen leistungsbezogenen Artikel hier auf SitePoint.

• Verwenden Sie das PageSpeed ​​-Modul von Google

  Das PageSpeed ​​-Modul von Google ist ein Modul, das Sie in Nginx und Apache installieren können, das einige Best Practices für die Website -Optimierung automatisch implementiert. Das Modul bewertet die Leistung einer vom Kunden wahrgenommenen Website, sorgt dafür, dass alle Regeln so weit wie möglich respektiert werden, und verbessert insbesondere die Portion statischer Ressourcen. Es wird CSS und JavaScript für Sie minifikieren, optimieren und komprimieren, die Bildgröße reduzieren, indem sie nicht verwendet werden, die nicht verwendeten Meta -Daten, die Headers -Headers ordnungsgemäß ausfallen, um den Browser -Cache besser zu verwenden, und vieles mehr. Das Beste von allen - es erfordert keine Architekturänderungen von Ihnen. Schließen Sie es einfach an Ihren Server an und es funktioniert. Um das Modul zu installieren, befolgen Sie diese Anweisungen - Sie müssen von Source for Nginx aus erstellen, aber das sind nur ein paar Arbeiten der Arbeit. Um pageSpeed ​​ordnungsgemäß vorgestellt zu werden, sehen Sie sich das folgende Video an - es ist inzwischen etwas lang und alt, aber immer noch eine unglaublich wertvolle Ressource:

• Verwenden Sie SPDY

  In einem Aufwand wie PageSpeed ​​leitet Google auch die Entwicklung von SPDY. Mod_spdy ist ein weiteres Apache -Modul, das Ihrer Website viel schneller bedient. Die Installation ist nicht so einfach, wie man es mag, und es braucht auch Browserunterstützung, aber das sieht von Tag zu Tag besser aus. SPDY ist eigentlich ein Protokoll (ähnlich wie HTTP ist ein Protokoll), das HTTP -Anforderungen abfängt und ersetzt, wo es in der Lage ist, die Website viel schneller zu bedienen. Weitere Informationen oder sogar noch besser finden Sie in dieser hochrangigen Übersicht über diesen neueren Friendly -Zusammenbruch. Die Verwendung von SPDY kann zwar riskant sein, da wir immer noch auf eine breitere Akzeptanz warten, aber die Gewinne scheinen die Risiken bei weitem zu überwiegen.

• Verwenden Sie WebP für Bilder

  WebP ist ein Bildformat, das alle anderen ersetzen soll - JPG, PNG und GIF. Es unterstützt Alpha -Schichten (Transparenz), Animation, verlustfreie und verlustige Komprimierung und vieles mehr. Die Einführung von Browser war sehr langsam, aber es ist in heutigen Tagen einfach, alle Bildtypen mit Tools zu unterstützen, die die Webp-Konvertierung wie das oben erwähnte PageSpeed-Modul automatisieren (es kann automatisch Bilder in das WebP-Fliege konvertieren). Eine eingehende Einführung und Diskussion über WebP finden Sie in diesem umfassenden Leitfaden.

• Kompress mit Zopfli

  Verwenden Sie die ZOPFLI-Komprimierung, um Ihre statischen Ressourcen vorzubeugen. Es handelt sich um einen Open-Source-Komprimierungsalgorithmus, der erneut von Google angeführt wird und die Komprimierung im Vergleich zu den üblichen Online-Komprimierungsmethoden um 3-8% erhöht. Auf kleineren Websites macht dies kaum einen Unterschied, aber wenn Sie Ihre App skalieren oder Ihre statischen Inhalte für viele Kunden bedienen, wird dies definitiv einen spürbaren Unterschied machen, wie das Google -Web -Schriftart -Team berichtet:

Schlussfolgerung

Es gibt viele Möglichkeiten, die Leistung Ihrer App zu verbessern, und wie oft im Leben ist das Ganze größer als die Summe der Teile. Implementieren Sie einige der in diesem Artikel erwähnten Maßnahmen und diejenigen, die ihm vorgehen, und Sie erhalten eine nette, materielle Verbesserung. Implementieren Sie sie alle und Sie haben eine App so schnell und hell, dass sie durch die Zeit reisen kann. Überwachen Sie Ihre App, nutzen Sie HAR, sehen Sie sich Dev Tools -Profile an oder melden Sie sich für Dienste an, die dies alles für Sie erbringen. Ignorieren Sie den Leistungsaspekt Ihrer Website einfach nicht. Während die meisten Projekte heutzutage "Tun und Abfahrten" sind, lassen Sie Ihren Kunden nicht mit einer Website, auf die Sie nicht stolz sind.

unterschätzen Sie nie die kleinen Korrekturen, die Sie vornehmen können - Sie wissen nie, welches der Wendepunkt für Exzellenz ist!

häufig gestellte Fragen (FAQs) in Web -Performance -Tricks

Was ist der Unterschied zwischen DIV- und Span-Tags in HTML? Das DIV-Tag ist ein Element auf Blockebene, das für größere Codebrocken verwendet wird, während das Span-Tag ein Inline-Element ist, das für einen kleinen Stück HTML in einer Zeile verwendet wird. Der Hauptunterschied zwischen ihnen besteht darin, wie sie das Layout der Webseite beeinflussen. Divelemente erstellen eine neue Linie und nehmen die gesamte Breite zur Verfügung, während Span -Elemente keine neue Linie erstellen und nur so viel Breite wie nötig aufnehmen.

Wie kann ich die Leistung meiner Website verbessern?

Es gibt verschiedene Möglichkeiten, die Leistung Ihrer Website zu verbessern. Eine der effektivsten Methoden ist die Optimierung Ihrer Bilder. Große, hochauflösende Bilder können Ihre Website verlangsamen. Daher ist es wichtig, diese Größe zu ändern, zu komprimieren und zu optimieren. Eine andere Methode besteht darin, Ihre CSS- und JavaScript -Dateien zu minimieren, mit denen die Größe Ihrer Dateien reduziert und Ihre Website beschleunigt werden kann. Sie können auch ein Content Delivery Network (CDN) verwenden, um Ihre Inhalte schneller an Benutzer auf der ganzen Welt zu liefern. erhebliche Auswirkungen auf die Benutzererfahrung. Langsamladende Websites können Benutzer frustrieren und zu höheren Absprungraten führen. Auf der anderen Seite können schnellladende Websites die Benutzerzufriedenheit verbessern, das Engagement erhöhen und möglicherweise zu höheren Conversion-Raten führen. Daher ist es entscheidend, die Leistung Ihrer Website zu optimieren, um die bestmögliche Benutzererfahrung zu bieten. Beeinflussen die Leistung der Website stark. Beispielsweise können unnötige Tags, übermäßige Nutzung von Tabellen und unsachgemäße Nutzung von Formularen Ihre Website verlangsamen. Auf der anderen Seite kann saubere, gut strukturierte HTML die Ladegeschwindigkeit und die Gesamtleistung Ihrer Website verbessern.

Was sind einige erweiterte Web-Performance-Tricks? Vorladung zum Laden von Ressourcen im Hintergrund, im Implementieren des Servers, um mehrere Antworten für eine einzelne Client -Anforderung zu senden und Servicearbeiter zum Cache -Ressourcen zu verwenden und diese direkt aus dem Cache zu bedienen. Diese Techniken können die Leistung Ihrer Website erheblich verbessern, erfordern jedoch ein tiefes Verständnis der Webtechnologien und der sorgfältigen Implementierung.

Wie kann ich die Leistung meiner Website messen? Messen Sie die Leistung Ihrer Website, einschließlich Google PageSpeed ​​Insights, GTMetrix und WebPagetest. Diese Tools können detaillierte Einblicke in die Ladegeschwindigkeit, die Nutzung der Ressourcen und andere Leistungsmetriken Ihrer Website geben. Sie können auch Empfehlungen zur Verbesserung der Leistung Ihrer Website geben. Während es die Funktionalität und Interaktivität einer Website verbessern kann, können schlecht geschriebene oder übermäßige JavaScript eine Website verlangsamen. Daher ist es wichtig, effizientes JavaScript zu schreiben, seine Verwendung zu minimieren und JavaScript -Dateien zu verschieben oder asynchron zu laden, um die Leistung Ihrer Website zu verbessern.

Wie wirkt sich CSS auf die Leistung der Website aus? Große, komplexe CSS-Dateien können Ihre Website verlangsamen. Daher ist es wichtig, dass Ihr CSS sauber und gut organisiert wird. Sie sollten auch vermeiden, übermäßige CSS -Animationen zu verwenden, da sie Leistungsprobleme verursachen können. Darüber hinaus sollten Sie CSS Sprites verwenden, um mehrere Bilder in einem zu kombinieren, die Anzahl der HTTP -Anforderungen zu reduzieren und die Ladegeschwindigkeit Ihrer Website zu verbessern. > Die Reaktionszeit der Server ist die Zeit, die ein Server benötigt, um auf eine Anforderung eines Browsers zu antworten. Eine langsame Reaktionszeit von Server kann Ihre Website erheblich verlangsamen, während eine schnelle Reaktionszeit der Server die Ladegeschwindigkeit Ihrer Website verbessern kann. Daher ist es wichtig, einen zuverlässigen Hosting -Anbieter auszuwählen und Ihre Serverkonfiguration zu optimieren, um die Reaktionszeit Ihrer Server zu verbessern.

Wie kann ich meine Website für mobile Geräte optimieren? ist entscheidend, da immer mehr Benutzer im Web auf ihren Smartphones und Tablets durchsuchen. Sie können Ihre Website für mobile Geräte optimieren, indem Sie reaktionsschnelles Design verwenden, Bilder für Mobilgeräte optimieren, die Verwendung schwerer JavaScript und CSS verringern und die mobilfreundliche Navigation implementieren. Sie sollten Ihre Website auch auf verschiedenen mobilen Geräten testen, um sicherzustellen, dass sie auf allen gut funktioniert.

Das obige ist der detaillierte Inhalt vonWeb -Performance -Tricks - jenseits der Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!