Resim Ağır Web Sitenizi Hızlandırmak İçin Kolay Adımlar

Site sahibi sonunda indirme hızını artırmak isteyebilir. Bu, arama sonuçlarının sıralamasını artırır; ayrıca site ziyaretçilerinin eylemlerine daha hızlı yanıt vererek onunla çalışması daha keyifli.

Hızlı ve basit bir çözüm arayan site sahipleri, kaynakları tüketen ve yalnızca çalışmayı yavaşlatan çok sayıda eklenti yükler. Optimizasyon eklentilerine karşı hiçbir şeyimiz yok, ancak işlerinin prensiplerini bilerek ve noktaya kadar kullanılmaları gerekiyor.

Ayrıca, yönetim deneyimi yaşamamış site sahipleri genellikle optimizasyon konusunda bir yanlış anlama yaşarlar. Anlayışlarına göre optimizasyon, betiğin ne pahasına olursa olsun hızlandırılmasıdır. Optimizasyonun görevi, sitenin optimal hızını kaynakların optimal fiyatında üretmektir. Bu nedenle, tüm siteler için evrensel talimatlar olamaz.

Web sitenizi hızlı hale getirmek, herhangi bir kaynak sahibi veya web yöneticisi için acil bir görevdir. Sonuçta, sayfa yükleme hızı, yüksek kaliteli içerik ve güzel grafik tasarımın yanı sıra bir web kaynağının başarısı için en kritik faktörlerden biridir.

Yavaş yükleme, zaman zaman kullanıcıları kaybetme olasılığını artırır. Özellikle ziyaretçiler mobil cihazlardan geldiğinde. Deneyimsiz bir kullanıcının bile pratikte uygulayabileceği site yüklemesini hızlandırmak için basit öneriler, trafik kaybı olasılığını en aza indirmeye yardımcı olacaktır.

1. HTML-Kodunu ve CSS-, JS-Dosyalarını Optimize Edin

Siteye girerken kullanıcının tarayıcısına iletilen kodun “temizliği” endişesi olmadan indirme optimizasyonu imkansızdır. Kaynak kodundaki çok sayıda karakter, yükleme hızını önemli ölçüde etkiler, bu nedenle kısalığı kritik bir başarı faktörüdür.

Site yüklemesini hızlandırmak için kod nasıl en aza indirilir

Gereksiz karakterleri, işaretleme öğelerini ve kaynak kodu etiketlerini kaldırın. Süreci otomatikleştirmek, sitenin HTML kodunun başına ve sonuna küçük bir ek eklemeye yardımcı olacaktır.

Bu HTML içeriğini ara belleğe alma yöntemi oldukça kullanışlıdır, ancak rastgele erişimli bellekte ek bir yük oluşturabilir.

Aynı tür CSS dosyalarını ve JS dosyalarını gruplayın. Ayrı bir dizine kopyalanan ve tüm site dosyalarının içinden geçen JCH Optimize, Cloudflare veya Minify gibi ücretsiz PHP uygulamaları, öğeleri birleştirmeye yardımcı olacaktır.

2. Ekstra HTTP İsteklerini Kaldırın

Sayfa öğelerini (javascript, resimler, CSS ve flash dosyaları) yüklemek, bir siteyi yüklerken sistem kaynaklarının aslan payını alır. Bu tür öğeler için HTTP istekleri siteyi belirgin şekilde yavaşlatır.

"Ekstra" isteklerden kaçınmak için sayfanın bileşenlerinin sayısını azaltmanız gerekir. Bu, sunucu çağrılarında orantılı bir azalmaya neden olacak ve sitenin yüklenmesini hızlandıracaktır.

Bu birkaç yolla yapılabilir:

• Birden çok görüntüyü tek bir grafik dosyasında birleştirin (CSS hareketli grafiği);
• Sayfa stil sayfasında satır içi görüntüleri (satır içi resimler) kullanın;
• Bir sayfada birden çok CSS dosyası veya komut dosyası bir dosyada birleştirilir;
• Senaryo ve eklenti sayısını en aza indirin.

3. JavaScript ve CSS'yi Doğru Sırayla Yerleştirin

CSS dosyalarının sayfa kodunun en üstüne ve JavaScript'in en altına yerleştirilmesi önerilir. Bu optimizasyondan sonra önce statik içerik, ardından sadece dinamik grafikler yüklenecektir.

İndirmek için daha fazla kaynak gerektiren Flash öğeleri veya animasyonlar, ilk saniyeden itibaren sitenin izlenimini "dışarı çekmez" ve sitenin izlenimini bozmaz. Bu, içeriğin sorunsuz bir şekilde indirilmesini sağlayacak ve kaynağın estetik çekiciliğini artıracaktır.

