Sıkıştırılmış Kaynak Dosyaları Kullanımı ve Kaynak Dosya Sıkıştırma Yöntemleri (JS,CSS vb)

Dosya Sıkıştırma Nedir?

Hepimiz bazı zaman dosya veya dosyaların boyutlarını azaltmak zorunda kalıyoruz. Dosya veya dosyaları arşivlemek maksadı ile e-posta ile bir başkasına göndermek istediğimiz ya da saklama alanımızı hesaplı bir şekilde kullanmak için olabilir. İşte yapılan bu işleme (Dosya veya dosyaların yer kapladıkları alanları boşaltmak) dosya sıkıştırma adı verilir.

Çok sayıda dosya sıkıştırma çeşidi yer almaktadır. Bunlara örnek verecek olursak; rar, zip, arj, ace, 7zp gibi.

Bunların içerisinden rar dosya sıkıştırma formatını internette dosya transferi yapmak istediğinizde en fazla kullanılan format olarak görmeniz mümkündür. Zip formatı ise işletim sisteminin buna benzer dosyaları herhangi bir programa destek sağlamadan açabilmeleri için ön plana çıkmaktadır. Bu noktada bilinmesi gereken Windows’un zip formatı içinde sıkıştırılmış olan dosyaları açmasına izin vermesidir, sıkıştırma işlemi yapmasını desteklememesidir. Bu da bizim karşı tarafa göndermek istediğimiz dosyaları sıkıştırarak meydana getirdiğimiz dosya veya dosyaların içeriklerini, kaşı tarafın işletim sisteminde zip dosyasını destekleyecek bir programın olmaması halinde bile bu dosyayı açarak içeriğine erişebilmesinin sağlanmasıdır.

HTML5 dosya boyutunu küçültme işlemi

Gelen olarak HTML5 reklam öğeleri HTML, JavaScript ve CSS ile meydana getirilen reklamlara başvuruda bulunur. HTML5 reklam öğeleri, dosyalarını sıkıştırabilmek için pek çok fırsat tanır. Aşağıda vermiş olduğumuz ipuçlarını çoğu 15 dakika gibi kısa bir süre içerisinde uygulanabilir.

Google Web Designer'ı kullanma aşaması

Studio, Google Web Designer ve öğe kitaplığı ile sorunsuz olarak bütünleşmiş edilmiş, HTML5 geliştirme için kullanılmış olan bir web uygulamasıdır. Bu duruma ek olarak, Google Web Designer'ın kod ve resimler için yerleşik sıkıştırma imkânı, SVG desteği, Google web yazı tipleri desteği, CSS animasyon desteği ve başka özellikleri de mevcuttur. Bizim tavsiyemiz ise Google Web Designer'I kullanmanız yönündedir.

Dosyanızın boyutunu kontrol etme

Dosya boyutunu küçültmeden önce, geçerli dosya boyutunuzu kontrol edip aşağıdaki yönerge ve şartları inceleyin.

Sıkıştırılmış dosya boyutu - İşlenmemiş dosya boyutu

İşlenmiş doya boyutunu inceleyebilmeniz için;

· Studio'da, reklam öğesinin iş akışını dosyalarını yönetme aşamasında toplam dosya boyutunuzun ne kadar olduğunu kontrol edin.

· Google Web Designer'nın yayınlama iletişim kutusunun içinde toplam boyut (İşlenmemiş) bilgisini görebilmeniz için Yayınla > Yerel olarak yayınla seçeneklerini tıklayın. Bu sayede geçerli dosya boyutunu reklam doğrulama panelinin içinde görüntüleyebilirsiniz.

Google Web Designer, reklam öğelerini ücretsiz olarak sunduğu gzip yazılımının içine sıkıştırır. Eğer Google Web Designer sistemini kullanmıyorsanız Gzip’in ücretsiz kopyasını indirerek yararlanabilir, reklam öğelerinizi yerel çalışma alanınızın içinde sıkıştırabilir ve dosya boyutlarına göz atabilirsiniz.

Yayıncının reklam sunucusu daha farklı bir sıkıştırma yöntemi kullanıyor olabilir. Bu nedenle sıkıştırılmış olan dosya hesaplamalı neticesinde olası meydana gelecek anlaşmazlıkları çözebilmek için yayıncı kuruluşunuz ile iletişime geçmeniz daha iyi olacaktır.

Dosya boyutu referans değerleri hakkında

Reklam öğelerini meydana getirmeden önce, yayıncınızın reklam verme özelliklerini anlamaya çalışmanız oldukça önemlidir. Ancak, çok sayıda yayıncı reklam öğesi için 200kb (sıkıştırılmış) ilk ve toplam reklam öğesi boyutu için 300 ya da 500 kb olan IAB önerilerini uygulamaktadır. İlk yük, ilk reklamın görüntülenebilmesi için tarayıcıya teslim edilmiş olan bütün reklam öğelerinin toplam sıkıştırılmış dosya boyutlarını belirtir. HTML, Resimler, CSS ve JavaScript gibi dosyaların tamamı buna dâhil edilir.

Etkileştirici dosya boyutu

Etkileştiricinin Studio reklam öğelerinin içine dâhil edilmesi gerekmektedir. Ancak her bir Studio reklam öğesi için aynı komut dosyası yüklenmediği için web tarayıcıları, önbelleğe aktarılmış olan bir kopyayı içeriğinde tutar. Etkileştirici komut dosyasının boyutu 25 kb ve 75 kb alan kaplamaktadır.

