5 HTML-tips för att skapa en snabbladdningsfri webbplats

Annons

Min HYperText Markup Lengelska (HTML) färdigheter är rostiga för vissa, men det kanske kvalificerar mig för den här artikeln. Tillbaka på dagen då Vänner var fortfarande på TV och AOL skickade ut gratis underlägg och mini-frisbees dagligen, jag skapade webbplatser för att ladda på uppringda modem. När tiden gick hade jag nerven att tro att det fortfarande finns många människor där ute med icke-bredbandsanslutningar (uppringd) och fortsatte att designa webbplatser baserade på det.

Till slut gav jag upp webbdesign och utveckling Vill du lära dig webbdesign? 7 YouTube-kanaler för att komma igångYouTube har tusentals videor och kanaler för nybörjare av webbdesign. Här tittar vi på några av de bästa för att komma igång. Läs mer när kvaliteten på innehållet började pressas åt sidan av mängden innehåll. Flash-webbplatser, massor av bilder, popup-fönster, pop-unders, reglage etc. Lita på ditt kvalitetsinnehåll och du behöver inte denna fluff. Lita på ditt innehåll och du kan göra din webbplats flammande snabbt.

Med en webbplats som är värd på en gratis tjänst är det snabbare definitivt bättre. Varför? Eftersom 'gratis' tenderar att locka många människor och servern måste rensa ut din sida plus tusentals andra människors sidor som inte är optimerade. Det är som att försöka passera en konvoj av Kenworths pull-loggar med din Jimmy haulin-svin. Men om du har en liten Porsche blir det mycket lättare att göra.

Här är några tips för att trimma fettet, i ingen särskild ordning.

1. Använd tabeller sparligt

Tabellerna är en fångst 22. I början användes de för att utforma design och lägga innehåll i tabellformat. När designlayouterna blev mer komplexa blev borden större och kapslade djupare, och det betyder alltid en långsammare lasttid.

Cascading STyle Sheets (CSS) kom med och hjälpte verkligen problemet med att använda tabeller för layout. Tyvärr kunde inte webbläsartillverkarna tycka slingra sig runt tanken på standarder - och kan ändå inte. Det som såg bra ut i CSS i Firefox såg ut som en hundfrukost i IE och möjligen inte ens framförde i Safari. Låt mig inte komma igång IE5 på en Mac. Jag är fortfarande i terapi över det.

Använd bara tabeller för att utforma innehåll som måste vara i en tabellformat Tableizer: Generera HTML-tabell från Excel-kalkylblad Läs mer - som en prislista eller hockeystatistik. Det minskar antalet bord och djupet för häckning, vilket innebär snabbare belastningstider. Lärande CSS Topp 5 webbplatser för att lära sig CSS online Läs mer kommer att göra en stor skillnad om du måste ha en snygg layout.

2. Använd HTML för att skapa färg

Jej, jag är kanadensisk, så det är färg med en "u" för mig. Jag vet att HTML är Amerika-centrerat så attributet är 'färg'. Lär dig hexidecimala färgkoder och använd dem för att leva upp innehåll istället för bilder.

Försök lägga till färgattributet till dina HTML-element för att krydda det. Detta fungerar särskilt bra i tabeller eller karosserietikett, som sådant:

Om du var en webbläsare skulle du bli snabbare med att ladda enkla 7 tecken på #FF00FF eller en bild på 10 × 10 pixlar av färgfuschien några tusen gånger? Det är en retorisk fråga, du i den bakre raden. Lägg ner handen.

3. Länk till skript / stilark

Om du använder en viss JavaScript (JS) eller CSS upprepade gånger på din webbplats, tänk på att skapa sin egen fil och ringa den, istället för att lägga den på varje sida. Eftersom en webbläsare tenderar att cache en fil och ringa den filen först innan du kontrollerar med servern har din webbläsare redan det skriptet eller CSS redo att användas. Det betyder mindre HYperText Tverför Protocol (HTTP) samtal vilket innebär en snabbare laddningssida.

Hur man ringer ett externt JavaScript:

–>

Varför satte jag kommentarerna runt samtalet för JavaScript? Eftersom inte alla webbläsare är inställda på att läsa skript. Att lägga till kommentartaggarna gör att webbläsare med skript inaktiverade bara hoppar över det istället för att ge irriterande felmeddelanden.

Hur man ringer ett externt kaskadformat:

Det är så enkelt. Attributet href är där du ställer in platsen för ditt stilark. Resten av attributen berättar webbläsaren vad filen är så att den vet vad man ska göra med den.

Vissa utvecklare kan använda @importera metod för att ringa ett stilark. I Internet Explorer är det som att ha din tagg längst ner i din fil, vilket gör att den laddar hela sidan och sedan återger stilarna på den. Inte bra.

4. Kombinera dina vanligt använda skript i en fil

Många webbutvecklare kommer att använda samma skript om och om igen. Kanske finns det ett klockskript och ett kalenderskript och kanske ett slags specialeffektskript som de kommer att använda på varje sida. I stället för att ha tre separata filer, med 3 separata HTTP-samtal, lägger du skripten i en fil och ringer det en gång. Det minskar dina HTTP-samtal med 66% och det blir också cachelagrat. Du påskyndar demonen, du! Innan du räcker upp handen igen, ja, du kan göra samma sak med CSS-filer.

5. Använd inte HTML för att ändra storleken på dina bilder

Om du vill använda en bild som är 1000 × 1000 pixlar på din webbsida, men du vill att den bara ska vara 250 × 250 pixlar, ändra den i en bildredigerare. Vissa människor kommer att 'krympa' bilden med hjälp av HTML som sådan:

Om den bilden på 1000 × 1000 pixlar är 2 MB i filstorlek, ändrar du inte storlek på den med HTML! I själva verket kan det ta längre tid att ladda, för nu måste webbläsaren lägga 10 kilo poop i en 2 pund väska, så att säga. Inte en lätt uppgift.

Förhoppningsvis kommer dessa tips att hjälpa dig. Ge mig ett shoutback i kommentarerna om du använder dem eller har några andra HTML-optimeringsidéer att dela.