Support » Lisäosat ja muokkaukset » Konekasatun CSS:n purku

  • Resolved tapiohuuhaa

    (@tapiohuuhaa)



    Asensin tyttären WordPressiin teeman, jossa on konekasattu CSS-tiedosto.
    Siitä ei saa tolkkua.
    Onko mitään keinoa saada se ihmisen luettavaksi?

Esillä 15 vastausta, 1 - 15 (kaikkiaan 16)
  • Prosessin nimi on ”minify”, joten väärinpäin se on ”unminify”. Sillä kun hakee, löytyy paljon työkaluja, esimerkiksi tämä: https://mrcoles.com/blog/css-unminify/

    Kiitti. Jos toistaalta haluaa valmiin CSS-koodin minimoida, mikä olisi siihen sopiva työkalu? Onko asialla suurempaa merkitystä. Minimointi ymmärtääkseni tehdä sivuston lataamisen nopeuttamiseksi.

    Sain purettua CSS:n (Storefront & Woocommerce), mutten löytänyt, mitä etsin

    https://www.sanaristikkofoorumi.net/kirakka/yhteystiedot/

    https://pastebin.com/Ai519KT8

    Kännykkäleveyksillä päävalikon alle tulee 2px korkuinen vaakaviiva, mutta en ymmärrä, millä määrityksellä se tulee. border-arvoissa ei ole 2px arvoa muulle kuin painonapille.

    Minimointiin löytyy paljon työkaluja, kätevin on sellainen, joka tekee sen automaattisesti. Autoptimize on oikein hyvä ja tekee muutakin nopeutusta. Minimointi tosiaan jonkin verran nopeuttaa sivunlatauksia, etenkin jos samalla yhdistellään eri CSS-tiedostot samaan tiedostoon, jotta tarvitsee ladata vain yksi. Autoptimize tekee noin.

    Sitten tuohon ongelmaasi: tällainen määrittely sieltä löytyi.

    @media screen and (max-width: 767px)
    header#masthead {
        border-bottom: 2px solid white;
    }

    Chromen Inspector osaa kertoa, että tuo on index.php:n rivillä 568, eli ei tule tyylitiedostoista ollenkaan. Storefront vissiin tuuppaa osan CSS:stä suoraan sivulle. Jos haluat tuon pois, niin CSS-tiedostoon tällainen:

    @media screen and (max-width: 767px)
    header#masthead {
        border-bottom: none !important;
    }

    niin jo lähtee.

    Kiitos tiedosta, että osa CSS:stä tulee muualta kuin CSS-tiedostoista.
    Kiitos myös korjausyrityksestä.

    Valitettavasti tuo ei auttanut ongelmaani. Ongelma liittyy avautuvaan valikkoon. Kun valikko on suljettu laitoin valikon niin, että se täsmää valkoisen alareunan kanssa.

    Mutta kun valikon avaa, valkoinen alareuna näkyy valikon alla yksinäisenä viivana.
    Ärsyttävää, kun ei löydä, mistä se valikon ylimääräinen alaviiva tulee.

    Kehitin uuden ratkaisun. Kun kerran kauppasovellus käyttää kiinteää palkkia, laitoin menuvalikon sinne + valikon avautumaan alhaalta päin. Kun alapalkin z-index on korkeampi kuin valikon, häipyy alaviiva palkin alle.
    https://www.sanaristikkofoorumi.net/kirakka/
    Dashicon ei näy jostakin syystä.

    Asensin suosittamasi ohjelman, mutta tätä en ymmärrä:

    CDN:n juuri-URL – mitä tähän oikein tulee laittaa?

    Ei optimoinut omaa CSS:ää. Se tarvitsis optimoida manuaalisesti jossakin palvelussa käymällä.

    Mitä siihen testisivustoon tulee, tuli kolme eri näyttömoodia, sillä korkean kännykän omaava ei tykännyt alhaalta lähtevästä navigaatiosta.
    Jostakin ihmeen syystä alas jäänyt alaviiva asettui nyt navigaation alalaitaan, jossa se on ihan OK. Ei tarvitsekaan alkaa yrittää sitä poistaa.

    Nyt kolme näyttömoodia
    * 320x480px kännykkä
    * 720x1280px kännykkä
    * 720+ laitteet, kuten 800×1280 tablet-laite

    Ei noihin kaikkiin Autoptimizen asetuksiin tarvitse mitään laittaa. Jos ei ole CDN:ää, niistä ei tarvitse välittää. Pitäisi riittää, kun laittaa ”Optimoi CSS?” ja ”Aggregate CSS-files?”.

    Tämän toimiminen toki edellyttää, että CSS on lisätty sivulle tiettyjä WordPressin standardeja noudattaen. Jos ei ole, niin Autoptimize ei CSS:stä mitään tiedä, eikä pysty sitä minimoimaan.

    Onko CDN sama kuin palvelun tarjoajani? Hyödyttääkö laittaa sivustoni ip-osoite?
    Huomasin tässä opimointilisäosassa sen, että se muodostaa cachen sivustoni alihakemistoon.
    Muuten hyvin paljon samoin toimiva LiteSpeed Cache ei muodosta cachea, ellei palvelimella ole tukisoftaa.
    Se kyllä osaa minimoida head-osion itse määritellyn CSS:n, jonka minimoin eräässä www-palvelussa. Minimoimattomana minulla on siitä kopio tietokoneella.

    Moderator Mikko Saari

    (@msaari)

    Ei, CDN on erillinen palvelu, joka jakelee mediasisältöjä keskitetysti. Saittisi ei ole sellaisessa mittakaavassa, jotta tarvitsisit CDN:ää. Älä laita niihin asetuksiin mitään.

    Et myöskään tarvitse mitään WordPressissä toimivaa cachelisäosaa; niistä noin yleensäkin ottaen on perin vähän hyötyä useimmissa tilanteissa, nopeusjuttuja on yleisesti ottaen parempi ratkoa palvelintasolla jo ennen kuin WordPressiä edes käynnistetään.

    tapiohuuhaa

    (@tapiohuuhaa)

    Autoptimizen paikallisen cachen laitoin käyttöön, mutta sekin on siis mieletäsi tarpeeton.
    Light Speed Cache -lisäosan cache toimii palvelimella, mutta se pitää olla sinne asennettu. Lisäosa ilmoitti, että lisäosan kaipaamaa palvelinpään softaa ei ole. JavaScript-tiedoston pakkausta en voinut käyttää, koska se esti joidenkin skriptien toiminnan. Yhdellä toisella se toimi.

    Tyttäreni erääseen projektiin ehdotin Autoptimize-lisäosan suosittamaa
    SiteGround-houstausta: http://misc.optimizingmatters.com/partners/?from=partnertab&partner=siteground

    Siinä on palvelin pään cache – ymmärtääkseni.

    • Tätä vastausta muokkasi 3 viikkoa sitten  tapiohuuhaa.
    tapiohuuhaa

    (@tapiohuuhaa)

    Merkittäväksi nopeuttajaksi olen kokenut Google-fonttien poiston. Google fontin Lito tilalla on perus Serif-fontti (mikä lienee).

    Jotain se Autoptimize minullakin välimuistiinsa kirjoittelee, mutta jos siellä välimuistissa on kaksi tiedostoa, niin sillä ei kyllä ole suurtakaan merkitystä.

    Siteground voi olla ihan hyvä hosti, mutta jos palvelun käyttäjät ovat Suomessa, Yhdysvalloissa sijaitseva palvelin voi syödä muita etuja. Suomestakin löytyy hyviä toimijoita, esimerkiksi WP-Palvelu ja Zoner ymmärtävät WordPressin päälle erittäin hyvin. Itse käytän nykyään yksinomaan WP-Palvelua, siellä on koko palvelinpaketti optimoitu alusta loppuun WordPressiä varten.

Esillä 15 vastausta, 1 - 15 (kaikkiaan 16)
  • You must be logged in to reply to this topic.