Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Optimoitujen resurssien lisääminen

Sivun loppuun

Neptun [08.02.2016 14:13:55]

#

Toivon, että apua löytysi täältä asiassa, jossa olen aivan ulalla. Olen tutkinut Google Page Speed Insights avulla, onko sivustossani parannettavaa. Onhan siellä, varmaan yleensäkin aina jotakin. Sieltä on saatavissa - latasinkin jo - valmista optimointia: "Lataa tälle sivulle optimoidut kuva-, JavaScript- ja CSS-resurssit."

Mutta missään ei sanota, mihin tarkalleen optimoitu osuus lisätään. Olen aivan varma, että jos käyn tyrkkäämään tuollaisen väärään paikkaan, niin koko sivusto lakkaa toimimasta. Listauksessa on sisältöön liittyvää koodia kansiot css, image ja sj. Lisäksi siellä on MANIFEST-kansio, jossa on n. parin A4 liuskan verran optimointikoodia yhtenä pötkönä.

Sivustolla on normaali Tietokonekäyttö sekä lisäksi Mobiili, joissa on kummassakin oma, mobiilissa mobiilimuokattu teemansa. Kumpaankin on omat optimointinsa.

Mihin tuota optimointia voisi lähteä kokeilemaan?

Grez [08.02.2016 14:24:40]

#

Neptun kirjoitti:

Mutta missään ei sanota, mihin tarkalleen optimoitu osuus lisätään.

Hieman tulee vaikeaksi auttaa kun ei ihan tarkkaan tiedä mitä se nyt sitten on sivustostasi sanonut, mutta yleisestihän alkuperäinen optimoimaton korvataan optimoidulla. Sivuilla millä testasin ohjeet oli mielestäni hyvinkin yksinkertaisia ja suoraviivaisia ja löytyi vielä esimerkkejäkin.

Neptun [08.02.2016 18:32:05]

#

Unohdin sanoa, että sivusto on WP alustainen.

Grez: noinhan minäkin ajattelin, että alkuperäinen korvataan. Mutta ei se niin voi olla ainakaan tässä tapauksessa. Esim. kuvia on sivustolla vaikka kuinka paljon ja eri paikoissakin, mutta images kansiossa vain n. kolmisenkymmentä. Siellä on varsinaisten kuvien lisäksi esim. sivustokokonaisuuden (teeman) kuvakkeita ja väripalkkeja. css-kansiossa on pitkälti yhtenä pötkönä koodia kun se laajassa alkuperäisessä on ryhmitelty visuaalisesti myös luettavaksi.

Missä näit ohjeita?

Grez [08.02.2016 18:43:47]

#

Neptun kirjoitti:

Missä näit ohjeita?

No siellä Google Page Speed Insights sivuilla. Siis toki siellä oli ohjeita, että millä tavalla sen sun järjestelmän tuottamaa sivua pitää muuttaa.

Neptun kirjoitti:

Unohdin sanoa, että sivusto on WP alustainen.

Tuo tosiaan avasi paljon mistä kiikastaa että ohjeet ei ole riittävät. Eli sinun täytyisi tosiaan osata selvittää itse mistä mikäkin korvattava/muokattava palikka sivuille muodostuu. Luulen että joltain wordpress aiheiselta foorumilta saattaisi löytää paremmin yleisiä neuvoja optimointiin.

Metabolix [08.02.2016 18:46:37]

#

Neptun kirjoitti:

Siellä on varsinaisten kuvien lisäksi esim. sivustokokonaisuuden (teeman) kuvakkeita ja väripalkkeja. css-kansiossa on pitkälti yhtenä pötkönä koodia kun se laajassa alkuperäisessä on ryhmitelty visuaalisesti myös luettavaksi.

Tällaisessa optimoinnissa kuvat pakataan mahdollisimman hyvin (esim. ohjelmilla pngcrush ja jpgcrush) ja CSS- ja JS-koodit minimoidaan (poistetaan turhat kommentit ym.) ja mahdollisesti vielä pakataan, jos palvelimella on tällainen mahdollisuus. Tavoite on, että tietoa siirtyy verkossa mahdollisimman vähän, jolloin lataaminen on nopeampaa. Kuvat voi toki pakata aina, mutta CSS- ja JS-koodien käsittely tehdään yleensä vain niiden julkaisun yhteydessä, koska tietenkin on hyvä pitää koodit selvinä kirjoitus- ja testausvaiheessa. Myös tiedostojen määrän vähentäminen auttaa, esim. CSS-koodit voi laittaa julkaisuvaiheessa yhteen tiedostoon.

Grez [08.02.2016 19:23:43]

#

Oletin että ongelma oli enemmänkin noissa, jos tulee kehotuksia että pitäisi sisällyttää pikkuista CSS:ää suoraan dokumenttiin tai esimerkiksi siirtää JS:ää lopussa suoritettavaksi. Näiden osalta voi olla haasteellista selvittää missä kohdissa julkaisujärjestelmää ne ylipäätään muodostuvat.

Mutta toisaalta miksipäs mä näitä koitan arvailla.

Neptun [10.02.2016 19:39:10]

#

