Site Hızını İyileştirmek: Ufak Detaylarla Büyük Sonuçlar Elde Etmek İçin Yeni Yöntemler Linkedin : https://www.linkedin.com/in/yilmazumit/ Twitter : https://twitter.com/umtylmazzz https://makevisible.net/

1. @digitalzone

2. ÜMİT YILMAZ KİMDİR?
Ümit YILMAZ
SEO Engineer
Technology & Product Development
iletisim@yilmazumit.com
umtylmazzz
https://www.linkedin.com/in/yilmazumit/
+8 yıl Dijital Pazarlama
Tecrübesi

4. Site Hızını İyileştirmek
Ufak Detaylarla Büyük Sonuçlar Elde Etmek İçin Yeni
Yöntemler
@digitalzone

5. Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone

6. Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone

7. 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/

8. 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/

9. BOUNCE RATE
Site A
SEO Trafiği: 120.000 SEO Trafiği: 150.000
Bounce Rate: %20 Bounce Rate: %40
Kalan Kullanıcı Sayısı : 96.000 Kalan Kullanıcı Sayısı : 90.000
Site B
@digitalzone

10. Tüm dijital pazarlama kanallarını
etkiler.
CHANNELS
@digitalzone
*Image Source: https://lucep.com/top-5-online-marketing-channels-your-campaign-should-cover/

11. Conversion rate metriğini
etkiler.
CONVERSION
@digitalzone
*Image Source: http://www.convergent7.com/how-to/metrics-that-matter-conversion-rate/

12. Dolaylı yoldan direct trafik hacmini
etkiler.
CHANNELS
@digitalzone
*Image Source: https://lucep.com/top-5-online-marketing-channels-your-campaign-should-cover/

13. 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

14. Ş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

15. Ve daha birçok etki 
CHANNELS
@digitalzone

16. GittiGidiyor - 2017
HOW TO INCREASE
PAGE SPEED?
YES I DID IT
@digitalzone

17. Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone

18. Front-End Time
• First View
• Main Image
• Main Text
• Action Button (Eğer açılış ekranında varsa)
• Above The Fold Complete
@digitalzone

19. Konuyu 2 farklı açıdan ele
alalım
FRONT END
@digitalzone

20. @digitalzone

21. @digitalzone

22. @digitalzone

23. 4,1s 3,6s
@digitalzone

24. 1,1s 2,1s 3,4s 4,1s
1,1s 2,1s 3,4s 3,6s
@digitalzone

25. Bounce rate metriğinizi
etkiler.
BOUNCE RATE
@digitalzone

26. CRITICAL RENDERING PATH
@digitalzone

27. HOW FAST YOU ARE
@digitalzone

28. LOAD SIGNAL
@digitalzone

29. MAIN IMAGE
@digitalzone

30. ABOVE THE FOLD COMPLETE
@digitalzone

31. WALMART PAGE LOAD FUNNEL
@digitalzone

32. CRITICAL VIEWS
@digitalzone
*Image Source: https://blog.stackpath.com/glossary/lazy-loading/

33. 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

34. 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

35. FREE COURSE BY GOOGLE
*https://www.udacity.com/course/website-performance-optimization--ud884
@digitalzone

36. Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone

37. Back-End Time
• DomContent Loaded
• Request
• Total Page Size
• Content Download
• Fully Load Time
• Third Party Code Analysis
• Compression
• Daily Tracking
• HSTS
@digitalzone

38. 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

39. CHROME DEV TOOLS
@digitalzone
*Source: https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

40. 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

41. 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

42. HTTP REQUESTS
@digitalzone
https://www.seroundtable.com/google-search-console-crawl-stats-for-time-spent-downloading-a-page-21240.html

43. DAILY TRACKING
@digitalzone
*Image Source: speedcurve.com

44. DAILY TRACKING
@digitalzone
*Image Source: speedcurve.com

45. DAILY TRACKING
@digitalzone
*Image Source: speedcurve.com

46. COMPRESSION
@digitalzone
*Image Source: https://engineering.linkedin.com/blog/2017/05/boosting-site-
speed-using-brotli-compression

47. COMPRESSION
@digitalzone
*Image Source: https://loadstorm.com/2013/08/webperflab-impact-cdn/

48. COMPRESSION
@digitalzone
*Source: https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html

49. COMPRESSION
@digitalzone
*Source: https://en.0wikipedia.org/index.php?q=aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQnJvdGxp

50. COMPRESSION
@digitalzone
*Source: https://caniuse.com/#feat=stricttransportsecurity

51. HSTS
@digitalzone
*Source: https://hstspreload.org/

52. HSTS
@digitalzone

53. HSTS
@digitalzone

54. HSTS
@digitalzone
*Source: https://www.keycdn.com/support/http-strict-transport-security/

55. HSTS
@digitalzone
*Source: https://www.keycdn.com/support/http-strict-transport-security/

56. Index
• Introduction
• Front-End Time
• Back-End Time
• KPIs
@digitalzone

57. KPIs
@digitalzone

58. 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/

59. DAILY TRACKING
@digitalzone
*Image Source: speedcurve.com

60. SEO Engineer @gittigidiyor
ÜMİT YILMAZ
@digitalzone