Gözleri KÖR EDEN Bir Optimizasyon

ama onlara da hak veriyorum. hale etkisi denilen bişey var sonuçta.
ticaretin sayısı yüksekse geri kalan herşey aynı oranda iyi olacak diye düşünülüyor.

bu her zaman doğru bir varsayım değil ama ticaret sayısı da bir yerde öngörü sunuyor.
şahsen benim de vaktim yoksa, iki ticaret puanından yüksek olana eğilim gösteririm.
az biraz vaktim varsa referansları incelerim.

ama vaktim varsa ve derin araştırma modundaysam en doğru tercihi bunlara bakmadan yaparım.
nitekim her zaman da vaktimiz olmuyor ve o yüzden araştırmadan karar veriyoruz. olay bu

Ne reklam yaptın hocam beee 😅, eklenti kurup butonlara basıyorsunuz ikiniz de. Ama atomu parçalıyor gibi konular açıyorsun sürekli.

Yanlış düşünüyorsunuz. Hepsini seçip optimizasyon yapılır. Eğer hata oluşursa teker teker seçimler kaldırılıp kontrol edilir. Mantık basit. Js ve Css neden küçültüp birleştirilmesin? Defer neden etkinleştirilmemeli? Veya geciktirme neden zararlı olsun? Bunları açıklayabiliyor musunuz? Yanlış olan hepsini seçmek değil, hepsini seçme işlemini ezber şekilde tüm sitelere yapmaktır. Yanlış noktaya değinmişsiniz.

Biri çıkıp da argümanlarımı eleştirsin diye bekliyodum. O yüzden düşüncelerinizi paylaştığınız için teşekkür ederim.
Ama umarım bir tema satıcısı olarak bu konulara gerçekten bu şekilde bakmıyorsunuzdur. Yoksa durum vahim.



1- CSS ve JS küçültülmesi artık neredeyse gerek yok.
Artık eklenti ve temalar yeni sürüm güncellemelerinde dosyaları minify ederek yüklüyor. ( örn. style.min.css )
Bu arada küçültülme işlemi nedir derseniz, dosyadaki yorum satırları ve boşlukları kaldırıyor. Tüm olayı bu aslında.

Fakat kullandığınız tema veya eklenti vasat bir şekilde kodlanıp, geliştirilmiyorsa o zaman küçültülebilir.
Ben CSS ve JS asla küçültülmemeli demiyorum. Nitekim son zamanlarda css ve js küçültme gereksinimi neredeyse kalmadı.

Zaten analiz araçlarında çıksa çıksa 1-2 dosya küçültme uyarısı verir. Elde edeceğiniz tasarruf tahminimce 50kb aşmaz.
Buradan max 50kb dosya tasarrufu etmek için bütün dosyalarınızın işlemden geçmesinin siteye maliyeti daha fazladır.
Ve her önbellek temizlendiğinde minify işlemi tekrar baştan yapılır. Kısacası bu işlemci yüküne değmeyeceğine emin olabilirsiniz.
Sadece 2 dosyanın küçültülmesi için diğer gerek olmayan dosyaların da elden geçirilmesi tamamen mantıksız.

Bu eskiden mantıklıydı. Çünkü birçok dosya sıkıştırılmadan sunuluyordu kullanıcılarına. Şimdi öyle değil.
Eğer satışını yaptığınız temadaki dosyaları sıkıştırmadan sunuyorsanız, o zaman evet sizin kullanıcılarınız var gücüyle sıkıştırma yapmalıdır.

2- CSS ve JS birleştirilmemeli. Sonuna kadar arkasındayım.
Daha ortada http2 yokken dosyalar sırayla yükleniyordu. Bir dosyanın yüklenmesi tamamlanmadan diğerine geçilmiyordu.
Http1 böyle bir bağlantı protokolüydü işte. Ve bu durumda dosyaları tek bir dosyada toplamak hızda avantaj sağlıyordu.