4. Harici Komut Dosyalarının Sayısını Azaltın

Harici komut dosyaları, harici bir bağlantı aracılığıyla erişilen kod parçalarıdır (metinler). Bağlantılar, birçok farklı sunucuya ek istekler oluşturur ve bu da sonuçta siteyi yavaşlatır. Bunu önlemek için, esas olarak sayfanın kaynak kodunun yapısına gömülü yerel komut dosyalarının kullanılması önerilir.

Elbette yerel scriptlere odaklanmak sitenin görünümünde ve işlevselliğinde belirli sınırlamalar yaratacaktır. Ancak ortaya çıkan indirme hızı avantajı, bu "fedakarlıklara" değer.

5. Yıkamayı Etkinleştir

Bu PHP-fonksiyonu, kullanıcının sunucusunun kaynaktan bilgi yüklemesini beklemenize değil, onu parçalar halinde çıktı almanıza izin verir. Veriler tarayıcıya aktarılırken, açık pencere boş kalmayacak, sitenin yüklenebilir öğeleriyle sorunsuz bir şekilde doldurulacaktır. Bu tür bir hızlandırma, özellikle karmaşık bir arayüze ve yüksek trafiğe sahip web kaynakları için gereklidir.

Yıkama işlevini sayfa kaynak kodunun başına, başlıktan hemen sonra yerleştirmek daha iyidir. Başlıktan HTML içeriği daha hızlı açılır ve ayrıca CSS ve JavaScript öğelerinin paralel yüklenmesini etkinleştirebilirsiniz.

6. Sayfaları Önbelleğe Alın

Önbelleğe alma, site sayfalarından (flash, grafik, JavaScript ve CSS) bazı bilgileri kullanıcının tarayıcısına kaydeder. Bir sonraki çalıştırmada, bu dosyalar tarayıcıdan anında indirilerek siteye ekstra hız kazandırır.

HTML koduna bir süre sonu başlığı ekleyerek önbelleğe almayı etkinleştirebilirsiniz. WordPress siteleri, W3 Total Cache, Cache Enabler veya Zen Cach gibi ücretsiz veya kısmen ücretsiz işlevlere sahip eklentilerin yüklenmesi kullanılarak kolayca önbelleğe alınır.

Yeni siteler için, yalnızca başlatma için tam hazır olduktan sonra önbelleğe almayı kullanmak daha iyidir. Geliştirme sırasında özelliği etkinleştirirseniz, daha fazla değişiklik sitede doğru şekilde görüntülenmeyebilir.

7. Bir CDN kullanın

İçerik Dağıtım Ağı – içeriğin ziyaretçilere aktarılma hızını artırmak için dünyanın dört bir yanındaki veri merkezlerine dağılmış bir sunucular zinciri. Ziyaretçi coğrafi olarak CDN sunucularına ne kadar yakınsa, siteden gelen veri paketleri o kadar hızlı iletilir.

CDN kullanımı, özellikle birincil hedef kitlesi fiziksel sunuculardan çok uzak olan içerik ve yüksek yüklü portallar için önemlidir. Bu hizmet, denizaşırı sitelerden yapılan indirmeler için bekleme süresini en aza indirerek yerel arama sonuçlarındaki sıralamalarının artmasına katkıda bulunur. Sonuçta içerik, kullanıcıya ülkesindeki en yakın sunucu deposundan indirilir.

8. Grafikleri ve Videoyu Optimize Edin

Dosya formatı, bilgilerin ziyaretçilere sunulma hızını doğrudan etkilediğinden, doğru grafik ve video formatını seçmelisiniz.

Farklı web içeriği için önerilen biçimler:

• SVG – vektör logoları ve basit arayüz öğeleri için;
• PNG – şemalar ve vektör olmayan logolar için;
• JPG – fotoğraflar ve görüntüler için;
• MPEG4 – video ve animasyon için.

Ayrıca video ve animasyon için nispeten yeni bir WEBM formatı mevcuttur. Çoğu durumda, aynı kalitede daha küçük bir video boyutu sağlar. Ancak formun tarayıcı desteği sınırlıdır (örneğin, macOS / iOS Safari tarayıcısında destek yoktur). Bu nedenle, öncelikli video kaynağı olarak bir WEBM dosyasının kullanılması ve alternatif bir kaynak olarak MPEG4'ün kurulması önerilir. Paylaşım kabul edilemez veya uygun değilse, yalnızca MPEG4'ü de kullanabilirsiniz.

Ayrı olarak, vektör formatının (SVG) grafik kalitesinde kayıp olmadan ölçeklendirmeye izin verdiğini not ediyoruz.

Görüntü optimizasyonunun aşamaları

Adım 1 – Resmin boyutunu küçültmek.

