WP Rocket 3.17: Otomatik Tembel İşleme ile INP Metriğinizi Geliştirin

Özellikle uzun blog sayfaları veya e-Ticaret ürün sayfalarıyla etkileşim kurmaya çalışıyorsanız, web sitenizin yavaş yanıt verdiğini hiç hissettiniz mi? Performans optimizasyonu zordur ve Next Paint ile Etkileşim (INP) gibi kullanıcı deneyimiyle ilgili karmaşık ölçümlerin iyileştirilmesi söz konusu olduğunda bu durum daha da zordur. INP, web sayfası yanıt verme hızını ölçen ve hızın, kullanıcı deneyiminin ve SEO'nun geliştirilmesinde önemli bir rol oynayan yeni Core Web Vital metriğidir; başka bir deyişle, bunu göz ardı edemezsiniz.

Daha iyi bir INP notu elde etmek amacıyla web sitenizin hızını ve kullanıcı deneyimini geliştirmek için çok çalışıyorsanız, yeni ana sürümümüz ve onun yepyeni otomatik özelliği hakkında daha fazla bilgi edinmekten memnuniyet duyacaksınız. WP Rocket 3.17'ye merhaba deyin!

Yeni ana sürümümüz, ziyaretçiler kaydırdıkça web sitenizin içeriği nasıl oluşturacağını otomatik olarak optimize etmeye odaklanır. Özellikle bloglar, çevrimiçi mağazalar ve keşfedilecek çok sayıda içeriğe sahip siteler için faydalıdır.

WP Rocket 3.17'yi tanıtmaktan iki nedenden dolayı heyecan duyuyoruz.

Birincisi, yeni özellik özellikle mobilde INP ölçüsünü ve algılanan hızı iyileştirecek. Ayrıca En Büyük İçerikli Boya ve İlk İçerikli Boya dereceleri gibi diğer temel ölçümleri de olumlu yönde etkileyebilir. Kullanıcı deneyimiyle ilgili ölçümleri optimize etmek, web sitenizi daha hızlı hale getirmenin nihai hedefi olan dönüşüm oranını da artırabilir, değil mi?

Üstelik WP Rocket, tüm web sitesi sayfalarında bu kadar güçlü ve otomatik bir optimizasyonu doğru bir şekilde sunan ilk eklentidir.

Blog gönderimizde her şeyi keşfedin veya videoyu izleyin.

Rendering Nedir ve Performansa Etkisi

WP Rocket 3.17'nin web sitenizin performansını nasıl artırabileceğini anlamak için oluşturmayı açıklayarak başlayalım. Web sayfanız yüklendiğinde oluşturma devreye girer; bu, tarayıcının web sitesi kodunuzu kullanıcıların ekranlarında gördüğü görsel öğelere dönüştürme yöntemidir.

Tarayıcı oluşturma, tarayıcının HTML dosyasını alması ve web sayfasının ağaç yapısı temsili olan DOM ağacını oluşturmasıyla başlayan birkaç aşamayı içerir. Son aşama boyamadır; tarayıcının her öğeyi ekrana boyaması ve kullanıcıların bitmiş web sayfasını görebilmesidir.

Web performansı optimizasyonunda her zaman olduğu gibi, bir sorun var. Aslında işleme süreci, tarayıcının birçok görevi aynı anda yürütmesini gerektirdiğinden performans açısından zorluk yaratabilir. Bu çoklu görev etkinliği, esas olarak JavaScript dosyalarından etkilenen, ana iş parçacığı adı verilen şeyde gerçekleşir.

Ana iş parçacığı çok meşgul olduğunda uzun görevlere yol açar. Bu uzun görevler, sayfanızın yanıt verme hızını yavaşlatan ve sayfanızın kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçen önemli bir Temel Web Vital ölçümü olan Next Paint ile Etkileşim gibi ölçümleri etkileyen trafik sıkışıklıkları gibidir.

İşleme ve Performans

Rendering ve bunun performans üzerindeki etkisinden bahsettiğimizde, özellikle sürecin iki bölümünden bahsediyoruz: önceki bölümde gördüğünüz gibi renderleme ve boyama. Bunlar, tarayıcının içeriği ekranda göstermek için çok çalıştığı ve INP puanına ve algılanan hıza katkıda bulunan aşamalardır.

