Share
In het eerste bericht in deze serie hebben we een paar dingen bekeken die we kunnen doen om onze WordPress-installatie gezond te houden. Maar dat is niet alles wat we kunnen doen.
In dit bericht bespreken we wat te doen met uw items, zoals stylesheets, JavaScript-bestanden, afbeeldingen en meer.
Minder is meer. Dat is zo'n beetje de boodschap die ik met deze hele serie probeer voor te stellen. Daartoe heb ik gesproken over wat te doen met over-gedaan HTML in de, waarnaar wordt verwezen een aantal middelen die u zullen helpen beginnen met het schrijven van schone themacodes, evenals het vinden van de juiste plug-ins.
Nu is het tijd om ons te concentreren op onze troeven: stylesheets, JavaScripts en afbeeldingen.
We zijn allemaal gewend om CSS te schrijven, toch? Zelfs de beginners onder ons hebben hier of daar een CSS-lijn aangeraakt. Ooit gebruikt a Geen weergeven ergens? Alsjeblieft, je hebt een stijlregel toegepast.
In de grofste vorm, ik weet zeker dat we ze allemaal hebben gebruikt. De meer ervaren mensen zullen weten dat het een goed idee is om je stijlen bij te houden waar ze horen: in je stylesheets. Dit is vooral een kwestie van onderhoudbaarheid. Als je inline-stijlen hebt over je sjablonen, verdwaal je wanneer je probeert de juiste plaats te vinden om iets aan te passen. Wanneer je dat ene ding aanpast, moet je nog steeds vijf andere plaatsen vinden waarop dezelfde inline-stijl is toegepast..
Stijlen in stylesheet-bestanden plaatsen heeft nog een ander voordeel: je kunt minder schrijven om hetzelfde te doen, met behulp van generieke stijlregels in plaats van gefocuste regels, maar je zou zelfs een stap verder kunnen gaan en een pre-processor gebruiken.
Stylus, LESS en Sass zijn allemaal CSS-pre-processors. Je kunt ze gebruiken om minder code te schrijven en een schoner eindresultaat te krijgen. Lees dat als: minder werk, minder code, gemakkelijker te onderhouden!
Terwijl Stylus hier de uitzondering is, hebben zowel LESS als Sass WordPress-plug-ins beschikbaar. Gebruik dit als u het niet kunt gebruiken. Er zijn manieren om een stylesheet van een te genereren .minder en .sass bestand slechts eenmaal, zonder deze plug-ins te gebruiken.
Zonder te specifiek te worden, zullen deze pre-processors u toestaan om een stuk minder code te schrijven om met hetzelfde eindresultaat te eindigen. In veel gevallen zullen ze zelfs stijlen samenvoegen, waardoor uw stylesheets schoner en gemakkelijker te onderhouden worden. Een korte tutorial over LESS en een over Sass hebben bestaande tutorials hier op Tuts+.
Wat betreft is beter, dit is zeer gebaseerd op persoonlijke voorkeur. Alle drie de processors groeien en vinden hun weg. U kunt hier een vergelijking vinden met de drie beschikbare processors die uitgebreid zullen uitweiden over wat elk van hun sterke punten zijn.
JavaScript is een geaccepteerd onderdeel geworden van webontwikkeling. Een paar jaar geleden accepteerden we nog steeds dat het normaal was dat onze bezoekers JavaScript hebben uitgeschakeld, maar dat is nu de uitzondering, niet de regel.
Persoonlijk vind ik het nog steeds leuk om mijn sites zonder te bouwen en vervolgens de scripts als een verbetering toe te voegen. Dit heeft het voordeel dat ik de scripts tot een minimum kan beperken, omdat de site al meteen werkt zonder dat het werkt.
De enige echte optie om minder JavaScript te schrijven is om precies dat te doen. Schrijf minder; Het is echter een goede tip om de jQuery-bibliotheek te gebruiken die met WordPress wordt meegeleverd, omdat deze specifiek is ontworpen om u minder te laten schrijven om hetzelfde resultaat te bereiken, maar toch snel en gemakkelijk te gebruiken blijft.
Weet je nog het eerste bericht in deze serie? Ik zei dat websites de afgelopen drie jaar een absurde toename van 235% hadden. Gek, toch? Hier is nog een feit: een groot deel van die toename komt in de vorm van afbeeldingen. Ik betwijfel of iemand hier verbaasd over is, want het gebruik van grote afbeeldingen is een beetje een designtrend geworden, maar toch moeten we ernaar streven om het beter te doen.
Maar hoe?
Zorg ervoor dat als u WordPress gebruikt, u de juiste afbeeldingsformaten voor uw afbeeldingen instelt. Het heeft geen zin om een afbeelding van 500x500 te laden als u alleen een versie van 100x100 in uw ontwerp gebruikt. De volgende optie is om een service te gebruiken zoals smush.it of kraken.io. Beide hebben WordPress-plug-ins beschikbaar en beide doen ongeveer hetzelfde: ze rippen de dingen uit die je niet nodig hebt of wilt, optimaliseer ze en retourneer het kleinst mogelijke bestand dat ze uit je afbeelding kunnen maken zonder kwaliteitsverlies. Smush.it is een gratis service, waar Kraken een gratis oplossing heeft, evenals een betaalde oplossing waarmee je je afbeeldingen meteen kunt optimaliseren.
Inmiddels kun je zien dat ik er alles voor doe. Minder code, minder afbeeldingen, minder alles. Einde van de weg: hoe snel mijn minimalistische systemen ook zijn, ik wil nog steeds die extra mijl van geweldig. Ik zal ervoor zorgen dat mijn code zo onderhoudbaar is als mogelijk, mijn stylesheets zo klein mogelijk zijn en mijn scripts kort. Dat alles is echter in de eerste plaats de voorbereiding. Immers, ik heb nog steeds de eindresultaten verkleind. Met behulp van de pre-processor voor mijn stylesheets ben ik al in staat om een verkleinde editie uit te proberen. Voor scripts zijn vergelijkbare oplossingen beschikbaar.
Hier is het belangrijk om ervoor te zorgen dat uw scripts en stylesheets worden uitgevoerd met behulp van de wp_enqueue_script en wp_enqueue_style functies. Gooi ze niet gewoon in de hoofd van uw sjabloon, maar gebruik function.php om ze in de wacht te slepen en de wp_head functie voer de daadwerkelijke uitvoer uit.
Waarom is dit belangrijk? Omdat als u uw scripts en stylesheets op de juiste manier in de wachtrij plaatst, de verschillende caching- en minificerende plug-ins die beschikbaar zijn, deze goed kunnen combineren in één enkel stylesheet en script.
Caching? Ja, caching. Naast het samenvoegen van stylesheets en scripts bieden deze plug-ins een systeem om de uitvoer van de database of zelfs de volledige pagina die wordt uitgevoerd, in de cache op te slaan. Beide zullen de hoeveelheid tijd die een site nodig heeft om te laden drastisch verminderen. Het is buiten het bestek van deze serie om uitgebreid uit te wijden over de beschikbare caching-plug-ins en hun functies, Adam Burucs schreef een artikel waarin de twee grootste caching-plug-ins werden vergeleken, die een goede plaats is om te starten als u op zoek bent naar informatie over de twee.
Externe bronnen zijn een beetje een interessant deel van alles. Enerzijds zal het gebruik van een externe provider het verkeer van uw eigen server ontladen. Meestal zal het sneller zijn vanwege browserbeperkingen op het aantal verzoeken dat naar een server kan worden verzonden. Maar er is een nadeel. U kunt niet bepalen wat er uit uw externe host komt en u moet er allebei op vertrouwen dat de gegevens hetzelfde blijven en dat de host beschikbaar blijft. In sommige gevallen is het misschien een beter idee om uw bronnen op uw eigen site te houden.
Om samen te vatten: houd het lean, zorg ervoor dat uw stijlbladen en scripts zo klein zijn als u ze kunt krijgen, en verkleinen ze vervolgens nog verder. Upload afbeeldingen met het formaat dat u ze nodig hebt en haal ze door een optimalisatieprogramma zoals smush.it of kraken.io. Gebruik een caching-plug-in als een laatste eindpunt voor uw uitvoer nadat u alle elementen hebt geminimaliseerd voordat u caching introduceert.
Er is nog een deel over in deze reeks waarin we aanvullende verwijzingen zullen behandelen over de onderwerpen die we hebben besproken en hopelijk enkele nuttige aanvullende informatie bieden.
Accentsconagua