Annonse

5 HTML-tips for å lage en hurtig lastende gratis html-websideMin HyperText Markup LEngelskferdigheter (HTML) er rustne for visse, men kanskje det kvalifiserer meg for denne artikkelen. Tilbake i dagen da venner fremdeles var på TV og AOL sendte ut gratis coasters og mini-frisbees daglig, jeg opprettet nettsteder for å laste på oppringt modem. Etter hvert som tiden gikk hadde jeg nerven til å tenke at det fortsatt er mange mennesker der ute med ikke-bredbåndstilkoblinger (oppringt) og fortsatte å designe nettsteder basert på det.

Til slutt ga jeg opp webdesign og utvikling Vil du lære nettdesign? 7 YouTube-kanaler for å komme i gangYouTube har tusenvis av videoer og kanaler for nybegynnere med webdesign. Her ser vi på noen av de beste for å komme i gang. Les mer da kvaliteten på innholdet begynte å bli presset til siden etter mengde innhold. Flash-nettsteder, mange bilder, pop-ups, pop-unders, glidebrytere, etc. Stol på kvalitetsinnholdet ditt, og du trenger ikke dette fluffet. Stol på innholdet ditt, og du kan gjøre nettstedet ditt raskt.

Med et nettsted som er vert for en gratis tjeneste, er det raskere

instagram viewer
helt sikkert bedre. Hvorfor? Fordi ‘gratis’ har en tendens til å tiltrekke seg mange mennesker og serveren må koke ut siden din pluss tusenvis av andre folks sider som ikke er optimalisert. Det er som å prøve å passere en konvoi av Kenworths pull-logger med Jimmy haulin-svinene dine. Men hvis du har en liten Porsche, blir det mye lettere å gjøre.

Her er noen tips for å trimme fettet, i ingen spesiell rekkefølge.

1. Bruk tabeller sparsomt

Tabeller er en fangst-22. I begynnelsen ble de brukt til å legge ut design så vel som å sette innhold i tabellformat. Etter hvert som designlayoutene ble mer komplekse, ble bordene større og nestet dypere, og det betyr alltid en redusert lastetid.

Cascading Style Sheets (CSS) fulgte med og hjalp virkelig problemet med å bruke tabeller til layout. Dessverre kunne ikke nettleserprodusentene se ut til å pakke hodet rundt ideen om standarder - og kan fortsatt ikke gjøre det. Det som så bra ut i CSS i Firefox så ut som en hundefrokost i IE og muligens ikke engang ga i Safari. Ikke kom meg i gang IE5 på en Mac. Jeg er fremdeles i terapi over det.

Bruk bare tabeller til å lage innhold som må være i et tabellformat Tableizer: Generer HTML-tabell fra Excel-regnearket Les mer - som en prisliste eller hockeystatistikk. Det reduserer antall bord og dybden av hekkingen, noe som betyr raskere belastningstid. Lære CSS Topp 5 nettsteder for å lære CSS online Les mer vil utgjøre en stor forskjell, hvis du må ha et fancy oppsett.

2. Bruk HTML for å lage farge

Jepp, jeg er kanadisk, så det er farge med et "du" for meg. Jeg vet at HTML er Amerika-sentrisk, så attributtet er ‘farge’. Lær din heksadesimale fargekoder og bruk dem til å livne opp innhold i stedet for bilder.

Prøv å legge til fargeattributtet til HTML-elementene dine for å krydre det. Dette fungerer spesielt godt i tabeller, eller body-taggen, slik:

Hvis du var en nettleser, ville du vært raskere med å laste inn bare 7 tegn på #FF00FF eller et bilde på 10 × 10 piksler av fargefuschien noen tusen ganger? Det er et retorisk spørsmål, du på bakerste rad. Legg hånden ned.

3. Link til skript / stilark

Hvis du bruker en viss JavaScript (JS) eller CSS gjentatte ganger på nettstedet ditt, tenk på å lage sin egen fil og ringe den, i stedet for å legge den på hver side. Siden en nettleser har en tendens til å cache en fil og ringe den filen først før du sjekker med serveren, vil nettleseren din allerede ha det skriptet eller CSS klar til bruk. Det betyr mindre HyperText Transfer Protocol (HTTP) samtaler som betyr en raskere innlastingsside.

Slik ringer du en ekstern JavaScript:


–>

Hvorfor la jeg kommentar kodene rundt samtalen for JavaScript? For ikke alle nettlesere er innstilt på å lese skript. Hvis du legger til kommentarmerkene, blir nettleserne med skript deaktivert bare å hoppe over den, i stedet for å gi irriterende feilmeldinger.

Slik ringer du et eksternt cascading-stilark:

Så enkelt er det. Attributtet href er der du angir plasseringen av stilarket. Resten av attributtene forteller nettleseren hva filen er, så den vet hva de skal gjøre med den.

Noen utviklere kan bruke @importere metode for å ringe et stilark. I Internet Explorer er dette som å ha din taggen nederst på filen din, slik at den lastes inn hele siden og deretter gjengir stilene på den. Ikke bra.

4. Kombiner de ofte brukte skriptene i en fil

Mange webutviklere vil bruke de samme skriptene om og om igjen. Kanskje det er et klokkeskript og et kalenderskript og kanskje et slags script med spesialeffekt som de vil bruke på hver side. I stedet for å ha 3 separate filer, med 3 separate HTTP-anrop, legger du skriptene i en fil og ringer den en gang. Det kutter HTTP-anropene dine med 66%, og det blir også hurtigbufret. Du fartsdemon, du! Før du rekker hånden igjen, ja, kan du gjøre det samme med CSS-filer.

5. Ikke bruk HTML for å endre størrelsen på bildene dine

Hvis du vil bruke et bilde som er 1000 × 1000 piksler på websiden din, men du vil at det bare skal være 250 × 250 piksler, kan du endre det i en bilderedigerer. Noen mennesker vil "krympe" bildet ved hjelp av HTML som slik:

Hvis det 1000 × 1000 pikselbildet er 2 MB i filstørrelse, gjør størrelsen på det med HTML ikke filstørrelsen mindre! Faktisk kan det ta lengre tid å laste, for nå må nettleseren legge 10 kilo bæsj i en 2 punds pose, for å si det slik. Ikke en lett oppgave.

Forhåpentligvis vil disse tipsene hjelpe deg. Gi meg et tilbakeblikk i kommentarene hvis du bruker dem eller har noen andre HTML-optimaliserende ideer å dele.

Med mer enn 20 års erfaring innen IT, trening og tekniske bransjer, er det mitt ønske å dele det jeg har lært med noen andre som er villige til å lære. Jeg streber etter å gjøre en best mulig jobb på en best mulig måte, og med litt humor.