Kiitos Metabolix ja Grez. Noin se on kuten Metabolix sanoo. Sen sijaan tarkastelujen jälkeen en lainkaan luota Google Page Speed robotin korjausehdotuksiin. Esim. images kansion mukaan siellä on kuvamuutoksia, jotka pitäisivät kuvan pienen näyttökuvan kokoisena. Sehän ei ole tarkoitus. Tarkoitus on tällaisilla sivustoilla, että kuvaa klikkaamalla siitä muodostuu halutun kokoinen suurkuva, koska näyttökuvista ei yksityiskohtia näe.

Jätän Google Page Speedin robotit ja jatkan asian tutkimista ja kallistun vaikka WordPressin lisäkkeisiin. Niiden avulla voi tehdä monenlaisia parannuksia. WPn kansainvälinen neuvonta on kovin ruuhkainen ja kotimainen ei näihin innostu - kun ei ole vikojakaan.

WPstä vielä sen verran, että sisältöä tuotettaessa ei tarvitse itse (jos ei halua) tehdä mitään koodauksia. WP tekee tarvittavat koodaukset uuteen sisältöön. Teeman runko on tyylitiedosto style.css. Siihen ylläpito puuttuu vain tehdessä teemaan kuuluvia tai siitä johtuvia muutoksia. Tiedän tuon pakkaamisjutun, mutta sivuston kuvat ovat pieniä näytökuvia eikä niitä pakkaamalla juuri etuja synnny. Kun lukijat vielä siirtyvät suoraa johonkin artikkeliin, on käytössä vai muutamia pieniä kuvia + sivukoristelut. Kuvien näyttökokonaisuuteen voi kyllä löytyä muuta rationalisointia.

Lisäkkeet hidastavat latausta jonkin verran. Eniten turvallisuuteen liittyvät lisäkkeet, niiden osuuden ollessa n. 0.3 sek luokkaa.

The Alchemist [11.02.2016 09:40:00]

#

Neptun kirjoitti:

Kiitos Metabolix ja Grez. Noin se on kuten Metabolix sanoo. Sen sijaan tarkastelujen jälkeen en lainkaan luota Google Page Speed robotin korjausehdotuksiin. Esim. images kansion mukaan siellä on kuvamuutoksia, jotka pitäisivät kuvan pienen näyttökuvan kokoisena. Sehän ei ole tarkoitus. Tarkoitus on tällaisilla sivustoilla, että kuvaa klikkaamalla siitä muodostuu halutun kokoinen suurkuva, koska näyttökuvista ei yksityiskohtia näe.

Olet kyllä ymmärtänyt nyt täysin väärin nuo ohjeet, ei niissä mitään vikaa ole. Thumbnail-kuvien pitää olla thumbnail-kokoisia. Suurempi kuvakoko ladataan vasta, kun käyttäjä haluaa oikeasti nähdä sellaisen. Totta kai on helpompaa tehdä rumasti niin, että sivulle ladataan thumbnaileihin täysikokoiset kuvat ja klikkauksen yhteydessä skaalataan sama kuva isommaksi, mutta se on todella huono tapa ja Google valittaa siitä aivan aiheellisesti.

Javascript- ja css-filujen pakkaamisen hyödystä voi olla montaa mieltä, jos sivusto on aika pieni ja hiljainen. Jos kakutus toimii oikein, niin haitta jää käyttäjälle joka tapauksessa lähinnä ensimmäiseen sivupyyntöön.

HTML5 [11.02.2016 12:05:52]

#

Gzip-pakkaaminen (tai vastaava) (compression) on pienentämistä tehokkaampi tapa laskea tiedoston kokoa. Pienentäminen (minification) on toki hyvä lisä, mutta sen vaikutus on merkittävästi vähäisempi.

Grez [11.02.2016 12:29:39]

#

Molempi parempi. Minifioinnista on sitä enemmän hyötyä, mitä enemmän alkuperäisessä koodissa on kommentteja.

Neptun [11.02.2016 18:41:48]

#

The Alchemist: Ehkä en ole hyvä ymmärtämään asioita, mutta on minulla jonkinlainen kokemus WP:n kuvien käsittelystä. Kyse ei ollut thubmnail kuvista, vaan artikkeilien normaaleista näytökuvista - posts - kuvista. Niistä Googlen robotti olisi (muutamista) halunnut tehdä näyttökuvan kokoisena pysyviä ei skaalaantuvia. Eli sen korjaus oli lisätä kuvalinkin loppuun sen koko -300xXXX, joka WPssä tuntee nimen keskikokoinen. Jos kuva ei skaalantuisi on se sivustolle hyödytön.

Näin WP kuvia käsittelee ja ohjelmoi. En usko, että systeemi olisi kovin haitallinen. Mutta kuten totesin, niin toki on erilaisia tapoja rationalisoida kuvien latausta. Niitä tutkin WPn lisäkkeiden kanssa. Kuvien käyttö on kuitenkin sivustolla varsin maltillista ja koot pieniä, muoto säästeliäs .jpg ym, joten ei tämä erityinen pullonkaula ole. Latausnopeuksia näen eri elementtien kohdalla netin latausten analyysityökaluilla, esim WebPagetest.

Kyselyni alkuperäinen tarkoitus oli, että en ymmärtänyt Googlen robottien korjausehdotuksia, joissa oli kyse koodauksesta tai pikemminkin sen korjaamisesta. En ymmärrä niitä vieläkään, kun ne eivät näy olevan edes sivustolle sopivia. Syy ei ollut artikkelien tai sivujen hidas lataus.

Kiitos kaikille.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta