Site Hız Optimizasyonu 

1) 100 KB üstü görsellerin boyutlarını düşürülmesi ve Webp formatı.

2)Gereksiz Kodların Çağrılması: Ana sayfada kullanılmayan kod satırları ve fonksiyonlar çağırılıyor. Bu kodların çağrılması sitenin açılma hızını etkiliyor. Ana sayfanın boyutu 2.2 MB bunların 1.3 MB'si kullanılmıyor.  Kullanılmayan CSS'leri tamamen kaldırabilirsiniz veya sitenizin ayrı bir sayfasında kullanılıyorsa başka bir stil sayfasına taşıyabilirsiniz. Başka bir yöntem olarak CSS'i inline olarak kullanabilirsiniz böylelikle o sayfada sadece lazım olan CSS kullanılmış olur. JS dosyaları için: https://web.dev/code-splitting-suspense/

3) Görsel Çözünürlük Boyutları: Kullanılan görselin boyutu ve yerleştirilen görselin boyutları arasında fark olmamalıdır. Görselleri sitede kullanılan konumlarındaki çözünürlük boyutu en fazla ne ise gerçek görselin çözünürlüğü de o şekilde ayarlanmalıdır. 

4) Cache ve Cache Süresi: Cache ile tutulan kod dosyalarının ve görsellerin cache süresi uzatılırsa yeniden ziyaret eden kullanıcılara hızlı bir site deneyimi sunulabilir. .htaccess'den cache'i yönetebilirsiniz.

5) Lazy Load Kullanımı: Lazy Load ile ilk gösterilen ekran dışında görseller ilk yüklemede yüklenmemesi sağlanabilir ve site açılış hızını artırabilir. Kullanım şekli ise şu şekildedir:  img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="gorsel"

6) Gzip veya Brotli Sıkıştırma Yöntemi: Sunucudaki dosyalar sıkıştırılarak daha hızlı bir açılış deneyimi sağlanabilir. Bu sıkıştırma işleminden sonra önce ve sonra Sıkıştırılacak dosyalar Tarayıcıya yük binmemesi için işlem sırasında değil önceden sıkıştırılmalıdır. Detaylı bilgi: https://web.dev/optimize-lcp/ "Compress text files" başlığına inceleyebilirsiniz.

7) Kodların Minify Edilmesi: Kod dosyalarındaki gereksiz boşluklar ve gereksiz satırlar silinerek dosya boyutları küçültülebilir. https://www.minifier.org/ veya https://cssminifier.com/ gibi sitelerden minify işlemi yapılabilir.

8) Görsellerin width ve height Değerlerinin Girilmesi: Görsellerin belli bir width-height değeri atanmazsa ilk yüklemede tarayıcı görselleri nereyi yerleştireceğini tam bilemez ve diğer yazı ve görsellerin yerlerini de ayarlayamaz. Bu durum ilk yüklemede kayan font ve görselleri oluşturur ve kullanıcı bir yere tıklayamadan sayfanın kaymasına neden olabilir. Bu da CLS değerini yükseltir. Görsellere width ve height etiketleri girilmesi SEO açısından olumlu bir sinyaldir. CLS değerini düşürür. Bunun dışında placeholder kullanılabilir. https://web.dev/optimize-cls/

9) Preload kullanımı: Preload kullanarak CSS dosyaları önceden yüklenebilir. LCP sürenizi iyileştirmek için LCP öğesi tarafından kullanılan resmi önceden yüklemeyi deneyebilirsiniz. link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'"

10) async ve defer Komutlarının Kullanımı: Defer komutu, belge ayrıştırılırken komut dosyasını indirir ve yürütmeden önce belgenin ayrıştırılmasının tamamlanmasını bekler. Async komutu, belgeyi ayrıştırırken komut dosyasını indirir ancak ayrıştırmayı tamamlamadan önce komut dosyasını yürütmek için ayrıştırıcıyı duraklatır. Kullanımı: script src="myscript.js" defer şeklindedir. Komut dosyaları ve stil sayfaları, FCP'yi ve dolayısıyla LCP'yi geciktiren oluşturma kaynaklarıdır. Web sayfanızın ana içeriğinin daha hızlı yüklenmesini sağlamak için kritik olmayan JavaScript ve CSS'leri erteleyin. 

Bir başka deyişle;

Tarayıcı HTML'i yüklerken bir script etiketi ile karşılaştığında, DOM'u oluşturmaya devam edemez. Script dosyasını hemen çalıştırması gerekmektedir. Aynısı harici komut dosyaları için de geçerlidir. Tarayıcı komut dosyasının indirilmesini, indirilen komut dosyasını çalıştırmasını beklemelidir ve ancak o zaman sayfanın geri kalanını işleyebilir. Bu durumda sayfanın üst kısmında hantal bir komut dosyası varsa, sayfayı bloke eder. Kullanıcılar, script dosyaları indirilip çalıştırılıncaya kadar sayfa içeriğini göremez ve gecikme yaşanır. defer komutu ile tarayıcı HTML'yi işlemeye devam edecek, DOM oluşturacaktır. Komut dosyası "arka planda" yüklenir ve ardından DOM tamamen oluşturulduğunda çalışır. async ise üçüncü taraf komut dosyaları için daha idealdir. Not: defer veya async kullanıyorsanız kullanıcı script dosyası yüklenmeden önce sayfayı görecektir. Burada önemli olan hangi dosyaların async veya defer işaretleneceğidir. Bir script dosyası çalışmak için jquery dosyasına ihtiyaç duysun diyelim burada async kullanırsak ve script jquery’den önce yüklenirse hata alabiliriz.

