Trim the Bloat Lean It Out

In de vorige twee berichten in deze serie hebben we besproken hoe we van kleine websites zijn gegaan naar de enorme apps en sites die we vandaag hebben. We hebben enkele keuzes besproken die we kunnen maken in verband met het neigen naar onze WordPress-website, waar je op moet letten en waarom elk ding belangrijk is.. 

In deze post ga ik enkele echte voorbeelden geven van waar ik het over heb. Het is geen straight-up gids die perfect in elke use case zal passen, maar de bedoeling is om enkele voorbeelden te geven om u op weg te helpen met het opschonen en verwijderen van de externe bits op uw blog die u niet ziet nodig hebben.

Leunend sjabloondossiers

Hieronder heb ik een stukje HTML van een recent project overgenomen. De originele site bevatte veel dingen die het echt niet nodig had. Na verloop van tijd had het bedrijf plug-ins en toevoegingen aan hun thema verzameld en ervoeren ze nu absurd trage laadtijden. 

In dit geval is de eenvoudigste oplossing om een ​​cachinglaag ervoor te slaan en klaar te zijn. Maar dat lost het probleem niet echt op. Een van de dingen die ik uiteindelijk deed was ongeveer 50% van de HTML in het thema verwijderen, het herschrijven waar nodig en de CSS aanpassen om het ontwerp hetzelfde te houden.

Hier is een deel van de HTML die in het oorspronkelijke thema was. Ik heb de opmaak een beetje gecorrigeerd.

 
 
 
 
 
 
  
Post titel komt hier 
  
 
 
 
 
categorie naam
 
 
 
 
 geplaatst op 28 februari 2014 - 14:40 uur door Bob The Admin 
 
 
 
 
  Commentaar  
 
 
 
 
 
 
    
 
 
 
post hier inhoud
 
 
 
 
 
 
 
 
 
 
 
 
 

Het is niet de slechtste HTML die ik ooit heb gezien, en absoluut niet één van de onderdelen die de site echt een stuk langzamer hebben gemaakt, maar het is perfect voor wat ik hier probeer te laten zien: er kan veel worden schoongemaakt. Er is een overmatige hoeveelheid wikkels en opruimen div elementen. 

Na wat schoonmaken eindigde ik met:

 
 
  
Post titel komt hier 
  
 
 
 
 
categorie naam
 
 
 
 geplaatst op 28 februari 2014 - 14:40 uur door Bob The Admin 
 
 
 
 Commentaar 
 
 
 
 
 
 
    
 
 
post hier inhoud
 
 
 
 

Dit codefragment heeft de meeste van zijn wikkels verwijderd. Als je ze niet nodig hebt, voeg ze dan niet toe. Correct gebruik van CSS stelt u in staat om de meeste, zo niet alle, wrappers in het originele stuk code te gebruiken. 

Dit voorbeeld lijkt onbelangrijk, en op zichzelf is het dat wel. Maar doe dit overal voor elke sjabloon in uw thema en u zult eindigen met een aanzienlijk kleinere output. 

Bij het weergeven van uw site zullen browsers er gelukkiger van zijn, mobiele bezoekers overal zullen waarderen dat uw site sneller op hun telefoon wordt geopend, omdat minder gegevens snellere laadtijden betekenen en u gelukkiger zult zijn wanneer u iets in de code moet aanpassen.

Er is nog veel meer om hier te bespreken, maar deze serie is niet bedoeld als de definitieve gids voor het schrijven van schone HTML. In plaats daarvan is het de bedoeling u bewust te maken van de mogelijke verbeteringen die u op uw site kunt aanbrengen. 

Rachel McCollin heeft een zeer uitgebreide en uitgebreide gids geschreven over het bouwen van een thema voor WordPress. Haar serie detailleert in uitzonderlijk detail hoe een thema te bouwen en haar voorbeelden zijn volledig ongeldig, ik kan iedereen die op zoek is naar een paar tips voor het herschrijven van hun HTML aanraden om haar serie te bekijken..

Onze plug-ins trimmen

Nu we de thema's hebben bekeken, laten we het hebben over plug-ins.

Veel van dezelfde regels zijn hier van toepassing. Hoe schoner de plug-in is geschreven, hoe gemakkelijker deze zal worden aangepast wanneer u dit moet doen. Vergeet niet dat je de compatibiliteit verliest als je een plug-in rechtstreeks aanpast, dus het is over het algemeen het beste om te proberen dat te voorkomen.

Plug-ins zijn er in alle maten. Dat wil zeggen dat sommigen doen wat ze moeten doen en niets meer, anderen doen wat ze moeten doen, evenals vele andere dingen. Functiestagnatie is niet ongebruikelijk en iets dat je echt goed in de gaten wilt houden wanneer je de plug-ins selecteert die je wilt gebruiken. In sommige (maar niet alle) gevallen, hoe meer plug-ins je hebt, hoe langzamer alles uiteindelijk zal zijn. 

Dit is natuurlijk grotendeels afhankelijk van de codekwaliteit van de plug-in. Dit is waarom het belangrijk is om ervoor te zorgen dat u uw due diligence uitvoert bij het onderzoeken van de plug-ins die u gaat installeren. 

Individueel lijkt het erop dat elke plug-in niet veel doet, maar als je een groot aantal slecht gecodeerde plug-ins bij elkaar hebt, zul je een significante afname van de prestaties zien..

Toen ik dit artikel aan het schrijven was, ging ik een aantal dingen bespreken om in de gaten te houden wanneer je je plug-ins selecteert; Barış Ünver heeft echter een uitstekende gids geschreven over waar je op moet letten bij het kiezen van een plug-in en ik hoef zijn woorden hier niet te herhalen. 

Lees in plaats daarvan zijn gids als u op zoek bent naar tips over welke plug-in u moet gebruiken.

Wat is het volgende?

Laten we eerst samenvatten: hoe schoner u uw code schrijft, of het nu HTML, PHP, JavaScript of C is, hoe gemakkelijker het zal zijn om het te onderhouden en later aan te passen. Dit bericht probeerde je een paar handvatten te geven bij het opschonen van je sjablonen en verwijst naar uitstekende bronnen om hiermee aan de slag te gaan en plug-ins te vinden.

Sommigen van u zullen gemerkt hebben dat ik niet heb gesproken over alles met betrekking tot CSS, JavaScript, het minimaliseren van elementen en andere vormen van optimalisatie. Dat komt omdat het volgende bericht ongeveer precies dat zal zijn.

Laat me in de tussentijd in de reacties weten wat je gedachten zijn na het lezen!