girişSayfaların daha hızlı yüklenmesini sağlama. Sayfa yükleme sürelerini hızlandırmanın beş yolu
İyi günler! Sitenin yüklenmesinin çok uzun sürmesi ve kullanıcıların sitenin tam olarak yüklenmesini beklemeden siteden ayrılmaları nedeni ile sitenin sayfalarının yüklenme hızının artırılması gerektiği anlara muhakkak herkes gelir. Bugünkü gönderide, sitenize sayfa yükleme hızını optimize etmek için kullanmanız gereken araçlardan ve sayfaların yüklenmesine hangi kilit noktaların müdahale edebileceğinden daha ayrıntılı bahsedeceğim. Ek olarak, hangi hizmetlerin yardımıyla siteye sayfa yükleme hızını ölçebileceğinizi de öğreneceksiniz.
Site sayfalarının yüklenme hızını ölçmeye yönelik hizmetler
Bir siteye sayfa yükleme hızını kontrol etmek için kullandığım birçok hizmetten, sitenin her ayrıntısını ve örneğin aşağıdakiler için gerekli sayfanın yüklenme hızını açıkça gösteren Pingdom.com hizmetini beğendim: ana sayfa blog sitesi, ayarlarda "Amsterdam, Hollanda"yı seçerseniz site yüklenme hızı 1.08 saniye olacak ki bu çok da kötü değil. 
Aşağıda, veri talep edilen üçüncü taraf sunucuların ve dahili sunucunun bağlantı hızı, bekleme ve yanıtlama hızı hakkında hizmet tarafından sağlanan tüm gerekli bilgiler bulunmaktadır. 
Sağlanan verilerden en yavaş anları belirleyebilir ve bu yerleri etkileyerek sitedeki sayfaların yüklenme hızını artırabilirsiniz. Bu, Google tarafından geliştirilen harika bir araca yardımcı olacaktır - Google PageSpeed Insights.
Google PageSpeed kullanarak site sayfalarının yüklenme hızını optimize etme
Aslında, her şey ilk bakışta göründüğünden daha basittir, ancak şu anı not etmek istiyorum: google'ı kullanmak PageSpeed Insights, sitenin sayfalarını yükleme hızını kötüleştirebilecek tüm noktaları görmez, ancak oldukça uygundur, hizmetin isteği üzerine tüm noktaları tamamlayarak hızı önemli ölçüde artırabilirsiniz. Web sitesi yükleme hızına etki eden faktörlerin daha detaylı analizi için Firefox için Firebug eklentisi ve PageSpeed eklentisi ile Mozilla Firefox tarayıcısını kullanmanız gerekmektedir.
Neden Firefox? Firefox için bu eklenti daha kullanışlı görünüyor, sitenin sayfaları eklenti tarafından analiz edildikten sonra görüntülenen içerik bile daha kompakt, bu yüzden sayfaları Firefox kullanarak incelemenizi tavsiye ederim.
Bu nedenle, eklentiyi ve firebug eklentisini kurduktan sonra, sağ üst köşede böcek resmi olan bir düğme görünecektir.
Analizi yapmak istediğiniz siteye gidin, böceğin bulunduğu butona tıklayın. Önünüzde son sekmesi Sayfa Hızı olarak adlandırılan bir pencere açılacaktır.Sekmeye tıkladıktan sonra düğmeli bir pencere görünecektir. Performansı Analiz Et, butona tıklayıp sayfa analiz edilirken beklemeniz gerekiyor. Ardından, siteye sayfa yükleme hızını artırmak için izlemeniz gereken tüm önerilerin bir listesini göreceksiniz. Blog sayfalarının içeriğinin kısa bir manipülasyonundan sonra, Sayfa Hızı = 100 olası noktadan 94'te bir sonuç elde ettim, bu oldukça iyi, sonucu kesinlikle iyileştirebilirsiniz, ancak şu ana kadar bu kritik değil, ana şey şu ki, tüm ana müdahale noktalarını ortadan kaldırdım. 
Ancak yeşil onay işaretleri her şeyin yolunda olduğunu söylüyor gibi görünüyor, aslında göstergeyi iyileştirebilir ve 94'ten fazla bir değere ulaşabilirsiniz.
Şimdi sitenize sayfa yükleme hızını optimize etmek için izlemeniz gereken ana önerilere bakalım:
Sıkıştırmayı aç- xml, css, js ve html sıkıştırmasını gzip formatında yapılandırmak için sitenin ftp sunucusundaki .htaccess dosyasına aşağıdaki kodu ekleyin:
İstediğiniz oranlarda görüntüler sağlayın- CSS dosyalarında, resimleri CSS kullanarak değiştirmek yerine sabit oranlar ayarlamak gerekir.
Tarayıcı önbelleğini kullan, burada önbellek doğrulayıcı belirtilir ve öğe yürütülür Bir önbellek doğrulayıcı belirtin- tarayıcı tarafında önbelleğe almanın kullanılması gerekir, ör. istemci, .htaccess'e eklemeniz gerekiyor aşağıdaki satırlar kod:
Kodun bu kısmı 7 gün boyunca önbelleğe almayı uygular, unutmayın, her zaman arama motorlarının gereksinimlerini karşılamanız gerekmez, sitenizin öğeleri sık sık güncelleniyorsa, her biri için ayrı ayrı önbelleğe alma yapılandırmanız gerekir.
Görüntüleri optimize edin- sayfa boyutunu küçültmek ve buna bağlı olarak yükleme hızını artırmak için tüm site görüntülerini siteden kopyalama ilkesini kullanmanız gerekecektir. Ftp sunucusu ve http://www.smushit.com/ hizmetine daha fazla işlem için toplu yükleme, sitenizdeki görüntülerin sayısı binlerce olarak değişirse prosedür oldukça uzundur. Hatalar oluşabilir gif dosyaları jpg veya png olarak sıkıştırılacaktır, dosya adı değişirken dikkate almanız gerekir şu an resimler varsa gif formatı, bunları ayrı olarak indirmek ve ardından manuel olarak düzenlemek daha iyidir. Öneriler:
- Paketin her indirilmesinden sonra sayfayı yenileyin, aksi takdirde resimler mevcut listeye eklenecektir.
- Tüm optimize edilmiş dosyalar bu hizmetten arşiv tarafından indirilir, bu nedenle sunucuya yüklenmeden önce arşivden çıkarılmaları gerekir.
Java komut dosyasının ayrıştırılmasının ertelenmesi - kodu kullanarak bir belgeyi yüklerken bir süre için bir komut dosyası çalıştırabilirsiniz:
JS komut dosyalarını ve CSS stillerini kısaltın- hizmeti kullanmanız gerekir: http://www.refresh-sf.com/yui/, bu koddaki fazladan boşlukları kaldırarak dosya alanından tasarruf sağlar.
HTML'yi küçült- azaltmak HTML sayfaları belirli durumlarda atlanabilecek fazladan boşlukları ve yardımcı tırnak işaretlerini kaldırabilirsiniz.
Görüntü boyutlarını belirtin- tüm görüntüler için boyutları belirtilmelidir, görüntü boyutlarının ayarını atlamaya gerek yoktur, aksi takdirde görüntüler eğri bir şekilde ölçeklenir veya CMS görüntüler için kendi kendini reçete eden css stillerine başvurur ve böylece artar onların boyutu.
Vary başlığını belirtin: Kabul-Kodlama- önbelleğe almak için açılan tüm dosyalar bir başlık döndürmelidir, kodu ftp sunucusunda .htaccess'e eklemeniz yeterlidir:
Not: Dosyalara yapılan istek sayısını azaltmak için, CSS stillerinin sayısını azaltmak ve bunları 1 dosyada birleştirmek gerekir, ideal olarak js komut dosyalarının da 1 dosyada birleştirilmesi gerekir.
Çözüm
Sağlanan öneriler listesi, site sayfalarının yüklenme hızını önemli ölçüde artırmaya yardımcı olacaktır, ancak bazı noktalarda sunucudaki yükün artabileceğini unutmayın, örneğin, sunucu aracılığıyla gzip sıkıştırması kullanılırken ve önbelleğe alma kullanılırken tarayıcı (istemci) tarafı, burada diğer tarafla optimizasyon adımlarına yaklaşmanız ve hazırlamanız gerekecek gzip dosyaları.htaccess'te doğru işlemeyi yapılandırın ve tarayıcıya bağlı olarak kullanıcılara sıkıştırılmış veya sıkıştırılmamış dosyalar sağlayın.
Ayrıca, sayfa yükleme hızını artırmanın site SEO'su üzerinde olumlu bir etkisi olduğunu ve her şey eşit olduğunda, siteniz hız kazanırsa rekabetten daha iyi performans göstereceğini unutmayın.
Web sitenizin sayfalarının hızını optimize etmede başarılar dilerim!
Sayfa yükleme hızının birçok faktörü etkilediğinin bir sır olmadığını düşünüyorum. Bilmeyen biri varsa, o zaman kısaca şunu söyleyeceğim, yükleme hızı sadece ziyaretçinin sitenizin yüklenmesini bekleyip beklemeyeceğini değil, aynı zamanda SEO optimizasyonu... Nitekim günümüzde birçok arama motoru, siteleri sıralarken sayfa yüklenme hızını dikkate almaya başlamıştır. Bu nedenle, siteniz ne kadar hızlı yüklenirse, arama motorlarından o kadar fazla ziyaretçi alabilir ve sonuç olarak sitenizden daha fazla para kazanabilirsiniz.
Bu nedenle, bu makalede, web sayfanızı ve siteyi bir bütün olarak yükleme hızını nasıl artırabileceğinize dair en iyi 10 ipucunu toplamaya karar verdim. Makale bir dahi olduğunu iddia etmiyor ve yeni başlayanlar için tasarlandı.
O zaman hadi gidelim:
1. HTTP isteklerinin sayısını azaltın
Sayfa yüklemesinin %80'i sayfa bileşenlerini yüklemeye odaklanır: komut dosyaları, fotoğraflar, CSS dosyaları, flash. HTTP / 1.1 spesifikasyonu, tarayıcıların tek bir ana bilgisayardan paralel olarak bir web sayfasının en fazla 2 bileşenini indirmesini önerir. Bu bileşenlerin sayısını azaltarak sunucuya gelen HTTP isteklerinin sayısını azaltıyor ve sonuç olarak sayfa yükleme hızını artırıyoruz.
Ancak sunucuya yapılan istek sayısını etkilemeden nasıl azaltılır? dış görünüş sayfalar?
2. CSS dosyalarını sayfanın başına yerleştirin
Sayfa başlığındaki css dosyalarına bağlantıyı yerleştirerek, sayfanın kademeli bir şekilde oluşturulmasını sağlarız, yani. sayfa kademeli olarak yüklenir - önce başlık, ardından üstteki logo, gezinme vb. - ve bu da, kullanıcı için sayfa yüklemenin mükemmel bir göstergesi olarak hizmet eder ve geliştirir Genel izlenim siteden.
CSS dosyalarını sayfanın altına yerleştirmek, birçok tarayıcının sayfayı kademeli olarak oluşturmasını engeller. Bunun nedeni, tarayıcının, sayfayı yükledikten sonra stillerini değiştirebilecek öğeleri yeniden çizmeyi "istemez" olmasıdır. Bu nedenle, her zaman tüm CSS dosyalarınızı HEAD bölümünde sayfanın en üstüne ekleyin.
3. Javascript'i sayfanın sonuna koyun
Javascript dosyalarını sayfanın altına yerleştirerek, tarayıcının önce içeriğin bulunduğu sayfayı yüklemesine ve ancak ondan sonra javascript dosyalarını yüklemeye başlamasına izin veriyoruz. Siteniz zamana ayak uyduruyorsa ve olası tüm etkileşimli "gadget'ları" içeriyorsa, bu javascript dosyalarından birkaçı olabilir ve bunlar birkaç yüz kilobayt ağırlığında olabilir, bu nedenle yüklemeden önce kullanıcının tüm javascipt dosyalarınız yüklenene kadar beklemesini sağlamak ölümcül olabilir. sayfa.
Ayrıca, harici .js dosyaları paralel yüklemeyi engeller. HTTP / 1.1 spesifikasyonu, tarayıcıların tek bir ana bilgisayardan paralel olarak bir web sayfasının en fazla 2 bileşenini indirmesini önerir. Böylece, sitenize ait görseller farklı ana bilgisayarlarda bulunuyorsa, 2'den fazla paralel indirme alırsınız. Ve komut dosyası yüklendiğinde, tarayıcı diğer ana bilgisayarlardan bile başka indirmeleri başlatmaz.
4. CSS ve javascript'i küçültün
Dosya küçültme, dosya boyutunu küçültmek ve yüklemesini hızlandırmak için gerekli olmayan tüm simgelerin koddan kaldırılmasıdır. Küçültülmüş dosyada tüm yorumlar ve önemsiz boşluklar, satır sonları, sekmeler kaldırılır. Burada her şey basit. Dosya boyutu ne kadar küçük olursa, tarayıcının onu indirmesi o kadar az zaman alır. Ve CSS kodunu sıkıştırmaya ve optimize etmeye yönelik bu 24 çevrimiçi hizmet, kodunuzu en aza indirmenize yardımcı olacaktır.
5. Paralel indirmeler için alt alan adlarını kullanın
Yukarıda da belirttiğim gibi HTTP/1.1 spesifikasyonuna göre tarayıcılar aynı anda yüklenen site bileşenlerinin sayısı ile sınırlıdır yani bir ana bilgisayardan 2'den fazla bileşen yoktur. Bu nedenle, sitenizde çok fazla grafik varsa, onu ayrı bir alt alana veya alt alanlara yerleştirmek daha iyidir. Sizin için aynı sunucu olacak, ancak tarayıcı için farklı olacaktır. Ne kadar çok alt alan oluşturursanız, o kadar çok daha fazla dosya tarayıcı aynı anda indirebilecek ve sitenin tüm sayfası o kadar hızlı yüklenecektir. Sadece resimlerin adresini yenisiyle değiştirmeniz gerekiyor. Çok basit ama etkili bir yol.
6. Tarayıcı önbelleğini kullanın
Önbelleğe alma, büyük ölçüde JavaScript ve CSS'ye dayanan modern web siteleri için giderek daha önemli hale geliyor. Gerçek şu ki, bir ziyaretçi sitenizi ilk kez ziyaret ettiğinde, tarayıcı tüm javascript ve css dosyalarını yükler, ayrıca tüm grafikleri ve flash'ı yükler, ancak Expires HTTP başlığını doğru ayarlayarak sayfa bileşenlerini önbelleğe alınabilir hale getirirsiniz. Böylece, bir ziyaretçi sitenizi tekrar ziyaret ettiğinde veya sitenizin bir sonraki sayfasına gittiğinde, bazı gerekli dosyalar ve tarayıcının bunları tekrar indirmesine gerek yoktur. Dolayısıyla site yükleme hızındaki kazanç.
Bu nedenle, Expires HTTP başlığını mümkün olan her yerde, birkaç gün hatta aylar öncesinden gösterin. Apache web sunucusunun önerilere karşılık gelen Expires HTTP başlıklarını göndermesi için sitenin kök klasöründe bulunan .htaccess dosyasına aşağıdaki satırları eklemeniz gerekir:
Apache Web sunucusu yapılandırma dosyasının bu parçacığı, mod_expires modülünü kontrol eder ve mod_expires varsa, yukarıdaki nesneleri ayarlayan HTTP Expires başlıklarının, ilk yüklendikleri zamandan itibaren bir yıl boyunca tarayıcıda ve proxy önbelleğinde tutulmasını sağlar. Tarayıcı önbelleği için bu ömrü ayarladıktan sonra dosyaları güncellemek zor olabilir. Bu nedenle, css veya javascript dosyasının içeriğini değiştirdiyseniz ve bu değişikliklerin tarayıcı önbelleğinde güncellenmesini istiyorsanız, dosyanın adını değiştirmeniz gerekir. Genellikle dosyanın sürümü dosya adına eklenir, örneğin: style.v1.css
7. Popüler JavaScript kitaplıklarını indirmek için CDN kullanın
Siteniz jQuery gibi popüler bir javascript çerçevesi kullanıyorsa, onu bağlamak için bir CDN kullanmak daha iyidir.
8. Resimlerinizi optimize edin
Görselleriniz için uygun formatı belirlemeniz gerekmektedir. Yanlış görüntü formatının seçilmesi dosya boyutunu önemli ölçüde artırabilir.
- GIF'ler, logo gibi çok renkli görüntüler için idealdir.
- JPEG - ayrıntılı görüntüler için harika büyük miktar resimler gibi renkler.
- Şeffaflık ile yüksek kaliteli bir görüntüye ihtiyacınız olduğunda PNG sizin seçiminizdir.
Burda biraz var çevrimiçi hizmetler görüntüleri optimize etmek için:
9. Görüntüleri ölçeklendirmeyin
Etiketin genişlik ve yükseklik niteliklerini veya CSS kullanarak resmi yeniden boyutlandırmayın. Bu da sayfa yükleme hızını olumsuz etkiler. 500x500px boyutunda bir resminiz varsa ve siteye 100x100px boyutunda bir resim eklemek istiyorsanız, orijinal resmi Photoshop veya başka bir grafik düzenleyici kullanarak yeniden boyutlandırmak daha iyidir. Resmin ağırlığı ne kadar düşükse, yüklenmesi o kadar az zaman alacaktır.
10. Gzip sıkıştırmasını kullanın
Araştırmalar gzip sıkıştırmasının Metin dosyası Vakaların% 95-98'inde "anında", dosyayı tarayıcıya aktarma süresini kısaltmanıza olanak tanır. Dosyaların arşivlenmiş kopyalarını sunucuda saklarsanız (bir proxy sunucusunun belleğinde veya sadece bir diskte), genel durumda bağlantı 3-4 kat daha hızlı serbest bırakılabilir.
HTTP / 1.1 ile başlayarak, web istemcileri HTTP isteğinde Kabul-Kodlama başlığını ayarlayarak hangi sıkıştırma türlerini desteklediklerini belirtir.
Kabul-Kodlama: gzip, deflate
Web sunucusu istekte böyle bir başlık görürse, istemci tarafından listelenen yöntemlerden birini kullanarak yanıtı sıkıştırabilir. Content-Encoding başlığını kullanarak bir yanıt yayınlarken, sunucu istemciye yanıtı sıkıştırmak için hangi yöntemin kullanıldığını bildirir.
İçerik Kodlaması: gzip
Bu şekilde aktarılan veriler, orijinalinden yaklaşık 5 kat daha azdır ve bu, dağıtımlarını önemli ölçüde hızlandırır. Ancak burada bir dezavantaj var: web sunucusu üzerindeki yük artıyor. Ancak sunucuyla ilgili sorun her zaman çözülebilir. O yüzden buna dikkat etmeyelim.
Sitenizde GZIP sıkıştırmasını etkinleştirmek için .htaccess dosyasına aşağıdaki kod satırlarını yazmanız gerekir:
Eğer Bu taraftançalıştı, sonra harika, değilse, aşağıdaki kodu deneyebilirsiniz:
Ama yine, verilen kod tüm sunucularda çalışmaz, bu nedenle barındırma sağlayıcınızın destek servisine başvurmanız ve bu sorunu netleştirmeniz daha iyidir.
Aslında sana söylemek istediğim tek şey buydu. Bu yazıda, bir web sayfasını yükleme hızını artırmak için tüm ana istemci tarafı optimizasyon yöntemlerini listelemeye çalıştım. İstemci optimizasyonuna ek olarak, sunucu optimizasyonu da vardır. Ancak bu zaten ayrı bir makalenin konusu.
Bir şeyi kaçırdıysanız veya eklemek istediğiniz bir şey varsa - bu yazının altındaki yorumlara düşüncelerinizi yazın. Dikkatiniz için teşekkürler!
Yavaş bir siteyi kimse sevmez - ne kullanıcılar ne de arama motorları. Mevcut internet hızı ile insanlar artık bir sayfanın yüklenmesi için uzun süre beklemeye hazır değil. Bu, beklemenin kaçınılmaz olduğu bir çevirmeli bağlantı değildir. Ve arama sonuçlarının kalitesi için savaşan arama motorları, kullanıcılara kötü (bu durumda yavaş) siteler vermek istemiyor. Bu nedenle, diğer her şey eşit olduğunda, yavaş bir site, arama sonuçlarında daha hızlı rakiplerinden daha düşük olacaktır.
Normal indirme hızı nedir
Ne kadar hızlı o kadar iyi. Ancak sayfa içeriğinin ana gövdesinin yüklenmesi için ortalama 2-3 saniye oldukça normaldir.
İndirme hızını ne belirler?
Sitenin yüklenmesiyle ilgili iki taraf vardır - kullanıcının tarayıcısı ve site dosyalarının fiziksel olarak bulunduğu sunucu. Bu taraflar arasında veri alışverişi yapılır.
Site yüklemesi, her iki taraftaki ve aradaki sorunlar nedeniyle yavaşlayabilir.
- Yavaş sunucu: eksik olabilir rasgele erişim belleği veya normal bir bilgisayar gibi bir işlemcideki çekirdekler.
- Yavaş site motoru (CMS): Kod, performansı dikkate alınmadan deneyimsiz programcılar tarafından yazılmışsa.
- Sunucu kullanıcıdan uzakta: örneğin, site dosyalarının bulunduğu sunucu fiziksel olarak Moskova'da bulunuyor ve siteye Vladivostok'tan bir kullanıcı tarafından erişiliyor.
- Çok sayıda dosya: Sayfayı görüntülemek için tarayıcının çok sayıda resim, dosya, stil, komut dosyası ve yazı tipi yüklemesi gerekir.
- Ağır dosyalar: Ayrıca bu dosyalar ağırdır.
Site hızını optimize etmeye yönelik tüm adımlar, bu sorunları ortadan kaldırmaya yöneliktir.
Site hızı nasıl kontrol edilir
Birçok çevrimiçi web sitesi hız testi hizmetinden Google'ın PageSpeed'i tartışmasız en popüler olanıdır. Onunla çalışmak kolaydır - site adresini belirtiriz ve "Analiz et" düğmesine basarız.
Sonuç olarak, aşağıdaki göstergeleri göreceğiz (bilgisayarlar ve mobil cihazlar için ayrı ayrı):
- Ne zaman sonra tarayıcı sunucudan bir yanıt alır ve sayfa içeriğini oluşturmaya başlar (FCP - First Contentful Paint).
- Kullanıcının tarayıcıdaki ana içeriği görmesi ne kadar sürer (DCL - DOM Content Loaded).
- Sitenin yükleme hızı açısından ne kadar optimize olduğu.
- Optimizasyon için özel öneriler. "Nasıl düzeltilir" bağlantılarına tıklayarak, bir şeyler yapmanız gereken (esas olarak sıkıştırmak) sorunlu görüntülerin ve dosyaların adreslerini görüyoruz.
Hem “Sayfa Hızı” bölümünde hem de “Optimizasyon” bölümünde yeşil bölgeye girmeniz önerilir.
Bir tane daha İyi hizmet bununla birlikte, indirme hızını kontrol etmek için İngilizce - Pingdom. Ayırt edici özellik- böyle güzel grafikler (şelale denir) hangi dosyaların, hangi sırayla ve ne kadar süreyle yüklendiğini gösterir:
Ve şimdi konuya:
Web sitenizi nasıl hızlandırırsınız
Adım 1. Görüntü optimizasyonu
Optimize edilmemiş görseller sitenin "en zor" kısmıdır. Bu nedenle, resimlerle çalışmak hızda önemli bir artış sağlayabilir.
Neye bakıyoruz:
Resim boyutu (genişlik ve yükseklik)
Ürünü çektiyseniz ve yaklaşık 5000 piksel genişliğinde fotoğraflar aldıysanız, genişliği güvenle 1600'e düşürebilirsiniz, çoğu durumda bu yeterli olacaktır. Bir ürünü "büyüteç" ile görüntüleyebileceğiniz siteler (çoğunlukla çevrimiçi mağazalar) bir istisna olacaktır, ancak orada bile büyütülmüş resim hemen yüklenmez, ancak yalnızca bir kişi bu aracı kullanmaya karar verirse.
Görüntü ağırlığı (kilobayt)
Kameradan alınan görüntüler sitede yayınlanmadan önce hacim olarak sıkıştırılabilir (ve olmalıdır). Bunu Photoshop'ta (veya başka bir görüntü düzenleyicide) veya TinyPNG veya Optimizilla gibi çevrimiçi hizmetler aracılığıyla yaparlar.
Büyük resimler için önizleme
Ürünlerin (veya tamamlanmış işlerin) fotoğrafları varsa ve bunların listesini içeren bir sayfanız varsa, küçük önizlemeler (küçük resimler) yapmak akıllıca olacaktır. Ardından ürün, eser veya fotoğraf listesi daha hızlı yüklenir.
Örneğin, Sportmaster ürün resimlerini üç versiyonda kullanır:
Ürün listesi için resim (7 Kb ağırlığında)
Ürün kartı için resim (18 Kb ağırlığında)
Ürünü "büyüteç" ile görüntülemek için bir resim (942 Kb ağırlığında)
Sportmaster yalnızca orijinal görüntüleri (900 kilobayttan fazla olanlar) kullansaydı, ürün listesinin yüklenmesinin ne kadar süreceğini bir düşünün.
Google PageSpeed aracılığıyla site hızını kontrol ederken, optimize edilmesi gereken hazır bir resim listesi alacaksınız:
Adım 2. Gzip sıkıştırması
Gzip, bir sunucudaki dosyaları sıkıştırmak için bir programdır (bir bilgisayardaki zip arşivlerine benzer). Gzip etkinleştirildiğinde, sunucu, sayfa kodunu tarayıcıya göndermeden önce (ayrıca komut dosyaları, stiller vb. metin bilgisi) önce bu dosyaları arşivleyecektir. Tarayıcı, arşivi alacak ve kullanıcının bilgisayarında paketinden çıkaracaktır. Sıkıştırılmış bilgiler, tarayıcı ve sunucu arasında daha hızlı aktarılacaktır.
Gzip sıkıştırması nasıl etkinleştirilir:
Htaccess dosyasına erişiminiz varsa, dosyaya aşağıdaki satırları ekleyin (dosyanın sonuna):
AddOutputFilterByType DEFLATE metin / html metin / düz metin / css uygulaması / json
AddOutputFilterByType DEFLATE metin / javascript uygulaması / javascript uygulaması / x-javascript
AddOutputFilterByType DEFLATE metin / xml uygulaması / xml metni / x bileşeni
AddOutputFilterByType DEFLATE uygulaması / x-font-ttf uygulaması / x-font-opentype görüntüsü / svg + xml
Apache'niz yoksa Nginx'iniz varsa (kim bilir, o anlayacaktır), o zaman nginx.conf yapılandırma dosyasına ihtiyacınız vardır. Kodu http (...) bölümüne ekleyin ve sunucuyu yeniden başlatın:
gzip açık;
gzip_static açık;
gzip_comp_level 5;
gzip_min_uzunluk 1024;
gzip_proxied herhangi;
gzip_types metni / düz metin / css uygulaması / json uygulaması / x-javascript metni / xml uygulaması / xml uygulaması / xml + rss metni / javascript uygulaması / javascript;
htaccess veya sunucu yapılandırmasına erişiminiz yoksa, gzip sıkıştırmasını etkinleştirmek için ihtiyaç duyduğunuz barındırma desteğine yazın.
Sıkıştırma işe yararsa, PageSpeed kontrolünün sonuçlarında göreceksiniz ("Uygulanan optimizasyon teknikleri" bloğunda):
3. Adım. Tarayıcı tarafında önbelleğe alma
Tarayıcı siteyi yüklediğinde, sitedeki bazı bilgileri (stil dosyaları, komut dosyaları, resimler) kendi belleğine (önbellek, önbellek) kaydeder. Daha sonra bu sitenin diğer sayfalarında veya mevcut sayfaya tekrar girdiğinizde tarayıcı bu bilgiyi tekrar sunucudan istemeyecektir (ki bu uzun bir süredir), ancak sunucudan yükleyecektir. kendi hafızası(hangisi daha hızlı). Bu nedenle, tarayıcı ayarlarında "Önbelleği temizle" düğmeleri vardır ve hepimiz CTRL + F5 klavye kısayolunu biliyoruz (önbelleği temizleyerek sayfayı yenileyin).
Tarayıcı önbelleğini kullanmak için sitenizden ne tür dosyaları önbelleğe kaydedeceğini söylemeniz gerekir. Nasıl yapılır:
Htaccess dosyası aracılığıyla (10 gün boyunca statik dosyaları önbelleğe alıyoruz):
Sona EriyorAktif Açık
ExpiresDefault "erişim artı 10 gün"
ExpiresByType resmi / gif "erişim artı 10 gün"
ExpiresByType resim / jpg "erişim artı 10 gün"
ExpiresByType resmi / jpeg "erişim artı 10 gün"
ExpiresByType resmi / png "erişim artı 10 gün"
ExpiresByType resmi / svg + xml "erişim artı 10 gün"
ExpiresByType metin / css "erişim artı 10 gün"
Nginx için yapılandırmaya ekleyin:
sunucu (
...
konum ~ * \. (jpg | jpeg | gif | png | ico | css | js | txt) $ (
root /var/www/user/data/www/site.ru;
10d sona erer;
}
...
}
Sunucu ayarlarına erişim yoksa, tekrar teknik desteğe yazın ve statik dosyaların önbelleğe alınmasını yapılandırmayı isteyin.
Resim listesine benzer şekilde, Google PageSpeed, önbelleğe almanın yapılandırılmadığı kaynakların bir listesini oluşturur, ancak şunları yapabilirsiniz:
Lütfen önbelleğe almayı yalnızca kendi kaynaklarınız için yapılandırabileceğinizi unutmayın. Örneğin Yandex.Metrica komut dosyaları için önbellek ayarlarını değiştiremezsiniz.
Adım 4. Css ve js dosyalarını küçültün
Küçültme, boşlukları, boş satırları, yorumları kaldırarak, daha kısa değişken adları vb. kullanarak dosya boyutunu küçültmektir. Tarayıcı hangi dosyayla çalışacağına bakmaz - normal veya simge durumuna küçültülmüş ve böyle bir dosya daha hafiftir.
Normal kod örneği:
Hız göstergesi sarmalayıcı (
pozisyon: göreceli;
}
.speedometer-wrapper .list (
üst kenar boşluğu: 80 piksel;
sol kenar boşluğu: -20 piksel;
alt dolgu: 85 piksel;
}
Minimize ettikten sonra:
Hız göstergesi sarmalayıcı (konum: göreli) .speedometer-wrapper .list (üst kenar boşluğu: 80 piksel; sol kenar boşluğu: -20 piksel; alt dolgu: 85 piksel)
Popüler eklentiler ve kitaplıklar (jQuery, Bootstrap, vb.) her zaman komut dosyalarının ve stillerinin en aza indirilmiş sürümlerine sahiptir - bunları siteye ekleyin. Örneğin, normal sürüm jQuery betiği 265 Kb ağırlığında ve sıkıştırılmış versiyonu 85 Kb'dir. Farkı hissediyor musun?
Küçültmenin tek dezavantajı, dosyanın okunabilirliğinin kaybolmasıdır. üzerinde değişiklik yapmanız gerekiyorsa sıkıştırılmış dosya- bunu yapmak zor olacak, bir kişinin böyle bir dosyayla çalışması elverişsizdir (tek bir düz çizgi vardır). Bu nedenle, komut dosyalarınızı küçültmek için genellikle CMS için ek eklentiler kullanılır - siteye yüklemeden önce css ve js dosyalarını otomatik olarak sıkıştırırlar. Aynı zamanda, düzen tasarımcısı dosyaların normal sürümleriyle kolayca çalışabilir.
Sayfa Hızı burada da, boyutu en aza indirilerek azaltılabilecek dosyaların bir listesini dikkatlice gösterir:
Adım 5. Css ve js dosyalarını yükleme sırası
Tarayıcıların, sayfaların en hızlı yüklenmesi için kendi algoritmaları vardır (hiç kimse "yavaş" tarayıcı olarak markalanmak istemez). Bu nedenle, sayfa kodunu aldıktan sonra tarayıcı, dahil edilen dosyalardan hangisini önce indirmeye başlaması gerektiğini bulmaya çalışır. Bazen, tarayıcı sayfadaki bir formun oluşturulmasına zaten ulaştı ve bunun için stilleri olan dosya henüz yüklenmedi - o zaman işleme duracaktır.
Tarayıcının site dosyalarını en uygun şekilde yüklemesi için, tüm stil (css) ve yazı tipi dosyalarının sayfa kodunun başına (etiketinde) eklenmesi önerilir.
) ve tüm komut dosyaları (js) - sayfanın sonunda, kapanış etiketinden önce.
...
rel = "stil sayfası" href = " //fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,kiril"type =" metin / css ">
rel = "stil sayfası" href = "/ inc / dak / style.min.css" type = "text / css">
rel = "stil sayfası" href = "/ css / main.css" type = "metin / css">
...
...
Ardından tarayıcı, işleme için gerekli stilleri yükleyecek ve sayfayı kullanıcıya göstermeye başlayacak ve aynı anda gerekli komut dosyalarını yükleyecektir (bu, daha sonra etkileşimli - kaydırıcıları, sekmeleri vb. sağlayacaktır).
Adım 6. Ekstra eklentiler veya sayaçlar
Bazen sayfaların kodunda, sitede artık kullanılmayan eklentilere veya modüllere bağlantılar bulunur. Örneğin, yerleşim tasarımcısı önce kaydırıcılar için bir eklenti bağladı ve ardından onu yenisiyle değiştirdi, ancak eskisini silmedi. Veya artık bakmadığınız istatistikler olan sayaçlardan kodlar var. Bu "çöpü" koddan çıkardığınızdan emin olun.
Ek komut dosyalarının kullanımını optimize etmeye çalışın. Örneğin, sitenin üç sayfasında kaydırıcılarınız varsa, kaydırıcı için tüm sayfalarda aynı eklentiyi kullanın - her seferinde herhangi bir özel komut dosyası eklemenize gerek yoktur.
Adım 7. CDN'yi Kullanma
Bir CDN (İçerik Dağıtım Ağı), bir ülke veya dünya çapında coğrafi olarak dağıtılmış birçok sunucudan oluşan bir ağdır. Sunucuların her biri, ana sunucudan gelen içeriği çoğaltır (içerik, kullanıcı tarafından ilk istekte çoğaltılır ve bir süre saklanır).
Örneğin Habarovsk'tan bir kullanıcı bir CDN'den bir şey indirmek istediğinde, içeriği ana sunucudan (örneğin Moskova'da olabilir) değil, kullanıcıya en yakın sunucudan (ki bu olabilir) alır. aynı Habarovsk'ta olun). Memleketim geniş, bu nedenle Habarovsk-Khabarovsk talebi, Habarovsk-Moskova talebinden daha hızlı geçecek. Milisaniye cinsinden de olsa, dosya sayısı ve boyutları ile çarpıldığında, bu iyi bir hız artışı sağlayabilir.
Tipik olarak, bir CDN iki durumda kullanılır:
- Üçüncü taraf komut dosyaları yükleniyor. Bunların hepsi aynı jQuery, Bootstrap, Web Fontlarıdır. Örneğin, tarayıcıya bunları kendi sunucularından değil, Google sunucularından, Bootstrap veya diğer CDN'lerden indirmesini söyleyebilirsiniz.
- CDN'lerinizden görüntüleri ve komut dosyalarını indirme. Büyük siteler (Ozon, Avito, vb.), kendi sunucularını veya (daha sık olarak) CDN ağlarının sunucularını, örneğin Google Cloud veya StackPath'i kullanarak kendi CDN'lerini kurar. Bazı CMS, işlevlerine CDN desteğini zaten dahil etmiştir. Örneğin Bitrix'in ücretsiz bir "Web Sitesi Hızlandırma (CDN)" modülü vardır.
Adım 8. http isteklerinin sayısını azaltmak
Tarayıcının sunucuya daha az istekte bulunması için (ve bunlar http istekleridir), ihtiyaç duyduğu dosya sayısını azaltmanız gerekir. Örneğin, üç ayrı komut dosyanız varsa (kaydırıcı için, kalıcı pencereler ve araç ipuçları için), ardından bunları tek bir dosyada birleştirebilir ve ardından küçültebilirsiniz (4. adıma bakın).
Dosyaları manuel olarak birleştirmek çok uygun olmadığından (gelecekte komut dosyalarından birini değiştirmeniz gerekirse), genellikle otomatik birleştirmelerini ayarlarlar. Çoğu CMS'nin bunun için kendi eklentileri vardır (örneğin, Autoptimize for WordPress).
Tarayıcı için yapılandırılmış önbelleğe alma (3. adım) ve gereksiz komut dosyalarının kaldırılması (6. adım) http isteklerinin sayısını da azaltır.
Adım 9. Yazı tiplerini optimize etme
Sitenizde tutarlı bir yazı tipi kullanmaya çalışın. Bu sadece siteye estetik katmakla kalmayacak, aynı zamanda yazı tiplerini görüntülemek için indirilebilir dosya miktarını da azaltacaktır.
Ayrıca, güncel olmayan biçimlerin kullanımını ortadan kaldırarak dosya sayısını da azaltabilirsiniz. Daha önce her yazı tipi tarayıcılarda doğru görüntülenmesi için eot, ttf, woff, svg formatlarında yükleniyordu. Günümüzde modern tarayıcılar, kendimizi yalnızca iki biçimle sınırlandırmamıza izin veriyor - woff ve woff2.
Alternatif olarak, popüler yazı tipleri Google Yazı Tiplerinden indirilebilir. İlk olarak, sunucunuzdaki yükü alacaktır. İkincisi, yazı tiplerine sahip dosyalar zaten optimize edilmiş olacak, bu sizin omuzlarınızdan Google'a kaydırılıyor (ki bu güzel bir şey).
Adım 10. HTML kodunu küçültmek
Stil dosyalarını ve komut dosyalarını sıkıştırmaya ek olarak (4. adım), sayfanın HTML kodu için küçültmeyi yapılandırabilirsiniz. Bunun uzun sayfalarla alakalı olduğunu düşünüyorum - blog makaleleri, büyük ürün listeleri vb. Yapılandırmak için, CMS'niz için uygun bir eklenti aramalısınız (örneğin, Html Minifier for Joomla).
Adım 11. Sunucu performansını optimize etme
Özel bir sunucunuz varsa (sizin Sistem yöneticisi ayarlarını yönetebilir), parametrelerini yükseltmeyi deneyebilirsiniz. Örneğin, RAM ekleyin veya işlemciyi değiştirin. Ayrıca, sistem yöneticisi sunucunun kendisinde bir "temizlik" gerçekleştirebilir - kullanılmayanları kaldırın ve mevcut modülleri güncelleyin.
Paylaşımlı barındırma durumunda (sunucu ayarlarına erişim olmadan), daha iyiyse daha pahalı tarifelere geçiş yapmayı düşünebilirsiniz. özellikler sunucu.
Adım 12. Komut dosyalarını ve veritabanlarını optimize etme
Web sitesi yükleme aşamalarından biri, sunucu tarafından tarayıcıya vereceği son HTML kodunun oluşturulmasıdır. Bu kod, site motoru (CMS) tarafından oluşturulur. Motor okuma yazma bilmeden yazılmışsa, sayfayı çok uzun süre "toplayabilir", dosyalara ve veritabanlarına gereksiz isteklerde bulunabilir, "yavaş" programlama algoritmaları vb.
Bu nedenle, bir web sitesi için bir CMS seçerken, performansını ve güvenilirliğini kanıtlamış popüler motorlara (Bitrix, Open Cart, WordPress, MODx vb.) bakılması önerilir. Ve bu sistemler (hız açısından da dahil) sürekli olarak iyileştirildiğinden, web sitenizdeki CMS'yi düzenli olarak güncellemelisiniz.
eğim yok
Sitenizin hızlı yüklenmesine özen gösterin. Arama sonuçlarında çok sayıda rakip olduğunu ve siteniz ne kadar hızlı yüklenirse, bir kişinin komşu sekmelerde açmak için o kadar az başka siteye sahip olacağını unutmayın.
Bir sitenin yüklenme hızını optimize etme konusunda yardıma ihtiyacınız varsa - yazın, sitenize bir göz atacağız ve hızlandırmanın mümkün olup olmadığını size söyleyeceğiz.
Site yüklenme süresi, site kullanıcılarının davranışlarını etkileyen en önemli göstergelerden biridir. Anlayalım.
Sayfa yükleme hızının 1 saniye azaltılması şunları gerektirir:
- izlenme sayısında %11 azalma;
- kullanıcı memnuniyet oranında %16 azalma;
- dönüşümde %6'ya kadar azalma.
Aşağıda faiz artışını gösteren bir grafik var kapalı sayfalar sitenin artan yükleme süresi nedeniyle.
Birkaç saniyelik ekstra web sitesi yükleme süresi, ziyaretçilerin ilgisini çekme ve satış yapma şansını azaltır.
KISSmetrics, web sitesi yükleme hızının kullanıcı ve müşteri davranışını nasıl etkilediği üzerine bir araştırma yaptı:
- Kullanıcıların %47'si bir sayfanın 2 saniyeden kısa sürede açılmasını bekliyor;
- Kullanıcıların %40'ı, yüklenmesi 3 saniyeden uzun sürerse siteyi kapatıyor;
- Sitenin kullanılabilirliğinden memnun olmayan alıcıların %79'u, büyük olasılıkla gelecekte siteyi satın almayacak;
- Çevrimiçi alışveriş yapanların %44'ü, tanıdıklarına memnun olmadıkları siteler hakkında bilgi veriyor.
Sitenin daha hızlı yüklenmesi özellikle siteyi mobil cihazlardan ziyaret eden kullanıcılar için önemlidir. Ve o zamandan beri hisse mobil trafik sürekli büyüyor, o zaman mobilde hızlanmaya özel önem verilmelidir.
Mobil internet kullanıcılarının sabrı
Dönüşümü artırmanın bir yolu olarak web sitesi yükleme hızını artırmak
Site yükleme süresi, dönüşümü etkiler. Walmart ağı örneğine bakalım.
Sayfa yükleme süresine karşı dönüşüm oranı
Burada, sayfa yükleme hızı ne kadar yüksek olursa, dönüşüm oranının o kadar yüksek olduğunu görebiliriz.
Walmart, sayfa yükleme sürelerini bir saniye azaltmanın dönüşümleri %2'ye kadar artırabileceğini buldu.
Web sitesi yükleme optimizasyonunun organik trafik üzerindeki etkisi
2010 yılında Google, arama sonuçlarını sıralarken site yükleme hızını dikkate alacağını söyledi.
Bunun nedeni arama motorları bunu yapma ihtiyacı yeterince açıktır. Bir arama motoru size "yavaş" siteler sunuyorsa, muhtemelen daha az kullanırsınız.
Bu nedenle, web sitenizin rekabette daha üst sıralarda yer alması için web sitenizin yüklenme süresini azaltmak önemlidir.
Yukarıdakileri özetleyerek, web sitesi hızlandırmanın aşağıdakilere yol açtığı sonucuna varıyoruz:
- dönüşümde artış;
- hemen çıkma oranında bir azalma (siteyi doğrudan giriş sayfasından terk eden veya sitenin birden fazla sayfasını görüntülemeyen ziyaretçi sayısının yüzdesi);
- arama motorlarında yükseliş
Web sitesi yüklemesini hızlandırmanın 20 yolu
1. HTTP isteklerinin sayısını azaltın
Yahoo'nun araştırmasına göre, bir sayfanın yüklendiği zamanın çoğu, görüntüleri, stil dosyalarını ve komut dosyalarını yüklemek için harcanıyor.
Bu tür her bir dosyayı indirmek için ayrı bir HTTP isteği oluşturulur. Bu tür istekler ne kadar fazla olursa, sayfanın tamamen yüklenmesi o kadar uzun sürer.
Kaç tane HTTP isteğinin oluşturulduğunu kontrol etmek çok kolaydır - tarayıcı geliştirici panelini kullanın.
Bir örnek kullanarak sürece bakalım google tarayıcı Krom.
Analiz edilen sayfaya gittiğimiz ilk adım, sayfanın herhangi bir boş alanına sağ tıklayın ve seçin bağlam menüsü Kodu Görüntüle'ye bakın. Ekranın alt kısmında Chrome DevTools paneli açılacaktır. Ağ sekmesine gidin ve sayfayı yeniden yükleyin. Tüm isteklerin, yanıt durumlarının ve dosya yükleme sürelerinin bir listesini görüyoruz.
2. CSS ve JS dosyalarını birleştirin ve küçültün
Artık kaç tane istek üretildiğini bildiğimize göre, onları azaltmaya başlayabiliriz.
İstek sayısını azaltmanın en kolay yolu HTML, CSS ve JavaScript dosyalarını birleştirip küçültmektir (sıkıştırmaktır). Bu görevi belirlemenin en doğru yolu geliştiricilere yöneliktir. Bu mümkün değilse, kendiniz yapmayı deneyebilirsiniz.
herhangi birini açarız Metin düzeltici, kullanılan tüm css dosyalarının içeriğini şablona dahil edildikleri sırayla ekliyoruz. Ardından, herhangi bir küçültme hizmetini (örneğin, CSSminifier) kullanarak kodu sıkıştırın.
Sonuç olarak, istek sayısı azalır ve yorumlayıcı için önemsiz olan karakterler (boşluklar, sekmeler, satır sonları vb.) son koddan çıkarılır.
3. Eşzamansız CSS ve JS yüklemesi uygulayın
Hepimiz bir etiket ekleyerek bir CSS dosyasını HTML'ye yüklemeye alışkınız
Ancak, tüm kod parçaları o kadar kritik değildir ki hemen yüklenmeleri gerekir. Örneğin, sitede nadiren kullanılan bir ürün karşılaştırma bileşeni vardır. Kullanıcılar bu tür işlevleri kullanmak istediklerinde, stilleri ve js kodunu doğrudan yüklemek mantıklıdır.
CSS ve JS'nin eşzamansız yüklenmesi genellikle yalnızca profesyonel geliştiriciler tarafından yapılır. Yalnızca, rel özniteliğinin önyükleme değerini onload özniteliği ile birlikte kullanmaya ya da stilleri bir js betiği ile yüklemeye bakmanız gerektiğini not ediyoruz.
4. Javascript kodunun tembel yüklenmesini yapılandırın
Javascript kodunun tembel yüklenmesinin ne olduğunu anlamak için önce bunun genellikle nasıl olduğunu analiz edelim. Standart modda, javascript dosyaları, tüm bu dosyalar alınana ve yürütülene kadar bir HTML belgesinin ayrıştırılmasını kesintiye uğratır.
Genellikle, özellikle önemli olmayan bazı widget'lar eklememiz gerekir. sosyal ağlar sitenin altbilgisine. Sayfada hemen veya birkaç saniye sonra görünmesi bizim için önemli değil.
Böyle bir betiği tembel yüklemeyi veya daha doğrusu işlemeyi uygulamak için, etikete defer niteliğini kaydetmemiz yeterlidir.