Bu süreçte performansı etkileyebilecek çeşitli değişkenler vardır. Birkaçını saymak gerekirse: DOM boyutu, JavaScript yürütme hızı ve animasyonlar. Sayfadaki içerik ne kadar fazla olursa, oluşturma optimizasyonu o kadar zor olur.

Artık işlemenin hız açısından çok önemli olduğunu ve iyileştirilmesi gerektiğini bildiğinize göre, bunu nasıl mümkün kılacağımızı öğrenelim.

İçerik görünürlüğü CSS Özelliğiyle tanışın

Tarayıcı oluşturmayı, dolayısıyla hızı ve duyarlılığı optimize etmenin etkili bir yolu, içerik görünürlüğü CSS özelliğinden yararlanmaktır. Bu özellik, tarayıcıya sayfanın tüm içerik bölümlerini hemen oluşturmamasını, ancak kullanıcı bunları görene kadar beklemesini söyler.

Hiç video oyunu oynadın mı? Eğer öyleyse tüm dünyanın bir anda yüklenmediğini biliyorsunuz. Bunun yerine, yeni sahneler ve arka planları yalnızca siz ilerledikçe görüntülenir veya oluşturulur. İçerik görünürlüğü CSS özelliğinin yapmasına izin verdiği şey tam olarak budur.

Peki bu nasıl yardımcı oluyor? İçerik görünürlüğünü kullanarak tarayıcının tek seferde yapması gereken iş azalır. Her şeyi anında işlemeye çalışmak yerine, o anda en önemli olana odaklanılabilir. Bu şu anlama gelir:

1. Tarayıcıya, ihtiyaç duyulana kadar bazı öğeleri oluşturmayı bırakması konusunda bilgi verir, böylece tarayıcının özellikle oluşturma ve boyama söz konusu olduğunda uğraşması gereken uzun görevler azalır.
2. En görünür kısımlar hızla hazır olduğundan sayfa daha hızlı yüklenir.
3. Kullanıcılar sayfayla etkileşim kurduğunda sayfa daha hızlı yanıt verir.

Sonuç olarak, web siteniz gelişmiş bir kullanıcı deneyimi sunar. Ziyaretçiler içeriğinizi daha hızlı görecek ve sayfayı kaydırıp tıkladıkça sayfayla etkileşime girebilecek.

Harika haber şu ki, içerik görünürlüğü özelliği artık tüm büyük tarayıcılar tarafından destekleniyor. Bu, bu güçlü özelliğin, tarayıcılarından bağımsız olarak neredeyse tüm kullanıcılar için bir web sitesinin performansını artırabileceği anlamına gelir.

WP Rocket 3.17'de içerik görünürlüğü özelliğini uygulayarak otomatik tembel oluşturma özelliğini sunuyoruz. Ne anlama geldiğini öğrenmek için okumaya devam edin.

3.17: Otomatik Tembel Oluşturmaya Giriş

Yeni ana sürümümüz, render işlemini otomatik olarak geciktirmeyi mümkün kılıyor. Her zaman olduğu gibi, yeni sürümlerimizde ve geliştirmelerimizde amaç, teknik becerileriniz ne olursa olsun ve web performansı optimizasyon tekniklerinde uzmanlaşırsanız, web sitenizin performansını en kolay şekilde artırmanıza yardımcı olmaktır.

Hız ve kullanıcı deneyimi üzerinde önemli etkisi olabilecek özelliklere odaklanıyoruz ve WP Rocket 3.17 de bir istisna değil.

Her şeyden önce, yeni sürüm INP puanınızı önemli ölçüde iyileştirerek web sitenizi ziyaretçilere daha duyarlı hale getirebilir. Ayrıca En Büyük İçerikli Boya ve İlk İçerikli Boya puanlarınızı da biraz artırabilir, ancak bu daha olumlu bir yan etki olacaktır.

