100/100 Sayfa Hızı puanı elde etmiş olabilirsiniz. Ancak önemli soru, 100/100 PageSpeed puanı yeterli mi? Mutlak maksimum performans anlamına mı geliyor?
Google’dan Gary Illyes son zamanlarda şunları söyledi:
Web sitelerinin, rekabet gücünü korumak ve ziyaretçi başına yüksek sayfa görüntüleme sayısını korumak, hemen çıkma oranını veya alışveriş sepetini terk etme oranını azaltmak ve arama motoru sıralamasını iyileştirmek için iyi bir kullanıcı deneyimi sağlamak için hızlı olması gerekir . Bir web sitesini daha hızlı hale getirmeye odaklanan, hangi WordPress eklentilerinin yardımcı olabileceği ve hangilerinin yaramayacağına odaklanan çok sayıda makale ve sitenizin hızını artıracak birçok benzer ipucu okumuş olabilirsiniz . Ayrıca hem mobil hem de masaüstü cihazlarda.
Bu makale, PageSpeed aracıyla 100 puanın neden yeterli olmayabileceğini açıklayacaktır . Performans meraklısıysanız, web sitelerinize uygulayabileceğiniz birkaç ilginç optimizasyon tekniği bulacaksınız . Eğer değilseniz, aşağıda önerilen bu optimizasyonlar, web sitesi performansı açısından rekabette öne geçmenize yardımcı olabilir. Önce PageSpeed aracının tanıtımıyla başlayalım.
Google Sayfa Hızı nedir? ve Nasıl Çalışır?
Google PageSpeed Insights , bir web sayfasının mobil ve masaüstündeki performansını ölçer ve web sitesinin hızını artırmak için neler yapılabileceği konusunda eyleme geçirilebilir rehberlik sağlar. Araç daha sonra web sitesini mobil ve masaüstü için 0 ila 100 arasında bir puanla sıralar; burada 100, performans puanlama kriterlerinin iyi karşılandığı anlamına gelir. Kriterler, ilk içerikli boyama, en büyük içerikli boyama, hız indeksi, toplam engelleme süresi, etkileşime kadar geçen süre ve kümülatif düzen kaymasını içerir. Her yerde, PageSpeed aracının çalışmasını en iyi nasıl anlayacağınız ve araç tarafından sağlanan rehberliği nasıl kullanacağınız ve bunu web sitenize nasıl uygulayacağınız hakkında daha fazla bilgi edinmenize yardımcı olabilecek birçok makale bulunmaktadır. Ancak, burada olduğunuza göre, bu noktayı çoktan geçtiğinizi ve web sitenizi daha da hızlı hale getirmek için atabileceğiniz sonraki adımlar hakkında daha fazla bilgi edinmeye hazır olduğunuzu varsayıyorum.
PageSpeed aracı sizi mutlak maksimum performansa yönlendirmiyor mu?
Hayır.
Yine de performans konusunda endişelenmem gerekiyor mu?
Evet.
PageSpeed aracı iyidir ve sitenizi her zaman daha hızlı hale getirir, ancak bu 100 puanın yapacak bir şey olmadığı anlamına gelmez. Çoğu durumda, sayfa ağırlığı ve sayfa yükleme süresi ile hala büyük zamandan tasarruf etme fırsatına sahipsiniz.
O halde, PageSpeed aracıyla 100/100 puana ulaştıktan sonra yapabileceğiniz ekstra adımlara bir göz atalım.
1. Bir Rakibin Tarayıcı Önbelleğini Kullanın
Anahtar kelimeleriniz için sizden biraz daha üst sıralarda yer alan bir rakibiniz varsa, kullanıcının web sitesini sizin sitenize tıklamadan önce ziyaret etmesi ihtimali vardır. Ancak, kullanıcı başka bir sitedeyse, sitenin kaynak kodunu kontrol ederek herhangi bir genel CDN kullanıp kullanmadığını ve kullanıyorsanız hangi kitaplık için kullandığını görmek için ziyaretçinin tarayıcı önbelleğini yeniden kullanabilirsiniz.
Her ikiniz de aynı kitaplığı/kitapları kullanıyorsanız, örneğin jQuery 3.2.1, onu rakibinizin kullandığı aynı genel CDN’den yükleyebilirsiniz.
Tahmin edebileceğiniz gibi, bu hile çok nadiren işe yarar ve bazı durumlarda, ziyaretçi önce web sitenizi ve ardından rekabetinizi ziyaret ederse, rakibiniz için bir fayda sağlayabilir.
Bu numaranın rakiplerinize karşı çalışma olasılığı daha düşük olsa da, bu genellikle işe yarayabilir. Genel CDN’den tüm açık kaynak kaynaklarının yüklenmesi, kullanıcının geçmişte herhangi bir zamanda ziyaret ettiği üçüncü taraf web sitelerinin tarayıcı önbelleğindeki genel kaynakları yeniden kullanmanıza yardımcı olur.
Easy Speedup ve CommonWP gibi bazı ücretsiz WordPress eklentileri , genel CDN’de barındırılan açık kaynaklı temalara, eklentilere ve kitaplıklara otomatik olarak bağlanmaya yardımcı olur. Bu tür eklentiler, diğer web sitelerinin tarayıcı önbelleğini fazla çaba harcamadan uygun ölçekte yeniden kullanmayı mümkün ve kolay hale getirir.
Bu yaklaşım bazı ziyaretçiler için işe yaramayabilir, ancak diğerleri için işe yarayabilir. Avantajı, bunun ilk kez gelen ziyaretçiler için bile sayfa yükleme süresini azaltabilmesidir . Ek avantaj, bu açık kaynaklı varlıkların herhangi bir bant genişliği ücreti ödemeden CDN’den teslim edilmesidir.
2. Dosyaları Birleştirin Ama Dikkatli Olun
Birkaç performans testi aracı, hızı artırmak için birden çok CSS ve JavaScript dosyasını tek bir dosyada birleştirmenizi önerebilir. Bu uzun zaman önce doğruydu, ama şimdi zaman değişti.
Google Chrome V8 blogunda yazılan ‘ 2019’da JavaScript’in Maliyeti ‘ başlıklı bu popüler blog yazısında Addy Osmani, JavaScript’in indirme süresini iyileştirme konusunda bazı rehberlik sunuyor. JavaScript paketlerini küçük tutmayı ve bir paket boyutu 50-100 KB’yi aşarsa, daha küçük paketlere bölmeyi önerir. Ayrıca, bir komut dosyası 1 KB’den büyükse, onu satır içine almaktan kaçınmaya yönelik genel bir kurala da dikkat çekti.
Genel olarak, daha küçük dosyaları bir veya daha fazla paket halinde bir araya getirmeye değmez çünkü artık sayfa yükleme hızını iyileştirmez – tersini yapar ve mobil cihazlarda hızı etkiler. Bunun nedeni, HTTP/2 çoğullama ile birden çok istek ve yanıtın aynı anda uçuşta olabilmesi ve ek isteklerin ek yükünü azaltabilmesidir.
Peki, web sitenizin kodunun, işleri eski şekilde tekrar yapmak için herhangi bir yeniden düzenlemeye ihtiyacı var mı? WordPress sitelerinde bu özelliği etkinleştiren eklentileri devre dışı bırakmayı düşünebilirsiniz. Bu, eklenti şişmesini azaltacak ve sitenizi hızlandıracaktır.
Ancak bu, tüm JavaScript kod tabanını çok sayıda küçük dosyaya bölmenin size zarar vermeyeceği anlamına gelmez. Kullanım durumunuzu dikkatlice test etmeniz gerekecek.
3. Görüntü Formatları Arasında Geçiş Yap
Resimler, sayfa yüklemesinin büyük bir kısmına katkıda bulunur. Bu nedenle, yaygın olarak kullanılan yaygın görüntü optimizasyon tekniklerinden çok daha fazla dikkate ihtiyaçları vardır .
Siteniz görseller kullanıyorsa ve eminim ki kullanıyorsa, hangi görsel formatının ihtiyaçlarınıza uygun olduğunu öğrenmeniz gerekebilir. Bazı görüntü formatları vektörler için daha uygundur, diğerleri ise fotoğraflarla en iyi sonucu verir.
Yukarıdaki tablo, görüntü ihtiyaçlarınız için doğru formatlar arasında seçim yapmanıza yardımcı olabilir. JPEG, fotoğraflar için kayıplı sıkıştırmayı desteklerken SVG, anında sıkıştırılabilen ve çoğu durumda dosya boyutunu PNG’den daha küçük bir boyuta indirebilen metin tabanlı bir biçimdir.
Bir diğer husus da yeni görüntü formatlarıdır.
PageSpeed, “Görüntüleri yeni nesil biçimlerde sunun” önerisini sunar. Geniş çapta desteklenen tek yeni nesil biçim WebP, Safari tarayıcısından destek almayan tarayıcıların yalnızca %77’si tarafından desteklenir. Sonuç olarak, WebP, web’deki görüntülerin en fazla %4’ü tarafından kullanılır .
Bu nedenle, WebP’yi birincil görüntü formatı olarak kullanmak hala büyük bir HAYIR. Ancak WebP formatı, dosya boyutunda o kadar büyük bir azalma sunar ki, performans optimizasyonu için onu çok çekici bir seçenek haline getirir. Ve çoğu zaman, tarayıcılara uyumluluklarına göre resim sunmak iyi bir seçenektir.
Bu karmaşık gelebilir, ama değil. Bu anında görüntü dönüştürmeyi otomatikleştiren çözümler var. WebP’yi sitenizde kullanmaya hazır olduğunuzda, birden çok seçeneğiniz vardır:
- WordPress ve WordPress olmayan web siteleri için eşit derecede iyi çalışan ve tarayıcıların destekleyebileceği en uygun görüntü biçimini sunan bulut tabanlı görüntü optimizasyonu ve dönüştürme hizmetini kullanan Easy Speedup WordPress eklentisini kullanabilirsiniz . Ayrıca, bu işi WordPress dışı web siteleri için depolama kullanımını artırmadan otomatik olarak yapmak için kullanılabilen bir PHP kitaplığı da bulunmaktadır. Kitaplık bu işi yapmakta o kadar iyi ki, müşterilerimden biri için PNG görüntüsünü WebP’ye dönüştürdüğünü ve optimize ettiğini ve boyutunu orijinal görüntünün %95’i kadar küçülttüğünü gördüm . Bu her zaman olmuyor ama bazen oluyor. Kilometreniz değişebilir.
- WebP Express , yerinde optimizasyon ve dönüştürme için görüntüleri WebP’ye dönüştürür ve doğru görüntüyü doğru tarayıcıya ulaştırmak için sunucudaki her görüntü için birden çok kopya tutar. Dezavantajı ise dosya sistemini şişirmesi, yedekleme boyutunu artırması ve geçişi zorlaştırmasıdır. Ayrıca görüntüleri dönüştürmek ve optimize etmek pahalı bir iş olduğundan barındırmaya da yük getiriyorlar.
Görüntüleri WebP’ye dönüştürmek işe yarar. Tasarruf çok büyük ve çoğu durumda toplam sayfa boyutu yarıya, hatta daha da aza indiriliyor.
Yan not : Apple’ın 22 Haziran 2020’deki WWDC Keynote etkinliği sırasında Safari’de ilk kez WebP görüntü desteği eklediklerini belirttiler.
Daha da fazlası var.
Bir başka önemli şey de, gelecek heyecan verici bir görüntü formatı olan JPEG XL’e göz kulak olmak. Standardizasyonun son aşamasındadır ve yakında tamamlanabilir ve bazı tarayıcı desteği görmeye başlayabilir. Google’ın PIK ve Cloudinary’nin FUIF görüntü formatı araştırmasının bir kombinasyonuna dayanmaktadır . JPEG XL formatı , onu web için geleceğin resim formatı yapan aşağıdaki iki tasarım gereksinimini belirler :
- Yüksek kalite: makul bit hızlarında görsel olarak kayıpsız;
- Kod çözme hızı: çok iş parçacıklı kod çözme, büyük görüntülerde yaklaşık 400 Megapiksel/sn’ye ulaşabilmelidir.
JPEG XL’in kalite kaybı olmadan görüntü boyutunu orijinal boyutunun 1/3’üne düşürmesi beklenir. Fotoğrafçılığı ve fotoğrafsız görüntüleri verimli bir şekilde destekleyen evrensel bir format olacak. Bu nedenle, gelecekte web sitelerinizi daha da hızlı hale getirmek isteyenler, JPEG XL tarayıcı desteğine göz atmak isteyebilirler. Erken hareket edenler için avantaj önemlidir.
4. Dinamik ve Statik Sıkıştırmayı Ayırın
Bu , sitenizi minimum çabayla büyük ölçüde hızlandırabilir ve muhtemelen önereceğim tekniklerin en kolayıdır. Açıklamama izin ver.
Web siteleri, sıkıştırılabilir tüm kaynaklar için Gzip veya Brotli sıkıştırmasını etkinleştirmek için genellikle web’den .htaccess’e veya NGINX yapılandırma dosyasına bir kod parçası kullanır. Bu işe yarar ancak daha fazla optimizasyon için yer bırakır. Web sayfaları, yalnızca daha iyi Brotli sıkıştırması sayesinde 50 KB’den fazla ekstra tasarruf sağlayabilir . Hileyi öğrenmek ister misin? Basit. Dinamik sıkıştırmayı statik sıkıştırmadan ayırt edin.
Web sunucunuzun barındırdığı sıkıştırılabilir içerik, dinamik ve statik olmak üzere iki türe ayrılabilir. Dinamik içerik anında oluşturulur ve önceden sıkıştırılamaz. HTML sayfaları buna bir örnektir. CSS ve JS gibi statik içerik orada bir süre değişmeden kalır.
Bu varlıkları önceden sıkıştırabilir ve sunucunuzu bu önceden sıkıştırılmış dosyaları anında sunacak şekilde yapılandırabilirsiniz. Ön sıkıştırma, Brotli:11 gibi, genellikle anında sıkıştırma için çok yavaş olan daha yüksek bir sıkıştırma düzeyi kullanmanıza olanak tanır. Bir dosya her değiştiğinde kaynakları önceden sıkıştırmak sizin için zorsa, bunu sizin için sorunsuz bir şekilde yapmak için PageCDN gibi bir üçüncü taraf hizmeti de kullanabilirsiniz.
5. DNS Arama Süresini Azaltın
DNS arama süresi, alan adını IP adresine çözümlemek için harcanan süredir. Bu IP adresi daha sonra sunucunun İnternet üzerindeki yerini bulmak için kullanılır.
Bir kullanıcı bir sayfayı ziyaret ettiğinde, tarayıcıların gerçekleştirdiği ilk yüksek gecikmeli görev, alan adı için DNS aramasıdır. Bir tarayıcı, bir DNS sorgusundan bir IP adresi almadıkça, sunucuya bağlanmaya ve HTTP isteğinde bulunmaya devam edemez.
İdeal olarak, DNS arama süresini azaltmak İlk Bayt Süresi optimizasyon stratejisinin bir parçası olmalıdır, ancak Sayfa Hızı aracı bunu dikkate almıyor gibi görünüyor çünkü çoğu durumda web yöneticilerinin bu cephede optimizasyon yapması mümkün değil . Sonuç olarak, çok sayıda web yöneticisi, DNS sağlayıcılarının performansını rahatsız etmez.
Bireysel kullanıcılar için DNS arama süresini azaltmanın birkaç yolu vardır:
- Hızlı bir DNS sağlayıcı kullanarak. DNS kıyaslama hizmeti DNSPerf.com’dan alınan yukarıdaki ekran görüntüsünde listelendiği gibi , birkaç hizmet, DNS arama sürecini algılanamaz hale getirmek için yeterli olan 30 ms’den daha düşük küresel ortalama gecikme süresi sunar.
- Daha yüksek TTL kullanarak DNS yanıtlarını önbelleğe alın. DNS özyinelemeli çözümleyiciler, bu yanıtları küresel olarak son kullanıcılara yakın bir yerde önbelleğe alabilir ve hizmet verdikleri tüm kullanıcılar için DNS arama süresini önemli ölçüde azaltabilir.
6. Yazı Tipleri için Tarayıcı Önbelleğinden Yararlanın
Web sitenizde bir eklentinin veya temanın kullandığı Google fontları sayesinde 100 yerine 95 veya 98 puan alabilir ve bu konuda puan yükseltmek için yapabileceğiniz pek bir şey olmadığını düşünebilirsiniz; bu sorunun birden fazla çözümü var.
Google yazı tipi CSS’si yalnızca 1 günlük sona erme ile sunulur. Bu, bir hatadan ziyade bir özelliktir, çünkü bu, Google yazı tipi ekibinin değişiklikleri son kullanıcılara çok daha hızlı yaymasına olanak tanır. Ancak sorun, PageSpeed aracının statik varlıklarınızla 30 günlük bir önbellek kullanmanızı beklemesidir.
Bu tarayıcı önbelleği sorununu çözmekle ilgileniyorsanız, öncelikle kendi kendine barındırma ile üçüncü taraf yazı tipi barındırma arasında mükemmel ve ayrıntılı bir karşılaştırma yapmanız gerekir .
Çözümlerden biri, sizin için yazı tiplerini ve CSS’yi indiren bir araç kullanmaktır . Sadece aileleri seçmeniz yeterlidir ve geriye dönük uyumluluk tercihiniz ve projenizin içindeki bir dizine çıkarabileceğiniz ve yazı tiplerini sunmak için HTML’nizdeki CSS’yi kullanabileceğiniz indirilebilir dosya hazırdır. WordPress kullanıyorsanız, OMGF eklentisi tam olarak sizin için tüm bunları yapmak için orada.
Ayrıca , bir Google yazı tipi klonu olan Kolay Yazı Tiplerini de kullanabilirsiniz , ancak yazı tiplerini kullanmayı çok daha kolay hale getiren ve hızlı prototip oluşturmayı kolaylaştıran bazı CSS yardımcı program sınıfları ile. Neyse ki, CDN tarafından barındırılan bu kitaplık, tarayıcı önbelleğe alma sorununu da giderir.
7. HTTP/2 Server Push’u kullanın
Sunucu İtme, tarayıcıların yakında bu dosyaları talep etmesi gerekeceği beklentisiyle, web sunucularının bu tür dosyaları talep etmeden önce önceden amaçlı olarak tarayıcılara dosya göndermesine izin veren HTTP/2 protokolünün bir özelliğidir.
Bu nedenle, bir sunucu bir dosya için bir istek aldığında, bu dosyayı ve Server Push’u tetikleyen dosyayla birlikte göndermek üzere yapılandırıldığı bir veya daha fazla ek dosyayı gönderir. Bu, sonraki istekler için gidiş-dönüş süresini ortadan kaldırır ve kaynakları tarayıcının hemen kullanımına sunar.
Server Push, denemek isteyebileceğiniz büyük bir performans özelliğidir . Ancak, dikkat edilmesi gereken önemli bir nokta, dosyaları her istekte agresif bir şekilde zorlamamaktır. Tarayıcılarda sizin için bir kaynağın önbelleğe alınmış bir kopyası zaten olabilir ve tarayıcının bu önbelleği kullanması için yer olması gerekir. Çok fazla istenmeyen kaynağı agresif bir şekilde zorlamak, kullanıcının ölçülü bir bağlantıda olabilecek bant genişliğini boşa harcayabilir.
Bunu denemek isterseniz, bu makale NGINX için Server Push’un nasıl kurulacağını ayrıntılı olarak açıklamaktadır . CSS-Tricks hakkındaki bu gönderi, önbelleğe duyarlı bir Server Push kurulumunun kurulmasına yardımcı olur . Bu blog gönderisinde, Server Push’un kullanımına ilişkin birçok öneri ve bilgi bulunmaktadır. WordPress siteleri için, aynı Kolay Hızlandırma eklentisi bu Sunucu İletme özelliğini sunar.
8. HSTS Sunucunuzu Önceden Yükleyin
HSTS veya HTTP Strict Transport Security, kullanıcı bir sayfa istemek için düz eski HTTP kullanıyorsa, davetsiz misafirlerin bir isteği veya yanıtı değiştirme şansına sahip olmamalarını sağlamak için HTTPS’yi zorlamanın bir yoludur.
HSTS Preload , tüm alan ve alt alanları için HTTPS’yi destekleyen bu tür web sitelerinin bir dizini oluşturmak için Google Chrome ekibi tarafından tutulan bir listedir. Bu alan listesi, Chrome, Firefox, Opera, Safari, Edge ve IE dahil olmak üzere çoğu büyük tarayıcı satıcısı tarafından kullanılır. Bu HSTS Önceden Yüklenmiş siteler listesinde bir web sitesi varsa, tarayıcılar her zaman onunla güvenli bir bağlantı kurar. Bir kullanıcı böyle bir siteyi şifrelenmemiş bir HTTP üzerinden açmaya çalışsa bile, tarayıcı listedeki web sitesini arayacak ve isteği HTTPS olarak değiştirecektir.
Bu tekniğin, HSTS Preload web sitesinde belirtildiği gibi çeşitli gereksinimleri vardır, ancak gelişmiş güvenlik sunar. Ancak, güvenlik tek fayda değildir. Bu listede bir web sitesine sahip olmak, bir web sitesinde birkaç eski geri bağlantı olması durumunda, kullanıcıları HTTP’den HTTPS’ye gereksiz yönlendirmeden kurtarır. HSTS’nin güvenlik ve performans avantajı, gereksinimlerini karşılayabilmeniz şartıyla kullanımını haklı çıkarır.
9. Değişmez Önbelleğe Alma Kullanın
‘Önbellek Kontrolü’, tarayıcıya dosyanın tarayıcıda ne kadar süreyle saklanabileceğini söyleyen bir HTTP başlığıdır. HTML sayfaları gibi kullanıcıya özel dinamik içerik için bu başlık, tarayıcıya bu dosyayı hiçbir zaman önbelleğe almamasını söylemek için kullanılır. Ancak resimler, CSS ve JS gibi statik içerik için bu başlık, aynı kullanıcının tekrarlanan ziyaretleri için önemli bant genişliği tasarrufu sağlayan en önemli tek kaynak haline gelir.
Ancak, tüm statik varlıklara uyan tek bir önbellek denetimi yapılandırması yoktur. Statik varlıkların bazıları çok değişirken bazıları hiç değişmez. Örneğin, sitenizde jquery-3.4.1.min,js adında bir kaynak varsa ve bu dosyayı asla düzenleyemeyeceğinizden eminseniz, tarayıcıya bu dosyanın asla değişmediğini söylemenin bir yolunu bulmanız gerekir.
Neyse ki, yeni ‘immutable’ yönergesi ile artık tarayıcıya tam olarak aynı şeyi söylemenin bir yolu var. Bir tarayıcı bir varlık için ayarlanmış ‘cache-control: immutable’ üstbilgisini görürse , bu tarayıcıya dosyanın hiçbir zaman değişmediğini ve tarayıcının koşullu ‘If-Modified-Since’ isteğiyle tazelik dosyasını doğrulamaya çalışmaması gerektiğini söyler.
Bu , gidiş-dönüş süresinden tasarruf sağlar ve önbelleğe alınan varlığı yeniden doğrulama olmadan kullanıma hazır hale getirir. Ancak, bu başlığın çoğunlukla değişmeden kalan ancak yılda bir veya iki kez birkaç düzenleme alabilen bir dosyayla kullanılmadığından emin olmanız gerekir, çünkü böyle bir durumda düzenlemeler uygun önbellek geçersiz kılma olmadan bazı kullanıcılara ulaşmayabilir. . Bu başlık yönergesi için en uygun olanı, URL’nin bir parçası olarak eklenen sürüm numaralarına sahip açık kaynak kitaplıkları, benzersiz bir kimlik veya ada sahip kullanıcı tarafından yüklenen resimler ve her değişiklikten sonra benzersiz bir URL alan CSS ve JS paketleridir.
10. Ana Bilgisayar Konsolidasyonundan Yararlanın
Ana Bilgisayar Konsolidasyonu, PageCDN tarafından klasik ve tesadüfi alan paylaşımı ek yükünü ortadan kaldırarak müşterilerinin web sitelerini hızlandırmak için sunulan bir yaklaşımdır. Bu yaklaşımı kendi web siteniz için kolayca kullanabilirsiniz. Bu yaklaşımla, PageCDN yalnızca HTTP/2 protokolünün çoğullama yeteneklerinden yararlanır, ancak bunu yenilikçi bir şekilde yapar.
Ana Bilgisayar Konsolidasyonu, etki alanı parçalama tekniğinin tersidir. İstenen kaynakların paralel teslimi için HTTP/2’ye bağlıdır ve gereksiz DNS aramalarından ve bağlantı maliyetinden kaçınmak için tüm dış kaynakları tek bir ana bilgisayar (veya etki alanı) aracılığıyla proxy yapar. Bu kaydedilen bağlantı ve DNS arama ek yükü , mobil ve masaüstü kullanıcıları için web sitelerini hızlandırabilir .
PageCDN, ana bilgisayar konsolidasyonunu otomatikleştirir ve bu yaklaşımın kullanımını en üst düzeye çıkarmanın çeşitli yollarını listeler . Aynı prensibi kullanarak herhangi bir web sitesinde aynı davranışı elde edebiliriz.
- Çok fazla açık kaynaklı CDN’den kaçının. Siteniz birkaç farklı CDN’den birden çok açık kaynak kitaplık yüklüyorsa, hepsini tek bir CDN’den yüklemeyi deneyin.
- Google Fonts’u indirin ve kendi kendine barındırın. WordPress web siteleri için, OMGF eklentisi işi sadece birkaç tıklamayla sizin için yapabilir.
- Eski alan paylaşımı tekniğini geride bırakın ve paralel içerik teslimi için parçalar oluşturmak yerine tüm varlıkları tek bir ana bilgisayardan yükleyin. Paralelleştirmeyi sizin için HTTP/2 yapsın.
- Web siteniz birden çok ana bilgisayardan statik içerik kullanıyorsa, tüm içeriği tek bir ana bilgisayar aracılığıyla proxy yapmayı düşünün.
11. CSS Spritelarından Kaçının
‘CSS hareketli grafikleri’, birden fazla görüntüyü tek bir büyük görüntüde birleştirme ve bir web sayfasında farklı yerlerde bu görüntüden uygun pikselleri görüntülemek için CSS kullanma tekniğidir. Bu, birkaç yıl önce çok yaygın bir teknikti.
Dezavantajı, bunun genel sayfa yapısını karmaşık ve daha az esnek hale getirmesidir. Ayrıca, sayfanın toplam ağırlığına ek olarak, yalnızca bir ok kullanılması gerekse bile büyük resmin yüklenmesi gerekir. Sprite’lar aracılığıyla başka bir simge eklemek zaman alıcıdır, çünkü önce görüntüyü değiştirmeniz ve sitenin başka bir yerinde kullanılmış herhangi bir pikseli kullanmadığından emin olmanız gerekir. Bu, web sitesinin tasarımında çeşitli hatalara yol açabilir. Benzer şekilde, büyük görüntüden bir simge görüntüleyen bir HTML öğesinin boyutunu değiştirmek, büyük görüntüdeki simgeleri yeniden boyutlandırmanızı ve görüntüde bundan sonra görünen tüm simgeleri yeniden konumlandırmanızı gerektirir.
Bu karmaşıktır ve HTTP/2 sizin için neredeyse aynı işi yapmak için orada olduğundan neredeyse hiç fayda sağlamaz. HTTP/2, aynı bağlantı üzerinde birkaç istek ve yanıtı çoğaltabilir. CSS sprite kullanmamanın bir başka yararı da, bir sayfada yalnızca bu tür resimlerin veya simgelerin sayfa için kesinlikle gerekli olarak yüklenmesidir. Tarayıcılar, ekranın üst kısmındaki simgeleri bile önceliklendirebilir ve bunları daha sonra kullanılmak üzere ekranın altında bırakarak sayfa yüklemesini daha da hızlandırabilir.
Bu nedenle, küçük resimleriniz için ‘CSS Sprites’ kullanıyorsanız, bunların serbestçe yüklenmesine izin vermek ve tarayıcının isteklerine nasıl öncelik vereceğine ve aynı anda hangisini talep edeceğine karar vermesine izin vermek daha iyidir.
12. Sık Güncelle
WordPress 5.5 yakında piyasaya sürülecek ve görüntülerin yerel tembel yüklenmesi için destek ekleyecektir . Bu nedenle, bu özelliği kullanmak için eklentilere dayanan siteler artık WordPress çekirdeğine yerleşik yerel bir tembel yükleme çözümüne sahip olacak.
Tembel yükleme, önemli bir performans optimizasyonudur ve bu durumda, WordPress’i bir sonraki sürüme güncellemek için yalnızca bir tıklamayla milyonlarca web sitesine sunulacaktır.
CMS’yi, eklentileri, temayı, araçları, sunucu yazılımını, dil çalışma zamanını ve hatta işletim sistemini güncellemek, periyodik olarak gözle görülür performans iyileştirmeleri sağlar. Örneğin, yeni bir PHP sürümünün her sürümü önemli performans iyileştirmeleri getirdi ve bu eğilim, yakın gelecekte yeni bir JIT derleyicisi ile birlikte gönderilecek olan PHP 8 ile devam edecek gibi görünüyor . Aynı durum, V8 JavaScript motorunun her yeni sürümüyle birlikte gelen yeni hız ve bellek optimizasyonlarından yararlanan Node.js için de geçerlidir.
Aynısı, NGINX veya Apache gibi sunucu yazılımları için de geçerlidir. Sunucu geliştiricileri şu anda HTTP/3 adlı bir sonraki büyük HTTP güncellemesi üzerinde çalışıyor. HTTP/3 , internet bağlantılarını daha hızlı , daha güvenilir ve daha güvenli hale getirmeyi vaat ediyor . Favori sunucunuz bu özelliği gönderdiğinde bu güncellemeyi uyguladığınızdan emin olun.
Yazılımın ilk sürümlerinin performansı genellikle çok iyi optimize edilmemiştir çünkü bu aşamada hız genellikle ilk tercih değildir. Ancak ürün olgunlaştıkça geliştirici, daha fazla kullanıcıya daha hızlı uyması ve alternatif seçeneklerle daha iyi rekabet etmesi için daha fazla çaba göstermeye başlayabilir. Bu nedenle, her yazılım parçasının yeni bir sürümü kullanıma sunuldukça, hataları önlemek, güvenlik düzeltmelerinden yararlanmak ve yığınınızı daha hızlı hale getirmek için güncelleme yapmak iyi bir uygulamadır.
Çözüm
PageSpeed aracı, olası performans tuzaklarını önerme konusunda gerçekten iyi bir iş çıkarsa da, maksimum kullanılabilir araç ve teknolojiyi elde etmek için kullanılabilecek bazı optimizasyonlar bırakır. Bildiğim tüm bu tür optimizasyonları kapsamaya çalıştım. Ayrıca bilmeniz gerekebilecek birkaç ek şeyi de ele aldım. Tüm bunlar, sitenizi rekabette önde tutmanıza yardımcı olacaktır.
