3. Prensip 1: CSS Sprites
Uçtan uca sayfa yüklenme performansını artırmak için kullanılan bir
yöntemdir.
Çok sayıda küçük statik resmin birleştirilip CSS dosyasında doğru
koordinatlar verilerek sayfa içinde kullanımı sağlanır.
Bu şekilde her küçük resim için resim sayısınca git-gel yapılacağına, tek
seferde büyük resim yüklenerek performans iyileştirmesi sağlanmış olur.
5. Prensip 1: CSS Sprites
Spriting yapmaya uygun olan
resim tipleri:
✔ Butonlar
✔ İkonlar
✔ Logolar
✔ Statik slayt gösterileri
✔ Kenarlık resimleri
✔ Bannerlar
✔ Öntanımlı kullanıcı avatarları
Spriting yapmaya uygun olmayan resim
tipleri:
✖ Ürün resimleri
✖ Aylık promosyon resimleri
✖ Fotoğraflar
✖ Kullanıcı içerikleri
✖ Video kesitleri
✖ Arama motoruna görünür olan resimler
✖ Faviconlar
✖ Gradyant arkaplanlar
6. Prensip 2: Resim Optimizasyonu
Çeşitli araçlar yardımıyla resimlerin görsel kalitesinden ödün vermeyecek
şekilde sıkıştırılması, boyutlarının küçültülmesi demektir.
Resim boyutlarında bu teknikle %80 oranında küçülme sağlanabilir.
Bu yöntem sayfa yüklenme hızını artıracaktır. CSS Sprite tekniği ile iyi bir ikili
oluştururlar.
7. Prensip 3: JS and CSS küçültme
Küçültme(Minification) tekniği ile formatlı olarak yazılmış CSS ve Javascript
kodları commentler kaldırılarak, aralardaki boşluklar alınarak, uzun değişken
isimleri tek harfli değişken isimlerine indirgenerek CSS veya JS dosyalarının
boyutu küçültülür.
Boyutu küçültülmüş CSS/JS dosyasının ihtiva ettiği kod okunabilirliği çokça
azalırken –ki bu sebepten ötürü bu dosyalar üzerinde geliştirme yapmaya
uygun değildir- client tarafından, boyutu küçüldüğü için, yüklenmesi hızlı ve
kolay kaynak dosyaları elde edilir. Böylece server kaynaklarından daha az
yararlanılmış olunur bandwith).
Minification yapılırken kod fonksiyonalitesi değişmemeli, mevcut kod
bozulmamalıdır.
Source Control sisteminde her zaman dosyanın kendisi de bulunmalı,
Develop->Minify->Test->Deploy şeklinde bir yol izlenmelidir.
11. Prensip 4: Süreğen Bağlantılar
Bir kullanıcı bir web sayfası için istek yaptığında her bir resim, CSS, javascript
dosyası için ayrı requestler yapmak zorundadır.
Default olarak HTTP protokolü her bir içerik için yeni bir fiziksel bağlantı
tanımlamak zorunda olduğundan bu aşırı yük oluşturmak demektir.
12. Prensip 4: Süreğen Bağlantılar
Server üzerinde HTTP KeepAlive enable edilerek persistent connections
sağlanmaktadır.
13. Prensip 4: Süreğen Bağlantılar
Apache’de Persistent Connections ile ilgili ayarlar httpd.conf dosyasında aşağıdaki
parametreleri kullanarak yapılır:
KeepAlive On|Off -> KeepAlive kapatılıp açılır.
KeepAliveTimeout seconds -> KeepAlive için manüel timeout süresi verilebilir
MaxKeepAliveRequests number -> Timeout süresince yapılabilecek maksimum
request sayısı setlenir.
14. Prensip 5: Video Oynatıcılar
Video web sitesinin kendi bünyesinde host edilmeyecekse Youtube yerine daha
sineksiklet olan Vimeo kullanılmalı.
Eğer sitenin kendi bünyesinde host etme imkanı varsa direkt olarak bir video
oynatıcı(Flayr, VideoJS,HTML5 vb.) siteye embed edilip kullanılabilir. Bu başka yerde
host edilenden çok daha performanslı olacaktır.
Eğer Youtube kullanma zorunluluğu varsa Youtube Lite Embed gibi alternatif bir
loader mekanizması kullanılması önerilir. Bu en azından sayfanın ilk yüklenmesini
olumlu etkileyecektir.
15. Prensip 5: Video Oynatıcılar
Player Movie
container
(SWF)
size
Javascript size Total
size
License and cost Supported
Formats
Notes
Youtube (3rd
party hosted)
271kb 43kb 287kb n/a (hosted
solution)
WebM, MPEG4,
MP4, AVI, WMV,
FLV
Commonly used but definitely the
most clunky, and hosted on their
(slow) servers.
Vimeo (3rd
party hosted)
33.1kb 32.6kb 103kb n/a (hosted
solution)
AVI, MPEG4 Lightweight compared with Youtube.
Also hosted on their (sometimes slow)
servers.
Flayr (self
hosted)
7.7kb 0 7.9kb Free, Creative
Commons License
FLV VERY lightweight, but you’ll need to
convert video material to FLV before
uploading.
JWPlayer (self
hosted)
115kb 156kb
(minified)
281kb Commercial
license for 1 site
available at €69.
H.264, FLV,
Youtube
Commonly used in the industry. Not
very performant however!
VideoJS.com
(self hosted)
10kb 17kb (minified) 27kb Free, Open Source
(license
unspecified)
MPEG4, OGV,
WebM.
Fallback player
supports MPEG4
only.
Predominantly an HTML5 Video
player. Includes a fallback Flash client.
which is lightweight but limited.
FlowPlayer
(self hosted)
4kb 21kb (minified).
Also requires
jQuery 1.4+
(1.8 minified is
33kb)
62kb Free but branded.
$95USD for a
commercial
license removing
the FlowPlayer
branding
M4V, FLV,
MPEG4
Very minimalist, especially if you
already have jQuery 1.4+ loaded on
the page. Electroteque provide a 3rd
party plugin to play Youtube videos
($210 AUD).
16. Prensip 6: Gzip Sıkıştırma
Bir web sayfasına istek yapıldığında Html dışında CSS, javascript, resim vb.
dosyaların da istekle birlikte yüklendiği aşikardır.
Gzip bu dosyaların (hepsinin olmasa da bazılarının) sıkıştırılabilmesini ve bu
şekilde yapılan isteğe karşı dönen sonucun daha hızlı gelmesini sağlar.
Gzip sıkıştırma CSS-Javascript küçültme tekniğiyle birlikte %10’dan %40 lara
kadar bir yükleme performansı iyileşmesi sağlanır.
Gzip Compression server üzerinden enable edilir.
17. Prensip 6: Gzip Sıkıştırma
Gzip’e uygun olan dosya tipleri:
✔ HTML (.htm, .html, .php, .jsp, vb.)
✔ XML, RDF (.xml, .rdf)
✔ CSS (.css)
✔ Javascript (.js)
✔ Web Fontları (.ttf, .otf, .eot)
✔ SVG (.svg)
✔ Text Dosyaları (.txt)
✔ MS Office Dökümanları (.xls, .xlsx,
.doc, .docx vb.)
Gzip’e uygun olmayan dosya tipleri:
✖ PNG resimleri (.png)
✖ GIF resimleri (.gif)
✖ JPEG resimleri (.jpeg, jpe, .jpg)
✖ ICO resimleri (.ico)
✖ PDF dökümanları (.pdf)
✖ Video dosyaları (.flv, .mov, .mp4, vb.)
✖ MP3 audio (.mp3)
✖ WOFF web fontları (.woff)
✖ SWF (.swf)
19. Prensip 6: Gzip Sıkıştırma
httpd.conf dosyasında:
# Netscape 4.x has some problems... only compress html files
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 has problems... don't compress anything
BrowserMatch ^Mozilla/4.0[678] no-gzip
# MSIE masquerades as Netscape
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
RewriteEngine on
# If the browser accepts gzip and the requested file exists with
# a .gz appended, then rewrite the request to the .gz file
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*.(css|js))$ $1.gz [L]
#Set content type to JavaScript and the encoding to gzip
<FilesMatch ".*.js.gz$">
ForceType application/x-javascript
Header set Content-Encoding gzip
</FilesMatch>
#Set content type to CSS and the encoding to gzip
<FilesMatch ".*.css.gz$">
ForceType text/css
Header set Content-Encoding gzip
</FilesMatch>
# Tell caching proxy servers to cache the file based on both
# browser type and encoding
Header append Vary User-Agent
Header append Vary Accept-Encoding
Apache Konfigürasyonu (Önceden sıkıştırılmış dosyalar için):
20. Prensip 7&8: CSS & Javascript Birleştirme
Birleştirme, uçtan-uca sayfa yükleme performansını artıran tekniklerden
biridir.
CSS ve Javascript dosyaları kendi içinde önceden var olan kaynak linki
eklenme sırası değişmeyecek şekilde birleştirilerek minimum dosya sayısı
elde edilmeye çalışılır.
Bu dosya sayısı optimum 3 ya da 4 dosyadır.
Bu şekilde dosya sayısı azaltılarak client tarafından indirilen dosya sayısı
azaltıldığından, özellikle HTTP Keep Alive’ın aktifleştirilmediği sistemlerde
gözle görülür performans iyileşmesi sağlanır.
3. parti bileşenlerden yüklenen JS ve CSS dosyaları için bizim kontrolümüz
dışında olduklarından birleştirme yapılamaz.
Dosyalar birleştirilirken önceki mantıksal sıralama korunmazsa görsel ve
fonksiyonel problemler oluşabilir.
21. Prensip 7&8: CSS & Javascript Birleştirme
Before combining JS After combining JS After combining and
compressing JS
Number of JSfiles
loaded on page
21 + 3 external 5 + 3 external 5 + 3 external
Total weight of JS files 478kb 387kb (removed 1 extra
copy of jQuery!)
319kb (removed 1 extra
copy of jQuery!)
Seconds end to end
load time
1.734s 1.682s 1.674s
Total bytes downloaded 1.3mb 1.2mb 1.1mb
Before combining CSS After combining CSS After combining and
compressing CSS
Number of CSS files
loaded on page
15 2 2
Total weight of CSS files 312kb 312kb 195kb
Seconds end to end
load time
1.705s 1.546s 1.520s
Total bytes downloaded 749kb 727kb 557kb
22. Prensip 9&12: İstemci Taraflı Single Point of Failure
(SPOF) & 3. Parti Bileşenler
3. parti uygulamalar kontrolümüz dışındadır, o sebeple düzenli aralıklarla
çalışırlığının kontrol edilmesi, sorun varsa 3. parti vendor ile iletişime
geçilerek sorunun giderilmesi gerekir.
3. parti uygulamalar ekstra DNS lookup’larına ihtiyaç duyarlar, ki bu
performans açısından bakıldığında maliyetlidir.
SPOF, 3. parti servislerle(Facebook, Twitter, Google vb.) entegrasyonun iyi
yapılmadığı yerlerde ortaya çıkan, sayfa yükleme zamanını aşağılara çeken
bir problemdir.
3. parti uygulamalardan yüklenen Javascript dosyaları, CSS dosyaları, @font-
face fontları, uzaktan yüklenen resimler, 3. parti uygulamaya gonderilen
senkron Ajax çağrıları potansiyel SPOF kaynaklarıdır.
SPOF gerek development sürecinde gerekse yapılan testlerde gözden
kaçması muhtemel bir konudur, çünkü 3. parti uygulamaların her zaman
sağlıklı çalışacağı varsayılır.
23. Prensip 9&12: İstemci Taraflı Single Point of Failure
(SPOF) & 3. Parti Bileşenler
Type of component Examples
Externally hosted JS libraries jQuery or MooTools loaded from
Google's CDN
Social Media and content Facebook, Twitter, AddThis, Google+,
LivePerson, Flickr
Page components Youtube, Vimeo, Bit.ly link shortener,
Google APIs e.g. Maps
Tracking beacons MathTag, KissMetrics beacon
Analytics and insight Google Analytics, Omniture, KissMetrics,
New Relic, Keynote RUM
Tag management systems Tagman, Tealium, Adobe Tag Manager
Ads Google Adsense, Doubleclick, Bing Ads
24. Prensip 9: Client Side Single Point of Failure (SPOF)
Frontend
SPOF test
Chrome Firefox IE Opera Safari
External
Scripts
Blank below Blank below Blank below Blank below Blank below
Stylesheets Flash Flash Blank below Flash Blank below
Inlined
@font-face
Delayed Flash Flash Flash Delayed
Stylesheet
with @font-
face
Delayed Flash Totally Blank Flash Delayed
Blank below: İstek yapılan kaynağın altındaki tüm DOM elementlerinin render olmaması.
Flash: DOM nesneleri hemen render edilemez. Eğer gerekli ise istek yapılan CSS veya font
yüklendikten sonra render edilir.
Delayed: @font-face kullanan text istek yapılan CSS dosyası yüklenene kadar görünmezdir.
Totally Blank: Sayfadaki hiçbir şey render edilmez, sayfa boştur.
25. Prensip 9: İstemci Taraflı Single Point of Failure (SPOF)
3. parti entegrasyon noktaları testlerde kontrol edilmeli.
Senkron iletişim yerine asenkron iletişim kullanan entegrasyonlar
kullanılmalı.
3. parti uygulamaların en iyi pratikleri kullanıp kullanmadığı sorgulanmalı.
(Örn. Facebook entegrasyonları asenkron yapılabilmekte)
Özellikle sayfa render’ını engelleyebilecek olan 3. parti taglar sayfa
içinde sayıca kısıtlı tutulmalı. Mümkünse </body> öncesine taşınmalı.
Değilse en uygun yer neresiyse performans göz önünde bulundurularak
oraya konmalı.
JQuery, Dojo gibi sayfanın core özelliklerini oluşturan kütüphaneler 3.
parti serverdan çağırılmamalı, mevcut uygulamada host edilmeli.
26. Prensip 10: CSS Yerleştirme
CSS yerleşimi yanlış olan web sayfalarında repaint ve reflow’lar(yeniden
boyama ve yeniden tarama) oluşacağından bu, sayfanın bir defa render
edileceği yerde birkaç defa render edilmesi sonucu performans kaybına
yol açacaktır.
Yeniden tarama, herhangi bir DOM nodu ekleyip çıkarma, DOM nodu
animasyonları(saklama, hareketlendirme), kullanıcının pencereyi büyütüp
küçültmesi, zoom in-out yapması, scroll yapması gibi durumlarda
yapıldığından bu işlerin hepsinde bir yavaşlık yaşanacaktır.
Sayfa içi CSS kullanılmamalı.
<style>@import</style> yerine <link rel='stylesheet'> kullanmalı.
<link> taglarını <head> içinde Javascript <link>’lerinden önce
yerleştirilmeli.
27. Prensip 10: CSS Yerleştirme
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery.js" type="text/javascript"></script>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery.js" type="text/javascript"></script>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style type='text/css'>
.somerandomstyle { color: red; }
</style>
<div id='header'>
<h1 style='font-weight:bold'>Title</h1>
</div>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<div> </div>
<script type='text/javascript'><!--
if (!document.getElementById) {
document.write('<link rel="stylesheet" type="text/css"
href="/css/versions4.css">'); }
</script>
</body>
</html>
✔ DOĞRU
KULLANIM
✖ YANLIŞ. CSS
linkleri JS
linklerinden önce
gelmeli ve hızlı
yüklenebilmeleri için
kendi aralarında
gruplanmalı.
✖ YANLIŞ. Bir
CSS dosyasına
konmalı.
✖ YANLIŞ. Bir
CSS dosyasına
konmalı
✖ YANLIŞ.
<head> içinde
olmalı
✖ YANLIŞ. CSS
çağrısı hem yanlış
yerde, hem de
Javascript içinden
yazdırılarak
kullanılmış.
Javascript CSS
manipulation
kullanılmalı.
28. Prensip 11: Sayfa Boyutu Optimizasyonu
Daha önce sayfa boyutu optimizasyonu kapsamında üzerinde durduğumuz Gzip
sıkıştırma, Javascript – CSS birleştirme, Javascript – CSS küçültme, resim
sıkıştırma gibi konuların üzerinden geçmiştik. Bunlarla birlikte sayfa boyutunu
etkiliyecek bazı başka faktörler de mevcut:
Resimler için en uygun formatlar seçilmeli. (Avatarlar için jpeg kullanılmalı vb.)
Gereksiz CSS ve Javascript dosyaları kaldırılmalı.
Sayfa içi içerik miktarı olabildiğince minimumda tutulmalı (özellikle resim dosyaları
için).
Özellikle yanlış export edilmiş resimlerden, -dolayısıyla yanlış olan- metadata
bilgisi kaldırılmalı.
29. Prensip 13: İçerik Hataları
Bazen herhangi bir nesne için yapılan isteğe dönen cevap 4xx ya da 5xx
kodlu hata olabilir. Bu durumda içerik hatası oluşur.
İçerik hatalarına:
Kayıp dosyalar
Server konfigurasyon problemleri
Bad requests
Yapısal başka problemler
Timeout’lar
Authentication problemleri
vb.
sebep olabilir.
Hata döndüren bazı requestlerin işlenirken tamamlanması uzun sürer.
Çünkü bu süreçte sayfa render’ı için çabalıyorken ekran çizimini bir
süreliğine bloke eder. (Örn. Dosyası bulunamamış <head> içinde yerleşik
bir javascript dosyası gibi). Bu sebeple içerik hataları performansı kötü
etkiler.
31. Prensip 14: Browser Caching
Doğru yapılmış bir cache stratejisi ile sayfa yüklenme zamanlarının aşağıya
çekiminde oldukça iyi sonuçlar alınabilir.
Network kullanımı azaltıldığından daha az CPU, RAM, Ağ kaynağı vb.
kullanılabilir duruma gelir.
İlk Sorgu İkinci sorgu
32. Prensip 14: Browser Caching
Performans iyileştirmesi yapmak adına herşeyi cache’lemek yanlıştır.
Cache stratejisi doğru belirlenmeli, sadece cache’lenmesine gerek duyulacak
şeyler belirli bir süre boyunca cahce’te saklı tutulmalıdır. (Örn. Sürekli
değişebilecek ürün resimleri cache’lenmemelidir.)
33. Prensip 14: Browser Caching
Cache’lemeye uygun dosya tipleri:
✔ Statik web sayfaları
✔ Statik resimler(PNG, GIF, JPEG, ICO)
✔ Statik XML, RDF, JSON data (.xml, .rdf,
.json)
✔ Stylesheet’ler (.css)
✔ Javascript (.js)
✔ Web Fontları(.ttf, .otf, .eot, .woff)
✔ SVG (.svg)
✔ Text Dosyaları(.txt)
✔ Statik MS Office Dökümanları(.xls,
.xlsx, .doc, .docx etc)
✔ Statik PDF dökümanları (.pdf)
✔ Video dosyaları– stream
edilmeyenler(.flv, .mov, .mp4, etc)
✔ MP3 ses dosyaları– stream
edilmeyenler (.mp3)
✔ SWF Flash (.swf)
Cache’lemeye uygun olmayan dosya
tipleri:
✖ Sürekli içeriği değişen web sayfaları
✖ Dinamik server taraflı iletişimi olan JS
dosyaları gibi canlı, dinamik objeler.
✖ Canlı veri beslemeleri (Örn. JSON/XML
beslemeleri)
✖ Stream edilen video, ses içerikleri
✖ Boyutu bir kereden fazla yüklenmesi uygun
olmayacak kadar büyük dosyalar
✖ Dinamik PDF dosyaları (Örn. Müşteri faturası)
✖ Cache’te saklanması güvenlik açısından
uygun olmayacak olan hassas müşteri dataları.