Yeni özelliğin uygulanması güvenlidir ve ziyaretçilerinizi asla etkilemez. Bir tarayıcı eski bir sürüm olduğu için içerik görünürlüğü özelliğini desteklemiyorsa, WP Rocket 3.17 etkinleştirilse bile hiçbir şey olmayacaktır.

Bu özellik aynı zamanda web siteniz için de düşük risklidir; herhangi bir şeyin bozulması pek olası değildir.

Bir ek not olarak, böyle bir özelliği üç yıl önce yayınlamayı düşündük. O zamanlar bu özellik JavaScript'i temel alıyordu ve SEO üzerindeki potansiyel etkisini doğrulamak için uzun vadeli bir teste ihtiyaç duyuluyordu. Bu arada, içerik görünürlüğü CSS özelliği daha fazla desteğe sahipti ve uygulanabilir ve daha basit bir çözüm sunuyordu. INP'nin web performansı optimizasyonuyla giderek daha alakalı hale gelmesiyle birlikte, bu özelliğin yayınlanması çok basit bir hale geldi.

Otomatik Tembel İşleme Nasıl Çalışır?

Video oyunu benzetmemize geri dönelim.

Bir oyun oynadığınızı hayal edin. Karakterinizi ileri doğru hareket ettirdikçe oyun yeni alanları onlara ulaşmadan işliyor. Web siteniz için otomatik tembel oluşturma tam olarak bu şekilde çalışır.

Otomatik tembel oluşturmanın tanıtılması önceki sürüm olan WP Rocket 3.16 sayesinde mümkün oldu. Önceki sürümümüz 2 önemli geliştirmeyi içeriyordu:

• Ayrılmış mobil önbelleği varsayılan olarak etkinleştirdik.
• Optimize edilecek öğeler hakkında gerçek bilgileri toplayan bir işaretçi sayesinde kritik görüntülerin (ekranın üst kısmındaki görüntüler) algılanmasını ve optimize edilmesini sağladık. 3.17 özelliği, düzen hakkında doğru bilgi sağlamak ve yeni optimizasyonu mümkün kılmak için işaretin izlediği yolu genişletecektir.

İşte WP Rocket 3.17 etkinleştirildiğinde olanlar:

Bir kullanıcı sayfanıza geldiğinde yeni özellik, tarayıcının her şeyi anında görüntülemesine izin vermez. Aksine, tarayıcı sayfadaki öğeleri yalnızca kullanıcılar sayfada o noktaya yakın olduğunda görüntüleyecektir; tıpkı oyunun bir sonraki alanı yalnızca siz ona yaklaştığınızda yüklemesi gibi. Sayfa ne kadar uzun olursa, tembel oluşturma o kadar verimli olur.

Bu nedenle yeni sürüm özellikle aşağıdakiler için faydalıdır:

1. Blog gönderileri veya ürün listeleri gibi çok sayıda içeriğe sahip uzun sayfalar.
2. Bileşik olmayan animasyonlar (ör. tuval animasyonları ve video arka planları) gibi oluşturulması daha fazla zaman alan karmaşık öğeler içeren sayfalar.

WP Rocket, bu otomatik özelliği tüm sayfalarınıza doğru bir şekilde uygulayan ilk eklentidir. Aslında WP Rocket 3.17, sayfanın yapısını analiz eder ve tembel oluşturmanın uygulanabileceği öğeleri tespit eder. Eklenti, hiçbir fırsatı kaçırmadan doğru öğeleri aldığımızdan emin olmak için her sayfayı masaüstü ve mobil olarak ayrı ayrı işler.

İşaretleme seçeneği yoktur; etkinleştirmek için herhangi bir şey yapmanıza gerek yoktur. WP Rocket 3.17'ye güncellendiğinde çalışacaktır.

Tembel İşleme Bir Sonraki Boya Sınıfıyla Etkileşimi Nasıl Geliştirebilir?

Şimdi WP Rocket 3.17'nin INP notunuzu nasıl iyileştirebileceğini görelim.

Öncelikle ilk şeyler: Google'a göre iyi yanıt verme, INP puanınızın 200 milisaniyenin altında olması gerektiği anlamına gelir.

