Your SlideShare is downloading. ×
Web  Performans Optimizasyon Prensipleri
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Performans Optimizasyon Prensipleri

1,760
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,760
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Performans Optimizasyonu M. Aykut BULGU Software Engineer
  • 2. Optimizasyon Prensipleri 1. CSS Sprites 2. Resim Optimizasyonu (Image Optimisation) 3. Küçültme (Minification) 4. Süreğen Bağlantılar (Persistent Connections ) 5. Video Oynatıcılar (Video Players) 6. Gzip Sıkıştırma (Gzip Compression) 7. CSS Birleştirme (CSS Combining) 8. JS Birleştirme (JS Combining) 9. İstemci Taraflı SPOF (Client-side SPOF) 10. CSS Yerleştirme (CSS Positioning) 11. Sayfa Boyutu Optimizasyonu (Page Size Optimisation) 12. 3. Parti Bileşenler (3rd Party Components) 13. İçerik Hataları (Content Errors) 14. Browser Caching
  • 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.
  • 4. Prensip 1: CSS Sprites <p><img src='logo.png' alt='logo' /></p> <div class='button'> <a href='left.html'><img src='button-left.gif' alt='left' /></a> </div> <div class='button'> <a href='right.html'><img src='button-right.gif' alt='right' /></a> </div> <p class='sprite logo'>Vodafone Logo</p> <div class='sprite button-left'> <a href='left.html'>Left</a> </div> <div class='sprite button-right'> <a href='right.html'>Right</a> </div> .sprite { /* base class */ background-image:url('images/sprite.png'); text-indent:-9999px; overflow: hidden; } .button-left { background-position: -47px 0; width: 20px; height: 20px; } .button-right { background-position: -128px 0; width: 20px; height: 20px; } .logo { background-position: 0 0; width: 220px height: 50px; } Orjinal HTML: Refactor edilmiş hali:
  • 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.
  • 8. Prensip 3: JS and CSS küçültme
  • 9. Prensip 3: JS and CSS küçültme File 1 File 2 File 3 File 4 Unminified 20,693 12,349 51,307 19,287 JSMin 11,876 7,653 33,753 15,348 JS Compress 9,693 7,141 27,005 12,707 YUI compressor 9,805 7,159 27,943 12,761 Google Closure Compiler 8,956 6,797 25,935 14,363 Unminified + Gzip 5,689 3,055 13,660 2,556 JSMin + Gzip 3,296 1,949 8,160 1,742 JS Compress + Gzip 2,984 1,854 7,615 (85%) ✓ 1694 YUI compressor + Gzip 2,994 1,870 8,359 1,655 Google Closure Compiler + Gzip 2,864 (86%) ✓ 1,818 (85%) ✓ 7,618 1,650 (91%) ✓
  • 10. Prensip 3: JS and CSS küçültme File 1 File 2 File 3 File 4 Unminified 614,277 31,709 69,448 252,692 MinifyCSS.com 453,781 24,537 55,808 181,802 YUI compressor 519,759 26,101 58,427 188,425 CSSO 497,954 25,484 57,726 187,875 Unminified + Gzip 78,178 3,684 14,769 40,620 MinifyCSS.com + Gzip 62,478 3,359 ✓ 11,223 ✓ 31,673 YUI compressor + Gzip 61,700 3,399 11,355 31,385 ✓ CSSO + Gzip 60,500 ✓ 3,381 11,357 31,444
  • 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)
  • 18. Prensip 6: Gzip Sıkıştırma Apache 2.x  httpd.conf dosyasında: <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject #Level of Compression: Highest 9 - Lowest 1 DeflateCompressionLevel 1 #Optional: Skip browsers with known problems BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html #Optional: Logging DeflateFilterNote ratio LogFormat '"%r" %b (%{ratio}n) "%{User-agent}i"' deflate CustomLog /usr/local/www/logs/deflate_log deflate <IfModule mod_headers.c> # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule> </IfModule> Apache 1.3.x  httpd.conf dosyasında: <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|eot|svg|otf|ttf|doc|docx|xls|xlsx|xml|r df)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> Apache Konfigürasyonu (Dinamik Sıkıştırma için):
  • 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>&nbsp;</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.
  • 30. Prensip 13: İçerik Hataları
  • 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ı.
  • 34. SON