Sihirli Klavye - Genel Forum Sitesi  

Geri git   Sihirli Klavye - Genel Forum Sitesi > >

Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý  Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý    Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý
Bu alanda reklam vermek ve diğer sitelerimizden de takviye alarak backlink kazanmak için [email protected]
Cevapla
 
Seçenekler Stil
Alt 01-05-2020, 04:53 PM   #1
kutluseo
Süper Moderatör
 
Üyelik tarihi: Dec 2019
Mesajlar: 176
Standart Site Hýzý Optimizasyonu Vol.1-Bilmeniz Gerekenler ve Test Araçlarý

Mobil öncelikli indeksleme (Mobile First Indexing) ile daha da önemli hale gelen site hızı optimizasyonu, hem Google için hem kullanıcılarımız için kritik bir madde SEO’da.

Özellikle 2018’in Temmuz ayında tüm siteler için sayfa hızının mobilde bir sıralama faktörü olduğu duyurulduktan sonra tüm gözler sitemi nasıl optimize edeceğim sorusunun cevabını aramaya başladı.

Ancak site hızı optimizasyonu ile ilgili araştırma yaptığımızda genelde içeriklerin daha yüzeysel ve neyi neden yaptığını açıklayan bir yaklaşımdan uzak olduğunu görüyoruz.

Bu yazımızda sayfa yüklenme adımlarını açıklayarak, bir sayfanın geç açılmasına ne sebep olur, hangi aşamada sayfa uzun süre yüklenmez, bunu nasıl kontrol edersiniz ve bu adımları nasıl optimize edersiniz bunlardan bahsedeceğiz.

Yani saniyelik hatta bazen saliselik adımlarda gerçekleşen hareketleri detaylı anlatmaya çalışacağız. Sayfa yüklenme hızı optimizasyonu için hazırsak başlayalım.

OPTİMİZASYON ÖNCESİ TEKNİK KISIMLAR
1.Critical Rendering Path
Critical Rendering Path, yani kısaca CRP, tarayıcınız üzerinden bir sayfaya tıkladığınız anda başlayan ve sayfanın tamamen yüklenmesine kadar geçen süredeki adımların bütünüdür.



Sayfa hızı optimizasyonu aslında CRP’nin optimizasyon sürecidir.

CRP’deki adımları gözlemleyerek sayfanızın yüklenirken nerelerde uzun süre kaldığını, nerelerde optimizasyon yapabileceğinizi anlayabilirsiniz. Optimizasyon kısmında bundan bahsedeceğim, şimdilik devam ediyorum. CRP adımlarını bir bir detaylı bir şekilde inceleyelim.



Yukarıdaki grafik biraz karışık gelebilir, gelmesin! CRP dediğimiz aslında tam olarak bu ve bu kadar karışık değil.

Bir kullanıcı bir siteye girmek için sayfaya tıkladığı anda tarayıcı öncelikle DNS sunucusunda ip adresini arar. Ve bir yanıt alır. Sonraki adımda tarayıcı sunucuya istekte bulunur ve ‘’BANA HTML’i VER!’’ der.

Tarayıcı HTML kaynağını yukarıdan aşağıya doğru çözümlemeye başlar ve DOM (Document Object Model) ağacı dediğimiz HTML’in içindeki nesnelerin (title, body, image, p, gibi) iskeletini çıkartır.



Yukarıdan aşağıya doğru HTML kaynağını tararken CSS ile karşılaştı, neler olacak?

DOM ağacını oluştururken CSS ile karşılaşan tarayıcınız DOM sürecini durdurur. Bu sebeple CSS için ‘’render blocking’’ diyoruz. Yani işleme sürecini durdurmaktadır. Burada tarayıcınızı bir işi bitirmeden başka işe geçen, plansız bir çalışan olarak düşünebilirsiniz. Ama bunun da bir sebebi var, açıklayacağım.

BU ARADA HENÜZ EKRANDA BİR ŞEY YOK!

HTML’in DOM’u varsa CSS’inde CSSOM’u var!
CSS ile karşılaşan tarayıcı bu sefer de CSSOM olarak tabir ettiği stil hiyerarşisini belirlemeye başlıyor. CSSOM’u oluşturduktan sonra HTML’deki title, head, paragraf içeriklerini CSS’teki komutlar ile birleştirerek ‘’render tree’’ dediğimiz hangi içeriği hangi stilde görüntüleyeceğini belirlediği bir sürece giriyor. Eşleştirme süreci olarak düşünebilirsiniz. Örneğin, HTML kodundan title içeriğini alıyor, CSS kodundan bu title içeriğini hangi stilde göstereceğini buluyor ve bunları eşleştirerek render tree sürecini tamamlamaya çalışıyor.



Yukarıdaki örnekte ise DOM’dan ‘’p’’ altındaki içerikleri alıp, CSSOM’dan font büyüklüğünü ve stilini alarak render tree de bunları birleştiriyor. Span altındaki içerik için CSSOM’da display:none yani görüntüleME komutu verildiği için HTML kodunda ‘’web performance’’ içeriği bulunsa da bir anlam ifade etmiyor ve bunu render tree de göstermiyor.

Eğer bu işlem olmasaydı yani tarayıcı CSS’i beklemeden sayfayı yükleseydi aşağıda sağdaki görüntü ile karşılaşacaktık ve kullanıcı deneyimi açısından negatif etkisi yüksek olan bir süreç bizi bekliyor olacaktı. Bu sebeple render blocking olması kaçınılmaz oluyor.





Bitti mi? Hayır. Çünkü Şimdi JavaScript Sahneye Çıkıyor!

Peki buraya kadar ekranda bir şey gördük mü? Yalnızca ‘’first paint’’ dediğimiz tarayıcınız bir siteye istekte bulunduğu an ekranda oluşan değişikliği görüyoruz hala. Daha iyi anlamak adına aşağıdaki görselde ikinci resim first paint’i temsil etmekte.



Tüm DOM süreci tamamlanmadan, Layout işlemi gerçekleşmeden ekranda bir şey göremeyeceksiniz.

kaynak Site Hızı Optimizasyonu Oncesi Bilmeniz Gerekenler - Zeo Agency Blog
kutluseo isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Cevapla

Tag Ekle
bir, css, iã§in, ile, yani

Seçenekler
Stil

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı

Gitmek istediğiniz klasörü seçiniz


Şu Anki Saat: 08:30 AM


Search Engine Optimisation provided by DragonByte SEO v2.0.36 (Lite) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.