Minimointi ja niputtaminen SharePoint Onlinessa

Tässä artikkelissa kerrotaan, miten voit käyttää minimointia ja niputtamista Web Essentialsin kanssa HTTP-pyyntöjen määrän vähentämiseksi ja sivujen latautumisaikojen lyhentämiseksi SharePoint Onlinessa.

Kun mukautat sivustoa, saatat lisätä paljon ylimääräisiä tiedostoja palvelimelle mukauttamisen tukemiseksi. Kun lisäät ylimääräistä JavaScriptiä, CSS:ää ja kuvia, HTTP-pyyntöjen määrä lisääntyy, mikä puolestaan pidentää verkkosivujen näyttämiseen kuluvaa aikaa. Jos sinulla on useita samantyyppisiä tiedostoja, voit niputtaa ne, jotta ne latautuisivat nopeammin.

JavaScript- ja CSS-tiedostoissa voit käyttää myös minimointia. Se tarkoittaa tiedostojen kokonaiskoon pienentämistä poistamalla välilyönnit ja muut tarpeettomat merkit.

JavaScript- ja CSS-tiedostojen minimointi ja niputtaminen Web Essentialsin kanssa

Voit niputtaa CSS- ja JavaScript-tiedostot kolmannen osapuolen ohjelmiston, kuten Web Essentialsin, avulla.

Tärkeää: Web Essentials on kolmannen osapuolen tarjoama, avoimen lähdekoodin yhteisöprojekti. Ohjelmisto on Visual Studio 2012:n ja Visual Studio 2013:n laajennus eikä Microsoft tue sitä. Voit ladata Web Essentialsin osoitteessa http://vswebessentials.com/download.

Web Essentials tarjoaa kahdenlaista niputtamista:

  • .bundle: CSS- ja JavaScript-tiedostoille

  • .sprite: kuville (käytettävissä vain Visual Studio 2013:ssa)

Voit käyttää Web Essentialsia, jos sinulla on olemassa oleva toiminto, jonka mukautuselementteihin viitataan mukautetulla perustyylisivulla, kuten:

Näyttökuva logosta mukautetulla perustyylisivulla

TE000127218- ja CSS-nipun luominen Web Essentialsissa

  1. Valitse Visual Studion Ratkaisunhallinnassa tiedostot, jotka haluat sisällyttää nippuun.

  2. Napsauta valittuja tiedostoja hiiren kakkospainikkeella ja valitse pikavalikosta Web Essentials > Luo JavaScript-nipputiedosto. Esimerkki:

    Näyttökuva Web Essentials -valikon asetuksista

JavaScript- ja CSS-tiedostojen niputtamistulosten tarkastelu

Kun luot JavaScript- ja CSS-nipun, Web Essentials luo XML-tiedoston, ohjetiedoston, joka tunnistaa JavaScript- ja CSS-tiedostot sekä myös muita määritystietoja:

Näyttökuva JavaScript- ja CSS-tiedostosta

Jos lisäksi niputtamisohjeessa minimointimerkinnän arvoksi on määritetty tosi, tiedostojen kokoa on pienennetty ja tiedostot on niputettu yhteen. Tämä tarkoittaa sitä, että JavaScript-tiedostoista luotiin uudet, minimoidut versiot, joihin voit viitata perustyylisivulla.

Näyttökuva Minify-merkinnästä, jonka arvo on tosi

Kun lataat sivun verkkosivustoltasi, voit selaimen, kuten Internet Explorer 11:n, sovelluskehittäjätyökalujen avulla nähdä palvelimeen lähetettyjen pyyntöjen määrän ja kunkin tiedoston latautumisajan.

Seuraavassa kuvassa näet JavaScript- ja CSS-tiedostojen lataustuloksen ennen minimointia.

Näyttökuva: 80 kohdetta ladattavana

Kun CSS- ja JavaScript-tiedostot niputettiin yhteen, pyyntöjen määrä laski 74:ään ja kunkin tiedoston lataaminen erikseen kesti vain hieman kauemmin kuin alkuperäisten tiedostojen:

Näyttökuva 74 kohteen latauksesta

Niputtamisen jälkeen JavaScript-nipputiedoston koko pieneni merkittävästi 815 kilotavusta 365 kilotavuun:

Näyttökuva pienemmästä ladattavasta tiedostosta

Kuvien niputtaminen luomalla sprite-kuva

Samalla tavoin kuin niputat JavaScript- ja CSS-tiedostot, voit yhdistää useita pieniä kuvakkeita ja muita yleisiä kuvia suurempaan sprite-taulukkoon ja näyttää sitten yksittäiset kuvat CSS:n avulla. Käyttäjän selain ei lataa jokaista yksittäistä kuvaa, vaan se lataa sprite-taulukon kerran ja tallentaa sen paikallisen tietokoneen välimuistiin. Tämä nopeuttaa sivujen latautumista vähentämällä latausten määrää ja nopeuttamalla yhteyden muodostamista palvelimeen.

Sprite-kuvan luominen Web Essentialsissa

  1. Valitse Visual Studion Ratkaisunhallinnassa tiedostot, jotka haluat sisällyttää nippuun.

  2. Napsauta valittuja tiedostoja hiiren kakkospainikkeella ja valitse pikavalikosta Web Essentials > Luo sprite-kuva. Esimerkki:

    Näyttökuva: kuvasarjan luominen
  3. Valitse sprite-tiedoston tallennussijainti. Spriten asetukset ja tiedostot kuvataan .sprite-tiedostossa, joka on XML-tiedosto. Seuraavissa kuvissa on esimerkki sprite-PNG-tiedostosta ja sitä vastaavasta .sprite-XML-tiedostosta.

    Näyttökuva sprite-tiedostosta

    Näyttökuva kuvasarjan XML-tiedostosta

Kehitä taitojasi
Tutustu koulutusmateriaaliin
Saat uudet ominaisuudet ensimmäisten joukossa
Liity Office Insider -käyttäjiin

Oliko näistä tiedoista hyötyä?

Kiitos palautteesta!

Kiitos palautteestasi! Näyttää siltä, että Office-tukiedustajamme avusta voi olla sinulle hyötyä.

×