Hei kjære lesere av bloggsiden. Sannsynligvis er du allerede lei av emnet å øke hastigheten på nettstedinnlasting (), som jeg viet brorparten av artikler publisert i januar. Men hva kan jeg gjøre, jeg vil skissere alt som ble forstått og gjort for å få fart på denne bloggen, helt til det lumske minnet utslettet nyansene og viktige poenger.
I dag vil jeg prøve å systematisere alt jeg allerede har skrevet om hastighetsoptimalisering, samt legge til essensielle punkter for å redusere belastningen på vertsserveren litt ved å bruke ikke dynamisk, men statisk Gzip-komprimering.
Hvordan du raskt kan øke lastehastigheten til nettstedet ditt
Første gang jeg kjørte Page Speed for blogghjemmesiden min, så jeg dette triste bildet:
Kun 72 poeng av 100 mulige og en haug med kommentarer markert med rødt. Riktignok, etter å ha fulgt nesten alle anbefalingene som dette pluginet ga meg, fikk hovedsiden en høyere karakter på 94 poeng.
Men i tillegg til Page Speed, kan du veldig tydelig vurdere hastigheten på å laste et nettsted og se alle de lastede objektene i - Pingdom og lignende.
Til å begynne med ble nesten 90 objekter (ccs, js, bilder) lastet og hver av dem trengte en separat http-forespørsel. Men etter å ha analysert alle nedlastede objekter ved å bruke de ovennevnte nettjenestene, i tillegg til å følge Page Speed-rådene, klarte jeg å redusere antallet til tre dusin, noe som ikke kunne annet enn å påvirke den generelle hastigheten:
Vel, la oss nå huske alle metodene i rekkefølge. Og du bør starte optimalisering, sannsynligvis, i rekkefølgen til å vise problemområder i Page Speed-vinduet, fordi disse vil være de mest effektive og ikke vanskelige trinnene å implementere - det som kalles "billig og munter".
Derfor gjorde jeg det første (ccs, js, bilder) i nettleserne til besøkende (dvs. dere, mine kjære lesere).
Ja, ja, ved å bruke nettserverinnstillingene kan du kontrollere oppførselen til de besøkendes nettleser. I dette tilfellet forteller den første den andre tiden hvor statiske objekter skal lagres i hurtigbufferen for ikke å be om dem igjen fra serveren.
Dette er ved første øyekast en ubetydelig innstilling, men det kan gjøre underverker ved å øke hastigheten på innlasting av sider på ressursen din for de besøkende som allerede har besøkt den én gang. nettleserbufferen deres inneholder allerede stilarket og skriptfilene, samt bilder fra malen din, som vil være den samme for alle sider.
Dessverre fungerer ikke alltid metodene for å administrere gjennom .htaccess som jeg beskrev, på grunn av forskjellige årsaker (mangel på den nødvendige modulen, etc.), så du kan prøve å kontakte hosteren din om dette problemet, fordi han også vil være interessert i dette, altså Til. optimale hurtigbufferinnstillinger i brukernettlesere vil redusere belastningen av ressursen din på hostingen.
Det neste effektive trinnet for å øke lastehastigheten kan være å kombinere eksterne CSS-stilfiler eller JS-skript. Les om det, og som jeg fant ut.
Men jeg kunne ikke kombinere eksterne skript, sannsynligvis på grunn av manglende forståelse selv for det grunnleggende om JavaScript. Riktignok hadde jeg bare to eksterne filer med skript, så tapet i lastehastighet for nettstedet ville ikke være stort.
Men i tillegg til å kombinere eksterne CSS-stiler og skript (dette gjøres for å redusere det totale antallet innlastede objekter, noe som vil redusere antallet http-forespørsler til serveren), kan disse stil- og skriptfilene komprimeres veldig effektivt ved å bruke Gzip ( faktisk er dette den samme Zip, som du aktivt bruker på datamaskinen din).
Det er mulig å komprimere CSS- og Js-filer flere ganger ved hjelp av Gzip, men du kan redusere størrelsen på disse filene ytterligere ved å forhåndsoptimalisere koden deres.
Så du må laste ned til datamaskinen din alle eksterne Css- og Js-filer som er involvert i lasting av sidene (etter at du har slått dem sammen, vil det ikke være vanskelig) og lage en arkivkopi av hver av dem med .gz-utvidelsen. Dette kan gjøres ved hjelp av et gratis program 7zip... Deretter, la meg vise deg med et eksempel, fordi det er nytteløst å teoretisere her.
La oss ta bloggens hovedstilark, style.css, som et eksempel. Etter at jeg har pakket den i Gzip ved hjelp av 7zip-programmet, vil jeg ha et style.css.gz-arkiv.
Men siden noen nettlesere vil ikke inkludere en stilfil med filtypen .gz, så fjerner vi endelsen .gz fra den og vi ender opp med style.css igjen, men som faktisk er et arkiv (ikke forvirret ennå?).
Men å bare erstatte den originale style.css-filen på serveren (ikke Gzipped ennå) med arkivet vi nettopp opprettet, men fortsatt kalt style.css, vil ikke være nok.
Tross alt støtter enkelte nettlesere fortsatt ikke komprimering (vanligvis er dette gamle versjoner som fortsatt brukes av brukere), så ved siden av style.css, som faktisk vil være et arkiv (husk at vi fjernet .gz-utvidelsen fra det), vi trenger vil sette den originale ukomprimerte stilfilen.
Men vi må navngi det annerledes enn style.css. For å gjøre dette kan du endre navn på den, for eksempel på denne måten: style.nogzip.css. Nå på serveren, i mappen med WordPress-temaet, vil jeg ha to stilfiler:
- style.css - arkiv med stripped.gz-utvidelse
- style.nogzip.css - en vanlig ukomprimert stilfil som må leveres til nettlesere som ikke støtter komprimering
Du må gjøre denne operasjonen for alle eksterne stiler og skript (Css og Js) som lastes inn sammen med sidene til ressursen din. Jeg hadde bare fire av dem: den viktigste stilen, der jeg også la til egenskapene til noen WordPress-plugins, samt en skriptfil fra temamappen og to eksterne skript fra.
Nå, for at statisk komprimering for eksterne stiler og skript skal fungere, må du åpne for redigering av .htaccess fra rotmappen til ressursen din og erstatte koden som er ansvarlig for Gzip med følgende modifiserte kode:
Hvis du brukte andre navn enn style.nogzip.css når du endret navn på de originale filene med stiler og skript, må du erstatte masken $ 1.nogzip. $ 2 med din egen i den tilsvarende kodelinjen. Generelt er det alt.
Nå vil ikke serveren komprimere Css og Js med en gang hver gang, men vil umiddelbart sende nettlesere en forhåndskomprimert kopi av deg, og i tilfelle en nettleser som ikke forstår Gzip - den originale versjonen av en fil som ligner stil .nogzip.css.
På forsiden av det vil det være en liten økning i hastigheten på lasting av nettstedet og en reduksjon i belastningen på ressursen din på hosting. Men etter et par dager ble jeg forvirret. Tilsynelatende har utseendet til WordPress-administrasjonsområdet endret seg dramatisk - stylingen har falt av.
Men problemet ble raskt løst ved å utføre manipulasjonene beskrevet ovenfor med stilfilen som ble brukt i administrasjonspanelet. I mitt tilfelle var det colors-classic.css fra mappen:
/ wp-admin / css
Deretter ønsket jeg å bruke statisk Gzip-komprimering for HTML-filer, som også komprimeres av serveren i farten, og skaper en ekstra belastning. Her fant jeg en ganske enkel løsning for WordPress. Faktum er at jeg har brukt det veldig lenge.
I innstillingene er det et "Compression"-område, som, som jeg først trodde, er ansvarlig for kompakt plassering av hurtigbufrede sider på hosting-harddisken. Det virket for meg at arkivering av bufrede sider ville spise opp unødvendig tid fra prosessoren og trygt slå den av.
Men etter å ha lett etter informasjon om Gzip-komprimering av HTML-sider litt, endret jeg min mening om disse komprimeringsinnstillingene i Hyper Cache-plugin.
Det ser ut til at ved å merke av i boksen "Aktiver komprimering", aktiverer vi dermed foreløpig komprimering av bufrede bloggsider ved hjelp av Gzip-algoritmen.
Jeg antar ikke å si dette hundre prosent, men etter å ha aktivert komprimeringen i Hyper Cache-innstillingene, har jeg observert en reduksjon i belastningen på serveren i lang tid. Generelt ser det ut til at brystet, som alltid, nettopp åpnet seg.
Forresten, hvis prosjektet ditt er bygget på grunnlag av Joomla, så er det flere veldig gode (i følge brukeranmeldelser) komponenter for det som lar deg bruke metodene jeg har beskrevet for å øke hastigheten på nettsiden lastes så mye som mulig, men samtidig vil alt være mye lettere, fordi mye gjøres automatisk med minimale installasjonskostnader.
Selv har jeg ikke testet disse komponentene enda, men så fort jeg er klar skal jeg definitivt skrive om dem. Foreløpig vil jeg bare gi lenker til disse komponentene for Joomla: jFinalizer og WEBO Site SpeedUp.
Optimalisering av grafikk og redusering av antall forespørsler
Dessuten kan grafikkoptimalisering ha en svært betydelig innvirkning på nedlastingshastigheten. Som jeg skrev tidligere,. Men dette vil bare være praktisk i tilfelle av et lite antall av dem.
Personlig brukte jeg det til batchoptimalisering, som jeg allerede har skrevet om i noen detalj. Du kan også bruke en annen veldig populær nettjeneste for å komprimere bilder uten å miste kvalitet fra - Smush.it. Men graden av bildekomprimering i PunyPNG virket høyere for meg, muligens på grunn av bruken av mer vellykkede skript.
Jeg kopierte mappen med bildene av bloggen min til datamaskinen min og lastet opp alle (i grupper på 15, fordi det er en slik begrensning i PunyPNG) til denne nettjenesten, og lastet deretter ned et generelt arkiv som inneholder allerede optimaliserte bilder fra bloggen min .
Generelt, etter å ha brukt en halvtime, klarte jeg å komprimere PNG-bilder med omtrent 7 prosent i gjennomsnitt og 5 prosent.
Som et resultat har den totale størrelsen på alle bildene som brukes på bloggen min redusert med flere megabyte, noe som utvilsomt vil påvirke både økningen i nettstedets lastehastighet og vil redusere belastningen på vertsserveren litt.
Vel, den siste, så vel som en av de mest effektive måtene å øke hastigheten på, kan være å redusere antallet http-forespørsler som vil bli generert når sidene til ressursen din lastes inn. Du kan redusere dem ved å redusere antallet objekter som lastes ned sammen med nettsiden. Vi snakket allerede i begynnelsen av denne artikkelen om å kombinere eksterne Css- og Js-filer bare for dette formålet.
Men brorparten av forespørslene går alltid til å laste grafikk. Dette kan være bakgrunnsbilder som ble nevnt i stilfilen, eller bilder som er direkte spesifisert i HTML-koden til siden.
For å redusere antallet må du analysere om det er nødvendig å laste inn dette eller det bildet sammen med siden. Dermed ble jeg kvitt et par dusin ekstra http-forespørsler. De samme bakgrunnsbildene fra malen, som likevel vil vise seg å være nødvendige for funksjonen til ressursen din, kan kombineres til den såkalte. Som et resultat, i stedet for et dusin forespørsler, trenger du bare å gjøre en.
Generelt vil en økning i lastehastigheten på nettstedet uunngåelig føre til minst en liten, men økning i belastningen på hostingen, som med høy trafikk kan være dråpen. Nå, med 5000 tusen besøkende per dag, nærmer belastningen på serverprosessoren det maksimalt tillatte.
Jeg begynte allerede å tenke på et så radikalt skritt, hvordan gjøre bloggen min nesten statisk, i rotmappen som vanlige HTML-filer vil ligge, og hele WordPress-motoren vil fungere i en egen mappe. Dermed vil belastningen minimeres.
Dette kan gjøres i WordPress ved å bruke mirakelplugin Really Static. Riktignok har versjonen hans ennå ikke vokst til en, men anmeldelser av arbeidet hans er ekstremt positive. Faktisk er det en komplett analog av det velkjente Maxsite Cache-manuset, som for eksempel brukes av Mikhail Shakin på bloggen hans.
Prisen for å redusere belastningen vil være tap av noe funksjonalitet, men jeg tror at med de riktige innstillingene for å oppdatere cachen (i dette tilfellet vil det være vanlige HTML-sider, som på nettsteder i begynnelsen av dette årtusenet) være mulig å redusere alle disse ulempene til et minimum. Jeg merker i alle fall ingen kriminalitet hos Shakin når jeg leser bloggen hans.
Hvis noen allerede har erfaring med Really Static WordPress-plugin, så vil jeg være veldig takknemlig hvis du gir tilbakemelding om det i kommentarfeltet. Takk for oppmerksomheten. Artikkelen har i det stille tatt slutt. Det er på tide å polere det og forberede det for publisering.
Lykke til! Vi sees snart på sidene til bloggsiden
du kan se flere videoer ved å gå til");">
Du kan være interessert
Gzip-komprimering for å øke hastigheten på lasting av nettsider – hvordan aktiverer du det for Js, HTML og Css ved hjelp av .htaccess-filen 
Oppretting av CSS-sprites i online-generatoren Sprites Me for å redusere antall forespørsler til serveren 
Måling og økning av nettstedshastighet i GTmetrix, samt konfigurering av jQuery-biblioteklasting fra Google CDN 
Hvordan få et raskt nettsted - optimalisering (komprimering) av bilder og skript, samt å redusere antall Http-forespørsler 
Optimalisering og komprimering av CSS i Page Speed - hvordan deaktivere eksterne stilfiler og kombinere dem til én for raskere lasting
Nettstedets hastighet er en av de viktigste indikatorene når du lager et nettsted og Internett-applikasjoner.
I følge undersøkelser fra forskjellige analytikere fra Google ser folk vanligvis mindre enn de første 25 sekundene av en video, og noen til og med mindre enn 10 sekunder.
Basert på dette vil det være lurt for deg å gjøre innlastingen av nettstedets innhold så raskt som mulig, slik at brukerne kan bestemme om de vil bruke det videre eller ikke.
Dette kan være en overfladisk dom, men folk bedømmer nettsteder etter lastehastigheten, noe som skjer ofte, og vi må ta denne tingenes tilstand for gitt.
Når du optimerer nettstedet, må du være spesielt oppmerksom på hastigheten på lasting. Heldigvis finnes det mange gode plugins i WordPress og andre motorer som hjelper oss med dette. Denne artikkelen vil imidlertid ta hensyn til at nettstedet ditt kan være på en annen plattform enn WordPress, så vi vil fortelle deg om flere effektive måter å optimalisere nettstedet ditt, uavhengig av hvor det er vert. Før du begynner å øke hastigheten på nettstedet ditt, bruk tjenestene i bloggartikkelen din for å måle resultatene før og etter optimalisering.
Nettstedakselerasjon ved bildeoptimalisering
Optimalisering av bildestørrelse kan være utfordrende, og det er mange alternativer å velge mellom. Disse kan inkludere filformater, ulike bildeoptimaliseringsverktøy, kode og CSS beste praksis for å hjelpe deg med å lagre og samhandle med bilder på best mulig måte.
La oss se på et eksempel for å vise hvorfor dette er så viktig. Nylig har iOS-utviklere og applikasjonsskapere funnet ut at å gjengi en ferdig tegning på Retina-skjermer tar 2-4 ganger mer tid og plass på diskplassen til en mobiltelefon enn det var i tidligere versjoner med en enkel nedlasting og oppstart av applikasjonen.
Dette er ikke så relevant for webutviklere og designere, men det viser hvor viktig det er å vise et bilde på tvers av ulike plattformer. Nedenfor er noen av de viktigste, etter min mening, anbefalingene du bør vurdere når du optimaliserer bilder for nettet.
Bildeformater
Bildeformatering er det viktigste temaet fordi alle vet at ulike formater påvirker hastigheten et bilde lastes inn med. Det er imidlertid en etablert mening om denne poengsummen, som vi de facto kan bruke som standard. JPEG for bilder, GIF for flate bilder med få farger og PNG for alle andre. De fleste webdesignere og utviklere jeg kjenner bruker PNG til stort sett alt bortsett fra monokrome og tofargede knapper, hvor de bruker GIF-er.
Nå kan du leke deg med de gitte spesifikasjonene, men husk alltid at det er standarder når du skal lagre små lyse bilder og store og tunge. Hvis du er en fotograferingsside og bildene dine tar lengre tid å laste enn andre nettsteder, kan du prøve metodene nedenfor.
Bildekode
Det verste vi kan gjøre og negativt påvirke innlastingshastigheten til bildet er å la koden automatisk dimensjonere bildet. Vel, du kan si: "La oss la koden gjøre ___ for oss." I dette tilfellet sier de vanligvis: "Du kan gjøre det bedre - gjør det selv", og dette er virkelig riktig. Ved å bruke indikatorer som bredde = '60px' høyde = '50px' kan du virkelig redusere belastningen på serveren og tiden det tar å laste bildet, siden serveren leser informasjon om siden og ser oppgavene som er tildelt den. Sørg derfor for at du er på rett spor og gjør det med alle bildene dine.
Verktøy for bildeoptimalisering
Verktøy er alltid nyttige. Ok, mesteparten av tiden ... Noen ganger kommer de i veien og distraherer, men i dette tilfellet vil de virkelig være veldig nyttige. Hvis du klarer å finne et flott bildeoptimaliseringsverktøy, må du først og fremst skrive om det i kommentarfeltet, da vi alltid ser etter det beste. De neste verktøyene er mine favoritter. Jeg liker ImageOptim for Mac og Riot for Windows. De er veldig forskjellige fra hverandre, men de tjener samme formål.
Du kan legge inn et bilde i dem, og de vil finne en metode for å optimalisere det, og så vil de gi det endelige resultatet som skal lagres i samme format som det ble lastet inn. Verktøyene er veldig gode og gjør jobben sin bra. I tillegg har de en bildeanalysefunksjon som vil indikere hvilket format som er best for det. Vi kan enkelt si at dette er et av de mest essensielle verktøyene, foruten en tekst- og grafisk editor, selvfølgelig.
Akselererer nettstedinnlasting på grunn av CSS- og JavaScript-optimalisering
CSS og JavaScript er viktige språk når det kommer til webdesign og spesielt når du skal lage dynamisk innhold. Jeg opplever at folk ofte glemmer at de kan optimalisere sitt dynamiske innhold og heller ikke forbedre JavaScript og CSS. Dette er selvfølgelig ikke de mest nødvendige tingene for små nettsteder, men for store er det veldig viktig, spesielt for de som er avhengige av et stort antall designbeslutninger. La oss ta en titt på noen få "Regler for JavaScript og CSS" som er ganske godt standardiserte når du bygger nettapplikasjoner.
Første regel for CSS og JavaScript
- Hvis du kan gjøre det i CSS, så gjør det i CSS
Vi glemmer ofte at vi har et så flott verktøy, og jeg vil si at CSS-systemet er det mest fantastiske en webdesigner har. Jeg vil også legge til at designere er for raske til å overføre arbeid til Photoshop (men dette er jobben deres og vi skal ikke klandre dem for det). Når du skal designe, bør du vurdere det faktum at i tillegg til en grafisk editor, kan nettleseren din også hjelpe deg litt hvis du bruker CSS3. Dra full nytte av det! Med et verktøy der oppsett kan gjøres veldig raskt, trenger du ikke lenger bruke HTML for å legge dem ut. Jeg er sikker på at du kan gjøre alt med CSS!
Andre regel for CSS og JavaScript
- Krympe, krympe, krympe!
Minimering av koden din er kanskje en av de enkleste og beste måtene å forbedre nettsidens lastehastighet. Vær oppmerksom på at vi snakker om millisekunder, men de har også en positiv effekt, spesielt ved bruk av for eksempel jQuery-biblioteket. Husk at ved å installere plugin for JavaScript / CSS og sette innstillingene for å laste ned en redusert versjon av nettstedskoden (du trenger ikke å redigere den), vil du forbedre nettstedets lastehastighet, så gjør det! Mine favorittverktøy er Code Minifier for Mac, Minify for Windows og JSCompress / CSSCompressor for de som ønsker å jobbe i en blandet plattform for flere nettlesere. Ha en god reduksjon!
Tredje regel for CSS og JavaScript
- Si "nei, nei" til In-line
Det er dårlig praksis å bruke in-line i CSS eller JavaScript, spesielt når det gjelder CSS. Problemet her er ikke bare at dette er en utdatert metode, men også at hvis du lar CSS være i HTML-koden (spesielt i in-line), vil den lese slik: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS, ikke bare HTML => CSS. Du vet at dette er veldig dårlig for serverlastetider og kan forringe de fleste webapplikasjoner som bruker denne enkeltfiltilnærmingen. Dette vil selvfølgelig ikke deaktivere nettstedet ditt, men det kan føre til at du må ringe en mester som vil analysere hvor feilen er - og dette er allerede viktig. Vær derfor alltid den som kan løse problemet, ikke den som skaper det.
Fjerde regel for CSS og JavaScript
- Flytt ned
Hvis du trenger å sette inn JavaScript på en side laget i HTML, og det er ingen måte å unngå det på, så plasser det nederst i HTML-dokumentet. Dette vil bidra til å redusere lastetiden til nettstedet, siden alle funksjoner og prosesser som ligger i JavaScript, vil bli utført etter at siden er lastet. Det reduserer også sannsynligheten for at feilen kan påvirke driften av hele systemet. Derfor er det bedre å sørge for at nettstedet ditt fungerer bra og forhindre uønskede hendelser som til og med kan skade nettlesere.
Den femte regelen for CSS og JavaScript
- DOM-optimalisering
Reduser DOM hvis mulig. For eksempel bruker du ofte jQuery, som lager mange DOM-elementer eller leser alt gjennom DOM-en – alt dette bremser nettstedet ditt betydelig. Det er ett ordtak jeg liker, og det kan brukes i dette tilfellet: "Hvis du gjør dette fordi dette er den eneste riktige måten, så er det flere riktige måter." Du kan også si: "Hvis du gjør dette fordi dette er den eneste riktige måten du vet, så gjør du det feil," men denne versjonen er litt tøff.
Søk og finn det du leter etter. Hvis du jobber med div-elementer i HTML bare fordi de er nødvendige for en liten oppgave, og du bare kjenner denne ene måten å jobbe på, så er det kanskje ikke den beste måten. Nå forstår jeg selvfølgelig at bruk av div-tagger er nødvendig for CSS, men du kan finne andre måter å bruke dem på enn styling.
Jeg kom nylig til dette selv, da jeg jobbet med et prosjekt i Ruby on Rails. Litt tidligere denne uken gjorde jeg det jeg ønsket meg lenge - jeg overførte ca 5 div-elementer til HAML en til en (flyttet mappen til mappen og så igjen til mappen). Jeg gjorde dette bare fordi jeg ikke visste den beste måten, og som et resultat endte jeg opp med en slags ekkel ting som jeg måtte gjøre om. Dette arbeidet viste seg å være mye vanskeligere, men av det lærte jeg mange nyttige ting, det fikk meg til å lære en ny måte å løse lignende problemer på i fremtiden. Gå videre og få ny kunnskap! Sannheten er veldig nær.
Hovedarbeidet for å øke hastigheten på lasting av nettstedet
Dette er et så omfattende samtaleemne at det rett og slett ikke passer inn i denne artikkelens omfang, men jeg synes det fortjener spesiell oppmerksomhet. Faktisk kan noen av de følgende viktige tingene brukes til å øke hastigheten på nettstedet eller nettapplikasjonen din.
- Skråstreker i lenker
Dette er ekstremt viktig. Når en bruker åpner en lenke uten skråstreker på en server fjernt fra siden, må han finne ut hva slags fil eller side som vil være på den angitte adressen. Serveren vil bli tvunget til å legge til skråstreker på egen hånd, og det vil ta millisekunder, og de vil alle bli lagt sammen. Jeg møter ofte webmastere som ikke tenker over det, og deres uoptimaliserte kode bærer ingen belastning, men til syvende og sist betyr det noe. Hvis du sparer kvartaler i ti år, vil du til slutt ha mye penger, og også her, bare i mindre eller mer volum, vil du til slutt møte trafikkproblemer for nettstedet ditt.
- Favoritter
Nettlesere ser alltid etter favicon.ico-filer i serverens rotkatalog, slik at du trygt kan legge til favorittikoner. Selv om du gjorde noe midlertidig. Hvis det ikke er noe favicon, kaster nettleseren en feil for seg selv og cacher bare en slik feil i favicon.ico-delen, noe som øker nedlastingstiden.
Dette emnet er veldig omfattende, og jeg er dessverre ingen god ekspert på det. Hele poenget med caching er imidlertid ganske enkelt. Dette er lagring av filer (vanligvis med HTML / CSS-kode) fra nettsteder som datamaskinen din ofte besøker og derfor ikke trenger å laste dem ned hver gang.
Denne teknologien er virkelig veldig nyttig og har blitt tatt i bruk av de fleste nettapplikasjoner de siste årene. Det er mange caching-løsninger der ute, men Memcached er sannsynligvis den vanligste. Jobben er å lagre filer fra nettapplikasjoner som er åpne på datamaskinen i nettleseren. Hvis du for eksempel har forskjellige profiler, lagrer den et profilbilde på datamaskinen din, og i neste fase avsløres alle gledene til Memcached. De kodede dataene dine kan sees (ved å trekke dem og databasen) på Memcached-serveren og sjekke den hurtigbufrede versjonen av filene. Og hvis denne filen ikke eksisterer, kan du sette den inn i databasen slik at den senere vises i hurtigbufferen. Dette er et godt eksempel på hurtigbufring av store mengder informasjon, og i løpet av de siste to årene har det gjort det mulig for hundrevis av selskaper å forbedre sine servere og databaser.
La oss oppsummere foreløpige resultater. Dette er ikke alle måter å forbedre lastehastigheten på nettstedet ditt på, men det er en god start for å undersøke videre og forbedre arbeidet ditt.
Det tror jeg ikke er noen hemmelighet sideinnlastingshastighet påvirker mange faktorer. Hvis noen ikke vet det, vil jeg kort si følgende at lastehastighet ikke bare påvirker om den besøkende venter på at nettstedet ditt skal lastes, men også SEO-optimalisering. Faktisk, i dag har mange søkemotorer, når de rangerer nettsteder, begynt å ta hensyn til sidens lastehastighet. Derfor, jo raskere nettstedet ditt lastes inn, jo flere besøkende kan du få fra søkemotorer, og følgelig mer penger å tjene på det.
Derfor bestemte jeg meg i denne artikkelen for å samle de 10 beste tipsene om hvordan du kan øke hastigheten på å laste inn en nettside og nettstedet som helhet.
Denne artikkelen deltar forresten i konkurransen TOPP 10 fra Sergey Shelvin med et premiefond i 500$ !
5. Bruk underdomener for parallelle nedlastinger
Som jeg sa ovenfor, i henhold til HTTP / 1.1-spesifikasjonen, er nettlesere begrenset på antall sidekomponenter som lastes samtidig, nemlig ikke mer enn 2 komponenter fra en vert. Derfor, hvis nettstedet ditt har mye grafikk, er det bedre å plassere det på et eget underdomene eller underdomener. Det vil være samme server for deg, men forskjellig for nettleseren. Jo flere underdomener du oppretter, jo flere filer vil nettleseren kunne laste ned samtidig. last raskere hele siden på nettstedet. Du må bare endre adressen til bildene til en ny. En veldig enkel, men effektiv måte.
6. Bruk nettleserbufferen
Caching blir stadig viktigere for moderne nettsteder som er avhengige av JavaScript og CSS. Faktum er at når en besøkende besøker nettstedet ditt for første gang, vil nettleseren laste inn alle javascript- og css-filer, også laste inn all grafikk og flash, men ved å sette Expires HTTP-headeren riktig, vil du gjøre sidekomponentene bufrebare. Derfor, når en besøkende besøker nettstedet ditt igjen eller går til neste side på nettstedet ditt, vil noen nødvendige filer allerede være i bufferen til nettleseren hans, og nettleseren trenger ikke å laste dem ned igjen. Derfor og økning i lastehastighet på nettstedet.
Utsett derfor Expires HTTP-headeren når det er mulig, i flere dager eller måneder i forveien. For at Apache-nettserveren skal sende Expires HTTP-hodene som tilsvarer anbefalingene, må du legge til følgende linjer i .htaccess-filen som ligger i rotmappen til nettstedet:
Denne delen av konfigurasjonsfilen for Apache-nettserveren ser etter mod_expires-modulen og, hvis mod_expires-modulen er tilgjengelig, aktiverer HTTP Expires-headers, som setter utløpsdatoen for objektene ovenfor i nettleseren og proxy-bufferen til ett år fra første nedlasting. . Etter å ha satt denne levetiden for nettleserbufferen, kan det være vanskelig å oppdatere filene. Derfor, hvis du har endret innholdet i css- eller javascript-filen og ønsker at disse endringene skal oppdateres i nettleserbufferen, må du endre navnet på selve filen. Vanligvis legges versjonen av filen til i navnet på filen, for eksempel: styles.v1.css
7. Bruk CDN til å laste ned populære JavaScript-biblioteker
Hvis nettstedet ditt bruker et populært javascript-rammeverk, for eksempel jQuery, er det bedre å bruke et CDN for å koble det til.
8. Optimaliser bildene dine
Det er nødvendig å bestemme riktig format for bildene dine. Å velge feil bildeformat kan øke filstørrelsen betydelig.
- GIF-er er ideelle for bilder med flere farger, for eksempel en logo.
- JPEG-er er flotte for detaljerte bilder med mange farger, for eksempel fotografier.
- PNG er ditt valg når du trenger et bilde av høy kvalitet med gjennomsiktighet.
Det er to måter å optimalisere et bilde på: ved å bruke programmer eller nettjenester på Internett for å komprimere bilder. I det første tilfellet trenger du viss kunnskap for å jobbe med et bestemt program, men alle kan bruke nettjenester. Alt du trenger å gjøre er å laste ned de nødvendige bildene, så vil tjenesten i seg selv optimalisere dem og gi deg en lenke for å laste ned de allerede komprimerte filene.
Her er noen online bildeoptimaliseringstjenester:
- www.compress-online.com (Takk Mary_T per lenke)
9. Ikke skaler bilder
Ikke endre størrelsen på bildet ved å bruke bredde- og høydeattributtene til taggen eller bruke CSS. Dette påvirker også sideinnlastingshastigheten negativt. Hvis du har et bilde med en størrelse på 500x500px, og du vil sette inn et bilde med en størrelse på 100x100px på nettstedet, er det bedre å endre størrelsen på det originale bildet ved hjelp av et grafikkredigeringsprogram Photoshop, eller en annen. Jo lavere vekten på bildet er, jo mindre tid vil det ta å laste det.
10. Bruk Gzip-komprimering
Studier har vist at gzip-komprimering av en tekstfil "on the fly" i 95-98 % av tilfellene kan redusere tiden det tar å overføre filen til nettleseren. Hvis du lagrer arkiverte kopier av filer på serveren (i minnet til en proxy-server eller bare på en disk), kan tilkoblingen i det generelle tilfellet frigjøres 3-4 ganger raskere.
Fra og med HTTP / 1.1-protokollversjonen indikerer nettklienter hvilke typer komprimering de støtter ved å angi Accept-Encoding-overskriften i HTTP-forespørselen.
Godta-koding: gzip, deflate
Hvis webserveren ser en slik overskrift i forespørselen, kan den komprimere svaret ved å bruke en av metodene oppført av klienten. Når du sender et svar ved å bruke innholdskodingshodet, varsler serveren klienten om hvilken metode som ble brukt for å komprimere svaret.
Innholdskoding: gzip
Dataene som overføres på denne måten er omtrent 5 ganger mindre enn originalen, og dette fremskynder leveringen betydelig. Det er imidlertid en ulempe her: belastningen på webserveren øker. Men problemet med serveren kan alltid løses. Så la oss ikke ta hensyn til det.
For å aktivere GZIP-komprimering på nettstedet ditt, må du skrive følgende kodelinjer i .htaccess-filen:
Hvis denne metoden fungerte, så flott, hvis ikke, kan du prøve følgende kode:
Men igjen, denne koden fungerer ikke på alle servere, så det er bedre å kontakte støttetjenesten til vertsleverandøren din og avklare dette problemet.
Vel, det var faktisk alt jeg ville fortelle deg. I denne artikkelen har jeg prøvd å liste opp alle hovedmetodene for optimalisering på klientsiden for å øke hastigheten på lasting av en nettside. I tillegg til klientoptimalisering er det også serveroptimalisering. Men dette er allerede et tema for en egen artikkel.
Hvis du gikk glipp av noe eller du har noe å legge til - skriv din mening i kommentarfeltet under til dette innlegget. Takk for oppmerksomheten!
Hei kjære lesere! Nylig mottok jeg en kommentar der jeg ble spurt spørsmålet: hva er hemmeligheten min med rask lasting av nettstedet? Jeg bestemte meg for ikke å svare med en kommentar (skrive for mye), men å skrive et nyttig innlegg om dette emnet for alle på en gang. Det vil si, i dag vil vi snakke om en så viktig faktor som.
Hvorfor tror du det er nødvendig med et nettsted for hurtiglasting? La oss tenke logisk. Vi skriver for folk, folk bør lese innleggene våre og få kunnskap. Vår nettside eller blogg er en plattform for å legge ut kunnskap! Tilgangen til dem skal være åpen og rask. Hva om nettstedet ditt tar 15–20 sekunder å laste? Ville brukeren bestemme seg for å fortsette? Svaret er entydig - NEI!
Den besøkende vil heller ikke lenger være din, men din konkurrent! Selv om det blir lavere i søkeresultatene. Selv om du skriver megagode artikler, men ønsker det beste, du kan ikke vente på suksess.
Som jeg sa før: Du må spare tid. Den flyter i én retning og kan ikke returneres! Du kan få pengene tilbake, eller noe annet, men det er ingen måte på tid! Hva gjør jeg? Og til det faktum at du må respektere både din egen tid og andres tid! Du trenger bare å gjøre noen få elementære trinn, og nettstedet/bloggen din vil åpne mye raskere, og dette vil legge til mer enn én besøkende.
Nettstedets lastehastighet Er en viktig faktor når du setter opp en nettside. Det er nødvendig å prøve på noen måte for å redusere ventetiden til besøkende. På samme måte "ser" søkemotorer på hastigheten, og hvis den er lav (nettstedet tar lang tid å laste), så er det mindre respekt. Og hvis det er mindre respekt, vil du befinne deg langt fra TOPPEN.
Nå skal vi finne ut hvordan øke lastehastigheten til nettstedet, men før disse vil vi analysere flere tjenester der du kan sjekke denne hastigheten.
Hastighetskontroll for nettstedlasting
1) Sidehastighet på nettet er en hastighetskontroll for nettsteder fra Google. I tillegg til å sjekke hastigheten, gir tjenesten ut en liste med anbefalinger for å øke hastigheten og optimalisere nettstedet. En veldig nyttig ting!
2) Pingdom-verktøy er en online hastighetssjekktjeneste som fortjener en lav buing. Første gang jeg bestemte meg for å teste hastigheten på bloggen min, brukte jeg den. Den gir også ulike anbefalinger og råd.
3) er den tredje tjenesten som etter min mening fortjener oppmerksomhet. Her bestemmes gjennomsnittshastigheten ved å generere forespørsler.
4) WebWait er en tilsynelatende enkel, men veldig praktisk tjeneste. Kjør adressen til nettstedet ditt inn i et spesielt vindu, vent en stund, og resultatet er klart. Det virker for meg at denne tjenesten bestemmer den mest nøyaktige tiden.
Dette er tjenestene jeg tilbyr deg for sjekk hastighet på nettsiden... Har du sjekket siden din? Nå er det på tide å gå til det viktigste - nettstedakselerasjon .
Hvordan øke hastigheten på lasting av nettsider?
Det er på tide, la oss snakke om å øke hastigheten på lasting av nettsider. Hva tror du er årsaken til den lave lastehastigheten på siden i de fleste tilfeller? Selvfølgelig på grunn av alle slags dekorasjoner, kremer, bilder som dukker opp der det er mulig, videoer osv.
Ja, selvfølgelig på grunn av dette også, men ikke bare. Hastigheten påvirkes også av ulike koder, skript, cache og lignende. Derfor er det nødvendig å optimalisere alt dette best mulig, alt skal være profesjonelt. Hvordan er det? - du spør. Det er enkelt, nå skal jeg lære deg det!
1. Optimalisering av bilder
Det første jeg vil fremheve er behovet for å optimalisere bildene riktig. Hvis nettstedet ditt har mange forskjellige bilder, trenger du ikke slette alle for å få fart på innlastingen, du trenger bare å optimalisere dem riktig.
Det vil si at du må endre størrelsen og vekten på bildet. Hvis du trenger et 300 × 225 bilde på nettstedet ditt, men du har det 600 × 450, endre det gjennom et hvilket som helst grafikkredigeringsprogram, for eksempel Adobe Photoshop ().
Også, i tillegg til størrelsen på bildet, må du velge den minste størrelsen. Jo større bildestørrelsen er, desto langsommere er nedlastingshastigheten. Spesielt de med tregt internett. Prøv derfor å gjøre vekten så liten som mulig, bare ikke overdriv, ellers blir kvaliteten forferdelig!
Du må også foreskrive dimensjonene i bildekoden, selv om den er lagt opp som den er (i standardstørrelse), er dette nødvendig.
2. Optimalisering av skript og koder
Hastigheten påvirkes som sagt av ulike skript og koder. Men ikke alle, men bare de som er skrevet med feil eller generelt feil.
Jeg er ingen guru innen webprogrammering, så jeg kan dessverre ikke gi råd om hva som må gjøres fra A til Å. Men jeg kan gi noen tips som jeg har brukt og bruker selv.
Det er også mulig å flytte skript til slutten av siden, i stedet for slik at det var i begynnelsen. Til hva? Vel, du bedømmer selv: Siden åpnes, og først og fremst begynner den å laste inn forskjellige skript, som ikke er nødvendig i det hele tatt i begynnelsen, og det tar tid! Det er bedre å la siden laste først, og deretter begynne å laste inn skriptene. Det vil gå mye raskere på denne måten.
Du kan forkorte CSS ved referanse, og forkorte Java Script her... Bare følg koblingene, skriv stien til filene dine, klikk deretter på en bestemt knapp, lagre den resulterende filen på datamaskinen din, og last den opp til nettstedet, for eksempel via ftp.
Det er også noen korte koder som erstatter lange skript, og som selvfølgelig øker hastigheten på nedlastingen. Men nå skal jeg ikke snakke om dem, dette emnet er en egen artikkel. Forresten, jeg vil snart gi ut en serie artikler om å erstatte disse skriptene, for ikke å gå glipp av det, anbefaler jeg deg å abonnere!
3. Aktiver Gzip-sidekomprimering
Jeg lærte om denne metoden relativt nylig. Men etter at jeg prøvde det, var jeg bare glad. Etter å ha aktivert komprimering, akselererer nettstedet betraktelig. Det eneste negative er at det er en viss belastning på hostingen.
For å aktivere Gzip-komprimering, må du skrive følgende i .htaccess-filen:
AddOutputFilterByType DEFLATE tekst / html-tekst / ren tekst / xml-applikasjon / xml-applikasjon / xhtml + xml-tekst / javascript-tekst / css-applikasjon / x-javascript BrowserMatch ^ Mozilla / 4 gzip-bare-tekst / html BrowserMatch ^ Mozilla / 4.0 no-gzip BrowserMatch bMSIE! No-gzip! Gzip-only-text / html
Nok en gang, etter å ha aktivert gzip-komprimering, øker hastigheten betydelig! Derfor bør du ikke hoppe over dette elementet.
4. Nettleserbuffer
Mange av dere vet hva nettleserbuffer er. Og hvem vet ikke, jeg vil forklare - dette er noe av midlertidig minne, som lagrer alle handlingene du utførte i nettleseren.
Så cachen kan brukes til å øke hastigheten på nettstedet. Det vil si at for noen som allerede har besøkt nettstedet ditt på en eller annen måte, vil hastigheten være høyere. Alt vil "fly". Og for de som kom inn for første gang, vil ikke denne metoden fungere. Og når han kommer inn igjen, vil alt begynne å fungere.
For at alt dette skal begynne å fungere, må du skrive inn følgende i .htaccess:
ExpiresActive On ExpiresByType-applikasjon / javascript "tilgang pluss 1 år" ExpiresByType-tekst / javascript "tilgang pluss 1 år" ExpiresByType-tekst / css "tilgang pluss 1 år" ExpiresByType-bilde / gif "tilgang pluss 1 år" ExpiresByType "tilgangsbilde pluss" år "ExpiresByType image / png"-tilgang pluss 1 år "Header set Cache-control: private Header set Cache-control: public BrowserMatch" MSIE "force-no-vary BrowserMatch" Mozilla / 4. (2) "force-no-vary"
Alt er ikke så vanskelig som det ser ut til. Er det ikke? Med dette ville jeg si at vi nå vet hvordan sjekk og få fart på nettsidens lastehastighet Russland, Tomsk-regionen, Tomsk, +7 952 160 36 17
Når du oppretter en kundeorientert nettside, må du ta hensyn til og tenke over mange ting, alt fra kreativt (design, innhold) og slutter med teknisk (layout, plassering på Internett). Hver minste ting er viktig for kundene, så det er viktig å se ikke bare på utsiden av prosjektet ditt – hva brukeren vil se – men også på innsiden, nemlig hvor raskt brukeren vil se det. Forskning viser at omtrent halvparten av brukerne forventer at et nettsted skal lastes på mindre enn to sekunder, og 40 % av brukerne vil lukke et nettsted hvis det tar mer enn tre sekunder å laste. Derfor er det viktig at nettstedet ditt laster raskt, ellers risikerer du å miste en betydelig del av kundene dine. Hva kan du gjøre for å redusere nettstedets lastetid?
1. Forkort koden
Jo større koden til prosjektet ditt er, jo mer veier det, noe som betyr at jo lengre tid tar det å laste det. Derfor må du først og fremst sørge for at koden er optimalisert. Dette gjelder spesielt den første landingssiden som brukeren lander på – det ville være bedre å forlate tunge JavaScript- og Ajax-skript eller fjerne dem nederst på siden. Hold deg til det velkjente KISS-prinsippet - Hold det kort og enkelt - hold koden din kort og enkel.
Googles PageSpeed Insights anbefaler å fjerne den eksterne JavaScript-filen fra toppen av siden, ettersom syklusen med operasjoner som kreves for å laste den reduserer sidelastingen betydelig. I dette tilfellet anbefales det at du enten gjør JavaScript-koden innebygd eller laster inn den koden etter at toppen av siden er lastet inn.
Hvis du vil vite om alt er i orden med JavaScript på nettsiden din, bruk denne tjenesten: https://varvy.com/tools/js/
Dette tipset gjelder også HTML- og CSS-kode. Som med JavaScript, vær spesielt oppmerksom på eksterne filer - for eksempel eksterne stilark, som best settes inn i HTML hvis mulig.
2. Bruk nettstedskomprimering
Det er flere teknologier som du kan komprimere data med, og dermed redusere størrelsen på tekstressurser, og dermed lastetiden til ressurssidene dine. Bruk for eksempel gzip: dette verktøyet minimerer forespørsler til serveren fra nettleseren. Du kan bruke den i HTTP-protokollen.
Du kan sjekke om nettstedet ditt bruker gzip til å komprimere data ved å besøke denne ressursen: http://www.gidnetwork.com/tools/gzip-test.php
Og ved å følge koblingen nedenfor kan du finne ut om noen komprimeringsteknologi vanligvis brukes på nettstedet ditt: http://www.whatsmyip.org/http-compression-test/
3. Reduser antall omdirigeringer
En 301-viderekobling brukes ofte til å omdirigere fra en adresse til en annen. Dette er imidlertid full av det faktum at ytterligere nettverkssykluser vil være involvert, noe som gjør at nettstedets lastetid kan øke, spesielt når det gjelder mobile enheter. Derfor er det bedre å redusere antall omdirigeringer eller nekte dem helt.
Du kan sjekke nettstedet ditt for omdirigeringer ved å bruke dette programmet (det finnes en gratisversjon): https://www.screamingfrog.co.uk/seo-spider/
4. Reduser antall plugins
Dette punktet gjelder for de som bruker CMS: Wordpress, Joomla eller andre. Sjekk listen over plugins du bruker regelmessig for unødvendig eller ikke lenger brukt. Å redusere antall plugins vil ha en positiv effekt på nettstedets lasting og generelle ytelse. Hvis du bruker Wordpress som innholdsstyringssystem, kan du også optimalisere antallet plugins ved å bruke den dedikerte plugin P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Denne plugin vil vise deg ytelse data andre plugins, og hvordan hver enkelt påvirker hvordan nettstedet fungerer. Dette vil hjelpe deg med å finne ut hvilke plugins som bør forkastes først.
5. Optimaliser bilder
Størrelsen på bildene på nettstedet påvirker direkte lastetiden til ressursen. Alle bilder må optimaliseres: angi riktig størrelse, format og komprimer. Det vil også være nyttig å kvitte seg med det såkalte digitale søppelet: ulike data som kommer inn i bildet under behandlingen.
6. Bruk nettleserbufferen
Ved å bruke hurtigbufring kan du dra betydelig nytte av lastehastigheten til nettstedet ditt: når en bruker besøker nettstedet ditt for første gang, lagres noen JavaScript- og CSS-filer i hurtigbufferen til nettleseren hans, som deretter automatisk vises ved neste besøk, og nettleseren trenger ikke å kaste bort tid for å laste dem ned. For hurtigbufring må Expires HTTP-headeren konfigureres riktig. Du kan gjøre dette ved å skrive følgende linjer i .htaccess-filen som ligger i rotmappen:
I dette tilfellet har alle typer en periode på 1 måned, men du kan endre tiden til det du trenger: cachen kan lagres i et visst antall år, måneder, uker eller dager.
Hvis du bruker et spesifikt CMS, kan du installere en spesiell plugin for dette. Når det gjelder Wordpress, er W3 Total Cache egnet: caching er aktivert i innstillingene (velg Innstillinger for denne plugin-en i listen over alle installerte plugins, deretter Generelt - merk av i boksen ved siden av "Slå alle caching-typer på eller av (på en gang)").
7. Overvåk nettstedets ytelse
Det er veldig viktig å hele tiden overvåke ytelsen til nettstedet ditt – selv når det ser ut til at du har optimalisert alt du kan. For dette er det spesielle gratisressurser, hvorav de mest kjente vil bli oppført nedenfor:
- allerede nevnt ovenfor Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
Dette verktøyet fra Google måler lastehastigheten til nettressursen din (fra 0 til 100 poeng; jo høyere poengsum, jo bedre). Tjenesten vil gi deg anbefalinger for å forbedre ytelsen, samt vise deg hvilke optimaliseringspunkter du har fullført. Husk at etter hvert som endringer og justeringer gjøres i Page Speed Insights, kan antallet poeng nettstedet ditt mottok også endres. - Pingdom nettstedhastighetstest: http://tools.pingdom.com/fpt/
En god engelskspråklig tjeneste for å sjekke lastehastigheten til ressursen din. Det vil være spesielt nyttig for de som administrerer internasjonale ressurser, da det lar deg velge stedet som testingen skal utføres fra: USA, Australia eller Sverige (resultatet vil være annerledes). Viser mange forskjellige data og gir anbefalinger. - Lastpåvirkning: https://loadimpact.com/
Denne tjenesten lar deg generere flere forespørsler til nettstedet ditt, der du for det første kan finne ut den gjennomsnittlige lastehastigheten til nettstedet ditt, og for det andre å forstå hvordan nettstedet ditt vil oppføre seg med et visst antall forespørsler (om det vil motstå lasten). - LoadStorm: http://loadstorm.com/
Med denne tjenesten kan du kjøre en ganske seriøs test av nettstedet ditt. Gratisversjonen av tjenesten lar deg teste ressursen din ved hjelp av 10 brukere, men den betalte versjonen gir flere muligheter, spesielt kan du uavhengig skrive et skript som brukerne vil utføre (for eksempel klikk på en viss knapp eller gå til ønsket del). I dette tilfellet må du bekrefte at du er eieren av nettstedet.
Konklusjon
Hvis du følger hvert av punktene som er foreslått i denne artikkelen, kan du redusere nettstedets lastetid betraktelig. Men samtidig, ikke glem at optimalisering ikke bør gjøres til skade for brukerne: bilder skal forbli attraktive, navigasjon skal være praktisk og informasjon skal være tydelig og tilgjengelig.
Del i kommentarene dine ideer om hvordan du kan øke hastigheten på lasting av en nettressurs.