Nitekim şimdi http2 ve http3 bu dosyaları ayrı olarak asimetrik yükleyebiliyor. O yüzden tek 1 dosyada birleştirirseniz bu nimetten faydalanamazsınız.
Ve sitenizin açılıp bütünü tamamlanması daha fazla zaman alır.

Aynı zamanda bir temada özellikle stillerin parça parça farklı dosyalarla yüklenmesi tasarımın daha erkenden oluşmasını sağlar.
Önce üst kısım stilleri yüklendiğinde kullanıcı sitenin açıldığı izlenimine erkenden varır.
TTI erkenden tamamlanır ve sitenin daha altında olan öğeler biraz sonra da yüklense olur. Bunlara hakim olamamanız üzdü gerçekten. Neyse...

Ek olarak bütün stilleri tek bir dosyada toplarsanız tasarımların bozulması muhtemeldir.
Özellikle dinamik bir işlemde sadece ilgili css dosyası çağrılması gerektiğinde siz dosyaları birleştirdiğiniz için işinize yaramayan kodların olduğu tüm dosya çağırılır.



Diyelim ki 15 farklı css dosyası var. Hepsini bir dosyada toplarsanız 500kb aşıyor diyelim.
Site açıldığında bu 500kb yüklenmeden hiçbir görüntü oluşmaz. Ama her bir dosya ayrı olursa tek bir dosya boyutu çok düşü olacağı için.
Erkenden görüntü oluşarak yüklenme hızla tamamlanır. İşte bu http2 sonrası gelişmeler ve yeni sayılmaz. Takip etmeniz gerekirdi diye düşünüyorum.

JS dosyalarını da aynı mantıkta düşünebilirsiniz. O yüzden http2 yani ssl olan siteler (neredeyse tüm siteler) dosyaları birleştirmemeli.

3- Defer veya delay etkinleştirilmemeli demedim. Defer ve delay aynı anda etkinleştirilmemeli dedim.
Temanızın kaç kullanıcısı var bilmiyorum ama ben 600'e yakın siteyi ve birçok farklı temayı optimize ettim.
Defer ve delayin aynı anda kullanıldığında işlemci yükü oluşturduğunu bizzat gördüm. Bu işlemci yüküne oranla yaptığı optimizasyona değmiyor.

Bir dosyayı hem erteleyip, hem geciktirmek zaten biraz da mantığa aykırı. Nitekim çok js kaynağı olmayan, işlemcisi de yeterli olan sitelerde kullanılabilir.
Yine de dar boğaz oluşturması muhtemel olduğunu bilerek bunu yapın. Siteniz 3-5 girişte normal şekilde açılabilir. Ama 6. seferde darboğaz yüzünden belli bir süre geç açılabilir.
Yani defer delay aynı anda kullanıldığında hızın stabil olmama durumu var. Özellikle yüksek ziyaretçili sitelerde çökmelerin yaşandığını gördüm. (anlık 10k üstü trafikte bunu deneyim ettim)


Daha başka sorularınız varsa cevaplayabilirim.
Bir tema üreticisi olarak zaten söylediklerimi rahatlıkla anlayabileceğinizi düşünüyorum.
Yine de argümanlarımı devam ettirmemi isterseniz belirtin. Deneyimlerimi paylaşmaktan mutluluk duyarım @bilimokur;

Güzel açıklamışsınız ama yanlış

CSS ve JS sıkıştırılmadan da gelmiş olabilir. O yüzden sıkıştırmanız gerekiyor. Ayrıca sıkıştırılmış olsa bile, ilerleyen zamanlarda yüklenme ihtimali olan eklentiler olacağı için, her daim sıkıştırma işleminin açık olması gerek.

Birleştirilmemeli yazmışsınız o da yanlış. Tarayıcı her bir script için sunucuya ek bir istek atar. 50 script varsa 50 kere istek atar. Günlük hiti 1.000.000 olan siteleri sizin mantıkla hesaplarsak durum vahim... Popüler sitelerin kaynak koduna bakarak ta deneyimleyebilirsiniz.

