Helppoja vaiheita nopeuttaaksesi Image Heavy -sivustoasi

2

Sivuston omistaja saattaa lopulta haluta lisätä latausnopeuttaan. Tämä parantaa hakutulosten sijoitusta; Lisäksi sivuston kävijöiden on miellyttävämpää työskennellä sen kanssa saamalla nopeamman vastauksen toimintaansa.

Etsiessään nopeaa ja yksinkertaista ratkaisua sivustojen omistajat asentavat suuren määrän laajennuksia, jotka puolestaan ​​kuluttavat resursseja ja vain hidastavat sen työtä. Meillä ei ole mitään optimointilaajennuksia vastaan, mutta niitä pitää käyttää tarkoin ja työnsä periaatteet tuntemalla.

Lisäksi sivustojen omistajilla, jotka eivät ole koskaan kokeneet hallintoa, on usein väärinkäsitys optimoinnista. Heidän käsityksensä optimointi on skriptin nopeuttamista hinnalla millä hyvänsä. Optimoinnin tehtävänä on tuottaa sivustolle optimaalinen nopeus optimaalisella resurssien hinnalla. Siksi kaikille sivustoille ei voi olla yleisiä ohjeita.

Verkkosivustosi nopean tekeminen on kiireellinen tehtävä jokaiselle resurssin omistajalle tai verkkovastaavalle. Loppujen lopuksi sivun latausnopeus on korkealaatuisen sisällön ja kauniin graafisen suunnittelun ohella yksi kriittisimmistä tekijöistä verkkoresurssin menestymiselle.

Hidas lataus lisää todennäköisyyttä menettää käyttäjiä toisinaan. Varsinkin kun vierailijat tulevat mobiililaitteista. Yksinkertaiset suositukset sivuston latautumisen nopeuttamiseksi, jotka kokematonkin käyttäjä voi toteuttaa käytännössä, auttavat minimoimaan liikenteen katoamisen todennäköisyyden.

1 Optimoi HTML-koodi ja CSS-, JS-tiedostot

Latausoptimointi on mahdotonta ilman huolta käyttäjän selaimeen siirtyvän koodin "puhtaudesta" sivustolle tullessa. Suuri määrä merkkejä lähdekoodissa vaikuttaa merkittävästi latausnopeuteen, joten sen lyhyys on kriittinen menestystekijä.

Kuinka minimoida koodi sivuston latautumisen nopeuttamiseksi

Poista tarpeettomat merkit, merkintäelementit ja lähdekooditunnisteet. Prosessin automatisointi auttaa lisäämään pienen lisäyksen sivuston HTML-koodin alkuun ja loppuun.

Tämä HTML-sisällön puskurointimenetelmä on varsin hyödyllinen, mutta se voi aiheuttaa lisäkuormitusta käyttömuistiin.

Ryhmittele samantyyppiset CSS-tiedostot ja JS-tiedostot. Ilmaiset PHP-sovellukset, kuten JCH Optimize, Cloudflare tai Minify, jotka kopioidaan erilliseen hakemistoon ja kulkevat kaikkien sivustotiedostojen läpi, auttavat elementtien yhdistämisessä.

2 Poista ylimääräiset HTTP-pyynnöt

Sivuelementtien (javascript, kuvat, CSS ja flash-tiedostot) lataaminen vie leijonan osan järjestelmäresursseista, kun sivustoa ladataan. HTTP-pyynnöt tällaisille elementeille hidastavat sivustoa huomattavasti.

"ylimääräisten" pyyntöjen välttämiseksi sinun on vähennettävä sivun osien määrää. Tämä vähentää suhteellisesti palvelinkutsuja ja nopeuttaa sivuston latautumista.

Tämä voidaan tehdä useilla tavoilla:

  • Yhdistä useita kuvia yhdeksi grafiikkatiedostoksi (CSS-sprite);
  • Käytä upotettuja kuvia (inline-pictures) sivun tyylisivulla;
  • Useat CSS-tiedostot tai komentosarjat yhdellä sivulla sulautuvat yhdeksi tiedostoksi;
  • Minimoi skenaarioiden ja laajennusten määrä.
3 Järjestä JavaScript ja CSS oikeaan järjestykseen

On suositeltavaa sijoittaa CSS-tiedostot sivun koodin yläosaan ja JavaScript alas. Tämän optimoinnin jälkeen ladataan ensin staattinen sisältö ja sitten vain dynaaminen grafiikka.

Flash-elementit tai animaatiot, joiden lataaminen vaatii enemmän resursseja, eivät "vedä" eteenpäin ja pilaa vaikutelmaa sivustosta ensimmäisistä sekunneista lähtien. Tämä varmistaa sisällön sujuvan latauksen ja lisää resurssin esteettistä vetovoimaa.

