Web sitesi hızı, kullanıcı deneyimi için çok önemlidir. Siteniz çok yavaşsa hem ziyaretçi hem de potansiyel müşteri kaybedersiniz. Google gibi arama motorları, arama sıralamalarında bir web sitesinin hızını hesaba katar. Bu nedenle web sitenizin hızını optimize ederken her şeyi göz önünde bulundurmalısınız.

İşte web sitesi hızını artırmak için birkaç temel ve genel öneri.

Mümkün Olduğunda İçerik Yüklemeyi Erteleyin

Ajax, herhangi bir zamanda eşzamansız olarak güncellenebilen web sayfaları oluşturmamıza olanak tanır. Bu, bir kullanıcı bir işlem gerçekleştirdiğinde tüm sayfayı yeniden yüklemek yerine, o sayfanın bölümlerini güncelleyebileceğimiz anlamına gelir.

Örnek olarak bir resim galerisi kullanabiliriz. Yüksek kaliteli görüntü dosyaları her zaman büyük ve ağırdır. Web sitesi hızını yavaşlatabilirler. Bir kullanıcı web sayfasını ilk ziyaret ettiğinde tüm resimleri yüklemek yerine, resimlerin küçük resimlerini görüntüleyebiliriz. Daha sonra kullanıcı üzerlerine tıkladığında, asenkron olarak sunucudan tam boyutlu görüntüleri talep edebilir ve sayfayı güncelleyebiliriz. Bu şekilde, bir kullanıcı yalnızca birkaç resim görmek isterse, tüm resimlerin indirilmesini beklemek zorunda kalmaz. Bu gelişme modeli tembel yükleme olarak adlandırılır.

Hızlı Yükleme Hızıyla Olağanüstü Claue Teması

jQuery, Prototype ve MooTools gibi Ajax/web geliştirme kitaplıkları, ertelenmiş içerik yüklemenin uygulanmasını kolaylaştırabilir.

SICAK!! Claue'nin 2.0 sürümü yayınlandı

Demoyu Görüntüle

Claue Magento Theme 2.0, bir dizi performans iyileştirmesi ve özel özellikle birlikte piyasaya sürüldü. İşte bizi en çok heyecanlandıran birkaç değişikliğe bir göz atın

• Luma temasına dayalı olmak.
• Magento Temasının tüm standartlarını karşılayın
• Önemli performans artışı
• Çoğu üçüncü taraf uzantıyla uyumludur.
• Magento 2.4.x ile tam uyumlu

Bu ikinci gelişmiş sürüm, öncekinden tamamen farklıdır. Bu nedenle, Claue sürüm 1 kullanıyorsanız ve Claue sürüm 2'ye güncelleme yapmak istiyorsanız, eski sürümden güncelleme yapmak yerine yalnızca yeni bir web sitesini yeniden oluşturabilirsiniz.

Harici JS ve CSS Dosyalarını Kullanın

Kullanıcı web sayfanızı ilk yüklediğinde, tarayıcı CSS ve JavaScript dosyaları gibi harici kaynakları önbelleğe alır. Bu nedenle, satır içi JavaScript ve CSS dosyaları yerine bunları harici dosyalara yerleştirmek en iyisidir.

CSS

Satır içi CSS kullanmak, bir web sayfasının oluşturma süresini de artırır. Ana CSS dosyanızda her şeyin tanımlanmış olması, tarayıcının, uygulaması gereken tüm stil kurallarını zaten bildiğinden, sayfayı oluştururken daha az çalışmasına olanak tanır.

Bonus olarak, harici JavaScript ve CSS dosyalarının kullanılması site bakımını kolaylaştırır, çünkü birden çok web sayfasına dağılmış kod yerine yalnızca genel dosyaları korumanız gerekir.

Önbelleğe Alma Sistemlerini Kullanın

Sitenizin aynı içeriği oluşturmak için veritabanınıza bağlandığını fark ederseniz, web sitesi hızını artırmak için bir önbellek sistemi kullanmaya başlamanın zamanı gelmiştir. Önbelleğe alma sistemine sahip olduğunuzda, sayfa kullanıcılarınız tarafından her ziyaret edildiğinde içeriği oluşturmak yerine sitenizin içeriği yalnızca bir kez oluşturması gerekecektir. Önbelleğe alma sistemleri, nasıl kurduğunuza bağlı olarak önbelleklerini periyodik olarak yeniler - böylece sürekli değişen web sayfaları bile (yorumların olduğu bir blog yazısı gibi) önbelleğe alınabilir.

WordPress ve Drupal gibi popüler içerik yönetim sistemleri statik önbelleğe alma özelliklerine sahip olacaktır. Gereksiz sunucu işlemlerini azaltmak için dinamik olarak oluşturulmuş sayfaları statik HTML dosyalarına dönüştürürler. WordPress için, WP Super Cache'ye (Six Revisions'ın yüklediği altı kritik WordPress eklentisinden biri) göz atın. Drupal, çekirdekte bir sayfa önbelleğe alma özelliğine sahiptir.