Defer ve delay sunucuda yük yapıyor yazmışsınız bu gerçekten çok komik Scriptler sunucudan çekilip tarayıcıda çalışır. Yorulacak bir şey varsa o da tarayıcı ve cihazlardır.

Bu arada ben WordPress geliştiricisiyim. Envato'da, kendi sitemde, yurt içi ve yurt dışı firmalarda birçok temalarım ve eklentilerim var. Ayrıca Udemi de de hatrı sayılır bir kitle, tema yapımı kursumu izleyerek WordPress tema kodlamayı öğreniyor. O yüzden WordPress dünyasındaki bilginiz sadece hazır plugin ve temalardaki tuşlara basmaktan ibaretken "durum vahim" diyebilmek için 2 kez düşünün. Ben oturup bütün vaktimi önbelleğe ayırsam sizin kullandığınız o önbellek eklentisini de sıfırdan kodlarım merak etmeyin.

Boyut konusuna gelirsek, birleştirilen dosyaların boyutu büyükse paçalanabilir o zaman birleştirmezsiniz. Yazdığımı okursanız "Yanlış olan hepsini seçmek değil, hepsini seçme işlemini ezber şekilde tüm sitelere yapmaktır. " şeklinde yazmışım zaten. Onda da farklı senaryolar yapılması gerek ama teknik konulara fazla girmeyeyim.

Son olarak şunu söylemek istiyorum. İnsanları küçümseyip eleştirmeyi bırakın. Ben yıllardır WordPress geliştiriyorum ve hala her projemde yeni şeyler öğreniyorum. Bu sizin için de geçerli. Hatalarım olabilir iyi yönlerim de olabilir. Ama kalkıp ta kimseyi yaptığı işte küçümseyip kendime prim kasmıyorum. Siz de yapmayın. Neticede altı üstü bir plugin @flyingatm; hocam güzel söyledi yukarıda.

@bilimokur; Yahu dürüst olmam gerekirse nerede bir "WordPress SÜPER OPTİMİZASYON, SİTENİZİ NİTRİK ASİTE BATIRIP; PASLARINDAN ARINDIYORUZ!" başlığı görsem gerçekten gülüyorum. Gülmek için de giriyorum bu başlıklara.

İşin amacı güzel. Temalar envato standartında bir hızlandırma işlemi sunamazlar. Eğer ki tema yapımcıları bunu ayrıyeten eklemek isterler ise, bunu bir plugin haline getirip sunmalılardır. Bundan ötürü Envato markette satılan hemen hiçbir temada ön tanımlı bir sıkıştırma, birleştirme ya da ne bileyim geciktirme fonksiyonu olamaz temalarda.

Biz tema yapımcıları bunu zaten bunun için özel olarak çalışan, tüm zamanını oraya verebilen bir ekip ya da kişinin geliştirdiği bir eklenti ile çözülmesini isteriz. Çünkü temamızın yanında bunu sunmamız demek; ek olarak onu da güncel tutmak zorunda kalmamız demek. İşte bunlar nelerdir; merge minify eklentileri vs. vs. vs. vs.

Lakin, belirtmek isterim ki;

BUNLARIN HEPSİ ÇOCUK OYUNCAĞI.

Sitenin performansı sizin o gtmetrix'ler, lighthouse'lar üzerinden aldığınız değerler; %60-70 oranında temaya ya da optimizasyon eklentilerine değil; testin yapıldığı sitenin sunucu lokasyonuna (test sunucusuna yakınlığı) ve brotli mi, gzip mi kullanmış; web server tarafında ne kullanmış VS VS VS. gibi durumlara bakan sistemler.

Sattığım temalardan birisi X hosting'inde 50 - 60 alırken; aynı tema aynı eklentiler aynı SQL ile Y hosting'inde 90 95 alabiliyor.

Ancak tekrar ediyorum;

BUNLARIN HEPSİ ÇOCUK OYUNCAĞI.