4 Vähennä ulkoisten komentosarjojen määrää

Ulkoiset skriptit ovat koodinpätkiä (tekstejä), joihin päästään ulkoisen linkin kautta. Linkit luovat lisäpyyntöjä useille eri palvelimille, mikä lopulta hidastaa sivustoa. Tämän välttämiseksi on suositeltavaa käyttää pääasiassa paikallisia skriptejä, jotka on upotettu sivun lähdekoodin rakenteeseen.

Tietenkin paikallisiin skripteihin keskittyminen luo tiettyjä rajoituksia sivuston ulkoasulle ja toimivuudelle. Tuloksena oleva latausnopeusetu on kuitenkin näiden "uhrausten" arvoinen.

5 Ota huuhtelu käyttöön

Tämän PHP-toiminnon avulla voit olla odottamatta, kunnes käyttäjän palvelin lataa tiedot resurssista, vaan tulostaa ne osissa. Kun tiedot välitetään selaimeen, avoin ikkuna ei jää tyhjäksi, vaan täyttyy sujuvasti sivuston ladattavilla elementeillä. Tällainen kiihtyvyys on erityisen tarpeen verkkoresursseille, joissa on monimutkainen käyttöliittymä ja suuri liikenne.

Huuhtelutoiminto on parempi sijoittaa sivun lähdekoodin alkuun heti otsikon jälkeen. Otsikoista HTML-sisältö avautuu nopeammin, ja voit myös ottaa käyttöön CSS- ja JavaScript-elementtien rinnakkaislatauksen.

6 Tallenna sivut välimuistiin

Välimuisti tallentaa joitakin tietoja sivuston sivuilta (flash, grafiikka, JavaScript ja CSS) käyttäjän selaimeen. Seuraavalla kerralla nämä tiedostot ladataan välittömästi selaimesta, mikä antaa sivustolle lisää nopeutta.

Voit ottaa välimuistin käyttöön lisäämällä HTML-koodiin expires-otsikon. WordPress-sivustot on helppo tallentaa välimuistiin asentamalla ilmaisilla tai osittain ilmaisilla toiminnoilla varustettuja laajennuksia, kuten W3 Total Cache, Cache Enabler tai Zen Cach.

Uusille sivustoille on parempi käyttää välimuistia vasta, kun se on täysin valmis käynnistämiseen. Jos otat ominaisuuden käyttöön kehityksen aikana, muut muutokset eivät välttämättä näy oikein sivustolla.

7 Käytä CDN:ää

Content Delivery Network – palvelinketju, joka on hajallaan palvelinkeskuksissa ympäri maailmaa lisäämään sisällön siirtonopeutta vierailijoille. Mitä lähempänä vierailija on maantieteellisesti CDN-palvelimia, sitä nopeammin sivuston datapaketit välitetään.

CDN:n käyttö on erityisen tärkeää sisältö- ja paljon kuormitetuissa portaaleissa, joiden ensisijainen yleisö on hyvin kaukana fyysisistä palvelimista. Tämä palvelu minimoi ulkomaisten sivustojen latausten odotusajan, mikä osaltaan parantaa niiden sijoitusta paikallisissa hakutuloksissa. Loppujen lopuksi sisältö ladataan käyttäjää lähimmältä palvelimelta hänen maassaan.

8 Optimoi grafiikka ja video

Sinun on valittava oikea grafiikka- ja videomuoto, sillä tiedostomuoto vaikuttaa suoraan tiedon nopeuteen vierailijoille.

Suositellut muodot eri verkkosisällöille:

  • SVG – vektorilogoille ja yksinkertaisille käyttöliittymäelementeille;
  • PNG – kaavioille ja ei-vektorilogoille;
  • JPG – valokuville ja kuville;
  • MPEG4 – videoille ja animaatioille.

Myös videoille ja animaatioille on saatavilla suhteellisen uusi WEBM-muoto. Useimmissa tapauksissa se tarjoaa pienemmän videokoon samalla laadulla. Lomakkeella on kuitenkin rajoitettu selaintuki (esimerkiksi macOS / iOS Safari -selaimessa ei ole tukea). Siksi on suositeltavaa käyttää WEBM-tiedostoa ensisijaisena videolähteenä ja asentaa MPEG4 vaihtoehtoiseksi lähteeksi. Voit myös käyttää ainoaa MPEG4:ää, jos jakamista ei voida hyväksyä tai se on hankalaa.

Huomaamme erikseen, että vektorimuoto (SVG) mahdollistaa skaalauksen ilman grafiikan laadun heikkenemistä.

Kuvan optimoinnin vaiheet

Vaihe 1 – Pienennä kuvan kokoa.

