5 HTML-tips om een ​​snel ladende gratis website te maken

Advertentie

Mijn HyperText Markup Ltaalvaardigheid (HTML) is zeker roestig, maar misschien kwalificeert dat mij voor dit artikel. Terug op de dag dat Vrienden was nog steeds op tv en AOL zond dagelijks gratis onderzetters en mini-frisbees uit. Ik maakte websites om te laden op inbelmodems. Naarmate de tijd verstreek, had ik het lef om te denken dat er nog steeds veel mensen zijn met niet-breedband (inbel) verbindingen en op basis daarvan websites te blijven ontwerpen.

Uiteindelijk gaf ik het op webdesign en ontwikkeling Wilt u webdesign leren? 7 YouTube-kanalen om u op weg te helpenYouTube heeft duizenden video's en kanalen voor beginners in webdesign. Hier bekijken we enkele van de beste om aan de slag te gaan. Lees verder toen de kwaliteit van de inhoud opzij werd geschoven door de hoeveelheid inhoud. Flash-sites, veel afbeeldingen, pop-ups, pop-unders, schuifregelaars, enz. Vertrouw op uw kwaliteitscontent en u heeft deze pluis niet nodig. Vertrouw op uw inhoud en u kunt uw website razendsnel maken.

Met een website die wordt gehost op een gratis service, is sneller Vast en zeker beter. Waarom? Omdat ‘gratis’ de neiging heeft om veel mensen aan te trekken en de server uw pagina moet verdelen, plus duizenden pagina's van andere mensen die niet zijn geoptimaliseerd. Het is alsof je probeert een konvooi van Kenworths logboeken door te geven met je Jimmy haulin's varkens. Maar als je een kleine Porsche hebt, wordt dat een stuk eenvoudiger.

Hier zijn enkele tips om het vet in willekeurige volgorde te verwijderen.

1. Gebruik tabellen spaarzaam

Tabellen zijn een catch-22. In het begin werden ze gebruikt om ontwerp op te stellen en inhoud in tabelformaat te plaatsen. Naarmate de ontwerplay-outs complexer werden, werden de tafels groter en dieper genest, en dat betekent altijd een vertraging van de laadtijd.

Coplopend Style Sheets (CSS) kwam langs en hielp echt het probleem van het gebruik van tabellen voor lay-out. Helaas leken de browsermakers niet met hun hoofd rond het idee van standaarden te kunnen - en dat kan nog steeds niet. Wat er geweldig uitzag in CSS in Firefox, leek op een hondenontbijt in IE en werd mogelijk niet eens weergegeven in Safari. Laat me niet beginnen IE5 op een Mac. Daar ben ik nog steeds in therapie over.

Gebruik alleen tabellen om inhoud op te maken die in een tabelformaat Tableizer: HTML-tabel genereren vanuit Excel-spreadsheet Lees verder - zoals een prijslijst of hockeystatistieken. Dat vermindert het aantal tafels en de nestdiepte, wat snellere laadtijden betekent. CSS leren Top 5 sites om CSS online te leren Lees verder zal een groot verschil maken, als je een mooie lay-out moet hebben.

2. Gebruik HTML om kleur te creëren

Ja, ik ben Canadees, dus het is kleur met een ‘u’ voor mij. Ik weet dat HTML op Amerika is gericht, dus het kenmerk is ‘kleur’. Leer je hexidecimale kleurcodes en gebruik ze om inhoud op te fleuren in plaats van afbeeldingen.

Probeer het kleurkenmerk toe te voegen aan uw HTML-elementen om het op te fleuren. Dit werkt vooral goed in tabellen of de body-tag, zoals dergelijke:

Als u een browser was, zou u sneller een eenvoudige 7 tekens van # kunnen ladenFF00FF of een afbeelding van 10 × 10 pixels van de kleur fuschia een paar duizend keer? Dat is een retorische vraag, jij op de achterste rij. Doe je hand naar beneden.

3. Link naar scripts / stijlbladen

Als je een bepaalde gebruikt JavaScript (JS) of CSS herhaaldelijk op uw website, denk erover na om hun eigen bestand te maken en het aan te roepen, in plaats van het op elke pagina te plaatsen. Aangezien een browser de neiging heeft om een ​​bestand in de cache op te slaan en dat bestand eerst aan te roepen voordat het bij de server controleert, heeft uw browser dat script of CSS al klaar voor gebruik. Dat betekent minder HyperText Toverboeking Protocol (HTTP) aanroepen, wat een snellere laadpagina betekent.

Hoe een extern JavaScript aan te roepen:

–>

Waarom heb ik die commentaartags rond de oproep voor JavaScript geplaatst? Omdat niet elke browser is ingesteld om scripts te lezen. Door de commentaartags toe te voegen, slaan de browsers met scripting het gewoon over, in plaats van vervelende foutmeldingen te geven.

Hoe een extern trapsgewijs opmaakmodel aan te roepen:

Het is zo simpel. Het kenmerk href is waar u de locatie van uw stijlblad instelt. De rest van de kenmerken vertelt de browser wat dat bestand is, zodat hij weet wat hij ermee moet doen.

Sommige ontwikkelaars gebruiken de @importeren methode om een ​​stylesheet aan te roepen. In Internet Explorer is dit alsof je je hebt tag onderaan uw bestand, waardoor het de hele pagina laadt en DAARNA de stijlen erop rendert. Niet goed.

4. Combineer uw veelgebruikte scripts in één bestand

Veel webontwikkelaars zullen steeds dezelfde scripts gebruiken. Misschien is er een klokscript en een kalenderscript en misschien een soort speciaal effect-script dat ze op elke pagina zullen gebruiken. In plaats van 3 afzonderlijke bestanden te hebben, met 3 afzonderlijke HTTP-aanroepen, plaatst u de scripts in één bestand en roept u het eenmaal aan. Dat vermindert uw HTTP-oproepen met 66% en het wordt ook in de cache geplaatst. Jij speed demon, jij! Voordat je je hand weer opsteekt, ja, je kunt hetzelfde doen met CSS-bestanden.

5. Gebruik geen HTML om de grootte van uw afbeeldingen te wijzigen

Als u een afbeelding van 1000 × 1000 pixels op uw webpagina wilt gebruiken, maar u wilt dat deze slechts 250 × 250 pixels is, wijzig deze dan in een afbeeldingseditor. Sommige mensen 'verkleinen' de afbeelding met behulp van HTML als volgt:

Als die afbeelding van 1000 × 1000 pixels een bestandsgrootte heeft van 2 MB, wordt de bestandsgrootte niet verkleind met HTML, maar niet kleiner! Het kan zelfs langer duren om te laden, omdat de browser nu 10 pond poep in een zak van 2 pond moet doen, om zo te zeggen. Geen gemakkelijke taak.

Hopelijk helpen deze tips je. Geef me een commentaar in de reacties als je ze gebruikt of als je andere HTML-optimalisatie-ideeën hebt om te delen.