HTML5 reklam öğeleri genellikle HTML, CSS ve JavaScript ile oluşturulan reklamlara başvuruda bulunur. HTML5 reklam öğeleri, dosyalarınızı sıkıştırmanız için birçok fırsat sağlar. Aşağıda sağlanan ipuçlarının birçoğu 15 dakikadan daha kısa sürede uygulanabilir.
Bu makaledeki konular:
Google Web Designer'ı kullanma
Google Web Designer, Studio ve Öğe Kitaplığı ile sorunsuz bir şekilde entegre olmuş, HTML5 geliştirme için kullanılan bir web uygulamasıdır. Buna ek olarak, Google Web Designer'ın resimler ve kod için yerleşik sıkıştırma olanağı, Google web yazı tipleri desteği, SVG desteği, CSS animasyon desteği ve başka özellikleri vardır.
Google Web Designer'ı kullanmaya başlayın
Dosyanızın boyutunu kontrol edin
Dosya boyutunu küçültmeden önce, geçerli dosya boyutunuzu kontrol edin ve aşağıdaki yönergeleri ve terimleri inceleyin.
İşlenmemiş dosya boyutu ve sıkıştırılmış dosya boyutu
İşlenmemiş dosya boyutunuzu incelemek için:
- Studio'da, Studio reklam öğesi iş akışının Dosyaları yönetme adımında Toplam dosya boyutunuzu kontrol edin.
- Google Web Designer'daki yayınlama iletişim kutusunda Toplam Boyut (İşlenmemiş) bilgisini görüntülemek için Yayınla > Yerel olarak yayınla'yı tıklayın. Geçerli dosya boyutunu Reklam Doğrulama Aracı panelinde de görüntüleyebilirsiniz.
Google Web Designer, reklam öğelerini ücretsiz gzip yazılımıyla sıkıştırır. Google Web Designer'ı kullanmıyorsanız gzip'in ücretsiz bir kopyasını indirebilir, reklam öğelerini yerel çalışma alanınızda sıkıştırabilir ve dosya boyutuna bakabilirsiniz.
Dosya boyutu referans değeri
Reklam öğenizi oluşturmadan önce, yayıncınızın reklam sunma özelliklerini anlamanız önemlidir. Ancak, birçok yayıncı reklam öğesi için 200 KB (sıkıştırılmış) ilk yük ve toplam reklam öğesi boyutu için (biçime bağlı olarak) 300 veya 500 KB olan IAB önerilerini uygular. İlk yük, ilk reklam görüntülemesi için tarayıcıya teslim edilen tüm reklam öğelerinin toplam sıkıştırılmış dosya boyutunu belirtir. Resimler, HTML, CSS ve JavaScript gibi tüm dosyalar buna dahildir.
Etkinleştirici dosya boyutu
Etkinleştirici'nin Studio reklam öğelerine dahil edilmesi gerekir, ancak her Studio reklam öğesi için aynı komut dosyası yüklendiğinden web tarayıcıları, önbelleğe alınmış bir kopyayı tutar. Etkinleştirici komut dosyasının boyutu 25 KB (sıkıştırılmış) ve 75 KB'tır (işlenmemiş).
Ek ayrıntılar için IAB ve Studio yönergelerine bakın:
- IAB HTML5 yönergeleri (.PDF biçimindedir, 4. ve 6. sayfaya bakın)
- Studio’nun reklam öğesi yönergeleri
Chrome'un Ağır Reklamlara Müdahalesi Hakkında
- Reklam öğeniz çok sayıda resim, video, animasyon veya 3D nesne içeriyorsa reklam öğenizi test edip kaldırılmadığından emin olmak için Chrome yönergelerini uygulayın.
- Reklam öğenizi test edip engellenip engellenmeyeceğini görmek için Chrome'un Ağır Reklamlara Müdahalesi demosunu kullanın.
Yükleme bekleme ve yayıncı özellikleri
Yükleme bekleme, ek reklam öğelerinin (resimler ve video gibi) yüklenmesini yayıncının sayfası yükleninceye kadar geciktirir. Bu, ilk yükten farklıdır. İlk yük, ilk reklam görüntülemesi için tarayıcıya teslim edilen tüm reklam öğelerinin toplam sıkıştırılmış dosya boyutunu belirtir. Bazı yayıncılar yükleme beklemeyi gerektirir, ancak zorunlu olmadığında bile bunun reklam öğesine dahil edilmesi iyi bir fikirdir. Yükleme beklemenin nasıl ayarlanacağını öğrenin
Yayıncınızın Rich Media HTML5 özelliklerini inceleyin. Yayıncılar, dosya boyutunu sıkıştırılmış gzip biçimine dayanarak sayabilir veya işlenmemiş dosya boyutunu saymayı tercih edebilir. Tek tek yayıncıların özellikleri, yerleşime, reklam türüne vb. bağlı olarak IAB özelliklerinden farklı olabilir. Bazı yayıncılar, oluşturma özelliklerinden ödün verme konusunda daha istekli olabilir. Animasyon veya video oynatma süresi sınırlamalarına da dikkat edin.
Resim boyutunu küçültme
Bir resmin boyutunu küçültmeyi denemeden önce, ilk olarak bir resmin gerekli olup olmadığını düşünün. Bazı resim öğelerinin yerine CSS stilleri kullanılabilir. Aşağıda, reklam öğenizdeki resimlerin sayısını azaltmak ve gereksinim duyduğunuz resimleri optimize etmek için sağlanan önerileri ve kaynakları görebilirsiniz.
Renk geçişleri ve düz renkler oluşturmak için CSS kullanınGIF, JPG ve PNG resimleri piksel temellidir (“kafes”) ve boyut olarak daha büyüktür. SVG'ler, noktadan noktaya dayanan grafiklerdir ("vektör") ve dosya boyutunu önemli ölçüde azaltabilirler.
SVG hakkında daha fazla bilgi edinin
W3School SVG Öğreticisi
SVG'ler Nasıl Kullanılır?
SVG'leri Sıkıştırma
Simge yazı tipleri, tıpkı standart yazı tipleri gibi kullanılabilecek normal yazı tipleridir. Bunlar genellikle vektöre dayanır ve bu nedenle, dosya boyutunu küçültür. Aynı simgeleri tekrar tekrar kullanıyorsanız kendi simge yazı tipinizi oluşturun.
Simge yazı tipi kaynakları
Icomoon Simge Yazı Tipi Oluşturucu
NounProject css simgeleri
FontAwesome css simgeleri
İmge sayfası, bir kez yüklenen tek parçaya ayrılmış bir resimdir. CSS ile toplam resmin yalnızca bağımsız parçaları gösterilir. Model sayfasının kullanılması HTTP isteklerinin sayısını azaltır. Daha az HTTP isteği, reklam öğenizin daha hızlı yüklenmesini sağlar. Model sayfanız için doğru sıkıştırmayı bulmanız yine de önemlidir.
Model sayfası kaynakları
W3School CSS Resim Modellerine Genel Bakış
Stitches çevrimiçi model sayfası oluşturucu
Piksele dayalı resimlerin kullanılması gerekiyorsa bunları, kaliteyi korurken mümkün olan en iyi şekilde sıkıştırın. Muhtemelen Photoshop’un Web için Kaydet işlevini biliyorsunuzdur, ancak ileri düzey sıkıştırma sunan başka çevrimiçi araçlar da vardır.
CSS ile animasyon uygulama
Geçişler ve dönüştürmeler için JavaScript'in yerine CSS3 animasyonları kullanmayı düşünün. CSS dönüştürmeleri, animasyonları oluşturmak için CPU (Merkezi İşlem Birimi) yerine GPU (Grafik İşleme Birimi) kullanır. Bu, performansı iyileştirirken JavaScript dosya boyutunu küçültür.
Daha karmaşık animasyonlar (parçacık animasyonları dahil) için GreenSock JavaScript animasyon kitaplıklarını (GSAP) kullanmayı düşünün. GreenSock, CSS animasyonunun, birden çok animasyonun zamanlamasını ayarlama ve dönüştürme özelliklerinin animasyonunu bağımsız olarak uygulama gibi daha uğraştırıcı yönlerini basitleştirir.
Animasyonlar için JavaScript'in setInterval yöntemini kullanan JavaScript kitaplıklarını veya çerçevelerini ve el ile kodlama yaparken setInterval yöntemini kullanmayın. setInterval, çok fazla tarayıcı kaynağı tüketir, performansı olumsuz etkiler ve daha fazla kod gerektirir. JavaScript animasyonlarının kullanılması zorunluysa özellikle animasyonlar için yapılmış olan requestAnimationFrame yöntemini kullanmayı düşünün.
Animasyon performansının nasıl optimize edileceğini öğrenin
requestAnimationFrame Yöntemini Kullanma
CSS ve JavaScript Animasyonlarının Karşılaştırması
CSS dosyalarınızı Studio'ya yüklemeden önce, CSS'nizi bir CSS Küçültücü ile küçültün.
JavaScript dosya boyutunu küçültme
Burada, JavaScript dosyanızın boyutunu küçültmeye ilişkin bazı ipuçlarını bulabilirsiniz:
jQuery kullanmayınReklam öğenizle birlikte JavaScript kitaplıklarını yüklemek yerine, genel JavaScript kitaplık referanslarını Studio tarafından barındırılan URL'lerle değiştirin. Bu kitaplıklar, yayındaki reklamınızla aynı alanda barındırılır.
Studio, IAB ile çalışarak bu kaynakların pek çok reklam öğesi tarafından paylaşılmasına ve önbelleğe alınmasına yardımcı olur. Böylece bunlar, reklamınızın ilk yüklemesine dahil edilmez.
Kampanyanızın hedefleyeceği tarayıcılara ve cihazlara karar vererek zamandan ve koddan tasarruf edin. Desteklenmeyen tarayıcılar veya cihazlar için kod eklemeyin. Bu, testler sırasında zamandan kazanmanızı da sağlar.
Tarayıcı desteği kaynaklarıStudio için tarayıcı ve cihaz desteği
Kullanabilir miyim? JS ve CSS özellikleri için güncel tarayıcı desteği
JavaScript dosyalarınızı birleştirip sıkıştırın
Birden çok JavaScript dosyanız varsa bunları tek bir dosyada birleştirin. JavaScript'inizden yorumları ve fazladan boşlukları kaldıracak araçlar kullanın.
- İleride güncellemeler yapmak için sıkıştırılmamış bir kopyayı elinizin altında tutun.
- Studio, JavaScript dosyalarının
.min.jsdeğil,.jsuzantısı olmasını gerektirir. - JavaScript dosyalarınızı küçültürseniz izlemeyi kolayca ekleyemezsiniz. Önce izlemeyi ekleyin, daha sonra JavaScript dosyasını küçültün.
Yazı tiplerini optimize etme
Standart web yazı tiplerinin dışında bir yazı tipi kullanıyorsanız ücretsiz yazı tiplerinin yer aldığı geniş bir kitaplık olan Google Fonts'u kullanmayı düşünün. Dosya boyutunu küçültmek için yazı biçiminin tamamı yerine yazı tipinden yalnızca gereksinim duyduğunuz karakterleri istediğinizden emin olun.
Bununla birlikte, bir tarayıcı tarafından yalnızca mutlak URL'lerin önbelleğe alındığının düşünülmesi de önemlidir. Belirli bir reklam öğesi için en küçük boyut http://fonts.googleapis.com/css?family=Philosopher&text=Hello olacaktır; bununla birlikte, bu, tarayıcı geçmişinde önceden önbelleğe alınmış olabilecek http://fonts.googleapis.com/css?family=Philosopher&subset=latin isteğinden ayrı bir istek olarak görülebilir. Reklam öğelerinizin daha hızlı yüklenmesi için mümkün olduğunda önbelleğe alma özelliğinden yararlanın.
Web yazı tipleri hakkında daha fazla bilgi edinin
Google Web Yazı Tipleri ile yazı tipi isteklerini optimize etme
Typekit için yazı tipi alt grupları oluşturma ve kendi kendine barındırılan web yazı tipleri