Bir sitenin performansı ne yazık ki sandığınız gibi statik, sayfa üstü testler ile bulunamaz. Tek yaptığınız cache eklentisi ile dinamiği statik yapıp; CSS'i yukarıda, JS'i aşağıda yükleyeyeyim; birleştireyim, sıkıştırayım yok ama şunu geciktireyimcilik yapmak gibi görüyorum.

Yahu bir aç o cache'i, bak bakalım o site nasıl çalışıyor cache yokken.

Hangi sorgu slow query basıyor, xdebug ile bir bak bakalım siteye bir ilaçlı röntgen çek, hangi custom sql sorgusunda index problemi var, hangi loop içinde gereksiz şekilde loop dışında da çağırabileceğiniz sql bağlantıları var, nereye transient cache uygulayabilirim. Çok eklenti var eklentiler theme init'den önce yüklenir bu da lineer olarak admin ajax'ın yavaşlamasına sebebiyet verir; ben bu sorguyu bence bir custom rest API endpoint'i tanımlayarak çekmeliyim; bu bana 600 700 MS performans kazandırır, Hmmm javascript kodunda bazı document.load durumunda kondisyon olmaksızın trigger'lanan settimeout fonksiyonları var; şunları bir inceleyeyim. Bana göre SİTEYİ UÇURMAK budur.

Sen o cache'i hangi sisteme kurarsan kur zaten o rezalet spagetti kodu 1 kere çalıştırıp; html çıktısı sunacak o saatten sonra.

HTML üzerinde de Allah affetsin CSS aşağıda mı yukarıda mı, JS aşağıda mı yukarıda mı, birleşmiş mi sıkışmış mı; bu sorular gerçekten 4-5 saatlik araştırma işi gibi geliyor bana. Ve böylesine basit bir şeyi yüceltmeye, ayrıntılarına girmeye gerek görmüyorum.

Bu sebeple, bu işi yapan herkese butoncu diyorum. Buton aç ve kapat.

Faydası yok demiyorum, sonuçta bir şeyin en iyisini yapmalı. Dinamik spagetti kodu statiğe mi çevireceksiniz? En iyi şekilde yapın elbette. Ancak, bu kadar dramaya gerek yok. Buton altı üstü.

Herkesin işine gerçekten saygım var, lakin Şener Şen filmindeki gibi taçsız kral Pele de bu paketi kullanıyor gibi şeylere gerek yok.

Saygılarımla.

Tema üreticisi olmakla, yüksek hızlı temaların üreticisi olmak arasındaki fark
ateşle, ateş böceğinin arasındaki fark kadar ayrıdır.

WP geliştiricisi olmak da aynı şekilde.
Performansa odaklanılarak geliştirilen bir eklentiyle, performans göz ardı edilerek geliştirilen eklenti arasında dağlar kadar fark var.

İşte ben bu işin performans tarafındayım. Envato dahil neresi olursa olsun, en büyük şirketlerin ürünleri olsun. Umrumda değil.
Performans göz ardı edilmişse edilmiştir. Bunun tartışmaya açık bir yanı yok.

Geliştirdiğiniz şeylerin performansa etkilerini bilmem için direkt geliştirici olmam gerekmiyor.
O zaman general olmak için de mutlaka cephede savaşmak gerekirdi. Ama buna gerek yok.
Neyin ne olduğunu okuma kabiliyeti fazlasıyla yeterli.

"CSS ve JS sıkıştırılmadan da gelmiş olabilir."
Hocam gelmiyor işte artık bu eskide kaldı. Kendinizi güncelleyin biraz.
1 yıl önce yaptığım çalışmalarda evet küçültülmeye gerek oluyordu. Şuan tema ve eklentiler bunları sıkıştırıp yüklüyor.
Artık neredeyse çok çok nadir rastlıyorum küçültülmemiş dosyalara. Onlarda fazlasıyla vasat tema ve eklentiler.
Bunların da dosyalarını küçültmek yerine önerim başka bir alternatif arayın. Optimizasyon bakırı altın yapma gücünde bişey değil.

