Trimmen Sie den aufgeblähten Zustand Lehnen Sie ihn heraus

In den letzten beiden Beiträgen dieser Serie haben wir diskutiert, wie wir uns von kleinen Websites zu den riesigen Apps und Websites entwickelt haben, die wir heute haben. Wir haben einige der Möglichkeiten besprochen, die wir treffen können, wenn es darum geht, unsere WordPress-Website auszulehnen, worauf zu achten ist und warum alles wichtig ist. 

In diesem Beitrag werde ich einige Beispiele geben, worüber ich spreche. Es wird kein direkter Leitfaden sein, der perfekt in jeden Anwendungsfall passt, aber es soll ein paar Beispiele geben, damit Sie mit dem Reinigen beginnen und die überflüssigen Teile Ihres Blogs entfernen können, die Sie nicht benötigen brauchen.

Vorlagendateien auslehnen

Unten habe ich ein Stück HTML aus einem aktuellen Projekt entnommen. Die ursprüngliche Seite enthielt eine Menge Dinge, die sie wirklich nicht brauchte. Im Laufe der Zeit hatte das Unternehmen Plugins und Ergänzungen zu seinem Thema angesammelt und erlebte nun absurd langsame Ladezeiten. 

In diesem Fall wäre die einfachste Lösung, eine Cache-Schicht davor zu schlagen und fertig zu werden. Aber das löst das Problem nicht wirklich. Am Ende habe ich etwa 50% des HTML-Codes im Design entfernt, wo nötig umgeschrieben und das CSS entsprechend angepasst, damit das Design unverändert bleibt.

Hier ist ein Teil des HTML-Codes, der sich im ursprünglichen Design befand. Ich habe die Formatierung etwas korrigiert.

 
 
 
 
 
 
  
Beitragstitel geht hier 
  
 
 
 
 
Kategoriename
 
 
 
 
 Veröffentlicht am 28. Februar 2014 - 14:40 Uhr von Bob The Admin 
 
 
 
 
  Kommentar  
 
 
 
 
 
 
    
 
 
 
Inhalt hier posten
 
 
 
 
 
 
 
 
 
 
 
 
 

Es ist nicht das schlechteste HTML, das ich je gesehen habe, und absolut kein Teil, der die Website wirklich langsamer gemacht hat, aber es ist perfekt für das, was ich hier zeigen möchte: Es gibt eine Menge Reinigungsarbeiten, die gemacht werden können. Es gibt zu viele Umhüllungen und Räumungen div Elemente. 

Nach einiger Reinigung endete ich mit:

 
 
  
Beitragstitel geht hier 
  
 
 
 
 
Kategoriename
 
 
 
 Veröffentlicht am 28. Februar 2014 - 14:40 Uhr von Bob The Admin 
 
 
 
 Kommentar 
 
 
 
 
 
 
    
 
 
Inhalt hier posten
 
 
 
 

Bei diesem Code wurden die meisten Wrapper entfernt. Wenn Sie sie nicht benötigen, fügen Sie sie nicht hinzu. Durch die korrekte Verwendung von CSS können Sie die Verwendung der meisten, wenn nicht aller, Wrapper des ursprünglichen Codeteils vermeiden. 

Dieses Beispiel mag unbedeutend erscheinen und ist es für sich. Tun Sie dies jedoch überall für jede Vorlage in Ihrem Design, und Sie erhalten eine deutlich geringere Ausgabe. 

Beim Rendern Ihrer Website sind Browser zufriedener, mobile Besucher werden die Öffnung Ihrer Website auf ihren Handys zu schätzen wissen, da weniger Daten schnellere Ladezeiten bedeuten, und Sie werden zufriedener sein, wenn Sie etwas im Code anpassen müssen.

Es gibt noch viel mehr zu besprechen, aber diese Serie ist nicht als endgültige Anleitung für das Schreiben von sauberem HTML gedacht. Stattdessen möchten wir Sie auf mögliche Verbesserungen aufmerksam machen, die Sie auf Ihre Site anwenden können. 

Rachel McCollin hat einen sehr ausführlichen und ausführlichen Leitfaden zum Erstellen eines Themas für WordPress geschrieben. Ihre Serie beschreibt in außergewöhnlichen Details, wie ein Thema erstellt wird, und ihre Beispiele sind völlig aufgebläht. Ich kann jedem empfehlen, der nach Hinweisen sucht, wie er HTML-Code sortieren kann, um einen Blick auf ihre Serie zu werfen.

Unsere Plugins anpassen

Nun, da wir uns die Themes angesehen haben, lassen Sie uns Plugins besprechen.

Viele der gleichen Regeln gelten hier. Je sauberer das Plugin geschrieben wird, desto einfacher wird es angepasst, wenn Sie dies benötigen. Denken Sie daran, dass Sie die Kompatibilität verlieren, wenn Sie ein Plugin direkt anpassen, sodass Sie dies am besten vermeiden sollten.

Plugins gibt es in allen Größen. Das heißt, einige tun, was sie tun müssen, und nichts mehr, andere tun, was sie tun müssen, sowie viele andere Dinge. Feature bloat ist nicht ungewöhnlich und sollte bei der Auswahl der Plugins, die Sie verwenden möchten, wirklich genau beobachtet werden. In einigen (aber nicht allen) Fällen werden die langsameren Dinge umso langsamer, je mehr Plugins Sie haben. 

Dies hängt natürlich stark von der Codequalität des Plugins ab. Aus diesem Grund ist es wichtig, dass Sie sorgfältig prüfen, welche Plugins Sie gerade installieren. 

Im Einzelfall scheint jedes Plugin nicht viel zu tun, aber wenn Sie eine große Anzahl von schlecht codierten Plugins zusammenstellen, werden Sie einen erheblichen Leistungsabfall feststellen.

Als ich anfangs diesen Artikel schrieb, wollte ich viele Dinge ansprechen, die Sie bei der Auswahl Ihrer Plugins im Auge behalten sollten. Barış Ünver hat jedoch einen hervorragenden Leitfaden für die Auswahl eines Plugins geschrieben, und ich muss seine Worte hier nicht wiederholen. 

Lesen Sie stattdessen in seinem Leitfaden nach, wenn Sie nach Tipps suchen, welches Plugin verwendet werden soll.

Was kommt als nächstes?

Lassen Sie uns zunächst zusammenfassen: Je sauberer Sie Ihren Code schreiben - sei es HTML, PHP, JavaScript oder C -, desto einfacher ist es, ihn später zu verwalten und anzupassen. In diesem Beitrag wurde versucht, Ihnen ein paar Handgriffe zum Reinigen Ihrer Vorlagen zu geben, und verweist auf exzellente Ressourcen, um mit dem Einrichten dieses Plugins zu beginnen.

Einige von Ihnen werden bemerkt haben, dass ich nicht über alles gesprochen habe, was mit CSS, JavaScript, dem Minimieren von Elementen und anderen Formen der Optimierung zu tun hat. Das liegt daran, dass der nächste Beitrag genau das sein wird.

Lassen Sie mich in den Kommentaren wissen, was Ihre Gedanken nach dem Lesen sind!