Monissa suosituissa sisällönhallintajärjestelmissä, kuten WordPress tai Joomla, on sisäänrakennetut laajennukset kuvien optimoimiseksi alkuperäisestä. Mutta tämä menetelmä luo lisäkuormitusta ja voi hidastaa sivustoa. Aina kun sivu latautuu, selain käyttää ensin lähdekoodia ja vasta sitten muuttaa kuvan kokoa lennossa.

Nopeuden menettämisen välttämiseksi kuvia ladattaessa, käyttöjärjestelmään sisäänrakennetut graafiset editorit, kuten Preview (Mac) tai Microsoft Paint (Windows), sekä samankaltaiset verkkopalvelut auttavat. Niiden kanssa työskentely vaatii vain vähän taitoja grafiikan kanssa.

Vaihe 2 – Pakkaa tiedosto ennen lataamista.

Jopa kuvakoon optimoinnin jälkeen sen "paino" on yleensä vielä kaukana optimaalisesta. Kätevät ja ilmaiset palvelut, kuten ImageResize tai TinyPNG, auttavat pienentämään kokoa kuvanlaadun heikkenemättä. Suurin osa prosesseista täällä on automatisoitu. Käyttäjän tarvitsee vain ladata tiedostoja ja ladata ne valmiiksi pakattuna optimaaliseen kuvakokoon.

9 Käytä Gzip-tiedostojen pakkausta

Gzip on yksinkertainen tapa pakata sivustotiedostoja kanavaresurssien säästämiseksi ja latauksen nopeuttamiseksi. Gzipin avulla tiedostot pakataan arkistoon, jonka selain voi ladata nopeammin, ja sitten purkaa ja näyttää sisällön.

Gzipin käytön ottaminen käyttöön on melko yksinkertaista – sinun tarvitsee vain lisätä muutama rivi koodia .htaccess-tiedostoon. Esimerkiksi Apache-verkkopalvelinta käytettäessä mod_gzip-moduuli on verkkovastaavien käytettävissä Gzipin aktivoimiseksi, tässä tapauksessa sinun on lisättävä tällainen koodi .htaccess-tiedostoon.

Gzip-tiedoston pakkaus tehdään selaimen palvelimelle tulevien pyyntöjen määrän vähentämiseksi. Tämä tekniikka laskee tiedostojen alkuperäisen painon 70 prosenttiin latauksen nopeuttamiseksi.

Tapa upottaa Gzip-pakkaus

Lisää seuraava koodinpätkä .htaccess-verkkopalvelimen määritystiedostoon.

Apache-palvelimella

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Nginx-palvelimella

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
10 Muuta isännöintiä

Yleisin tapa nopeuttaa latausta on vaihtaa isännöintipalveluntarjoajaa. Säästäminen resurssien allokoinnissa johtaa usein palvelujen laadun huomattavaan heikkenemiseen, mikä heikentää kaikkia pyrkimyksiä nopeuttaa sivustoa viiniköynnöksellä.

Jos sisällön, koodin ja lisäosien manipuloinnit eivät tuota tuloksia, on aika miettiä kunnollisemman "kodin” valitsemista sivustolle. Laadukkaalla isännöinnillä, jolla on korkea saatavuus ja harkittu tekninen tuki, Internet-resurssi saa voimakkaan sysäyksen työn nopeuden lisäämiseen. Ja kiitollinen yleisö arvostaa tätä.

Tärkeintä on…

On välttämätöntä pyrkiä pääsemään sivustolle enintään 2-3 sekuntia. Ei ole väliä aukeaako sivusto 2 tai jopa 3 sekunniksi, mutta jos niitä on enemmän, niin tämä on syytä miettiä sivuston latauksen nopeuttamista.

Sinun on myös ymmärrettävä, että sivun latausnopeudella on kaksi parametria.

Ensimmäinen on sisällön näyttönopeus (tässä vaiheessa sivu on jo auki ja näytetään käyttäjälle, mutta läpinäkyvä sivun ilmaisin on edelleen näkyvissä, kunnes kaikki staattiset tiedostot ja asynkroniset komentosarjat on yhdistetty).

Lisäksi toinen on sivun varsinaisen muodostuksen nopeus, kun kaikki liitettävä oli yhdistetty. Sinun on keskityttävä ensimmäiseen parametriin eli korkeintaan kolme sekuntia ei saa kulua ennen kuin sivuston asettelu tulee näkyviin.

Johtopäätös

Et voi jättää huomiotta sellaista lukua kuin sivuston latausnopeus. Hän oli se, joka ensimmäisistä sekunneista lähtien luo mukavan ympäristön vierailijoille. Mitä nopeammin käyttäjä saa halutun sisällön, sitä todennäköisemmin resurssista muodostuu myönteinen mielikuva ja rakentuu sille uskollisuus.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More