"Birleştirilmemeli yazmışsınız o da yanlış. Tarayıcı her bir script için sunucuya ek bir istek atar. "
Her bir script için bir istek atılmasını istiyorsanız dosyaların BİRLEŞTİRİLMEMESİ gerekir işte
50 script için 50 istek atılmasını istiyorsanız tüm dosyaları birleştirmeyeceksiniz. Yoksa sadece 1 istek atılır.

Madem böyle düşünüyorsunuz. Satışınızı yaptığınız temanızda niye birleştirmediniz o zaman dosyaları

"Defer ve delay sunucuda yük yapıyor yazmışsınız bu gerçekten çok komik Scriptler sunucudan çekilip tarayıcıda çalışır. Yorulacak bir şey varsa o da tarayıcı ve cihazlardır."
Sadece scriptler değil herşey sunucudan çekilir ve tarayıcıda çalışır zaten. Olay çekilirken işleme tabi tutulmasının yarattığı yük.

Son olarak...
Satışınızı yaptığınız temada performans açısından bir çok sorun var. Ve kümülatif bozulmanın içinden geçiyor.
Uzun zamandır güncel şartlara göre geliştirme yapmadığınız aşikar.

Tema şık olabilir, güzel görünebilir. Ben bununla ilgilenmiyorum.
Ben uzmanı olduğum performans konusuyla ilgileniyorum. O yüzden temanız için eleştirilerim de bu yönde.
Sorun değil, bir tema geliştiricisi olarak performansa önem vermeyen bi tek siz değilsiniz.
O yüzden nerede bir performans konusu açılsa sizin gibi arkadaşlardan bu tür geri dönüşler almaya alıştım

Hayat böyledir, ömründe PHP ile bir şey geliştirmemiş, geliştirse dahi Envato standartlarını karşılaması bambaşka bir dünya olan birisi gelir ve sana yüksek hızlı tema yapımı ile ilgili bilgi verir WordPress konusundaki tüm duvarları aşmış kişilere.

@mcatakcin; Hocam size kendisi yerine cevap vereyim; ürünler pazara özel üretilir. Cevap bu kadar kısa. Kendiniz tüm performans kıstaslarına uygun bir tema geliştirmeye ne dersiniz? Ya da en iyisi mi, kendiniz tüm istediğiniz her şeyi tek pakette barındıran bir performans plugin'i kodlayın. Herkes kullansın.

Ek olarak @bilimokur; 1.5 senedir WordPress üzerinde buddypress yerine kendi kodladığım HypePress sistemini kullanan bir sosyal medya teması olduğunu söylemiştim diye hatırlıyorum. Bitiminde sona gelindi. Ancak eski kodladığım story handle sistemi içime hiç sinmiyordu. Bu sebeple geçenlerde yeni bir story sistemi kodlamaya başladım.

Videoyu aşağıya ekliyorum. Hala ince işleri var, harici bir plugin olarak satmayı düşünmüyorum bu sebeple karşınızda rakip olarak konumlanmayacağım. HypePress eklentisi dahili modülü olarak gelecek.

Sizin story plugin'inindeki Zuck.js'den çok daha basit ve doğal bir sistem kodladım sanırım. Vanilla JS, file uploader olarak ise filepond yerine yine kendi kodladığım bir sistem var ancak story editör olarak TUI editör kullanmak dışı hiçbir alternatif yok gibi.


https://www.youtube.com/watch?v=JBgLXFdgGuc

Güzel olmuş hocam. Tebrikler. Ben de bıraktım zuck.js i. Sıfırdan yaptım. Mobilde bazı sorunlar kaldı sadece. Filepond u kullanmaya devam edeceğim. İlerde belki onu da sizinki gibi yaparım. İmage editor için 2 alternatif var ama lisans nedeniyle kullanamıyorum. TUI ye el mahkum maalesef.