WordPress veya Joomla gibi birçok popüler CMS, görüntüleri orijinalden optimize etmek için yerleşik eklentilere sahiptir. Ancak bu yöntem ek bir yük oluşturur ve siteyi yavaşlatabilir. Sayfa her yüklendiğinde, tarayıcı önce kaynak koduna erişir ve ancak daha sonra görüntüyü anında yeniden boyutlandırır.

Görüntüleri yüklerken hız kaybını önlemek için, Önizleme (Mac) veya Microsoft Paint (Windows) gibi işletim sistemine yerleşik grafik düzenleyicilerin yanı sıra benzer işlevlere sahip çevrimiçi hizmetler yardımcı olacaktır. Onlarla çalışmak, grafiklerle çalışma konusunda minimum beceri gerektirecektir.

Adım 2 – İndirmeden önce dosyayı sıkıştırın.

Görüntü boyutunu optimize ettikten sonra bile, "ağırlığı" genellikle optimal olmaktan uzaktır. ImageResize veya TinyPNG gibi kullanışlı ve ücretsiz hizmetler, görüntü kalitesinde kayıp olmadan boyutun küçültülmesine yardımcı olur. Buradaki işlemlerin çoğu otomatiktir. Kullanıcının yalnızca dosyaları yüklemesi ve zaten en uygun görüntü boyutuna sıkıştırılmış halde indirmesi gerekir.

9. Gzip Dosya Sıkıştırmasını Uygulayın

Gzip, kanal kaynaklarından tasarruf etmek ve yüklemeyi hızlandırmak için site dosyalarını sıkıştırmanın basit bir yöntemidir. Gzip kullanılarak dosyalar, tarayıcının daha hızlı indirebileceği bir arşive sıkıştırılır ve ardından içeriği açıp görüntüleyebilir.

Gzip kullanımını etkinleştirmek oldukça basittir – .htaccess dosyasına birkaç satır kod eklemeniz yeterlidir. Örneğin, Apache web sunucusunu kullanırken, mod_gzip modülü web yöneticileri için Gzip'i etkinleştirmek için kullanılabilir, bu durumda bu kodu .htaccess'e eklemeniz gerekir.

Gzip dosyası sıkıştırması, bir tarayıcıdan sunucuya gelen istek sayısını azaltmak için yapılır. Bu teknoloji, indirmeyi hızlandırmak için dosyaların ilk ağırlığını %70'e düşürür.

Gzip Sıkıştırmasını Gömmenin Yolu

Aşağıdaki kod parçasını “.htaccess” web sunucusu yapılandırma dosyasına ekleyin.

Apache sunucusunda

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Nginx sunucusunda

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Barındırma Değiştir

İndirmeleri hızlandırmanın en temel yöntemi barındırma sağlayıcısını değiştirmektir. Kaynak tahsisinden tasarruf etmek, genellikle hizmet kalitesinde önemli bir bozulmaya yol açar ve bu da siteyi asma üzerinde hızlandırmaya yönelik tüm girişimleri baltalar.

İçerik, kod ve eklentilerle yapılan manipülasyonlar sonuç getirmezse, site için daha iyi bir “ev” seçmeyi düşünmenin zamanı geldi. Yüksek kullanılabilirlik ve özenli teknik desteğe sahip kaliteli bir barındırmada, İnternet kaynağı işin hızını artırmak için güçlü bir ivme kazanacaktır. Ve bu minnettar bir izleyici tarafından takdir edilecektir.

En önemli şey…

Siteye 2-3 saniyeden daha uzun süre erişmek için çaba sarf etmek gerekir. Sitenin 2 hatta 3 saniye açılıp açılmaması önemli değil, ancak daha fazlası varsa ve o zaman bu site yükünü hızlandırmayı düşünmek için bir nedendir.

Sayfa yükleme hızı için iki parametre olduğunu da anlamanız gerekir.

Birincisi içeriğin görüntülenme hızıdır (bu noktada sayfa zaten açıktır ve kullanıcıya gösterilirken, şeffaf sayfa göstergesi tüm statik dosyalar ve eşzamansız komut dosyaları bağlanana kadar görüntülenmeye devam eder).

Dahası, ikincisi, bağlanması gereken her şey bağlandığında, sayfanın gerçek oluşum hızıdır. İlk parametreye odaklanmanız gerekir, yani site düzeni görüntülenmeden önce en fazla üç saniye geçmesi gerekir.

Çözüm

Siteyi yükleme hızı gibi bir rakamı görmezden gelemezsiniz. İlk saniyeden itibaren ziyaretçiler için rahat bir ortam yaratan oydu. Kullanıcı istenen içeriği ne kadar hızlı alırsa, kaynağın olumlu bir imajının oluşma ve ona bağlılık oluşturma olasılığı o kadar yüksek olur.