İnternetin temeli HTML’dir. Google Chrome gibi tarayıcılar, HTML biçimlendirmesini yorumlar ve sayfa içeriğini okunabilir bir şekilde görüntüleyip sunar. Bu durum, WordPress gibi içerik yönetim sistemleriyle PHP kullanan siteler için de geçerlidir. Bununla birlikte, sadece bir web sitesi oluşturmak asla yeterli değildir; SERP’lerde iyi bir sıralamaya sahip olmak ve iyi kullanıcı deneyimi elde etmek için site yükleme hızını iyileştirmek kritik öneme sahiptir. Bu makalede, statik HTML siteleri için nasıl hız optimizasyonu yapılabileceğini ve dolayısıyla HTML sitenizi nasıl hızlandırabileceğinizi açıkladık.
Statik HTML Web Siteleri
HTML web siteleri oluşturmak için kendi tasarımlarınızı kullanabilir veya Bootstrap gibi hazır çerçevelerden faydalanabilirsiniz. Genel olarak, HTML sayfalarını ve diğer kaynakları (resimler / CSS / JS) sunucunuza yükleyebilir ve siteye tarayıcıdan erişebilirsiniz.
Alan adı ve hosting hesabı dışında, bu amaç için başka herhangi bir üçüncü taraf araca ihtiyacınız yok. Alternatif olarak, statik HTML sayfaları oluşturmak ve FTP yoluyla yüklemek için Mobirise gibi üçüncü taraf araçlarını kullanabilirsiniz.
Bununla birlikte, aşağıdaki site oluşturma platformları daha farklı ve gelişmiş özelliklere sahiptir:
- WordPress– Web sitenizin ve sayfalarınızın hızını artırmak için eksiksiz optimizasyon paketleri sunar.
- Weebly, Wix, vb. gibi web sitesi oluşturucular – Bu platformlar açık kaynaklı çözümler değildir, bu da temelde platformda optimize etmek için sınırlı seçeneğiniz olduğu anlamına gelir. Bu makalede önerilen seçeneklerden bazılarını bunlar için de kullanabilirsiniz. Ancak, sunucuya erişemediğiniz için CSS / JS’yi birleştirme, oluşturma engelleme kaynaklarını kaldırma vb. gibi alanları optimize edemezsiniz.
PageSpeed Insights Aracı ile Site Hızını Kontrol Edin
Hız optimizasyonuna başlamadan önce, web sitenizin hızını olumsuz etkileyen sorunları bulmanız işinizi kolaylaştıracaktır. Bunun için de Google PageSpeed Insight araından faydalanarak sitenizi tarayabilirsiniz.
Bu araç, web sitenizin durumunu puanlama ile gösterir. 80-100 puan arası genellikle iyi kabul edilir. Puanınızı etkileyen durumları görmek için sayfayı aşağı kaydırın. Burada hem sorunları hem de çözüm önerilerini bulabilirsiniz.
Genel olarak, web sitenizin üst kısmı (başlık bölümü) sorunlu ise, Page Speed puanınız düşük olacaktır. Buradaki sorunlar genellikle oluşturmayı engelleyen kaynakları, yazı tiplerini ve resimleri önceden yüklemeyi, üçüncü taraf koduyla kümülatif mizanpaj değişikliğini, vb. içerir. Bu nedenle, statik HTML web sitelerinizin sayfa yükleme hızını artırmak için fırsatları ve genel kuralları dikkatle incelemenizde fayda var.
Statik HTML Web Sitelerinin Sayfa Yükleme Hızı Nasıl Artırılır?
HTML sitenizin hızını artırmak için aşağıdaki adımları tek tek gözden geçirin:
1. CSS ve JS Dosyalarını Birleştirme ve Küçültme
Statik bir HTML sitesi, HTML sayfanızdaki öğelerin stilini tanımlamak için minimum kaynak olarak bir CSS stil sayfasına sahip olacaktır. Ek olarak, sitenize kaydırıcılar gibi başka işlevler eklemek için ek JavaScript dosyaları kullanabilirsiniz.
- İhtiyacınız olan ilk şey, CSS / JS / HTML dosyalarınızdaki gereksiz boşlukları ve yorumları kaldırmaktır. Buna dosya boyutunu azaltan ve sayfa yükleme hızını artıran küçültme işlemi denir. Dosyalardaki gereksiz dağınıklığı gidermek için bu CSS , JS ve HTML küçültme araçlarını kullanın. Küçültülmüş CSS ve JS dosyaları .min.css ve .min.js gibi uzantılara sahiptir.
- Hosting şirketinizle görüşüp GZIP sıkıştırmayı etkinleştirmesini isteyebilir veya bunu kendiniz manuel olarak yapabilirsiniz (Bu işlem için şuradaki kaynaktan faydalanabilirsiniz). Böylece, tarayıcıya sunulan dosya boyutu azalacak ve sayfa hızınız önemli ölçüde iyileşecektir.
- CSS ve JS dosyalarını birleştirmek HTTP isteklerinin sayısını azaltır. Bu nedenle, farklı stil sayfalarında stilleri kullanmak yerine CSS ve JS dosyalarını birleştirebilirsiniz. Ancak, sunucunuz HTTP/2 protokolünü destekliyorsa bu işlem gerekli değildir.
2. Oluşturmayı Engelleyen Kaynakların Kaldırılması
Bir sonraki adım, oluşturma engelleme kaynaklarını sitenizin üst kısımdan kaldırmaktır.
- Google PageSpeed Insights aracına gidin ve web sitenizin hızını test edin.
- Oluşturmayı engelleyen kaynaklar için herhangi bir uyarı varsa, dosya adını not edin.
- Dosyayı üstbilgi bölümünüzden altbilgi alanına taşıyın.
Dosyayı altbilgi alanına taşımak her durumda mümkün olmayabilir. Dosyaları yeniden düzenlerken sitenizin düzenini ve işlevlerinin düzgün çalışıp çalışmadığını mutlaka kontrol edin. Ek olarak, soruna hangi kaynak dosyasının neden olduğunu bulmak için dosyaların birleştirilmesini devre dışı bırakmanız gerekebilir.
3. İçerik Dağıtım Ağlarını (CDN) kullanın
Yukarıdaki seçenekler teknik bilgi gerektirir ve eğer gerekli donanıma sahip değilseniz sizin için zor olabilir. Şu durumda, sitenizin düzenini bozmamak için mümkün olan en iyi çözüm bir içerik dağıtım ağı (CDN) kullanmaktır.
- CDN ağını kullanarak dosyaları birleştirebilir ve küçültebilirsiniz.
- Özellikle uluslararası kullanıcılar için içerik sunuyorsanız CDN servisleri site hızı üzerinde oldukça etkili sonuçlar sunar.
- Ayrıca, bir CDN kullanarak otomatik botları engelleyebilir ve site güvenliğini artırabilirsiniz.
Özellikle Cloudflare CDN, statik HTML web sitelerinin çoğu için yeterli özelliklere sahiptir ve aynı zamanda ücretsizdir. Bu servis aracılığıyla dosyaları tek tıklamayla birleştirip küçültebilir ve Google PageSpeed Insights aracında sayfa yükleme hızınızı nasıl etkilediğini test edebilirsiniz.
📌Bootstrap gibi çerçeveler kullanıyorsanız, sunucunuzdan kaynak dosyaya hizmet vermek yerine CDN kaynağını dahil ettiğinizden emin olun.
4. Üçüncü Taraf Kodlarından Kaçının
HTML sitenizin sayfa yükleme sürenizi iyileştirmenin en etkili yollarından biri, sitenizde üçüncü taraf kodların kullanımını sınırlamaktır. Çünkü üçüncü taraf kodların yükleme davranışını kontrol edemezsiniz.
Dinamik yükleme davranışı, kümülatif düzen değişimi ve en büyük içerikli boyama gibi hız parametrelerini etkileyecektir .
- Web sitenizde kullandığınız reklamları sayfa yüklendiğinde görünen alanın altına yerleştirin. Maalesef bu, TO’yu ve sayfa görüntülemelerini azaltarak kazançlarınızı doğrudan etkileyecektir.
- Google Analytics kodunu “body” bölümünden sonra ekleyin.
- Sosyal paylaşım için başlığa kod eklemekten kaçının.
- Google yazı tiplerini kullanıyorsanız, daha az yazı tipi ağırlığı ve yazı tipi aileleri ile basitleştirilmiş bir şekilde kullandığınızdan emin olun. Bu, dosya sayısını azaltmanıza ve bunları Google’ın sunucusundan daha hızlı almanıza yardımcı olacaktır.
5. Yazı Tiplerini ve Resimleri Önceden Yükleme
Diğer bir yaygın sayfa hızı sorunu, başlık (header) bölümüne yüklediğiniz yazı tiplerinin ve resimlerin önceden yüklenmesi ile ilgilidir. Google PageSpeed’de uyarı mesajları görürseniz, header bölümüne aşağıdaki kodları ekleyin. Dosya adlarını Google PageSpeed Insights’ta gördüklerinizle değiştirin.
<link rel="preload" href="font-file " as="font" crossorigin="anonymous">
<link rel="preload" as="image" href="image-file">6. Görüntüleri yeni nesil biçimde kullanın ve sıkıştırın
Statik HTML web sitelerinin görüntülerin boyutunu küçültmek için herhangi bir yerleşik seçeneği bulunmadığından, bunları sunucunuza yüklemeden önce manuel olarak sıkıştırmanız gerekir.
- Bazı web sunucularının, karşıya yüklerken görüntüleri sıkıştırma seçeneği vardır. Hosting şirketinizin bu amaç için herhangi bir araç sunup sunmadığını kontrol edin.
- Aksi takdirde, kaliteyi kaybetmeden resimlerinizin boyutunu küçültmek için resim sıkıştırma araçlarını kullanın.
- Ek olarak, görüntü formatını WebP, JPEG-2000 veya JPEG XR’ye dönüştürebilirsiniz. Görüntüleri WebP , JPEG-2000 veya JPEG XR’de kullanmak, Google PageSpeed Insights aracında yeni nesil biçimdeki görüntülerin sunulması sorununu çözmenize yardımcı olacaktır.
7. Kritik CSS Kullanın
Başlığa tüm CSS dosyasını yüklemek yerine, CSS’yi yalnızca sayfa yüklendiğinde kullanabilirsiniz. Bu, üçüncü taraf araçlarla oluşturabileceğiniz kritik CSS olarak adlandırılır. Yapmanız gereken ise şudur:
- Kritik CSS jeneratör aracına gidin ve web sitenizin URL’sini girin.
- Kritik CSS oluşturun ve içeriği kopyalayın.
- Kopyalanan stilleri, HTML sitenizin başlık bölümünde <style>… </style> etiketleri arasına yerleştirin.
- Oluşturmayı engelleyen CSS sorununu önlemek için ana stil sayfasını altbilgi bölümüne erteleyebilirsiniz.
Statik HTML web sitenizin sayfa yükleme hızı, tarayıcıda ekranın üst kısmının oluşturulmasına bağlıdır. Google PageSpeed Insights aracında gösterilen sorunların ve fırsatların çoğunu çözüme kavuşturmak için sitenizin header bölümündeki CSS’yi ve komut dosyalarını azaltabilirsiniz. En iyi seçenek ise CDN kullanmak ve header bölümünde üçüncü taraf içerik kullanmaktan kaçınmaktır…