İlk performans sitesini oluşturmaya başlayın
@thoaud önbellek kullanmama konusunda olağanüstü dersler veriyor. Bu, birçok geliştirici için gerçekten gözleri açabilir. #Wcnordic pic.twitter.com/mny2upzemx
– Maciek palmowski (@palmiak_fp) 8 Mart 2019
Ortalama sayfa hız hızını gördüğümüzde, en iyi uygulamaya üç saniye içinde yaklaşmayan bir web sitesi oluşturduğumuz açıktır. Benim için bana web sitelerini farklı şekilde geliştirmeye başlamamız gerektiğini söylüyor.
Bilgiler, birçok geliştiricinin önbelleğin çözüm olduğunu düşünmesine rağmen, servis cıvatalarını barındırmayı deneyen birçok sitenin genellikle aynı hikayeyi anlattığı kafa karıştırıcıdır. Birkaç önbellek çözümü ve çeşitli optimizasyon denediler, ancak sitenin gerçekten daha hızlı olduğunu düşünmüyorlar. Bilişsel uyumsuzluk her türlü kanal aracılığıyla oluşturulur. Çevrimiçi makaleler, yığın değişimi, reklamlar, Facebook grupları, bloglar, yardım belgeleri ve pazarlama. Önbelleklemenin yavaş performans için bir ilaç olduğunu ve sitenizi daha hızlı hale getireceğini bildiren bilgilerle çevriliyiz. Ancak test edildiğinde, kendiniz deneyimlemezsiniz. Önbellekleme ve optimize etmek için etkinleştirilen ve devre dışı bırakılan eklentilerle dolu WordPress eklentilerini kaydedin. Ve haklılar. Bu daha hızlı değil. Bazı sayfalar basarsanız daha hızlıdır, ancak her şeyi önbellekte her zaman saklayamadığınız için, ana performansı iyileştirmek için bir teknik olarak önbellekli tüm ziyaretçilere hızlı bir deneyim sağlayamazsınız. Geliştirme iş akışınızdaki önbellekle dolu sayfaları unutmak için, daha hızlı çalışan daha iyi bir kod üretecektir. Yaptığınız bir şeyin ne zaman olduğunu kolayca görecek, hissedecek ve bileceksiniz, sitenizi yavaşlatacaksınız.
Önbelleklemenin nasıl çalıştığı hakkında daha fazla bilgi edinmek ister misiniz? Önbelleklemenin WordPress’te nasıl çalıştığı hakkındaki makalemi okuyun. Eklentiler, raf temaları ve bazı CSS ayarları içeren bir site oluşturursanız veya en başından özel bir kodla tam bir site oluşturursanız, ilk performans iş akışı sorun değildir. İlk performans iş akışı size yardımcı olmak için tasarlanmıştır ve web sitenizi nasıl oluşturursanız olun işlev görür. Oh hayır, başka bir şey, tasarımımızda ilk cep telefonuna, ilk erişilebilirliğe, ilk içeriğe sahip olan bir şeydir. Ön uç kodunda, önce hücresel ve erişilebilirliğe öncelik veriyoruz. Tüm bunlar web geliştirmede bir eğilimdir, çünkü oluşturduğunuz web sitesi ve çevrimiçi mağazanın kullanıcılara sahip olmasını ve web sitesinin yönteminin odakta kullanılmasını sağlarlar. Ancak, bir arka uç kodu yaparken böyle bir şey yok. Kodunuzun okunması ve anlaşılması kolay, işlevselliğe zarar vermemesini vb.
Performans bütçesi
İki ana parça arasında izlenmesi gereken “kurallar” ve iş akışları vardır. Bir geliştirici olarak üzerinde çalıştığınız siteyi yavaşlatan kodu tanıtmanızı sağlamak için kurallar ve iş akışları mevcuttur. İlk performansın iş akışındaki ana ayar mutlak bir performans bütçesidir. Paranız gibi, bütçeyi hiçbir zaman aşamazsınız. #Perffirst Adım 1 hashtag’i kullanarak Twitter’daki performans konuşmasına katılın – Yeni bir site oluşturup kurmaya veya mevcut üzerinde çalışmaya başlasanız da, ilk adım için bir performans bütçesi oluşturun. Bir performans bütçesine ihtiyacınız var. İlk performans bütçesi, zaman ve boyut olmak üzere iki ana faktörden oluşur.
Kaç saniye harcamanız gerekiyor?
Bu süre zarfında ne kadar KB aktarabilirsiniz?
Daha kolay hale getirmek için ikisini dört KPI’ya ayırabiliriz.
HTML’yi indirin (ilk istek)
Sayfa boyutu
DOM içeriği yüklenir
Tam olarak şarj
İstediğiniz kadar KPI ekleyebilirsiniz, ne kadar çok KPI olursunuz. Ancak, ne kadar çok KPI eklerseniz, bir sonraki adım o kadar karmaşık olur. Ve eklediğiniz herhangi bir KPI hakkında iyi bir anlayışa sahip olmalısınız, çünkü herhangi bir KPI’nın arkasında mümkün olan performans sorunları olduğu talimatlar vardır. Daha sonra daha fazlası.
Adım 2 – Kodu gerçekleştirin/İkinci Adım, Sitede oluşturmak veya değiştirmek istediğiniz her şeyi oluşturmaktır.Bu iş akışındaki adımları ne kadar çok yaparsanız, o kadar çok performans üretirsiniz.Bir sayfa üreticisi kullanarak bir web sitesi oluşturursanız, önce performansın performansı üzerinde çalıştığınızda standart hazırlığınızı daha iyi bir performans olacak şekilde değiştirmiş olursunuz. Tanıttınız veya değiştirdiniz.Testinizin kapsamı ne olmalı?Performansı farklı kapsamla test edebilirsiniz:
Kod işlevi/kesir
Tek sayfa
Tam Site
Kodun işlevinin veya kısmının test edilmesi Bir fonksiyonun veya kod kısmının performansının test edilmesi genellikle sürekli entegrasyon (CI) işleminiz sırasında yapılır. Birçok normal web sitesi için bunun karmaşık ve zaman alıcı olması gerekmez. Bir sayfa testleri Çoğu kişi, webpagetest.org (veya tools.pingcom.com, gtMetrix) gibi bir sayfa test aracı kullanarak bir sayfayı test eder. Bu, kullanımı kolay ve çoğu için yeterince iyi bir araçtır. Ancak, sorun sadece bir sayfa test aracı olmalarıdır. Bir sayfa testi, çoğu web sitesinin kapsama alanı olmasıdır. Yalnızca bir sayfayı etkileyen bir kod eklemediğiniz sürece, bir sayfa performans testi yeterli değildir. Çoğu durumda, eklediğiniz kod birden fazla sayfayı etkiler. Bir eklenti veya modül eklerseniz, garantili birden fazla sayfayı etkiler. Tam Site Testi Tam site testi, daha fazla geliştirici yapılması gereken bir şeydir. Tam site testi, önceden belirlenmiş sayfaları test ederek veya siteyi tam olarak sürünerek yapılır. Tam site testi ile değişikliklerinizin birkaç sayfadaki etkisini görebilir ve bu nedenle farklı senaryolara sahip sayfalardaki performans sorunlarını belirleyebilirsiniz. Tam site testi CI işleminize uygulanabilir veya siteBulb ve Screaming Frog gibi araçlarla manuel olarak yapılabilir. Önemli olan, hangi araçları kullanırsanız kullanın, her sayfa için performans bütçenizde sahip olduğunuz KPI’yı alabilmenizdir. Şahsen, siteBulb tavsiye ederim.
Bunu verme olasılığını gerçekten seviyorum ve bu bana performans bilgilerinden daha fazlasını veriyor. Özünde, SiteBulb size SEO’yu artırma olasılığı hakkında çok fazla bilgi veren bir SEO aracıdır. Sitebulb’u önermemin ana nedeni, yerel olarak çalıştığınız sitede kendi bilgisayarınızdan yerel olarak testleri çalıştırabilmenizdir. Bu size kontrol edilebilecek ve nerede olursanız olun çalıştırmayı kolaylaştıran bir ortam sağlar ve testler ağ gecikmesinden etkilenmeyecektir. Hatırlanması gereken önemli şey, bunu yerel olarak çalıştırırsanız, bütçenize göreceli bir miktar vardır. Yerel ortamınızın üretimde çalışacağınız her ortamda ne kadar yavaş olduğu konusunda. Adım 4 – Performansı etkiliyor mu? Bir performans testi yaptıktan sonra, yaptığınız şeyin sitenin performansını etkileyip etkilemediğini belirlemelisiniz. Bunu belirledikten sonra son aşamaya girersiniz. Adım 5 – Karar haritası karar haritası ya da onu demek istediğim gibi dans, en katı iş akışının bir parçasıdır. Bu bölümü takip etmezseniz, geri kalanı neredeyse işe yaramaz. Soruyu cevaplayan karolarla başlıyorsunuz – performansı etkiliyor mu? Helsinki, Finlandiya’da Wordcamp Nordic 2019’da sunulduğu gibi, evet ister hayır. Karar metamfetamin olsun, basit bir soru. Değil. Değişim, değişim performansı etkilemediğinde akışın performansını etkilemiyor, oldukça basit:
Performansı etkiliyor mu?
Sayfa boyutunu artırıyor mu?
Genel bütçenin üzerinde misiniz?
Performansı etkiliyorsa, arsa biraz daha karmaşıktır ve nihayet 2. adıma geri dönüp kodunuzu artırmanız gerekebilir. Değişikliklerinizi geliştirmek, yeniden yazmak veya yeniden yazmak için 2. adıma geri dönün – iyi bir şeydir. Yeni şeyler öğrenmenizi, farklı düşünmenizi ve kodları daha iyi ve daha hızlı yazmanın yeni yollarını öğrenmenizi sağlar. Evet. Değişikliklerim performansı etkiler veya ek kodlar performansı etkilerse, iş akışı biraz daha cazip hale gelir. Bilmeniz gereken ilk şey, bozulmuş performansın orantılı olup olmadığıdır. Bu karar tamamen size kalmış. Ortam değilse, 2. adıma dönün ve çözmeye çalıştığınız sorunlar için daha iyi ve daha hızlı bir çözüm bulun. Evet, çok değerli, bu yüzden performans orantılı olarak bozuldu. Bu kararı çok sık verirseniz, ilk performans iş akışının bir güvenlik ağı vardır. Mutlak olan ve asla aşılamayan genel performans bütçesi. Kalıtsal performansın mümkün olup olmadığını belirledikten sonra adımlar, değişikliğin performans bütçesini aşıp aşmadığını kontrol etmektir. Evet ise, 2. adıma geri dönmeli ve kodunuzu veya daha iyi ve daha hızlı bir çözüm bulmak için başka şekillerde yeniden yapmalısınız. Yardım!
Performans bütçemi aştım, ortalama performans bütçesini aşarsanız, kodunuzu yeniden yapmalısınız.Burada önemli bir not, yeni tanıttığınız kodu yeniden yapmanıza gerek olmadığıdır.Bu, kodun performans bütçesinin çoğunu harcayan diğer bazı bölümlerini yeniden yapmak için daha kolay ve daha akıllı olabilir.Bütçeyi aştığınızda, bütçenin hangi bölümünü bulmanız gerekir.İlk bayt (TTFB) zamanı geldiğinde, iki seçeneğiniz var.Daha hızlı barındırmayı deneyin veya neyin yavaşladığını öğrenmek için bir profil oluşturma aracı yardımıyla kodunuzu yeniden yapın.Profil zaman alıcıdır ve sofistike ve çeşitli uzmanlığa sahip değilseniz genellikle zordur ve zordur.Yaymak için adımlar iş akışında çalıştığınız ve dağıtım adımında sona erdiğiniz.İyi iş!
