Nipisteyttäminen ja niputtaminen SharePointissa

Tässä artikkelissa kuvataan, miten voit pienentää HTTP-pyyntöjen määrää ja lyhentää sivujen lataamiseen SharePointissa käyttämiä vähimmäis- ja niputustekniikoita Web Essentials avulla.

Kun mukautat verkkosivustoa, voit lisätä palvelimeen suuren määrän ylimääräisiä tiedostoja mukauttamisen tukemiseksi. JavaScriptin, CSS:n ja kuvien lisääminen lisää HTTP-pyyntöjen määrää palvelimeen, mikä puolestaan pidentää verkkosivun näyttämiseen kuluvaa aikaa. Jos sinulla on useita samantyyppisiä tiedostoja, voit niputtaa nämä tiedostot, jotta näiden tiedostojen lataaminen on nopeampaa.

JavaScript- ja CSS-tiedostoissa voit myös käyttää minification-menetelmää, jossa pienennät tiedostojen kokonaiskokoa poistamalla välilyönnit ja muut merkit, jotka eivät ole välttämättömiä.

JavaScript- ja CSS-tiedostojen louhiminen ja niputtaminen Web Essentials

Voit käyttää kolmannen osapuolen ohjelmistoja, kuten Web Essentials CSS- ja JavaScript-tiedostojen niputtamiseen.

Tärkeää

Web Essentials on kolmannen osapuolen avoimen lähdekoodin yhteisöpohjainen projekti. Ohjelmisto on Visual Studio 2012:n ja Visual Studio 2013:n laajennus, eikä Microsoft tue sitä. Lataa Web Essentials web Essentials 2012 -sivustosta.

Web Essentials tarjoaa kaksi niputtamismuotoa:

• .bundle: CSS- ja JavaScript-tiedostoille
• .sprite: kuville (käytettävissä vain Visual Studio 2013:ssa)

Voit käyttää WWW-Essentials, jos sinulla on aiemmin luotu ominaisuus, jossa on mukautuselementtejä, joihin viitataan mukautetun perustyylisivun sisällä, kuten:

TE000127218- ja CSS-paketin luominen www-Essentials

1. Valitse Visual Studion Ratkaisunhallinta tiedostot, jotka haluat sisällyttää pakettiin.

2. Napsauta hiiren kakkospainikkeella valittuja tiedostoja ja valitse sitten Web Essentials>Create JavaScript-pakettitiedosto pikavalikosta. Esimerkki:

   

JavaScript- ja CSS-tiedostojen niputtamisen tulosten tarkasteleminen

Kun luot JavaScript- ja CSS-paketin, Web Essentials luo XML-tiedoston nimeltä reseptitiedosto, joka tunnistaa JavaScript- ja CSS-tiedostot sekä joitakin muita määritystietoja:

Lisäksi, jos vähimmäisarvomerkintä on true niputtamisreseptissä, tiedostot on pienennetty ja niputettu yhteen. Tämä tarkoittaa sitä, että on luotu javaScript-tiedostojen uusia, minifioituja versioita, joihin perustyylisivulla voi viitata.

Kun lataat sivun verkkosivustosta, voit käyttää selaimesi kehittäjätyökaluja, kuten Internet Explorer 11:tä, nähdäksesi palvelimeen lähetettyjen pyyntöjen määrän ja sen, kuinka kauan kunkin tiedoston lataaminen kesti.

Seuraava kuva on JavaScript- ja CSS-tiedostojen lataamisen tulos ennen louhimista.

Niputettuaan CSS- ja JavaScript-tiedostot yhteen, pyyntöjen määrä putosi 74:ään ja kunkin tiedoston lataaminen kesti vain hieman alkuperäistä tiedostoa kauemmin yksitellen:

Niputtamisen jälkeen JavaScript-pakettitiedostoa vähennetään merkittävästi 815 kilotavusta 365 kilotavuun:

Kuvien niputtaminen luomalla kuvan sprite

Samalla tavoin kuin niputat JavaScript- ja CSS-tiedostoja, voit yhdistää useita pieniä kuvakkeita ja muita yleisiä kuvia suuremmaksi sprite-arkiksi ja paljastaa sitten yksittäiset kuvat CSS:n avulla. Yksittäisten kuvien lataamisen sijaan käyttäjän verkkoselain lataa sprite-taulukon kerran ja tallentaa sen sitten paikalliseen tietokoneeseen. Tämä parantaa sivun kuormituksen suorituskykyä vähentämällä verkkopalvelimeen ladattavien latausten ja kiertojen määrää.

Kuvan luominen www-Essentials**

1. Valitse Visual Studion Ratkaisunhallinta tiedostot, jotka haluat sisällyttää pakettiin.

2. Napsauta valittuja tiedostoja hiiren kakkospainikkeella ja valitse sitten pikavalikosta Web Essentials>Create kuvan sprite. Esimerkki:

   

3. Valitse sprite-tiedoston tallennussijainti. .sprite-tiedosto on XML-tiedosto, joka kuvaa sprite-asetuksia ja tiedostoja. Seuraavissa kuvissa on esimerkki sprite PNG -tiedostosta ja sitä vastaavasta .sprite XML -tiedostosta.