SharePoint Online’da küçültme ve paketleme

Bu makalede, Web Essentials ile küçültme ve paketleme teknikleri kullanılarak HTTP istekleri sayısının ve SharePoint Online üzerinde sayfa yükleme süresinin azaltılması açıklanmaktadır.

Web sitenizi özelleştirirken, özelleştirmeyi desteklemek üzere sunucuya çok sayıda ek dosya eklenebilir. Fazladan JavaScript, CSS ve resimlerin eklenmesi, sunucuya yapılan HTTP isteklerini artırır ve bu da bir web sayfasının görüntülenmesi için gereken süreyi uzatır. Aynı türden birden çok dosyanız varsa bu dosyaları paketleyerek, indirilmelerini hızlandırabilirsiniz.

JavaScript ve CSS dosyaları için, boşlukların ve gerekli olmayan diğer karakterlerin kaldırılarak dosyaların toplam boyutunun azaltıldığı küçültme adı verilen bir yaklaşım da kullanabilirsiniz.

JavaScript ve CSS dosyalarını Web Essentials ile küçültme ve paketleme

CSS ve JavaScript dosyalarını paketlemek için Web Essentials üçüncü taraf yazılımları kullanabilirsiniz.

Önemli : Web Essentials üçüncü taraf, açık kaynaklı ve topluluk tabanlı bir projedir. Bu yazılım, Visual Studio 2012 ve Visual Studio 2013 için sunulan bir uzantıdır ve Microsoft tarafından desteklenmez. Web Essentials’ı indirmek için http://vswebessentials.com/download adresinden yazılımın web sitesini ziyaret edin.

Web Essentials iki biçimde paketleme sunar:

  • .bundle: CSS ve JavaScript dosyaları için

  • .sprite: resimler için (yalnızca Visual Studio 2013 için kullanılabilir)

Aşağıda gösterildiği gibi özel bir ana sayfa içinde başvurulan bazı markalama öğeleri bulunan mevcut bir özelliğiniz varsa Web Essentials’ı kullanabilirsiniz:

eNom-Configure-1-3

Web Essentials’ta bir JavaScript ve CSS paketi oluşturmak için

  1. Visual Studio Çözüm Gezgini’nde pakete eklemek istediğiniz dosyaları seçin.

  2. Seçili dosyalara sağ tıklayın ve kısayol menüsünden Web Essentials > JavaScript paket dosyası oluştur’u seçin. Örneğin:

    Sunuda Resimlerin Sekiz Rolü

JavaScript ve CSS dosyalarını paketlemenin sonuçlarını görüntüleme

Bir JavaScript ve CSS paketi oluşturulurken Web Essentials, JavaScript ve CSS dosyalarının yanı sıra diğer bazı yapılandırma bilgilerini tanımlayan, tarif dosyası adı verilen bir XML dosyası oluşturur:

Sol üst köşede Hızlı Erişim Araç Çubuğu (varsayılan yer)

Ayrıca, paketleme tarifinde küçültme işareti true olarak ayarlanmışsa dosyalar hem birlikte paketlenir hem de küçültülür. Böylece JavaScript dosyalarının ana sayfanızda başvurabileceğiniz yeni ve küçültülmüş sürümleri oluşturulmuş olur.

Hesabın yapılandırılamadığını gösteren Yeni Hesap Ekle iletişim kutusu

Web sitenizde bir sayfa yüklediğinizde web tarayıcınızın (Internet Explorer 11 gibi) geliştirici araçlarını kullanarak, sunucuya gönderilen istek sayısına ve her bir dosyanın ne kadar sürede yüklendiğine bakabilirsiniz.

Aşağıdaki şekil, JavaScript ve CSS dosyalarının küçültme öncesinde yüklenmesinin sonucudur.

Giriş sekmesindeki Sayı grubu

CSS ve JavaScript dosyalarının birlikte paketlenmesinden sonra isteklerin sayısı 74’e düşmüştür ve her dosyanın tek tek indirilme süresi özgün dosyalardan yalnızca biraz daha uzundur:

74 öğenin indirilmekte olduğunu gösteren ekran görüntüsü

Paketleme sonrasında JavaScript paket dosyasının boyutu ciddi miktarda azalarak 815 KB’tan 365 KB’a inmiştir.

İçerik türü değişikliklerine SharePoint Designer'da izin verin

Resim sprite’ı oluşturarak resimleri paketleme

JavaScript ve CSS dosyalarının paketlenmesine benzer bir şekilde, çok sayıda küçük simgeyi ve diğer sık kullanılan resimleri büyük bir sprite sayfası halinde birleştirebilir ve sonra CSS kullanarak bu resimleri ayrı ayrı gösterebilirsiniz. Kullanıcının web tarayıcısı, her bir resmi tek başına indirmek yerine sprite sayfasını bir kez indirir ve yerel bilgisayarda önbelleğe alır. Bu şekilde indirme sayısının ve web sunucusuna gidiş dönüş işlemlerinin azaltılması, sayfa yükleme performansını geliştirir.

Web Essentials’ta bir resim sprite’ı oluşturmak için

  1. Visual Studio Çözüm Gezgini’nde pakete eklemek istediğiniz dosyaları seçin.

  2. Seçili dosyalara sağ tıklayın ve kısayol menüsünden Web Essentials > Resim sprite’ı oluştur’u seçin. Örneğin:

    Not defterlerinize başka sayfalar ekleyin.
  3. Sprite dosyasının kaydedileceği konumu seçin. .sprite dosyası sprite’ın ayarlarını ve dosyalarını açıklayan bir XML dosyasıdır. Aşağıdaki şekillerde, sprite PNG dosyası ve ilgili .sprite XML dosyasının örnekleri gösterilmektedir.

    Birden çok Asıl Slayt

    Sprite XML dosyasının ekran görüntüsü

Yeteneklerinizi geliştirin
Eğitimleri keşfedin
Yeni özellikleri ilk olarak siz edinin
Office Insider Programına Katılın

Bu bilgi yararlı oldu mu?

Görüşleriniz için teşekkür ederiz!

Geri bildiriminiz için teşekkürler! Office destek temsilcilerimizden biriyle görüşmeniz yararlı olabilir.

×