Merhaba,
Konumuz, bir websitesinin neden yavaş olabileceğini değerlendirip hızlandırabilecek çözümler aramak olacak. Websitenizin yavaş olmasına neden olabilecek yüzlerce sebep olabilir herbirini teker teker inceleyecek zamanımız ve kaynağımız elbette yok ama en yaygın sorunların üzerinden geçerek yavaşlığı nasıl tespit edebileceğinizi anlatmaya çalışacağım. Eğer başarılı olabilirsek; bir websitesinin yavaş çalışmasına neden olan durumu kendiniz teşhis edebileceksiniz.
Şunu da belirtme ihtiyacı duydum; bu yazıda yer alan öneriler ve teşhislerin hedef kitlesi bu alanda amatör olan kullanıcılar içindir, eğer profesyonel biriyseniz ve bir şekilde bu yazıyı okuyorsanız vaktinizi boşa harcamamanızı tavsiye ederim :)
Kafanızı çok karıştırmamak için bu konuyu iki farklı alanda ele alacağım. Bunlardan birincisi front-end, ikincisi back-end.
Front-End Kaynaklı Yavaşlık Sebepleri
Yavaşlığa sebep olan başlıca nedenlerin ilk sırasında front-end kaynaklı sebepler yer alıyor. Gereksiz yüklenen javascript dosyaları, css dosyaları derken optimize edilmemiş resimler de bu nedenlerin başlıca hataları arasında yer alıyor.
Yavaş bir websitesi ile karşılaştığımızda ilk olarak tarayıcımızın geliştirici modunu açıp (F12) "Konsol" sekmesini ziyaret ediyoruz. Bu sekmede eğer sitemizde bir javascript hatası varsa onları göreceğiz.
Eğer sitenizde bu şekilde görünen çok fazla sayıda javascript hatası varsa bu hataları düzeltmeniz sitenizin hızlanmasında rol oynayabilir. Genelde hazır temalarda karşılaştığım bir sorundan bahseyim. Burada 404 hatası veren resimler olabilir. Çok masum bir hata gibi görünse de bazı pluginler resimleri işliyor olabilir. Bu durumda 404 hatası veren bir resmi işleyemeyeceği için yapmış olduğu istek sayfanın yüklenme süresini arttıracaktır. Bu da sitenizde eğer bir loading var ise loading'i fazladan 3-5 saniye ekranda görmenize neden olur.
Sitenizde yerleşik olan (google analytics veya tagmanager gibi 3th party pluginleri bunun dışında bırakarak) javascript hatalarını düzeltmeniz gerekecektir.
Sitenizde yüklenen bileşenler ne kadar vakit alıyor?
Yine tarayıcımızın geliştirici modunu açalım bu sefer "Network" sekmesini açalım. Bu sekmede websayfasında yer alan tüm bileşenleri görüntüleyebilirsiniz. Tablo başlığına sağ tıklayarak "Zaman Çizelgesi" sekmesinin aktif olduğuna dikkat edelim ve F5 yaparak sayfayı yenileyelim. Sayfa yüklenmesi tamamlandığında sağ üst köşede yer alan "ms" başlığına tıklayarak büyükten küçüğe doğru sıralayıp inceleyelim.
burada normalde milisaniye cinsinden değerler görürsünüz. Sayfanızda çok komplike bir şey yoksa yüklenmesi saniyeler sürecek bir veri olmaması gerekir. Ekran görüntüsünde yer alan veriler emreakkaya.org'un bir yazısına ait. Site çok sade olduğu için bileşenlerin yüklenmesi çok hızlı gerçekleşmiş. Eğer yüklenmesi zaman alan bir medya görseli veya video var ise muhtemelen yanlış bir şeyler yapmışsınız demektir.
Görselleri veya videoları öylece doğrudan sayfamızda yayınlamak büyük hata olur. Eğer bir fotoğrafı ekranda görüntülemek istiyorsanız öncelikle onu uygun boyutlarda "ölçeklendirme" yapmanız gerekir. Bir örnek üzerinden gitmek gerekirse;
görselde gördüğünüz üzere maksimum 1170px olan bir içerik alanım var. Ne kadar zorlasam da 1170px'den fazlası görüntülenmeyecek. Hal böyleyse fotoğrafı 1170px'e göre ölçeklendirmem gerekir. Normalde yazılımcı, resmi gerekli alana yerleştirirken bunu zaten yapar. Ancak bir şekilde yapılmamış ise yazılımcınızdan bu görseller için ölçeklendirme yapmasını istemeniz gerekecektir. Bu mümkün değilse, resmi kendiniz de microsoft paint ile bile ölçeklendirip yükleyebilirsiniz. Tabi yazılımın görseli sadece 1 kez kırpması gerekir :) Bir sebeple her seferinde resmi kırpmaya kalkarsa bu da bir back-end hatası doğuracaktır ve yüklenmesi normalden daha fazla sürecektir. FTP'den baktığınızda resmin oluşturulma tarihinin sürekli güncellenmiyor olmasına dikkat edin. emreakkaya.org'da resimler ölçeğe göre klasörlendiriliyor örneğin
"uploads/340x320/emre.jpeg"
"uploads/emre.jpeg"İhtiyaç durumuna göre gerekli resimleri gerekli klasörden çağırıyorum. Wordpress'te bu zaten otomatik olarak var diye biliyorum. Yine de kontrol edersiniz.
Ancak, resmin daha büyük haline kullanıcıların erişmesi gerekirse ne yapmamız gerekir? Onun da çözümü basit, ölçeklendirilmemiş halini yani orijinal boyutunu resme link olarak ekleyebilirsiniz. Böylece kullanıcı tıklamadığı sürece resmin orijinal halini görüntülemeyeceği için sayfanızın yavaşlamasına asla neden olmayacaktır. Bunu daha da tatlı olacak şekilde "Fancy Box" tarzında pluginler kullanarak da yapabilirsiniz. Çok daha tatlı olacaktır.
Videoları mp4 olarak yüklediyseniz ve doğrudan tarayıcı üzerinden izlettiriyorsanız yine sitenizin topuğuna sıktınız demektir. Çünkü videolar da aynı şekilde etkileşim olmadığı sürece oynamayacağından, yükletmeye de gerek yoktur. Bunun yerine yine bir video görseli ve play ikonu olan resim koyar ve resme tıklandığında ayrı bir pencerede veya modal içinde video oynarsa bu sorunu da ortadan kaldırabilirsiniz.
Görsellerle ilgil olarak en sık karşılaştığım bir diğer hata da grid yapıdaki görsellerin yanlış ölçeklendirilmesi.
362x200px olan biri kutuya 3620x2000 boyutunda görsel yüklemenizin hiçbir anlamı yok. Bunun yerine görseli 362x200 boyutuna ölçeklendirebilir veya croplayabilirsiniz. Megabaytlarca yer kaplayan bu dosyaları ziyaretçiler indirmek zorunda kalmaz ve sitenizin performansını arttırır.
Yeri de gelmişken söyleyeyim, bu görselleri yeni nesil resim uzantıları ile yayınlamanız performansı büyük ölçüde arttırıyor. Örneğin .webp uzantısı kullanabilirsiniz. Ben emreakkaya.org'da webp kullanıyorum. Bunu da yine yazılımcınız kolay bir şekilde dönüştürebilir. Ancak yazılımsal müdahale yapılmadan değiştirmek isterseniz de internette jpeg to webp şeklinde herhangi bir tool kullanarak yapabilirsiniz.
Gereksiz Javascript kodları
Bu çok başbelası bir konudur. Çünkü gereksiz javascript kod bloğunu tarayıcının geliştirici modundan maalesef göremezsiniz. Bunun için en azından javascript bilen bir arkadaşın kodları kontrol ederek kullanılıp kullanmadığını değerlendirebilir, kaldırabilir. Ama ben bir kaç örnek verecek olursam; hazır temalarda karşılaştığım sorunlardan..
Örneğin ana sayfanızda bir slider var, revolution slider olsun hatta. (En tercih etmediğim slider'dır kendisi) bu slider'ı sadece ana sayfanızda kullanıyorsunuz diyelim (bu sliderı kullanmanızı hiç tavsiye etmiyorum çünkü bir slidera göre çok fazla yer kaplıyor) bu slider'ın kodlarını sayfanıza import ettiniz. Ancak diğer sayfalarda bu slider'ı kullanmadığınız için tüm sayfalarda bu slider dosyalarını çağırmanıza gerek yok.
Bu scriptleri ve css'leri sadece ana sayfada import edin ki diğer sayfalarda da gereksiz yere bunu yüklemesin tarayıcı.
Bu sadece slider için geçerli değil. Örneğin counter kullanıyorsanız sadece counter'ın göründüğü sayfalarda counter'ı import edin. Bu şekilde eminim bir sürü js ve css dosyaları bulacaksınızdır.
Aklıma bunlar geldi şimdilik :( eklememi veya değerlendirmemi istediğiniz durumlar sizin aklınıza gelirse bana yazabilirsiniz.
Back-End Kaynaklı Yavaşlık Sebepleri
Wordpress, Wix tarzı hazır builder araçları kullanıyorsanız, bunlar genelde back-end tarafında oldukça optimize oluyorlar. Fakat kullandığınız pluginlerde hatalar olabilir. Bu nedenle çok kullanıcısı olmayan pluginleri kullanmanızı tavsiye etmiyorum. Hatta çok komplike bir websiteniz varsa ve yazılımsal aksiyonlar için pluginler kullanıyorsanız bunun yerine özel bir yazılım yazdırmanızı tavsiye edeceğim. Böylelikle back-end tarafında daha temiz ve verimli bir ortam sağlanabilir. Burada sayacağım sebepler wordpress, opencart gibi hazır yazılımları kapsamayacak.
En sık karşılaştığım durumlara göz atacağım.
Sayfalama
Diyelim ki veritabanında 1.000 adet kayıt var ve bu kayıtların görüntülendiği sayfalar çok yavaş. Çözüm çok basit aslında 10'ar veya 20'şer olarak sayfalama yapmak. Sayfalama yapmaktan asla kaçınmayın.
Cache (Önbellekleme)
Cache kullanımı bir websitesinin bence olmazsa olmazıdır. Siteyi kaç kişi ziyaret ediyorsa etsin, çoğu durumda file cache kullanmayı tercih ediyorum. Eğer sitede çok aksiyon yoksa, kullanıcı giriş yapmış sayfalar, kişiye özel oluşturulan alanlar gibi, verileri önbelleğe alarak göstermeniz performansı büyük ölçüde arttıracaktır. Böylece her seferinde veritabanından veri çekmek yerine dosyadan okuyup ekrana yazdırmanız optimizasyon kazandıracaktır. Sitenizin hiti arttıkça bu önbelleğin önemi de artmaktadır.
API Request
Bazen dışarıda veya içeride http requestler kullanıyor olabilirsiniz. Örneğin "A" sitesinden hava durumu bilgisi almanız gerekiyordur. Sayfa her yüklendiğinde bu isteği atmak yerine, bu isteği cachleyip 1 dakikada bir bile atmanız performansı büyük ölçüde arttıracaktır. Veya bir cronjob yazarak bu isteği arka planda server tarafında da çözebilirsiniz.
Başka bir api durumu daha geldi aklıma.. Örneğin bir sayfada onlarca sekme var ve bu sekmelerde de onlarca bilgi bulunuyor. Örneğin bir poje sayfası, projenin galerisi, finans hakkında bilgiler, yazılım hakkında bilgiler, ekibi, önemli evrakları, yorumları vs. vs. Bunların tamamını sayfa yüklenmeden önce çekip ekrana yazdırıyorsanız muhtemelen yanlış yapıyorsunuzdur.
Bunun yerine, sadece ilk sayfada yer alan bilgileri çekip ekrana yazdırdıktan sonra, sekme geçişine bir Javascript Request atarak o sekmeye ait bilgileri çekerek yazdırabilrisiniz. Bu durum performansı büyük ölçüde arttıracaktır
Server Kaynaklı Sorunlar
Siteniz çok fazla hit alıyor ve artık optimizasyon konusunda yapabileceğiniz bir şey kalmamışsa, kaynaklar yetersiz geliyordur. Sunucunuzu upgrade etmeniz gerekir. Ama bu işlemi yapmadan önce uzman biri tarafından kontrol edilmesinde fayda var.
Unutmayın! İyi bir optimzasyon sunucu maliyetinizi düşürür :)