Ümit yilmaz - page speed - digitalzone 17
TRANSCRIPT
@digitalzone
ÜMİT YILMAZ KİMDİR?
Ümit YILMAZ
SEO Engineer
Technology & Product Development
umtylmazzz
https://www.linkedin.com/in/yilmazumit/
+8 yıl Dijital Pazarlama
Tecrübesi
Site Hızını İyileştirmek
Ufak Detaylarla Büyük Sonuçlar Elde Etmek İçin Yeni
Yöntemler
@digitalzone
Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone
Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone
Google;
Gary Illyes from Google said at the
Search Marketing Summit today in
Sydney that Google will be updating
the page speed ranking factor to
specifically look at the page speed of
your mobile pages when it comes to
the mobile-friendly algorithm.
PAGESPEED
@digitalzone
*Source: http://www.thesempost.com/google-mobile-first-index-page-speed-ranking/
Yüksek sayfa yükleme süreleri
Bounce Rate metriğinizi
olumsuz yönde etkiler
BOUNCE RATE
@digitalzone
*Image Source: https://lucep.com/top-5-online-marketing-channels-your-campaign-should-cover/
BOUNCE RATE
Site ASEO Trafiği: 120.000 SEO Trafiği: 150.000Bounce Rate: %20 Bounce Rate: %40Kalan Kullanıcı Sayısı : 96.000 Kalan Kullanıcı Sayısı : 90.000
Site B
@digitalzone
Tüm dijital pazarlama kanallarını
etkiler.
CHANNELS
@digitalzone
*Image Source: https://lucep.com/top-5-online-marketing-channels-your-campaign-should-cover/
Conversion rate metriğini
etkiler.
CONVERSION
@digitalzone
*Image Source: http://www.convergent7.com/how-to/metrics-that-matter-conversion-rate/
Dolaylı yoldan direct trafik hacmini
etkiler.
CHANNELS
@digitalzone
*Image Source: https://lucep.com/top-5-online-marketing-channels-your-campaign-should-cover/
Dolaylı yoldan returning visitor
hacmini
etkiler.
LOYALTY
@digitalzone
*Image Source: http://www.ppc-strategies.com/google-analytics-tips/2010/3/30/roi-of-the-return-visitor.html
Şirketinize itibar &sadakat kazandırır
ya da kaybettirir.
• -52% of online shoppers claim that
quick page loads are important for
their loyalty to a site.
• -14% will start shopping at a
different site if page loads are
slow.
CHANNELS
@digitalzone
*Image Source: https://tr.pinterest.com/digitalgear/internet-explorer/
*Source: https://econsultancy.com/blog/10936-site-speed-case-studies-tips-and-tools-for-improving-your-conversion-rate
Ve daha birçok etki
CHANNELS
@digitalzone
GittiGidiyor - 2017
HOW TO INCREASE
PAGE SPEED?
YES I DID IT
@digitalzone
Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone
Front-End Time
• First View
• Main Image
• Main Text
• Action Button (Eğer açılış ekranında varsa)
• Above The Fold Complete
@digitalzone
Konuyu 2 farklı açıdan ele
alalım
FRONT END
@digitalzone
@digitalzone
@digitalzone
@digitalzone
4,1s 3,6s
@digitalzone
1,1s 2,1s 3,4s 4,1s
1,1s 2,1s 3,4s 3,6s
@digitalzone
Bounce rate metriğinizi
etkiler.
BOUNCE RATE
@digitalzone
CRITICAL RENDERING PATH@digitalzone
HOW FAST YOU ARE@digitalzone
LOAD SIGNAL@digitalzone
MAIN IMAGE@digitalzone
ABOVE THE FOLD COMPLETE@digitalzone
WALMART PAGE LOAD FUNNEL@digitalzone
CRITICAL VIEWS
@digitalzone
*Image Source: https://blog.stackpath.com/glossary/lazy-loading/
Kullanıcıların sayfa açılış ekranında
gördüğü imajlar özelinde lazy load
yapmak kullanıcı deneyimi için
oldukça kötü bir uygulamadır.
Not: Google botu imajın gelmesini
bekler.
(above the fold)
AVOID LAZY LOAD
@digitalzone
*Image Source: https://addons.prestashop.com/en/website-performance/26025-an-lazy-loading-delay-load-of-images.html
Fakat açılış ekranında
kullanıcılar tarafından
görülmeyen alanlar için
event bazlı tanımlamalar
ile lazy load ya da difer
gibi uygulamalara
gidilebilir
PRIORITY
@digitalzone
*Image Source: https://varvy.com/pagespeed/critical-render-path.html
FREE COURSE BY GOOGLE
*https://www.udacity.com/course/website-performance-optimization--ud884
@digitalzone
Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone
Back-End Time
• DomContent Loaded
• Request
• Total Page Size
• Content Download
• Fully Load Time
• Third Party Code Analysis
• Compression
• Daily Tracking
• HSTS
@digitalzone
CHROME DEV TOOLS@digitalzone
DomContentLoaded:
The DOMContentLoaded event is
fired when the initial HTML
document has been completely
loaded and parsed, without
waiting for stylesheets, images,
and subframes to finish loading.
Load
A very different event load should
be used only to detect a fully-
loaded page. It is an incredibly
popular mistake to
use load where DOMContentLoad
ed would be much more
appropriate, so be cautious.
*Source: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
CHROME DEV TOOLS
@digitalzone
*Source: https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading
CHROME DEV TOOLS@digitalzone
SORULAR
-Neden İhtiyaç Var?
-Hangi sayfalarda çalışıyor?
-Gerçekten ihtiyacı karşılıyor mu?
-Response Time olumsuz etkileniyor mu?
-Async çalışıyor mu? (Bazıları sync
olmak zorunda olduğu için istisnai bir durum
olarak ele alınabilir. Örn: A/B Test)
Third party kodların listesinin
Çıkartılması.
*Source: speedcurve.com
REQUEST AND SIZE BREAKDOWN@digitalzone
Kodların ve istek sayılarının
kırılımı ve büyükten küçüğe
analiz yapımı.
*Source: speedcurve.com
HTTP REQUESTS@digitalzone
https://www.seroundtable.com/google-search-console-crawl-stats-for-time-spent-downloading-a-page-21240.html
DAILY TRACKING@digitalzone
*Image Source: speedcurve.com
DAILY TRACKING@digitalzone
*Image Source: speedcurve.com
DAILY TRACKING@digitalzone
*Image Source: speedcurve.com
COMPRESSION@digitalzone
*Image Source: https://engineering.linkedin.com/blog/2017/05/boosting-site-
speed-using-brotli-compression
COMPRESSION@digitalzone
*Image Source: https://loadstorm.com/2013/08/webperflab-impact-cdn/
COMPRESSION@digitalzone
*Source: https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html
COMPRESSION@digitalzone
*Source: https://en.0wikipedia.org/index.php?q=aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQnJvdGxp
COMPRESSION@digitalzone
*Source: https://caniuse.com/#feat=stricttransportsecurity
HSTS@digitalzone
*Source: https://hstspreload.org/
HSTS@digitalzone
HSTS@digitalzone
HSTS@digitalzone
*Source: https://www.keycdn.com/support/http-strict-transport-security/
HSTS@digitalzone
*Source: https://www.keycdn.com/support/http-strict-transport-security/
Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone
KPIs@digitalzone
MY FAVORITE TOOLS@digitalzone
• https://varvy.com/pagespeed/
• https://speedcurve.com/
• https://www.webpagetest.org/
• https://rigor.com/
• https://gtmetrix.com/pro/
• https://developers.google.com/speed/pagespeed/ins
ights/
• https://tools.pingdom.com/
• http://www.catchpoint.com/
DAILY TRACKING@digitalzone
*Image Source: speedcurve.com
SEO Engineer @gittigidiyor
ÜMİT YILMAZ
@digitalzone