Web sunucunuza kurabileceğiniz (eğer imkanınız varsa) veritabanı önbelleğe alma ve sunucu tarafı komut dosyaları önbelleğe alma sistemleri de vardır. Örneğin, PHP, önbelleğe alma ve diğer çeşitli yöntemlerle performansı optimize eden PHP hızlandırıcıları adı verilen uzantılara sahiptir.

HTML'deki Resimleri Yeniden Boyutlandırmaktan Kaçının

Bir görüntünün orijinal boyutu 1280x900px ise, ancak 400x280px olması gerekiyorsa, HTML'nin genişlik ve yükseklik niteliklerini kullanmak yerine Photoshop gibi bir görüntü düzenleyici kullanarak görüntüyü yeniden boyutlandırmalı ve yeniden kaydetmelisiniz (yani <img width=”400″ height= ”280″ src=”image.jpg” /> ). Bunun nedeni, doğal olarak, büyük bir görüntünün dosya boyutunda her zaman daha küçük bir görüntüden daha büyük olmasıdır.

Bir görüntüyü HTML kullanarak yeniden boyutlandırmak yerine Photoshop gibi bir görüntü düzenleyici kullanarak yeniden boyutlandırın ve ardından yeni bir dosya olarak kaydedin.

Metni Görüntülemek için Görselleri Kullanmayı Durdurun

Bir görüntüdeki metin yalnızca ekran okuyucular için erişilemez ve SEO için tamamen işe yaramaz hale gelmekle kalmaz, aynı zamanda metni görüntülemek için görüntüleri kullanmak da web sayfalarınızın yüklenme sürelerini artırır çünkü daha fazla görüntü daha yüksek web sitesi hızı anlamına gelir.

Web sitenizde çok sayıda özel yazı tipi kullanmanız gerekiyorsa, metni özel yazı tipleriyle daha verimli bir şekilde görüntülemek için CSS @font-face hakkında bilgi edinin. Yazı tipi dosyalarının sunulmasının, görüntülerin sunulmasından daha uygun olup olmayacağını belirlemeniz gerektiğini söylemeye gerek yok.

Doğru Dosya Formatını Kullanarak Görüntü Boyutlarını Optimize Edin

Doğru görüntü biçimini seçerek, görüntü kalitesini kaybetmeden dosya boyutlarını optimize edebilirsiniz. Örneğin, PNG formatının sunduğu görüntü şeffaflığına (alfa katmanları) ihtiyacınız olmadığı sürece, JPG formatı genellikle fotoğraf görüntülerini daha küçük dosya boyutlarında görüntüler.

Ek olarak, resimlerinizin dosya ağırlıklarını daha da azaltmak için kullanabileceğiniz birçok araç vardır.

JavaScript'i Belgenizin Sonuna Yükleyin

Komut dosyalarınızı sayfanın başında değil de sonunda yüklemeniz en iyisidir. JavaScript'e başlamadan önce tarayıcının her şeyi oluşturmasını sağlar. Bu, web sayfalarınızın daha duyarlı hissetmesini sağlar çünkü JavaScript'in çalışma şekli, indirmeyi bitirene kadar altındaki her şeyin oluşturulmasını engellemesidir. Mümkünse, HTML belgelerinizin <body> kapanış etiketinden hemen önce JavaScript'e başvurun. Daha fazla bilgi edinmek için JavaScript'in yüklenmesini erteleme hakkında bilgi edinin.

Bir İçerik Dağıtım Ağı (CDN) kullanın

Web sitenizin hızı, web sunucunuza göre kullanıcının bulunduğu yerden büyük ölçüde etkilenir. Ne kadar uzaktalarsa, iletilen verilerin kat etmesi gereken mesafe o kadar fazla olur. İçeriğinizin birden çok, stratejik olarak yerleştirilmiş coğrafi konumlarda önbelleğe alınması, bu sorunun çözülmesine yardımcı olur. Bir CDN, genellikle işletme maliyetinizi biraz daha yüksek hale getirir, ancak kesinlikle bir hız bonusu kazanırsınız.

Web Önbelleğini Optimize Edin

Önbelleğe alma sistemlerini kullanmanın yanı sıra, mümkün olduğunca web önbelleğini kullanan web siteleri oluşturmalısınız. Web önbelleği , dosyaların daha sonra kullanılmak üzere web tarayıcısı tarafından önbelleğe alınmasıdır. Tarayıcıların önbelleğe alabileceği şeyler arasında CSS dosyaları, JavaScript dosyaları ve resimler bulunur.

Birden çok sayfada kullanılan CSS ve JavaScript kodunu harici dosyalara koymak gibi temel bilgilerin yanı sıra, dosyalarınızı mümkün olan en verimli şekilde önbelleğe aldığınızdan emin olmanın birçok yolu vardır.