Web Optimizasyonu ( Async / Minify / CloudFlare / LazyLoad / Sprite / CodeBeautify )

Site açılış hızı günümüzde kullanıcı deneyimi açısından bir sitenin google’daki sıralamasından, kullanıcının sitede kalma süresinden ve oluşucak maliyetlerin ve oluşucak sorunların en aza indirilmesi için çok ama çok önemli bir parçasıdır. ve bu konuda çoğu sitede başarısız ve bunu önemsemiyor oysaki Google site açılış hızını çok önemsiyor kullanıcılara hızlı ve doğru içerik sunma konusunda çalışmalar yapıyor.

Google’ın Amp (Accelerated Mobile Pages Project) Hızlandırılmış Mobil sayfa projeside buna örnektir.

Web sitesinin açılış hızını etkileyen birçok neden vardır. Bunların en başında sunucu kaynaklı problemlerdir öyleki bi sunucunun yanıt verme süresinin geç olması kullanıcıların %99.9‘u için olumsuz sonuçlancaktır. En başta o yüzden ilk tavsiyem sunucu optimizasyonu .

Çeşitli noktalarda konumlandıırlan Cdn hizmeti sunan bulut sunucularda projeleri barındırmak en başta yapılması gerekendir. 5 dakikada bir cloudflare kurabilirsiniz cloudflare’in nasıl kurcağınızı öğrenmek için buraya tıklayın

Şimdi bir web sitesini baz alalım ve yapmamız gerekenlere bakalım.

Async

1-) İlk olarak sitenize çağıracağız assets, images ve servis dosyalarımızı ayrıştıralım .

assets.emrebostan.com

images.emrebostan.com

services.emrebostan.com

burda ki bilmeniz gereken en önemli nokta yükü paylaştırmaktır. www.emrebostan.com üzerinden assets, images ve servis dosyalarını çağırıyor olsaydık şimdiden -1 puan almış ve kullanıcılara karşı sitenin daha geç açılmasına neden olmuştuk.

2-) İkinci aşama ise gereksiz yere bir sürü css, js dosyası çıkarmamanız gerekiyor Örneğin sitenize eklemek istediğiniz bir kaç plugine ait css dosyaları var örneğin : sweetalert.css, slick.css, owl-carousel.css, bootstrap.css

her bir dosyayı ayrı ayrı eklemekten ise bu css dosyalarını birleştirip tek bir css dosyası haline getirmenizdir. Örneğin : main.css

Bu işlem javascript dosyalarınız içinde geçerlidir . Js dosyalarında daha hassas ve dikkatli kontrollü şekilde dosyalarınızı birleştirin .

Minify

3-) Üçüncü aşama birleştirilmiş dosyaları Minify haline getirme . En önemli kısımlardan biri de budur css ve js dosyalarınızı https://www.minifier.org/  üzerinden iyice sıkıştırarak main.min.css olarak farklı kaydedip daha da küçültmelisiniz .

Buraya kadar herşey harika ilerliyor !!

4-) Dördüncü aşama ise siteye eklemiş olduğunuz .css, .js dosyalarını nasıl koymanız gerektiği burda yapmanız gereken ise </head> elementinin içerisine stil dosyalarınızı koymanız ve .js dosyalarınınızı ise </body> bitiminden öncesine koymanız gerekiyor burdaki önemli noktalardan biride eklediğiniz her bir script dosyasına defer niteliği vermenizdir. Sitemizi Async yapmaya devam ediyoruz.

Sprite / Svg

5-) Beşinci aşama ise resimlerinizi sprite haline getirmeniz bu da çok önemli bunuda şöyle düşünebilirsiniz ikinci aşamada bahsetttiğim css dosyalarını birleştirmek gibi burda da resimeri bir araya toplayıp tek bir resim haline getirip site içerisinde css ile background-position vererek yerlerine oturtmak bu konuyu kesinlikle bilmeniz gerekiyor ve hemen yapmalısınız.

LazyLoad

Şimdi ise LazyLoad özelliğine geldi sıra bu çok kıymetli ve güzel bir özellik özellikle fotoğrafın yoğun olduğu sitelerin açılış hızlarını önemli ölçüde arttırıyor ve katkı saglıyor burdan plugini edinebilirsiniz https://plugins.jquery.com/lazyload/ Sayfa scroll edildikçe, daha doğrusu kullanıcının ekranına eğer o resim gelicekise o zaman resim yükleniyor aksi halde kullanıcı sayfanın o kısmına daha gelmediyse o zaman resim yüklenmiyor ve siteyi etkilemiyor.

CodeBeautify

Ve tabiki son olarak da yazılan kodun güzelliği diye birşey var mantıksız yere satırlarca kod yazmaktansa akıllıca gerektiğinde sayfada olan ve birbirini tekrarlamayan temiz kod yatmakdan geçiyor bazı projelerde plugin leri bile kendiniz yazmanız size daha çok katkı sağlıcaktır çünkü plugin belkide bir çok özellik için tasarlanmış ve yapılmıştır oysaki sizin ihtiyacınız bir özelliğidir işte o zaman sadece o özelliği istiyorsanız o özelliği kendiniz yazıp plugini aradan çıkarmalısınız ve kod yığınını azaltmış olursunuz ve hiç şüpheniz olmasın mükemmel hızlı ve performanslı bir site yapmış olursunuz

adze.com optimizasyon
adze.com optimizasyonu
Özet
Web Optimizasyonu ☺
Yazı
Web Optimizasyonu ☺
Açıklama
Profesyonel bir web siteye nasıl sahip olunur ? Page Speed Score +90 olması için yapılması gerekenler Web optimizasyonu Async, Minify, CloudFlare, LazyLoad, Sprite, CodeBeautify
Yazar