Yükleme bekleme ve yayıncı özellikleri

Yükleme bekleme, ek reklam öğelerinin yüklenmesini yayıncı sayfayı güncelleyene kadar geciktirmektedir. Bu durum ilk yükten farklıdır. İlk yük, ilk reklam görüntüleme işlemi için tarayıcıya teslim edilmiş olan bütün reklam öğelerinin toplam sıkıştırılmış dosya boyutlarını belirtmektedir. Bazı yayıncılar yükleme işlemini beklemeyi gerektirir, ancak zorunlu olmadığı zaman bile bunun reklam öğesinin içine ilave edilmesi iyi bir fikir olabilir. Ama bunun için ilk olarak yükleme beklemenin nasıl ayarlanacağını öğrenmeniz gerekir.

Yayıncınızın Rich Media HTML5 özelliklerini araştırın. Yayıncılar, dosya boyutlarını sıkıştırılmış Gzip şeklinde dayanak olarak gösterebilir ya da işlenmemiş dosya boyutunu saymayı seçebilir. Teker teker yayıncıların özellikleri reklam türüne, yerleşime bağlı olarak IAB özelliklerinden farklılık gösterebilir. Bazı yayıncıların oluşturma özelliklerinde ödün verme sürelerine çok dikkat edin.

Resim boyutunu küçültme

Herhangi bir resim boyutunu küçültme işlemine başlamadan önce, ilk etapta resmin yüklemek istediğiniz sayfaya gerekli olup olmadığını bir düşünün. Bazı resim öğelerinin yerine CSS tipi stillerde kullanılabilir. Aşağıda, reklam öğelerinde yer alan resimlerin sayısını azaltabilmeniz ve gerek duymuş olduğunuz resimleri optimize ermenize yönelik kaynak ve önerilere yer verilmiştir.

CSS ile animasyon uygulama

Dönüştürmeler ve geçişler için JavaScript ‘in yerine CSS3 animasyonları kullanmayı deneyin. CSS dönüşümleri, animasyonları meydana getirmek için CPU (Merkezi İşlem Birimi) yerine GPU’yu kullanmaktadır. Bu durum performansı iyileştirirken aynı zamanda JavaScript’in dosya boyutunu küçültmektedir.

Daha karışık animasyonlar (parçacık animasyonları da dâhil olmak üzere) için GreenSock JavaScript animasyon kitaplarından faydalanmayı düşünebilirsiniz. GreenSock, CSS animasyonun, birden çok animasyonun zamanlamalarını dönüştürme ve ayarlama özelliklerinin animasyonu bağımsız bir biçimde uygulama gibi daha çaba isteyen yönlerini basit hale getirir.

Animasyonlar için JavaScript'in setInterval sistemini kullanan JavaScript çerçevelerini veya kitaplıklarını el ile kodlama işlemi yaparken setlnterval yöntemini kesinlikle kullanmayın. Setlnterval, oldukça fazla tarayıcı kaynağını tüketmektedir. Bunun yanında performansı olumsuz yönde etkiler ve gereğinden daha fazla kod gerektirir. JavaScript animasyonlarının kullanılması zorunlu bir hal aldıysa özellikle animasyonlar için yapılmış equestAnimationFrame yöntemini deneyin

Animasyon performansının nasıl optimize edilmesi gerektiğini öğrenin ve requestAnimationFrame yöntemini kullanma, JavaScript ve CSS animasyonlarının karşılaştırmasını yapmaya başlayın.

CSS dosyalarını Studio’ya yüklemeden önce CSS dosyanızı CSS Minifier aracını kullanarak küçültün.

JavaScript dosya boyutu nasıl küçültülür

Burada, JavaScript dosya boyutunu küçültmeyle alakalı bazı ipuçlarına sahip olabilirsiniz:

• İlk olarak JavaScript’inizi birleştirin ve ardından sıkıştırın
• Birden çok JavaScript dosyanız bulunuyorsa bunları tyek bir dosya içerisinde birleştirin.
• JavaScript’tinizden fazladan boşlukları ve yorumları kaldıran araçlar kullanın.

Küçültme ile ilgili bazı ipuçları

• Sıradaki güncellemeler için sıkıştırılmamış olan bir kopyayı her zaman elinizin altında bulundurun.
• JavaScript, studio dosyalarının. min. js değil, .js uzantısı olması gerekmektedir.
• JavaScript dosyalarını eğer küçültürseniz izlemeyi kolaylıkla ekleyemezsiniz. İlk olarak izlemeyi ekleyin ve ardından JavaScript dosyasını küçültün.

Yazı tiplerini optimize etme

Standart olan web yazı tiplerinin haricinde bir yazı tipi kullanıyorsanız ücretsiz yazı tiplerinin bulunduğu geniş bir kitaplık görevi gören Google Fonts’u kullanmayı deneyin. Dosya boyutlarını küçültebilmek için yazı tipinin tamamı yerine, yazı tipinden sadece gerek duyduğunuz karakterleri isteyin.

Bunun yanında, tarayıcı aracılığı ile sadece mutlak URL’lerin önbelleğe alındığını dikkate almanız oldukça önemlidir. Belirli olan bir reklam öresi için en küçük boyut http://fonts.googleapis.com//Css?family=Philosopher&text=Hello olacaktır. Fakat bu, tarayıcı geçmişinde daha önce önbelleğe alınmış olan http://fonts.googleapis.com//Css?family=Philosopher&subset=latin isteğinden daha ayrı bir istek olarak görülmüş olacaktır.