Yaptığımız testlerin sonuçlarına geçmeden önce, web sitenizin elde edebileceği performans iyileştirmelerinin mevcut optimizasyon düzeyine bağlı olduğunu vurgulamak da önemlidir. Siteniz zaten iyi bir şekilde optimize edilmişse, INP notunuzda ince iyileştirmeler görebilirsiniz. Ancak iyileştirme için yer varsa INP puanınızda ve LCP ile FCP notlarında daha dramatik bir artış yaşayabilirsiniz.

INP performans gelişimini ölçmek için, DebugBear'ın INP Debugger'ı gibi bir araç kullanmanızı öneririz; bu araç, WP Rocket 3.17'yi ve Lazy Rendering otomatik özelliğini etkinleştirmeden önce ve sonra sitenizin yanıt verme hızının net bir resmini verecektir.

Lighthouse'u temel alan PageSpeed ​​Insights aracını bu sefer neden kullanmayacağımızı merak ediyorsanız bunun nedeni INP'nin bir alan metriği olması ve etkileşime göre hesaplanmasıdır. Ve Lighthouse bunu en azından şimdilik ölçmüyor.

Size WP Rocket 3.17'nin getirebileceği potansiyel geliştirmeleri göstermek için gerçek dünyadan bir örneğe bakalım. Kaydırılacak çok sayıda içeriğe (birden fazla bölüm, ürün görseli ve ürün listesi) sahip bir e-ticaret web sitesini test ettik. Test amacıyla, ana iş parçacığını meşgul etmek ve durumu iyileştirmek için geç oluşturmanın verimliliğini doğrulamak amacıyla web sitesine bir JavaScript iş yükü de ekledik.

İşte bulduklarımız.

Otomatik Tembel İşleme ile WP Rocket 3.17'yi etkinleştirmeden önce

INP sonucu 204 ms'dir. Gördüğünüz gibi sonuç, iyileştirme ihtiyacını vurguluyor:

Daha teknik bir bakış açısıyla, Chrome DevTool Performansı sekmesindeki tarayıcı görüntülemeyi de analiz ettik. Ekran görüntüsü uzun görevleri ve oluşturulması için gereken süreyi vurgulamaktadır: 2610 ms.

Otomatik Tembel İşleme ile WP Rocket 3.17'yi etkinleştirdikten sonra

INP sonucu artık 146 ms'dir. Bu sefer INP notu yeşil renktedir.

Bu kez Chrome DevTool performans sekmesi, uzun görevlerin nasıl optimize edildiğini ve Oluşturma süresinin 2325 ms'ye nasıl düşürüldüğünü gösteriyor.

Gördüğünüz gibi tam olarak aynı sayfayı test ettik. Tek fark, ikincisinin Otomatik Tembel İşleme'nin etkin olması ve ilkinin olmamasıdır.

İyileşme oldukça önemli. İyileştirilmesi gereken turuncu INP puanına sahip bir sayfadan, yanıt verme hızı sağlamak ve harika bir kullanıcı deneyimi sunmak için önerilen yeşil sonuç gösteren bir sayfaya geçtik.

Kapanıyor

İster bir blog, ister çevrimiçi bir mağaza veya başka türde zengin içerikli bir web sitesi işletiyor olun, WP Rocket 3.17 ve yavaş oluşturma özelliği, INP gibi önemli bir ölçümü otomatik olarak iyileştirebilir.

INP'yi artırmak sayfa duyarlılığını ve dolayısıyla kullanıcı deneyimini artırır. Bu, ziyaretçilerin sitenizde daha uzun süre kalmasına ve dönüşüm gerçekleştirmelerine ve geri gelmelerine yardımcı olabilir; bu nedenle optimizasyonunu gözden kaçırmamalısınız.

INP notunun nasıl yükseltilebileceğini neden kendiniz görmeyesiniz? WP Rocket'ı 3.17 sürümüne güncelleyin veya deneyin. Yeni büyük sürümün sizin için nasıl çalıştığını duymak isteriz. WP Rocket 3.17 deneyiminiz ve hangi iyileştirmeleri elde ettiğiniz hakkındaki yorumlarınızı bize bildirin!