Detaylı bilgi için: https://web.dev/optimize-lcp/

11) dns-prefetch Komutunun Kullanımı: Üçüncü parti uygulamaların yüklenmesi için çeşitli yollar vardır. 3. parti uygulamaya bağlanmak için hızlı bir DNS çözümlemesi için ve hızlı bağlantı için kullanılabilir. Bu, 3. parti dosyalarının önceden talep edilmesi ve saklanmasını sağlar. Aynı zamanda birden çok farklı sunucudan kod çağrılıyorsa her birisi için dns çözümleme vakit alacaktır. dns-prefetch ile bu durumun önüne geçilebilir.

link rel="dns-prefetch" href="http://example.com"
link rel="preconnect" href="https://cdn.example.com"

12) CDN Kullanımı: CDN, base sunucudaki dosyaları özellikle görseller ve kod dosyalarını farklı lokasyonlardaki sunuculara yükleyerek kullanıcıya en yakın noktadaki sunucudan çekmesidir. Böylelikle ana sunucuda yük oluşmamış olur.

13) Gereksiz 3. Parti Uygulamaların Kaldırılması: Bazı chat botları, Yandex Metrica gibi 3.parti uygulamalar yükleme sürelerini artırabiliyor. Bunlardan kullanmayanlar kaldırılmalıdır veya ertelenmelidir.

14) Font Optimizasyonu: Google fontları ve harici fontların yüklenmesini beklemeden default font yüklenmesi ve fontların nasıl davranacağını belirtmek ilk boyama süresini azaltır. Web Fontlarını önceden yükleyerek ve `font-display` ile tarayıcıların mevcut olmayan fontlarla nasıl davrandığını kontrol etmek için kullanılabilir. `font-display: swap;` kod satırı CSS class içinde kullanılabilir.. Böylelikle gerçek font yüklenene kadar kullanıcıya default font gösterilecektir. Ayrıca Google fontları için kullanım farklıdır. Google fontları için kullanım: nk href="https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap" rel="stylesheet"

Detaylar için: https://developers.google.com/web/updates/2016/02/font-display

15) CSS Inline Kullanımı: CSS dosyalarını dışarıdan çağırmak yerine kod içinde yani inline şeklinde kullanmak gereksiz dosyaları çağırmayı önlemek için bir yöntemdir. Eğer harici kod dosyalarında bölme işlemi yapmak daha zahmetli ise inline olarak kullanabilirsiniz. tıklayabilirsiniz. Aynı zamanda önemli stilleri satır içine almak, kritik CSS'yi almak için gidiş-dönüş talebinde bulunma ihtiyacını ortadan kaldırır.

CSS'i inline olarak kullanamıyorsanız media işaretlemesini kullanmayı da deneyebilirsiniz. Örnek olarak `media='print'` sınıfı kullanılabilir. Bu, render blocking durumunu ortadan kaldırıyor. Bu sınıf ekranda bir içerik yoksa CSS uygulamıyor böylelikle bir gecikme yaşatmıyor. CSS'i inline yapan bazı uygulamalar için: 

* https://github.com/addyosmani/critical
* https://github.com/GoogleChromeLabs/critters
* https://github.com/filamentgroup/criticalCSS

16) JS Dosyalarını Sona Taşımak: async ve defer gibi olmasa da bunları kullanmak mümkün değilse javascript dosyaları

etiketinin en sonuna taşınabilir ve orada çağırılabilir. Bu her zaman kesin bir çözüm olmasa da etkili olabilecek bir çözümdür.

17) Server Side Rendering: Rendering işlemini tarayıcıya yüklemeden sunucu tarafında yapılmasıdır. Böylelikle tarayıcı javascript dosyalarını ayrıştırma için vakit harcamaz. Google'un desteklediği ve SEO açısında da tavsiye edilen bir yöntemdir. Dynamic Rendering de denenebilir. Detaylı bilgi için: https://developers.google.com/web/updates/2019/02/rendering-on-the-web/

18) Aşırı DOM Yüklemesinden Kaçınma: Çok fazla elementi kullanılması karmaşık bir yapı yaratır. JavaScript’te DOM (Document Object Model) erişimini yavaşlatabilmektedir. Sayfa düzeniniz için çok fazla div yerine grids.css veya fonts.css gibi seçenekler değerlendirilebilir.