Anteeksi aluksi ihmeellinen otsikko. Kun olette tehneet Wordpress-sivuston, niin millä ohjelmalla/selaimella kannattaa alkaa loppuviilaamaan sivustoa (mm elementtejä). Eli tarkoitan sitä että kun katselee selaimessa (eri kokoisilla selaimilla/päätelaitteilla) sivustoa, niin pystyisi viilata esim menuvalikon/navigoinnin paddingit, taustavärin, mobiililla tulee logon alle joku musta viiva ym ym kuntoon ja mieleiseksi. Ja sitten kun muuttaa css:ää (tehdäänkö kaikki muutokset css:ään?), niin sitten pääsisi vielä suht helposti oikeaan paikkaan siellä itse wordpress-tiedostossa jonne määritykset pitää käydä muuttamassa... En löydä nyt millään oikeaa kohtaa mihin tiedot pitäisi muuttaa. Laitataanko ne muutokset aina child-teeman css:ään?
ps. tuossa linkki projektisivustolle www-sivu.
Auttakaahan miestä, halu oppia on kova....
Oikean kohdan CSS-tiedostossa löytää selaimen kehitystyökalujen avulla.
Esimerkiksi Chromessa valitsemalla ”Tarkastele elementtiä” näkee valitun elementin tyylit. Samasta näkymästä näkee joka lohkon kohdalta, missä tiedostossa lohko on ja miltä riviltä se alkaa. Esimerkiksi ”gray-black.css?ver=4.1:305” tarkoittaa, että lohko alkaa tiedoston ”gray-black.css?ver=4.1” riviltä 305.
Nyt latasin Chromen ja valitsin (kavennetussa tilassa) sen sen mustan palkin logon alla. Mulla näyttää nyt Element-kohdassa seuraavaa:
<aside class="header-cta-container header-call-to-action widgets">…</aside>
1. Mistä näen Chromessa tuon kertomasi gray/black css:n? Ja mistä tiedän että se on juuri tuon mustan palkin css? Mulla näkyy siellä myös joku style.css, mikäs se on?
2. Missä ohjelmassa ko css kannattaa avata, ajattelen siis noita rivejä? Vai mikä on helpoin tapa päästä heti oikealle riville kun ei ole rivinumeroita?
3. Pitääkö mun mennä etsimään palvelimelta tuo gray/black-tiedosto ja muuttaa sitä esim Dreamviewerillä ja sitten tallentaa muutettu tiedosto takaisin palvelimelle? Itse tässä teemassa (Modern Business Pro'ssa ei ole kuin style.css valmiina editor-osiossa)
4. Pääseekö wordpressin tiedostoja (css ym...) kokeilemaan/muuttamaan jo tuossa Chromen elementin tarkastelu-osiossa? Eli tarkoitan sitä että voi arvoja muuttamalla jo nähdä miten ne vaikuttaa ennen kuin ne arvot lopullisesti muuttaa?
1) Kaikki valittuun elementtiin liittyvät tyylit näkyvät DOM-rakenteen (HTML-koodin) vieressä olevassa Styles-näkymässä. Samaan elementtiin liittyviä tyylejä voi olla monessa eri CSS-tiedostossa. (Sivuillasi joidenkin elementtien tyylit löytyvät tiedostosta gray-black.css, joidenkin tiedostosta styles.css ja joidenkin molemmista.)
2) Jos rivinumeroita ei ole käytettävissä siinä ympäristössä, jossa CSS-koodia muokkaa on vaihtoehtona a) vaihtaa sellaiseen kehitysympäristöön, jossa rivinumerot ovat käytettävissä, tai b) kopioida oikea CSS-valitsin Styles-näkymästä ja etsiä sama valitsin CSS-tiedostosta Ctrl-F-toiminnolla tai vastaavalla.
3) En osaa sanoa, sillä en tunne WordPress-alustaa kovinkaan hyvin. (En käytä sitä omissa projekteissani.)
4) Kokeilepa napsauttaa Styles-näkymässä jonkin säännön arvoa ja muuttaa sitä. Uuden valitsimen saa napsauttamalla +-kuvaketta.
Lisää Chromen kehitystyökaluista voi lukea täältä: https://developer.chrome.com/devtools, mutta kokeilemallakin oppii – Elements-osiosta ainakin perustoiminnot. Firefoxissa ja IE:ssä on omat kehitystyökalunsa. Operan ja Safarin kehitystyökalut ovat samat kuin Chromen.
Kiitos paljon vastauksista... Koitan edetä ja harjoitella ohjeiden mukaan... =)
Sitä piti vielä kysyä että voisitko kokeilla onko sivuston latautuminen liian hidasta? Ja onko tuolla jotain ulkoisia linkkejä (tarvitaankohan niitä?), jotka hidastaa yhteyttä?
Minulta ei kysytty, mutta vastaanpa silti...
jhh kirjoitti:
Sitä piti vielä kysyä että voisitko kokeilla onko sivuston latautuminen liian hidasta?
Minulla kestää uudehkolla läppärillä 10 megan yhteydellä n. 5 sekuntia, että sivu tulee näkyviin. Aika hidasta.
jhh kirjoitti:
Ja onko tuolla jotain ulkoisia linkkejä (tarvitaankohan niitä?), jotka hidastaa yhteyttä?
Kyllä sivu lataa ulkopuoleltakin jotain tiedostoja, suurimpana facebookin sdk.js 155KB.
jhh kirjoitti:
Sitä piti vielä kysyä että voisitko kokeilla onko sivuston latautuminen liian hidasta? Ja onko tuolla jotain ulkoisia linkkejä (tarvitaankohan niitä?), jotka hidastaa yhteyttä?
Sivusto tosiaan latautuu kohtalaisen hitaasti, niin kuin jaketsukin mainitsi. Hitaus kuitenkin johtuu selvästi palvelimesta, jolla sivusto sijaitsee, eikä niinkään ulkoisista tiedostoista.
Kehitystyökalujen Network-välilehdellä näkyvät kaikki suoritetut pyynnöt. (Päivitä sivu kyseisen näkymän ollessa auki.) Jos napsauttaa Time-sarakkeen otsikkoa niin, että siihen ilmestyy alaspäin osoittava nuoli, järjestyvät pyynnöt eniten aikaa vieneistä vähiten aikaa vieneisiin.
Selain hakee monet tiedostot välimuistista. Jos haluat nähdä, kuinka kauan niiden lataaminen oikeasti kestää, aktivoi Network-välilehden valintaruutu Disable cache ja päivitä sivu.
Kiitos teille todella paljon avusta/neuvoista. Nyt kokeilin ensin Chromella Timeä. Eli eikös tuo näytä ok:lta? Ei ole oikeastaan kuin Facebookkia ja Youtubea, eikä nekään kestä kauaa?
Ja kun laittoi disable cachen päälle, niin heti tuli aika valtavat timet...
http://i38.photobucket.com/albums/e117/Buikki/
Sen jälkeen testasin pingdomia, niin sain seuraavat tulokset:
Tässä ensin koko tulos
http://i38.photobucket.com/albums/e117/Buikki/
Ja tässä erikseen Speed performance
Ja tässä erikseen Remove query strings static recources
Mitä muutosta pitäsi tehdä?
Firefoxin toolbarissa näkyy virhe (punaiset henkselit) ja ilmoittaa seuraavaa:
Aikaleima: 8.1.2015 11:45:24
Virhe: TypeError: document.getElementById(...) is null
Lähdetiedosto: chrome://web-developer/content/overlay/javascript/overlay.js
Rivi: 7333
Mitähän tuolle pitää tehdä?
jhh kirjoitti:
Firefoxin toolbarissa näkyy virhe (punaiset henkselit) ja ilmoittaa seuraavaa:
[– –]
Mitähän tuolle pitää tehdä?
Chrome://-alkuiset osoitteet ovat selaimen sisäisiä osoitteita. Jossakin Firefoxin tai siihen asennetun laajennuksen tiedostossa on virhe, mutta sen ei pitäisi liittyä verkkosivuun mitenkään.
Asialle ei varmaan voi itse tehdä mitään, eikä tarvitsekaan, jos virhe ei vaikuta nettisivun toimintaan.
Vähän välin sivusto latautuu todella hitaasti. Kun katson pingdomilla, niin antaa pitkän keltaisen viivan ja sille tekstin: "Wait The web browser is waiting for data from the server".
Eli Suncometin palvelin hidastelee? Mitä teen, kysynkö että
1. Saatteko kuntoon ongelman?
2. Vaihdanko Suncometilta paremmalle (kalliimmalle) palvelimelle?
3. Vai vaihdanko suoraan palveluntarjoajaa? Jos pitää vaihtaa palveluntarjoajaa, niin keneen kannattaa ottaa yhteyttä?
jhh kirjoitti:
Eli Suncometin pelvelin hidastelee? Mitä teen, kysynkö että – –
Siltä näyttää. Kyselisin palveluntarjoajalta asiasta. Jos ratkaisua ei tule, vaihtaisin toiseen palveluntarjoajaan.
Kysyin sivuston hitaudesta sekä ihmettelin Pingdomissa näkyvää redirectiä. Alla vastaus Suncometin asiakaspalvelusta. Mitä mieltä te olette asiasta? Haluaisin kommentteja että onko nuo todelliset ongelmat vai onko vika jossain ihan muualla.
"Etusivu on vielä varsin suuri. Yli 1 Mt. Suositeltavaa on ainakin puolittaa koko.
Browser cache voi välillisesti liittyä siihen, että käytössä ei ole oikeaa domainia. Kuitenkin välimuistipluginin pitäisi aktivoida browser cache. Se on erityisen hyvä kuvien, Javascriptin ja CSS tiedostojen kanssa.
Isompi paketti antaa luonnollisesti enemmän tehoa ja näin myös nopeutta. Kuitenkin kannattaa ensin optimoida sivusto mahdollisimman pitkälle. Pitkä "wait" aika liittyy myös uudelleenohjauksiin, tiedostojen hakuun tilin ulkopuolelta (ulkopuolisista osoitteista) ja sivuston raskauteen.
Redirect liittyy siihen, että käytössä ei ole varsinaista domainia vaan palvelimen ns. väliaikainen domain. Sen sisällä tapahtuu uudelleenohjauksia, jotka hidastavat kaikkea sivuston käyttöä. Sen takia sitä ei ole itsessään tarkoitettu varsinaiseen käyttöön vaan ainoastaan väliaikaiseen käyttöön.
"
Monet eri asiat vaikuttavat nopeuteen, mutta turha sun on valittaa hitaudesta, jos olet valinnut palvelun halvan hinnan perusteella. Siellä voi olla kymmeniä ja satoja sivustoja samalla palvelimella sun saittisi kanssa, ja yhden tietokoneen resurssit ovat aina rajalliset.
Noita requesteja tehdään kyllä ihan liikaa. Siellä on 17 javascript-tiedostoa ja 18 css-tiedostoa. Kuvien määrää on vaikeampi lähteä karsimaan mutta css- ja js-filuja ei pitäisi noin montaa olla, koska ne voi palvelimen päässä pakata pariin tiedostoon. (Mulla on tapana pakata omat koodini omaan tiedostoonsa ja kirjastojen resurssit erikseen.)
Kiitos paljon kommentoinnista. Eli minkälaiset neuvot annat millä lähden menemään eteenpäin? Eli jokatapauksessako on ihan järkevää valita parempi palvelin? Ja sekö on järkevää että olisi vaan yksi css-tiedosto?
No katso nyt ensin, miltä se nopeus näyttää, kun domain on saatu hankittua tuonne. Varsinainen ongelmahan tuon sivuston kanssa on nyt se, että html-dokumentin (= WordPressin osuus) saaminen selaimelle asti kestää neljä sekuntia. Staattinen sisältö eli kuvat, css:t ja js:t latautuvat sen jälkeen verrattain nopeasti (~2 s).
Web-hotelleissa on vaikea tehdä itse mitään optimointeja, omalla (virtuaali)palvelimella niitä voi tehdä vapaammin mutta hinta on heti korkeampi. Suncometin virtuaalipalvelimen kuukausihinta on saman verran kuin perushotellin vuosihinta.
Yleensä cms:n hitautta kierretään käyttämällä välikerrosta, joka tallentaa cms:n renderöimät html-dokumentit staattisiksi tiedostoiksi levylle ja syöttää niitä sivuilla vieraileville käyttäjille sen sijaan, että jokainen pyyntö ohjattaisiin cms:lle ja cms tekisi sata kertaa saman työn tarjotakseen sadalle ihmiselle identtisen sisällön. WordPressissä ei kai ole vakiona tukea tuollaiselle, mutta "render cachen" purkannee itsekin pienellä vaivalla, mikäli sinussa on koodarinvikaa.
Edit: jonkinlainen välimuisti tuolla palvelimella onkin käytössä, koska sivut alkavat latautua nopeammin, kun ne ensin klikkailee kerran läpi.
Kiitos taas vastauksesta...
Jos joka tapauksessa otan nopeammman yhteyden, niin kysynkö sitä SunCometilta vaiko jostain muualta? Ja millaista palvelinyhteyttä mulle ehdotat (hintahaitari suurinpiirtein per kk?)? Sivusto siis tulee olemaan usealla kielellä ja käyttäjiä on ympäri maailman.
Tuossa olis tuommoinen Superpaketti (Startti, hinta 23 € kk) Startti paketti
olisiko tuo ok?
Aihe on jo aika vanha, joten et voi enää vastata siihen.
