Hvordan Reduser webside Last Time

March 4

Jo større og mer populære nettstedet ditt blir, jo mer sannsynlig at du vil finne det bremse ned. Web-sider må lastes raskt, skjønt, så de besøkende bestemme noen ekstra sekunder er ikke verdt ventetiden. Lastetiden optimalisering teknikker for nettsteder inkluderer skrive renere kode, noe som gjør færre hypertekstoverføringsprotokoll (HTTP) forespørsler, ved hjelp av stilark (CSS) kode for å erstatte store bilder og komprimere CSS og Javascript-filer. Du kan bruke alle disse teknikkene sammen for å redusere Web lastetider og holde utålmodige besøkende kommer tilbake til nettstedet ditt.

Bruksanvisning

1 Konsolidere CSS i en enkel, ekstern CSS-fil. Å gjøre dette kutter ned på HTTP-forespørsler, som er forespørsler til serveren hver gang nettleseren laster en ny fil. Åpent hver CSS-fil - med unntak for de som er spesifikke for Internet Explorer (IE) - og deretter kopiere og lime dem inn i en enkelt fil. Lagre den nye CSS-fil og deretter redigere <link> kodene for å gjenspeile endringene. Du bør ende opp med et enkelt <link> -taggen som dette, pluss eventuelle behov for IE:

2 Bruk betinget Javascript hjullastere til laste inn Javascript fallbacks. Fallbacks skape effekter på nettsteder for eldre nettlesere som ikke opprinnelig støtter CSS3 og HTML5. Noen gode, gratis og open-source Javascript lastere inkluderer YepNope.js, Head.js og Require.js. Last ned den du liker best og inkludere den i HTML-koden der du foretrekker å sette Javascript, det være seg i hodet eller under bunnteksten.

3 Bytt clunky hjørne grafikk og gradient bilder med CSS3 teknikker, for eksempel grense radier og gradient bakgrunn. "Smashing Magazine" gjorde en benchmark studie på hastigheten og effektiviteten av CSS2 versus CSS3 teknikker i april 2011 og fant at test websiden lastet 1,5 sekunder raskere når kodet med CSS3 å erstatte grafikk. Gi fallbacks for CSS3 effekter når det er nødvendig, men legger dem betinget å unngå sakker moderne nettlesere.

4 Minify CSS og Javascript-filer etter utbygging. Når du minify en fil, fjerner du alle hvite mellomrom - mellomrom og linjeskift - fra koden, og dette krymper størrelsen på filen. Last ned og installer en minifier, slik som JSMin eller YUI Compressor. Du kan også laste ned HTML5 Boilerplate av Paul irsk, utvikle nettstedet ditt basert på sine filer og bruke sin build script for minimering av alle filer automatisk.

5 Skriv renere CSS-kode. Kjede velgere å unngå å måtte skrive den samme koden igjen og igjen. Her er et eksempel på en kjedet Velger:

h1, h2, h3, h4, h5, h6 {text-transform: store bokstaver;}

Listen CSS velger alle seks overskriftskodene og deretter setter sin «text-transform" eiendom til "store bokstaver".

Hint

Design og utvikle for moderne nettlesere først og deretter teste og gi fikser for eldre Internet Explorer-versjoner.
Når du oppgir fallbacks, vurdere om den effekten du ønsker å støtte i eldre nettlesere er absolutt nødvendig for brukeropplevelsen. Ikke alle besøkende må se avrundede hjørner.
Sikkerhetskopier nettstedets filer før du redigerer dem.