Gerçek dünyadaki kullanıcılar için herhangi bir ürün geliştirirken tüm bunlar önceliğiniz olmalıdır.
Web sitenizde bir ila iki saniyelik bir gecikme bile kullanıcı deneyimini ve site trafiğinizi büyük ölçüde etkileyebilir.
Amazon veya Uber gibi herhangi bir büyük şirketi düşünün, web sitelerinde sadece 1 saniyelik bir gecikme, yüzlerce ve binlerce müşteriyi kaybetmelerine neden olabilir.
Sadece birkaç şeye dikkat ederek ve bazı en iyi uygulamaları izleyerek sitenizi çok daha hızlı hale getirebilir ve ürün performansınızda büyük bir gelişme göreceksiniz.
Şimdi web sitenizin performansını artırmak için odaklanabileceğiniz bu küçük detayların neler olduğunu görelim.
1. Medya dosyalarınızın boyutunu ve biçimini optimize edin
Sayfamızı daha çekici hale getirmek için hepimiz görseller ve medya dosyaları koyarız, ancak sitenize koyduğunuz görsellerin ve gif dosyalarının, kullanıcılarınıza gösterilmesi için tarayıcı tarafından indirilmesi gerekir, bu nedenle büyük boyutlu görseller koyarsanız kesinlikle web sitenizi yavaşlatacaktır.
Bu nedenle, görüntünüzü yeniden boyutlandırmak ve ayrıca dosyalarınızın kalitesini düşürmeden boyutlarını küçültmek için bazı harici resim araçlarını kullanmanız önerilir. Sayfanızın optimize edilmiş yükleme süresi için, resimler için jpg, png gibi bazı standart dosya formatlarına bağlı kalmak en iyisidir.
Ayrıca, bazı metinleri göstermek için resimleri kullanmaya çalışmayın; Bunun yerine metin kullanmayı tercih edin çünkü resim gereksiz yükleme süresini artıracak ve SEO'ya bile yardımcı olmayacaktır.
Bu araçlar, bunu başarmanıza yardımcı olabilir:
2. Satır içi JS ve CSS dosyalarını kullanmaktan kaçının
Web siteniz için JS ve CSS kodunu harici dosyalara yazmak en doğru olan bir uygulamadır. Yalnızca harici dosyaların bakımı daha kolay olmakla kalmaz, aynı zamanda daha fazla yüklemede zaman kazanmak için tarayıcılar tarafından önbelleğe alınır.
Her şeyi ayrı bir CSS ve JS dosyasında tanımlarsanız, tarayıcı stilleri ve işlevselliği sayfanıza uygulamayı daha kolay bulacaktır.
3. Daha Temiz HTML Yazın
Çoğu zaman yaptığımız şey, sayfamıza gereksiz HTML eklemek ve güçlü ve italik etiketlerle doldurmaktır. Halbuki CSS ile aynı etkiyi hızlı bir şekilde elde edebiliriz. Bu nedenle, HTML dosyanıza çok fazla kod koymak yerine, daha basit tutmaya çalışın ve sayfanızı daha temiz ve daha rahat yükleyebilecek CSS alternatifleri kullanın . Ancak bazı eski tarayıcıların bazı CSS özelliklerini desteklememesinin bir bedeli vardır, bu nedenle CSS yazarken tüm tarayıcılara dikkat ettiğinizden emin olun.
4. JavaScript dosyalarını eşzamansız olarak veya sayfanın sonunda yükleyin
Komut dosyası etiketlerinizi body etiketi kapanmadan hemen önce koymak her zaman iyi bir uygulamadır, böylece javascript dosyalarınız web sayfanızın tüm içerik bölümü yüklendikten sonra yüklenir. Veya, bunları body üstüne koymak istiyorsanız, her şeyin yüklenmesi tamamlandıktan sonra dosyanın yüklendiğinden emin olmak için komut dosyası etiketinin içine erteleme niteliği koyduğunuzdan emin olun. Bu uygulama tarayıcının, JS'ye başlamadan önce her şeyi oluşturmasına izin verir.
Ayrıca, içerikle paralel olarak yüklenmesi ve web sitesinin akışını bozmaması için asenkron javascript kullanabilirsiniz. Ajax bunu başarmanıza yardımcı olabilir, böylece bir kullanıcı harekete geçtiğinde sayfanın tamamını yeniden yüklemek yerine o sayfanın bazı bölümlerini güncelleyebiliriz. Dosyayı eşzamansız olarak yüklemek için komut dosyası etiketlerinize zaman uyumsuz bir öznitelik de ekleyebilirsiniz.
5. Tarayıcı Önbelleğe Alma Özelliğini Kullanma
Web sitenizdeki pek çok dosya zamanla değişmez,
Web önbelleğe alma, dosyaların daha sonra kullanılmak üzere web tarayıcısı tarafından önbelleğe alınmasıdır, böylece bir kullanıcı sitenizi yeniden ziyaret ettiğinde, tarayıcının her şeyi sıfırdan yüklemesi gerekmez. Tarayıcıların önbelleğe alabileceği şeyler arasında CSS dosyaları, JavaScript dosyaları ve resimler bulunur.
Bu nedenle, önbelleğe alma özelliğinden, yerel depolamadan, tanımlama bilgilerinden ve sunucu önbelleğinden maksimum fayda sağlayan bir web sitesi yaptığınızdan emin olun.
Bu, sunucu yanıt süresini büyük ölçüde azaltır ve bir kullanıcı web sitenizi tekrar tekrar ziyaret edebilir ve kullanıcı deneyimi her seferinde daha iyi hale gelir.
Tarayıcı önbelleğinden nasıl yararlanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, bu makalelere göz atın.
6. Dosyalarınızı Küçültün ve Birleştirin
Sayfanıza koyduğunuz tüm dosyaların işlenmesi için tarayıcı tarafından indirilmesi gerekir , bu nedenle dosya sayısını azaltarak, oluşturmayı otomatik olarak hızlandırırsınız. Sayfanızdaki Html, CSS ve JavaScript dosyalarının sayısını dikkate alın. Hepsi, bir kullanıcı sayfanızı her ziyaret ettiğinde sitenizin yaptığı isteklerin sayısını artırır.
Bu sayıyı "küçülterek" ve dosyalarınızı birleştirerek azaltabilirsiniz. Dosyaları küçültmek her dosyanın boyutunu azaltır ve dosyaları birleştirmek dosya sayısını azaltır.
Bir dosyayı küçültmek, gereksiz biçimlendirmeyi, boşlukları ve kodu kaldırmayı içerir. Sonuca ulaşmanıza yardımcı olabilecek birçok çevrimiçi araç var. Gereksiz her kod parçası sayfanızın boyutunu arttırır, bu nedenle sayfanızı yüklemek için küçültülmüş dosyaları kullanmak çok önemlidir. Bu, sayfalarınızın olabildiğince temiz olmasını sağlar.
Siteniz birden çok CSS ve JavaScript dosyası kullanıyorsa, bunları tek bir dosyada birleştirebilir ve aynı sonucu elde edebilirsiniz.
Dosyalarınızı optimize etmek istiyorsanız şu harika araçlara göz atın:
- Dosyalarınızın küçültülmesi ve optimizasyonu için Gulp kullanmanızı şiddetle tavsiye ederim , bu yüzden bir göz atın.
- YUI kompresör
- UglifyJS
- cssnano
7. Ürününüz için doğru barındırma seçeneğini ve hizmetini kullanmak
Kendiniz veya demo amaçlı projeler yaparken, bir alan adı ve barındırma hizmetleri için ödeme yapmak yerine ücretsiz barındırma seçeneklerine gitmek iyidir. Yine de, gerçek dünya için önemli miktarda trafik çeken uygulamalar yapmaya başladığınızda, en ucuz seçeneği seçmek yerine iyi bir ücretli barındırma hizmetine geçmek daha iyidir. Farklı platformların incelemelerini okuyun ve ihtiyaçlarınıza en uygun olanı seçin.
Bazı popüler barındırma hizmetleri şunlardır:
- Bluehost
- HostGator Bulutu
- DreamHost
- GoDaddy Hosting
- SiteGround
8. Lighthouse gibi çevrimiçi bir araç kullanın
Web siteniz tamamlandıktan sonra, çevrimiçi olarak bulunan herhangi bir sayfa hızı analiz aracına gidebilir ve kullanabilirsiniz. Chrome kullanıyorsanız, chrome geliştirme araçlarında bulunan bir deniz feneri aracı vardır, size web sayfanızın performansıyla ilgili analizler sunar ve ayrıca sayfanızın performansını artırabileceğiniz bazı ipuçları sağlar, bu yüzden bir deneyin.
Bir yazının daha sonuna gelirken takipte kalmayı unutmayın!