PHP sayfa hızlandırma (Optimize değil)

Yani hızlı açılmasi konusu bende sorun değil çünkü 1gbit bağlantım var ek olarak cihazım güzel belleklere sahip ama bunu ölçümlemenin yolu insanlara sorarak değil de google lighthouse gtmetrix gibi toolların sonuçlarına göre düzenlenmesi değerlenrilmesi ile yapılır

iş tarafımca alınıp teslim edilmiştir.
Yaptığım işlemler, yavaşlığa sebeb olan ana unsurlar, sadece lazy ile çözülebilecek bir işlem değildi, ki denedim yinede tam hızlanmamıştı:
- 170kb lik ilk boyamayı engelleyen css sini teste sokup ayıkladım ve 10 kb düşürüp entegre ettim.
- rendere engelleyen 1 .js dosyasını deferledim
- 2 renderi engelleyen ve kalabalık oluşturan ve sadece responsive mobil menü özelliği için kullanılan bootstrap popper.js ini sildim, çunku menü yok.
- bu şekilde boyama ve renderi hızlandırdım.
- tasarımında hatalar vardi, onları düzelttim örneğin her resim için style="" ile widht ve diğer unsurları belirtmiş, tarayıcı bazlı kastırmaya sebeb oluyordu. Bunlar .css dosyasında belirtilmeli.
Yukardakilerle dolaylı yoldan fcp , lcp değerlerini minimuma düşürmüş oldum.
- Cls sorunu vardi onuda düzelttim, açılışta kasmaması için resim ana divini geciktirmeye soktum.
- + resimleri Sql den çekerken sorguda bazı gereksiz şeyleri while döngüsüne sokmuşlar onları düzeltip sql sorgusunun hızlanmasınıda sağladım, Php tabanlı düzeltme yaptım.
- en son uygun bir lazy entegre ettim.
Sonuç: olması gereken hızlı bir sayfa oldu.
Fakat hocamızın sitesinde farklı sayfalarda eksiklikler ve yanlışlıklar var baya. dilerse onlarıda başka zaman düzeltebilirim.
+ Benzer sorunları olan diğer arkadaşlar varsa uygun şekilde yardımcı olabilirim. Forum dışı iletişim, Telegram: https://t.me/TurkCoder
Herkese Bol kazançlar.

Sorununuz PHP'de değil gif resimleri tarayıcı açarken tarayıcı kasıyor.

Aşağıdaki kodu sayfanızın altına ekleyin. Gifleri yüklediğiniz img kodunun src'sinin data-src olarak güncelleyin.

Örnek;
Eski;
<img src="banner.gif">

Yeni;
<img data-src="banner.gif">

<script>
window.onload = function () {

const observer = new IntersectionObserver(entries => {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.add("loaded");
lazyImage.classList.remove("lazy");
observer.unobserve(lazyImage);
}
});
}, {
rootMargin: "150px"
});

var srcImages = document.querySelectorAll('img[data-src]');
srcImages.forEach(box => {
observer.observe(box);
})

}
</script>

Çok teşekkür ederim

https://codingstatus.com/load-more-d...sing-ajax-php/

Revize yapacak olan arkadaş buna bakarsa iyi olur. Ne kadar lazyload yapılırsa yapılsın sayfalandırma istenmiyorsa döngü sebebiyle yavaşlama söz konusu olur. Ancak aşağı doğru indikçe veriler yüklenirse sorun tam olarak çözülmüş olur.

Bilgilendirme için teşekkür ederim hocam sağ olun

eline sağlık güzel olmuş konuya girdiğimde bende sorun olmadığını yazacaktım

Şimdi beni yanlış anlamayın lakin çözülmüş bir sorun yok ortada. Siteye ilk girenler yine aynı loading sıkıntısıyla cebelleşiyorlar. Özellikler banner olan sayfada sorun devam ediyor. İkinci girişte zaten cache aldığı için load kısa sürüyor.

Gtmetrix ölçüm yapamıyor.


web.dev ise sorunun devam ettiğini açık bir şekilde gösteriyor.



Bu kadar çok konuştun çözümüde söyle o halde diyeceksinizdir. Öncelikle web.dev'in ikinci satırdaki hatası img tagındaki width height değerlerinin olmaması yüzündendir. Genel olarak çözüm istiyorsanızda gif yerine mpeg4 e çevirip video olarak barındırıp html'e basmanızdır ki web.dev zaten size bunu çözüm olarak sunuyor.

Ek olarak web.dev yönlendirici makalesi için tıklayın.

Kolay gelsin.

Teşekkür ederim akşam eve geçince inceleyeceğim 👍😊