GirişSayfaların daha hızlı yüklenmesi nasıl yapılır. Sayfa indirme zamanını hızlandırmanın beş yolu
İyi günler! Kesinlikle, site sayfasının indirme hızını arttırmanın, sitenin çok uzun süre yüklenmesi için ve kullanıcıların tam önyüklemesini beklemeden, siteyi bırakmanın nedeni için zamana gelir. Günümüzün kaydında, site yükleme hızını optimize etmek için kullanmak istediğiniz araçlar hakkında daha fazla ayrıntı söyleyeceğim ve hangi anahtar noktaları sayfalara müdahale edebilir. Ek olarak, hangi hizmetleri sitenin indirme hızını ölçebileceğinizle de öğreneceksiniz.
Site sayfasının hızını ölçmek için hizmetler
Site sayfasının indirme hızını kontrol etmek için kullandığım çeşitli hizmetlerden, hizmeti sevdim: bu, örneğin her site detayını ve gerekli sayfanın hızını açıkça gösteren Piningdom.com, ana Sayfa Blog sitesi, ayarlarda seçildiğinde - "Amsterdam, Hollanda", site indirme hızı 1.08 saniye olacak, bu da kötü değil. 
Aşağıdakiler, bağlantı hızı hizmeti, bekleme ve üçüncü taraf sunucular, istenen veriler ve dahili sunucuya yanıt olarak sağlanan tüm gerekli bilgilere verilir. 
Verilen verilerden, en yavaş anları belirleyebilir ve bu yerleri etkileyen site sayfalarının indirme hızını iyileştirebilirsiniz. Bu, Google - Google PageSpeed \u200b\u200bInsights tarafından geliştirilen harika bir araca yardımcı olacaktır.
Google PagesPeed kullanarak site sayfalarının indirme hızını optimize ediyoruz
Aslında, her şey ilk bakışta göründüğünden daha kolay, ama anı kutlamak istiyorum google kullan PageSeed Insights, site sayfasının indirme hızını kötüleştirebilecek tüm anların görünmüyor, ancak hizmetin isteğinde tüm öğeleri gerçekleştirerek oldukça uygun olacak, hızı önemli ölçüde iyileştirebilir. Site indirme hızını etkileyen faktörlerin daha ayrıntılı bir analizi için, Mozilla Firefox tarayıcısını Firebug ekle ve Firefox için PageSPeed eklentisi ile kullanmanız gerekir.
Neden Firefox? Firefox için, bu eklenti daha uygun görünüyor, Site sayfaları eklentisini analiz ettikten sonra görüntülenen içerik bile daha kompakt olduğundan, Firefox'u kullanarak sayfaları analiz etmenizi tavsiye ederim.
Bu nedenle, eklentiyi taktıktan ve sağ üst köşeye firebug eklendikten sonra, böceğin görüntüsüne sahip bir düğme görünecektir.
Siteye git, yürütmek istediğiniz analiz, böceği ile düğmeye tıklayın. Pencereden önce açılacak, son sekmesinin bir düğmeye sahip bir düğmeye sahip bir pencere olarak adlandırılacak. Sayfa hızı. Sekmeye tıkladıktan sonra. Performansı analiz eder.Düğmeye tıklamanız ve sayfanın analiz edilinceye kadar beklemelisiniz. Ayrıca, site sayfalarının indirme hızını iyileştirmek için yürütülmek istediğiniz tüm önerilerin bir listesi görüneceksiniz. Blog sayfalarının içeriğinde kısa bir manipülasyondan sonra, LACKESSPEED \u003d 94'teki sonuçları 100 olası noktadan elde ettim, bu da oldukça iyi, elbette olabilir ve sonucu iyileştirebilir, ancak şu ana kadar önemli değil, ana Şey, tüm ana müdahale anlarının ortadan kaldırılmasıdır. 
Ancak yeşil keneler, her şeyin sırayla olduğunu, göstergeyi aslında iyileştirebilir ve 94'ten fazla değere ulaşabilirsiniz.
Öyleyse, şimdi Site sayfalarının indirme hızını optimize etmek için gerçekleştirmek istediğiniz temel önerileri düşünelim:
Sıkıştırma açmak - XML \u200b\u200bsıkıştırmasını, CSS, JS ve HTML'yi GZIP formatına yapılandırmak için, FTP Site sunucusunda File.HTAccess'e aşağıdaki kodu eklemeniz gerekir:
Doğru oranlara sahip görüntüler sağlayın - CSS dosyalarında, CSS kullanarak değiştirmek yerine, görüntüler için sabit bir oran belirlemelisiniz.
Tarayıcı önbelleğini kullanın, burada önbellek validatörü ve öğe yapılır. Önbellek validatorunu belirtin - Tarayıcının yanında önbellekleme kullanmak gerekir, yani. Müşteri gerekli ekle v.htaccess aşağıdaki satırlar Kod:
Kodun bu bölümünde, 7 gün boyunca önbellekleme uygulanır, Sitenizin öğelerinin sık sık güncellenmesi durumunda, her zaman arama motorlarının gereksinimlerini gerçekleştirmeniz gerektiğini unutmayın, her biri için önbellekleme yapılandırmanız gerekir.
Görüntüleri optimize etmek - Sayfaların boyutunu azaltmak için ve buna göre, indirme hızını arttırın, sitenin tüm görüntülerini FTP sunucusundan kopyalama ilkesini kullanmanız gerekecektir. HTTP http: / http: / /www.smushit.com/, prosedür yeterince uzundur Servis sitenizde görüntü sayısı binlerce kişiyi değiştirir. Bu hatalar olabilir gif dosyaları JPG veya PNG'de kaydırılacak ve dosya adı değişir, dikkate alınması gerekir şu anGörüntüler varsa gIF formatıAyrıca, bunları ayrı olarak yüklemek ve ardından manuel olarak kuralmanız daha iyidir. Öneriler:
- Her paketten sonra, sayfayı güncelleyin, aksi takdirde görüntüler geçerli listeye eklenecektir.
- Tüm optimize edilmiş dosyalar bu hizmetten bir arşiv tarafından indirilir, bu nedenle sunucuya aşırı yüklenmeden önce arşivden kaldırılması gerekir.
Java Script Sözdizimi Analizi Biriktirme - Kodu kullanarak bir süre yükleme süresi için bir komut dosyasını çalıştırabilirsiniz:
JS Scripts ve CSS Stillerini Azaltın - Servisi kullanmanız gerekir: http://www.refresh-sf.com/yui/, koddaki ekstra boşlukları kaldırır, böylece dosyanın konumunu kaydeder.
HTML'yi azaltın - azaltmak Html sayfaları Belirli durumlarda atlanabilen ekstra boşlukları ve yardımcı karakterleri kaldırabilirsiniz.
Görüntü boyutlarını belirtin - Tüm görüntüler için, boyutları açıklanmalı, görüntü boyutunu ayarlamanıza gerek yoktur, aksi halde görüntü ölçeklenebilir ya da CMS, görüntüler için kendi kendine reçetelenen CSS stillerine başvuracaklar, böylece boyutlarını arttırır.
Başlığı belirtin Değişim: Kabul Etme - Önbellekleme açılan tüm dosyalar başlığı döndürmelidir, FTP sunucusunda V.HTAccess kodunu eklemek için yeterlidir:
S. Dosyalara gelen istek sayısını azaltmak için, CSS stillerinin sayısını azaltmak ve bunları 1 dosyada birleştirmeniz gerekir, JS komut dosyaları ideal olarak 1 dosyaya birleştirmeniz gerekir.
Sonuç
Verilen tavsiyeler listesi, sitenin sayfasını indirmenin hızını arttırmaya yardımcı olacaktır, ancak bazı noktalarda, örneğin Sunucu Araçları tarafından GZIP sıkıştırmasını kullanırken ve önbellekleme kullanıldığında sunucudaki yükü artırabileceğini unutmayın. Tarayıcı tarafında (istemci), optimizasyon aşamalarına yaklaşmak gerekli olacaktır. Diğer taraf ve hazırlık gzip dosyaları Yalnız ve v.htaccess uygun işleme koydu 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.
Sayfa yükleme hızının iyileştirilmesinin SEO site üzerinde olumlu bir etkisi olduğunu ve diğer şeylerin eşit olması durumunda, siteniz hızla kazanırsa, rakiplerden daha yüksek olacaktır.
Sitenin sayfalarının hızını optimize etmede size başarılar!
Bence sayfanın indirme hızının birçok faktörü etkilediği bir sır olmadığını düşünüyorum. Birisi farkında değilse, kısa bir süre sonra, indirme hızının yalnızca ziyaretçinin siteniz yüklendiğinde, aynı zamanda SEO optimizasyonunda da bekleyeceğini de söyleyecektir. Sonuçta, bugün, sıralama siteleri, sayfanın indirme hızını dikkate almaya başladığında birçok arama motoru. Bu nedenle, siteniz daha hızlı artırılacak, daha fazla ziyaretçi arama motorlarından ve bu nedenle ve bu nedenle daha fazla para kazanabilirsiniz.
Bu nedenle, bu makalede, web sayfasının ve sitenin hızını bir bütün olarak nasıl artırabileceğiniz için ilk 10 ipucunu birleştirmeye karar verdim. Makale, dahi olduğunu iddia etmiyor ve yeniler için tasarlandı.
O zaman hadi gidelim:
1. HTTP isteklerinin sayısını azaltın
Sayfanın% 80'i, sayfa bileşenlerini indirmeye odaklanmıştır: Scriptler, Fotoğraflar, CSS dosyaları, Flash. HTTP / 1.1 şartnamesi, tarayıcıların bir ana bilgisayardan en fazla 2 web sayfası bileşenini paralel olarak yüklendiğini tavsiye eder. Bu bileşenlerin sayısını azaltarak, HTTP sorgularının sayısını sunucuya ve sonucun sayfa yükleme hızını nasıl artırdığını azaltıyoruz.
Ancak, aynı zamanda sunucuya istek sayısını etkilemeden nasıl azaltılır? görünüm Sayfalar?
2. CSS dosyalarını sayfanın başına yerleştirin.
Sayfa başlığında CSS dosyalarına bağlanma Sayfanın kademeli bir şekilde oluşturulduğunu, yani Sayfa yavaş yavaş yüklenecek - ilk başlık, sonra üst katta, navigasyon vb. - ve bu da kullanıcı için mükemmel bir sayfa yükleme göstergesi olarak hizmet eder ve geliştirir genel izlenim Siteden.
CSS dosyalarını sayfanın altına yerleştirirseniz, birçok tarayıcının sayfayı yavaş yavaş oluşturmasına izin vermez. Bu, tarayıcının, sayfayı yükledikten sonra stilin değişebileceği öğeleri yeniden çizmek için "istemiyor" gerçeğiyle açıklanmaktadır. Böylece tüm CSS dosyalarınız her zaman baş bölümündeki sayfanın en üstüne bağlanır.
3. Javascript'i sayfanın sonunda yerleştirin.
PLYWOW JAVASCRIPT dosyaları Sayfanın altına, tarayıcının önce içeriğe sahip bir sayfa yüklemesine izin veririz ve ardından JavaScript dosyalarını indirmeye başlar. Siteniz zamanlardan devam ederse ve olası tüm etkileşimli "saçmalıklar" içeriyorsa, bu JavaScript dosyaları bir miktar ve tartmak olabilir, bu yüzden sayfayı indirmeden önce, kullanıcıyı tüm Javasppt dosyalarınız yükleninceye kadar beklemeye zorlamak için .
Ek olarak, harici .js dosyaları paralel yüklemeyi engeller. HTTP / 1.1 şartnamesi, tarayıcıların bir ana bilgisayardan en fazla 2 web sayfası bileşenini paralel olarak yüklendiğini tavsiye eder. Bu nedenle, sitenizin resimleri farklı ana bilgisayarlarda bulunursa, 2'den fazla paralel indirme alacaksınız. Komut dosyası yüklendiğinde, tarayıcı diğer ana bilgisayarlardan bile başka bir indirme işlemine başlamaz.
4. CSS ve Javascript'i en aza indirin
Dosya Minimizasyonu, dosyanın miktarını azaltmak ve indirmesini hızlandırmak için tüm önemsiz karakterlerin koddaki bir şekilde kaldırılmasıdır. En aza indirilmiş bir dosyada, tüm yorumlar ve önemsiz boşluklar, dize nakli, sekmeler, sekmeler silinir. Her şey burada basit. Dosyanın boyutu ne kadar küçükse, indirimdeki tarayıcıya ne kadar az gerekli olacaktır. Ve kodunuzu en aza indirmek için, bu 24 çevrimiçi hizmetin sıkıştırma ve CSS optimizasyonu kodu için yardımcı olacaktır.
5. Paralel indirme için alt alanları kullanın
Yukarıda söylediğim gibi, HTTP / 1.1 şartnamesine göre, kısıtlamalar sitenin aynı anda indirilebilir bileşenlerinin sayısına, yani bir ana bilgisayardan 2'den fazla bileşen yoktur. Bu nedenle, sitenizde çok sayıda grafik varsa, ayrı bir alt etki alanı veya alt alanda almak daha iyidir. Sizin için aynı sunucu olacak ve bir tarayıcı için - farklı. Ne kadar fazla alt alan oluşturursunuz daha fazla dosya Tarayıcı aynı anda indirebilecek ve sitenin tüm sayfasının tüm sayfasını başlatabilecek. Resimlerin adresini yalnızca yenisine değiştirebilirsiniz. Çok basit, ama etkili bir yol.
6. Tarayıcı önbelleğini kullanın
Keching, Javascript ve CSS'nin kapsamlı bağlantısını kullanan modern web siteleri için son derece önemli hale gelir. Gerçek şu ki, ziyaretçi ilk kez sitenize gittiğinde, tarayıcı tüm JavaScript ve CSS dosyalarını indirir, ayrıca programın tamamını ve flaşı yükler, ancak HTTP başlığının sona ermesini doğru şekilde ayarlar, sayfanın bileşenlerini yapacaksınız önbelleğe alındı. Böylece, ziyaretçi sitenize tekrar girdiğinde veya sitenizin bir sonraki sayfasına gidince, tarayıcısının önbelleğinde biraz olacak dosyalar Tarayıcının tekrar yüklemesi gerekmeyecektir. Buradan ve site yükleme hızını kazanma.
Bu nedenle, birkaç gün veya hatta aylar boyunca mümkün olduğu her yerde sona eren HTTP başlığını sergileyin. Apache Web sunucusunun uygun şekilde sona ermesi için HTTP başlık önerilerini sürdürmek için, sitenin kök klasöründe bulunan File.HTAccess'e, aşağıdaki satırlara eklenmesi gerekir:
Bu Apache Web Sunucusu yapılandırma parçası, Mod_expires modülünü kontrol eder ve Mod_Expires modülü mevcutsa, yukarıda bir yıla eşit olan tarayıcıların ve proxy sunucularının önbelleğinde listelenen nesnelerin raf ömrünü belirleyen HTTP başlıklarının geri dönüşünü içerir. ilk önyükleme zamanı. Tarayıcı önbelleğinin böyle bir ömrünü kurarak, 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 dosya adı, örneğin aşağıdaki gibidir: styles.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, CDN'yi bağlamak için kullanmak daha iyidir.
8. Resimlerinizi optimize edin
Resimleriniz için uygun formatı belirlemek gerekir. Yanlış bir görüntü formatını seçme, dosya boyutunu önemli ölçüde artırabilir.
- GIF - Logo gibi çeşitli renklerle görüntüler için idealdir.
- JPEG - ayrıntılı görüntüler için harika büyük miktar Fotoğraflar gibi çiçekler.
- PNG, saydamlığa sahip yüksek kaliteli bir görüntüye ihtiyacınız olduğunda sizin seçiminizdir.
İşte birkaç Çevrimiçi hizmetler Görüntüleri optimize etmek için:
9. Görüntüleri ölçeklemeyin
Genişlik ve yükseklik özelliklerini kullanarak veya CSS kullanarak görüntü boyutunu değiştirmeyin. Bu aynı zamanda sayfanın indirme hızını olumsuz yönde etkiler. 500x500px boyutunun bir görüntüsüne sahipseniz ve 100x100px boyutunda bir görüntü istediğiniz siteye eklerseniz, Photoshop grafik düzenleyicisini veya başka herhangi birinin kullanıldığı orijinal resmin boyutunu değiştirmek daha iyidir. Resmin daha küçük ağırlığı, indirmesi için daha az zaman gereklidir.
10. Gzip sıkıştırma kullanın
Gösterildiği gibi, GZIP sıkıştırma metin dosyası "Anında" vakaların% 95-98'inde dosyayı tarayıcıya aktarma süresini azaltır. Sunucudaki dosyaların arşivlenmiş kopyalarını saklarsanız (proxy-sunucu hafızasında veya sadece diskte), geneldeki bağlantı 3-4 kat daha hızlı serbest bırakılabilir.
HTTP / 1.1 protokol sürümünden başlayarak, Web istemcileri, kabul-kodlama başlığını HTTP isteğine takarak hangi sıkıştırma türlerini desteklediklerini gösterir.
Kabul etme kodlaması: GZIP, Deflate
Web sunucusu sorguda böyle bir başlığı görürse, müşteri tarafından listelenen yöntemlerden biri tarafından bir yanıt sıkıştırması uygulayabilir. Bir cevap verirken, içerik kodlama başlığı aracılığıyla sunucu, müşteriye cevabın nasıl sıkıştırıldığını bildirir.
İçerik kodlaması: Gzip
Bu şekilde iletilen veriler 5 katından azdır ve teslimatlarını önemli ölçüde hızlandırır. Bununla birlikte, bir dezavantajı var: Web sunucusundaki yük artar. Ancak sunucudaki sorun her zaman çözülebilir. Bu yüzden buna dikkat etmeyeceğiz.
Web sitenizde GZIP sıkıştırmasını etkinleştirmek için, aşağıdaki kod satırlarını kaydetmek için Dosya.Htaccess'de gereklidir:
Eğer bir bu method Çalıştı, o zaman mükemmel, değilse, bunu burada deneyebilirsin kod:
Ama yine, bu kod Tüm sunucularda değil, barındırma sağlayıcınızın desteğiyle iletişim kurmak ve bu soruyu netleştirmek daha iyidir.
Aslında, her şey söylemek istediğim. Bu makalede, web sayfasının önyükleme hızını artırmak için müşteri optimizasyonunun tüm temel yollarını listelemeyi denedim. Müşteri optimizasyonuna ek olarak, sunucu optimizasyonu da var. Ancak bu, ayrı bir makalenin konusudur.
Bir şeyi kaçırdıysanız veya ekleyecek bir şeyiniz varsa - Fikrinizi bu yazıya aşağıdaki yorumlarda yazın. Dikkatiniz için teşekkürler!
Yavaş site kimseyi sevmiyor - ne kullananlar ne de arama motorları. İnternetin şu anki hızıyla, insanlar artık sayfanın indirmesini beklemeye hazır değil. Bu, beklemenin kaçınılmaz olduğu bir çevirmeli bağlantı değil. Ve arama motorları, arama sonuçlarının kalitesi için mücadele, kötü kullanıcılar (bu durumda, yavaş) siteler vermek istemiyorum. Bu nedenle, diğer şeylerin eşit olması durumunda, yavaş site iadesi daha alçakta olan rakiplerinden daha düşük olacaktır.
Norm ne kadar yükleme hızı olarak kabul edilir?
Daha hızlı daha iyi. Ancak ortalama olarak, sayfa içeriğinin ana kısmını indirmek için 2-3 saniye oldukça normaldir.
İndirme hızının bağlı olduğu
İndirme sitesinde, iki taraf katılıyor - bir kullanıcı tarayıcısı ve site dosyalarının fiziksel olarak bulunduğu bir sunucu. Veri değişimi bu taraflar arasında gerçekleşir.
Thug sitesi yükleme, tarafların her birinde ve aralarında aralarında sorun olabilir.
- Yavaş sunucu: tıkalı olmayabilir rasgele erişim belleği Veya işlemciye normal bir bilgisayar gibi çekirdekler.
- Yavaş Site Engine (CMS): Kod, hızını dikkate almadan deneyimsiz programcılara yazılmışsa.
- Sunucu kullanıcıdan uzaktır: Örneğin, Site dosyaları olan bir sunucu, Moskova'da fiziksel olarak ve kullanıcı siteye Vladivostok'tan geliyor.
- Birçok dosya: Tarayıcı sayfasını görüntülemek için birçok resim, dosya, stil, komut dosyası ve yazı tipini indirmeniz gerekir.
- Ağır dosyalar: Ayrıca bu dosyalar çok ağırlığındadır.
Site hızını optimize etmek için tüm adımlar, bu sorunları ortadan kaldırmaya yöneliktir.
Site hızı nasıl kontrol edilir
Site hızını kontrol etmek için çevrimiçi hizmetler kümesinden, belki de en popüler olanıdır, Google PagesPeed aracıdır. Onunla çalışın - Sitenin adresini belirtin ve "Analiz" düğmesini tıklayın.
Sonuç olarak, böyle göstergeleri (bilgisayarlar için ve mobil için ayrı olarak) göreceğiz:
- Saat kaçta, tarayıcı sunucudan bir cevap alır ve sayfa içeriğini çizmeye başlar (FCP - ilk muhteşem boya).
- Saat kaçta, kullanıcı tarayıcıdaki ana içeriği görür (DCL - DOM içeriği yüklenir).
- Site önyükleme hızı açısından optimize edildiği sürece.
- Özel optimizasyon önerileri. "Nasıl düzeltilir" bağlantılarına tıklayarak, bir şeyler yapmanız gereken sorunlu resimler ve dosyaların adreslerini görüyoruz (çoğunlukla sıkıştır).
Yeşil bölgeye girmeniz önerilir - ve site hız bloğu (sayfa hızı) ve "Optimizasyon" bloğunda.
Bir diğeri İyi hizmet Ancak, İndirme hızını kontrol etmek için, İngilizce - Pingdom. Ayırt edici bir özellik - bunlar güzel grafikler (şelale - şelale denir) hangi dosyaları, hangi sırayla ve ne kadar zaman yüklü olduğunu göstermektedir:
Ve şimdi noktaya:
Siteyi nasıl hızlandırır
Adım 1. Resim Optimizasyonu
Optimize edilmemiş resimler sitenin en "ağır" kısmıdır. Bu nedenle, resimlerle çalışmak hızda önemli bir artış sağlayabilir.
Ne bakıyoruz:
Resim Boyutu (Genişlik ve Yükseklik)
Malları vurduysanız ve yaklaşık 5000 piksel genişliğinde fotoğraflarınızı aldıysanız, genişliği 1600'e kadar güvenli bir şekilde azaltabilirsiniz, çoğu durumda yeterli olacaktır. İstisna, "büyüteç" ile malları göz önünde bulundurabileceğiniz yerler (çoğunlukla, çevrimiçi mağazalar) olacaktır, ancak hemen yüklenmedi, ancak yalnızca bir kişi bu araçtan yararlanmaya karar verdiyse.
Resim ağırlığı (Kilobytes)
Kameradan görüntüler, siteyi göstermeden önce miktarda sıkıştırabilir (ve ihtiyaç duyar). Photoshop (veya başka bir resim editörü) veya TinyPng veya Optimizilla gibi çevrimiçi hizmetler aracılığıyla yapın.
Büyük resimlere önizleme
Malların fotoğraflarıysanız (veya yapılan işler) ve listelerinde bir sayfa var, makul derecede küçük önizlemeler yapacak (resimlerin azaltılmış). Sonra ürünlerin, işlerin veya fotoğrafların listesi daha hızlı yüklenecektir.
Örneğin, SportMaster, üç versiyondaki malların resimlerini kullanır:
Malların listesi için resim (7 KB ağırlığında)
Ürün kartı için resim (18 KB ağırlığında)
Bir büyüteç ile malları görüntülemek için resim (942 KB ağırlığında)
SportMaster yalnızca kaynak resimlerini kullanırsa, malların listesinin ne kadar sürdüğünü hayal edin (aşırı kilobayt ile 900 olanlar).
Sitenin hızını Google PagesPeed üzerinden kontrol ederken, optimize edilmesi gereken resimler için hazır bir liste alacaksınız:
Adım 2. Gzip Sıkıştırma
GZIP, sunucudaki dosyaları sıkıştırmak için bir programdır (bir bilgisayardaki zip-arşivlerin analoğu). Gzip sunucusu etkinken, sayfa kodunu tarayıcıya göndermeden önce (ayrıca komut dosyaları, stiller ve diğer metin Bilgisi), bu dosyaları ilk önce arşivleyin. Tarayıcı bir arşiv alacak ve kullanıcının bilgisayarında açacaktır. Sıkıştırılmış bilgiler tarayıcı ile sunucu arasında daha hızlı iletilecektir.
Gzip Sıkıştırma Nasıl Etkinleştirilir:
HTCCESS dosyasına erişebiliyorsanız, bu tür satırları ekleyin (dosyanın sonunda):
AddoutPutFilterbyType Metin / HTML Metin / Düz Metin / CSS Uygulamasını / JSON'u Deflate
AddoutPutFilterbyType Metin / JavaScript Uygulamasını / Javascript Uygulaması / X-JavaScript'i Deflate
AddoutPutFilterbyType Deflate Metin / XML Uygulaması / XML Metin / X-Bileşen
AddoutPutFilterbyType Application / X-Font-TTF Uygulaması / X-Font-OpenType Resmi / SVG + XML
Apache yoksa, ama nginx (kim biliyor, anlayacak), daha sonra bir Nginx.conf yapılandırma dosyasına ihtiyacınız olacak. HTTP (...) bölümüne kod ekleyin ve sunucuyu yeniden başlatın:
gzip açık;
gzip_static açık;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied herhangi biri;
gZIP_TYPES Metin / Düz Metin / CSS Uygulaması / JSON Uygulaması / X-JavaScript Metin / XML Uygulaması / XML Uygulaması / XML + RSS Metin / JavaScript Uygulaması / JavaScript;
HTAccess veya Sunucu yapılandırmasına erişiminiz yoksa, GZIP sıkıştırma işlemini etkinleştirmeniz gereken teknik desteği barındır.
Sıkıştırma çalışırsa, daha sonra Sayfayı kontrol etmenin sonuçlarında göreceksiniz ("dahil optimizasyon teknikleri" nde):
Adım 3. Tarayıcının tarafında önbellekleme
Tarayıcı siteyi yüklediğinde, kendi hafızanızdaki BT (stil dosyaları, komut dosyaları, resimler) için bazı bilgileri kaydeder (önbellek, önbellek). Ardından bu sitenin diğer sayfalarında veya geçerli sayfayı tekrar girerken, tarayıcı bu bilgiyi sunucudan (uzun süre) yeniden göndermez ve bunları yükler. kendi hafızası (hangisi daha hızlı). Bu nedenle, tarayıcı ayarlarında "CLEAR CACHE" düğmeleri vardır ve hepimiz CTRL + F5 tuş kombinasyonunu biliyoruz (önbellek temizleme sayfasını yenileyin).
Tarayıcının önbelleğini kullanmak için, sitenizden ne tür dosyaların önbelleğe kaydetmek için belirtmeniz gerekir. Nasıl yapılır:
HTCESS dosyası aracılığıyla (10 gün boyunca statik dosyaları önbelleğe alma):
Harcanan açık.
ExpirseDefault "Access Plus 10 Günü"
ExpirSbyType Resmi / GIF "Erişim artı 10 gün"
ExpirSbyType image / jpg "Erişim artı 10 gün"
ExpirSbyType Image / JPEG "Erişim artı 10 gün"
ExpirSbyType Image / PNG "Access Plus 10 Günü"
ExpirseByType Resmi / SVG + XML "Access Plus 10 Gün"
ExpirSbyType 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) $ (
kök /var/www/user/data/www/site.ru;
10d süresi doldu;
}
...
}
Erişim sunucusu ayarları yoksa, tekrar teknik desteğe yazıyoruz ve sizden statik dosyaların önbelleğe alınmasını isteyin.
Resimler listesine benzer şekilde, Google PageSpeed, önbelleğe alma yapılandırılmamış kaynakların bir listesini verir ve mümkün olur:
Lütfen, yalnızca kaynaklarınız için önbelleğe almayı yapılandırabileceğinizi unutmayın. Örneğin, önbellek ayarlarını değiştirin, çünkü Yandex.Metric Scriptler için çalışmaz.
Adım 4. CSS ve JS dosyalarını en aza indirin
Minimizasyon, boşlukları, boş dizeleri, yorumları, daha kısa değişken isimlerini vb. Kaldırarak bir dosyanın sıkıntısıdır. Tarayıcı hala hangi dosyayla çalışacak - sıradan veya küçültülmüş ve böyle bir dosyayı daha az ağırlığındadır.
Düzenli bir kod örneği:
Hız göstergesi-sarmalayıcı (
konum: Göreceli;
}
.Speedometre-Wrapper. List (
marj-Top: 80px;
marj-sol: -20px;
dolgu-alt: 85px;
}
Minimasyondan sonra:
Hızmetometre-Sarıcı (Konum: Göreceli) .Speedometre Sarıcı. List (Marj üstten: 80px; Marj-sol: -20px; Dolgu-alt: 85px)
Popüler eklentiler ve kütüphaneler (jQuery, bootstrap, vb.) Her zaman komut dosyaları ve stillerinin en aza dönüşümlerini en aza indirdiniz - bunları siteye bağlayın. Örneğin, jQuery betiğinin normal versiyonu 265 KB'dir ve sıkıştırılmış versiyonu 85 KB'dir. Farkı hissediyor musun?
Sadece eksi bakanlığı - dosyanın okunabileceği kaybolur. Değişiklik yapmanız gerekiyorsa sıkıştırılmış dosya. - Bunu yapmak zor olacak, böyle bir dosyayla çalışan bir kişi uygunsuzdur (bir katı dize var). Bu nedenle, CMS'ye ek eklentiler genellikle komut dosyalarını incelemek için kullanılır - siteye indirmeden önce CSS ve JS dosyalarını otomatik olarak sıkıştırırlar. Yasaklanma, normal dosyaların normal sürümleriyle güvenle çalışabilir.
PageSPEED ve Burada, bize dikkatlice bize en aza indirerek boyutu azaltılabilecek bir dosyaların bir listesini gösterir:
Adım 5. CSS ve JS-Dosya İndirme Siparişi
Tarayıcıların en hızlı sayfa yüklenmesi için kendi algoritmalarına sahiptir (kimse "fren" tarayıcısı oynamak istemiyor). Bu nedenle, sayfa kodunu almış olan tarayıcı, ilk önce yüklemeye başlamak için istediğiniz eklenti dosyalarından hangisini hesaplamaya çalışıyor. Bazen tarayıcının sayfadaki bazı formların çizilmesine zaten ulaştığını ve stilleri olan dosyanın henüz yüklenmemiş olması durumunda olur.
Tarayıcıyı site dosyalarını optimum şekilde indirmek için, tüm stiller (CSS) ve yazı tipleri sayfa kodunun başında yapılandırılmıştır (etikette
) ve tüm komut dosyası dosyaları (JS) - sayfanın sonunda, kapanış etiketinin önündeki.
...
rel \u003d "Stylesheet" href \u003d " //fonts.googleapis.com/csss?family\u003dRoboto: 00,400,500 ve alt küme \u003d latin.cyrillic"Tip \u003d" Metin / CSS "\u003e
rel \u003d "Stylesheet" HREF \u003d "/ Inc / Min / styles.min.css" Type \u003d "Metin / CSS"\u003e
rel \u003d "Stylesheet" href \u003d "/ css / main.csss" Type \u003d "Metin / CSS"\u003e
...
...
Ardından, tarayıcı, çizim için gerekli stilleri yükler ve sayfayı kullanıcıya, gerekli komut dosyalarını indirmeyi paralel olarak göstermeye başlar (bu daha sonra etkileşimli - kaydırıcılar, sekmeler vb.).
Adım 6. Ekstra eklentiler veya sayaçlar
Bazen sayfa kodunda, sitede artık kullanılmayan eklentilere veya modüllere bağlantılar vardır. Örneğin, ilk önce proxigator bir eklentiyi kaydırıcılar için bağlar ve daha sonra yeni birine değiştirdi, ancak eskisini silmedi. Veya artık aradığınız istatistiklerden, istatistiklerden gelen kodlar kalır. Böyle bir "çöpü" kodundan çı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, ardından tüm sayfalarda, kaydırıcının aynı eklentisini kullanın - her seferinde belirli bir komut dosyasını bağlamanız gerekmez.
Adım 7. CDN'yi kullanma
CDN (İçerik Teslim Ağı, İçerik Teslim Ağı), coğrafi olarak ülke veya dünyaya göre dağıtılan çeşitli sunuculardan gelen bir ağdır. Sunucuların her biri içeriği ana sunucudan çoğaltır (içerik ilk kullanıcı isteği tarafından çoğaltılır ve bir süre saklanır).
Örneğin, Khabarovsk'tan bir kullanıcı, CDN'den bir şeyler yüklemek istiyorsa, daha sonra ana sunucudan (örneğin, Moskova'da), ancak kullanıcıya en yakın sunucudan içeriği alır. Aynı Habarovsk'ta). Ülke benim yerlidir, bu yüzden Khabarovsk-Khabarovsk sorgusu, Khabarovsk-Moskova'nın isteğinden daha hızlı geçecektir. Milisaniye için izin verin, ancak çoğaltılmasında dosya sayısına ve boyutlarına kadar hızda iyi bir artış sağlayabilir.
Kural olarak, CDN iki durumda kullanılır:
- Üçüncü taraf komut dosyalarını yükleme. Bunların hepsi aynı jquery, bootstrap, web fontları yazı tipleridir. Örneğin, tarayıcıyı sunucunuzdan değil, Ruble Sunucularından, Bootstrap veya diğer CDN'lerden indirmek için belirleyebilirsiniz.
- CDN'nizden resim ve komut dosyaları yükleniyor. Büyük siteler (Ozon, Avito, vb.) Kendi sunucularını veya (daha sık) Google Cloud veya Stackpath gibi CDN ağlarını kullanarak kendi CDN'lerini yapılandırır. Bazı CMS, işlevselliğinizde zaten CDN desteğini içermiştir. Örneğin, BitRix, serbest bir modül "Site Hızlandırma (CDN)" vardır.
Adım 8. HTTP isteklerinin sayısını azaltmak
Tarayıcının sunucuya daha az arama yapması için (ve bu HTTP istekleridir), ihtiyacınız olan dosyaların sayısını azaltmanız gerekir. Örneğin, üç ayrı komut dosyanız varsa (bir kaydırıcı için, için modal pencereler Ve pop-up ipuçları için), bunları bir dosyaya birleştirebilir ve ardından da en aza indirebilirsiniz (bkz. Adım 4).
Dosyaları manuel olarak birleştirmek tamamen uygun olmadığı için (gelecekteki komut dosyalarından birini değiştirmeniz gerekirse), o zaman genellikle otomatik füzyonlarını ayarlarsınız. Çoğu CMS bunun için kendi eklentileri vardır (örneğin, WordPress için AUTOPTIMIZE).
Bir tarayıcı için şaşırtıcı önbellekleme (Adım 3) ve gereksiz komut dosyalarını silmek (Adım 6) ayrıca HTTP isteklerinin sayısını da azaltır.
Adım 9. Yazı tipi optimizasyonu
Tüm siteye tek bir yazı tipi kullanmaya çalışın. Bu sadece estetik siteyi eklemez, aynı zamanda fontları görüntülemek için indirilen dosyaların miktarını da azaltacaktır.
Ayrıca, eski formatları kullanmayı reddedilebilecek dosyaların sayısını azaltabilir. Önceden, her yazı tipi, tarayıcılarda doğru ekran için EOT, TTF, WOFF, SVG formatlarında yüklendi. Şimdi modern tarayıcılar sadece iki formatla sınırlı olabilir - Woff ve Woff2.
Ayrıca, popüler yazı tipleri Google yazı tiplerinden indirilebilir. İlk olarak, yükü sunucunuzdan kaldırır. İkincisi, fontlu dosyalar zaten optimize edilecektir, omuzlarınızdan Google'a kayar (ne, görüyorsunuz, güzel).
Adım 10. HTML kodunu azaltmak
Stil dosyalarını ve komut dosyalarını sıkıştırmaya ek olarak (Adım 4), en aza indirmeyi ve sayfanın HTML kodunu yapılandırabilirsiniz. Uzun sayfalarla ilgili olduğunu düşünüyorum - Bloglarda makaleler, büyük mal listeleri, vb. Yapılandırmak için, CMS için uygun bir eklenti aramaya değer (örneğin, Joomla için HTML MITIFIER).
Adım 11. Sunucu Optimizasyonu
Özel bir sunucunuz varsa ( sistem yöneticisi Ayarlarını yönetebilir), parametrelerini provure etmeye çalışabilirsiniz. Örneğin, RAM ekleyin veya işlemciyi değiştirin. Ayrıca, Sysadmin sunucunun kendisinde "temizlik" gerçekleştirebilir - kullanılmayanları silin ve geçerli modülleri güncelleyebilir.
Sanal bir barındırma durumunda (sunucu ayarlarına erişmeden), daha iyi olursa, daha pahalı tarifelere geçiş yönünde bakabilirsiniz. Özellikler Sunucu.
Adım 12. Scriptlerin ve Veritabanlarının Optimizasyonu
Site indirme aşamalarından biri, tarayıcıyı verecek olan final HTML kodu sunucusunun üretilmesidir. Bu kod Site Motoru (CMS) tarafından oluşturulur. Motor yazılamaz bir şekilde yazılırsa, "yavaş" programlama algoritmalarını vb. Kullanarak, dosyalar ve veritabanlarına gereksiz istekleri "çok uzun" toplayabilir.
Bu nedenle, site için CMS'yi seçerken, hızlarını ve güvenilirliğini kanıtlamış olan popüler motorların (Bitrix, Açık Arabası, WordPress, MODX vb.) Yönünde görünmesi önerilir. Ve bu sistemler sürekli sonuçlandırıldığından (hız açısından), daha sonra CMS web sitesinde düzenli olarak güncellenmelidir.
Yokuşsuzluk
Sitenizin hızlı indirilmesine dikkat edin. Arama sonuçlarında birçok rakip olduğunu ve sitenizin daha hızlı başlatılacağını unutmayın, daha küçük olan diğer siteler komşu sekmelerinde açılması gerekir.
Site indirme hızını optimize etmek için yardıma ihtiyacınız olursa - yazın, sitenizi görelim ve hızlandırmanın mümkün olup olmadığını söyleyin.
Site yükleme süresi, sitenin kullanıcılarının davranışını etkileyen en önemli göstergelerden biridir. Başa çıkalım.
Sayfanın indirme hızını 1 saniye indirimini azaltmak:
- görüş sayısının% 11'inin azaltılması;
- kullanıcının memnuniyet oranını% 16 azaltmak;
- dönüşümün% 6'ya düşürülmesi.
Aşağıda, ilginin büyümesini yansıtan bir grafiktir kapalı sayfalar Sitedeki artış nedeniyle yükleme süresi.
Site yükleme süresi, ilgi çekici ve satma şansını azaltın.
KissMetrics, sitenin indirme hızının kullanıcıların ve alıcıların davranışlarını nasıl etkilediği konusunda bir çalışma yapmıştır:
- Kullanıcıların% 47'si sayfanın 2 saniyeden az bir sürede açılmasını bekler;
- Kullanıcıların% 40'ı, 3 saniyeden daha uzun sürülürse siteyi kapatır;
- Sitenin rahatlığından memnun kalan alıcıların% 79'u, büyük olasılıkla gelecekte satın almayacak;
- İnternet alıcılarının% 44'ü, onları tatmin etmediği sitelerden bazılarını anlatacak.
Sitenin hızlandırılmış indirilmesi, siteye mobil cihazlardan gelen kullanıcılar için özellikle önemlidir. Ve şimdi payı mobil trafik Sürekli büyüyor, ardından mobil cihazdaki ivme özel bir aksan yapmanız gerekiyor.
Mobil İnternet Kullanıcılarının Sabır
Dönüştürmeyi artırmanın bir yolu olarak site yükleme hızını arttırın
Site indirme süresi dönüşümü etkiler. Walmart ağının örneğini göz önünde bulundurun.
Sayfa yükleme süresince dönüşüm göstergesi bağımlılığı
Burada, sayfa yükünün hızı ne kadar yüksek olduğunu görüyoruz, dönüşüm oranı ne kadar yüksek olur.
Walmart'ın sonuçlarına göre, bir saniye süren zaman yükleme süresindeki bir düşüşün dönüşümün% 2'ye yükseltilmesine yardımcı olduğunu ortaya koydu.
Site indirme optimizasyonunun organik trafik üzerindeki etkisi
2010'da Google, arama sonuçları sıraladığında, indirme sitelerinin hızını dikkate alacağını söyledi.
Arama motorlarının yapması gereken nedeni oldukça açık. Arama motoru size "yavaş" siteler sunacaksa, büyük olasılıkla kullanması daha az olasıdır.
Bu nedenle, sitenizin daha yüksek rakiplerin verilmesi durumunda, site indirme süresini azaltmak önemlidir.
Yukarıda belirtilenlerin özetlenmesi, sitenin ivmesinin şunlara yol açtığı sonucuna vardık:
- dönüşüm büyümesi;
- başarısızlık oranını azaltın (siteyi doğrudan giriş sayfasından terk eden veya sitenin birden fazla sayfa'yı görüntüleyen ziyaretçilerin yüzde oranını azaltın);
- arama motorlarında kaldırma.
Siteyi yüklemenin 20 yolu yükleniyor
1. HTTP isteklerinin sayısını azaltın
Yahoo'nun araştırmalarına göre, çoğu zaman sayfayı yüklerken görüntüler, stil dosyaları ve komut dosyalarını indirmek için harcanır.
Böyle bir dosyayı indirmek için ayrı bir HTTP sorgusu oluşturulur. Bu tür talepler ne kadar uzun olursa, sayfa tamamen indirilinceye kadar zaman geçer.
Kaç tane HTTP isteğinin oluşturulduğunu kontrol edin, tarayıcı geliştirici panelini kullanmak mümkündür.
Örnekte işlemi düşünün google tarayıcısı Krom.
Analiz edilen sayfaya giden ilk adım, herhangi bir boş sayfa alanına sağ tıklayın ve bağlam menüsü Öğe "Kodu Görüntüle". Chrome DevTools paneli ekranın altında açılır. Ağ sekmesine gidin ve sayfayı yeniden başlatın. Tüm isteklerin bir listesini, cevaplarının durumlarını ve dosyaları indirme zamanını görüyoruz.
2. CSS ve JS dosyalarını birleştirin ve Minice
Şimdi, kaç tane istek oluşturduğunu bildiğimizde, onları azaltmaya devam edebiliriz.
İstek sayısını azaltmanın en kolay yolu, HTML, CSS ve JavaScript dosyalarını birleştirmek ve minyatür etmektir (sıkıştır). Bu görevi geliştiricilere koymak daha doğrudur. Böyle bir olasılık yoksa, kendiniz yapmayı deneyebilirsiniz.
Açmak metin düzelticiTüm CSS dosyalarının içeriğini şablona bağlandıkları sırada yerleştirme. Daha sonra, herhangi bir minikasyon hizmeti kullanarak (örneğin, CSSMINISE), kodu sıkıştırın.
Sonuç olarak, sorgu sayısını azaltıyoruz ve semboller (boşluklar, sekmeler, dize nakli vb.) Nihai koddan çıkarılır.
3. Asenkron yükleme CSS ve JS'yi uygular
Hepimiz bir Etiket ekleyerek bir CSS dosyasını HTML'ye yüklemek için kullanılır.
Bununla birlikte, tüm kod parçaları o kadar kritik değildir ki derhal indirilmeleri gerekir. Örneğin, sitede malların karşılaştırılmasının nadiren kullanılmış bir bileşeni vardır. Kullanıcılar böyle bir işlevsellikten yararlanmak istediklerinde, stilleri ve JS kodunu doğrudan bunun için yüklemek mantıklıdır.
CSS ve JS'nin asenkron yüklenmesini uygulamak için genellikle yalnızca profesyonel geliştiriciler ile mümkündür. YALNIZCA NELDİNİZİN ÖNCESİ değerini kullanma yönünde, ONLOAD özniteliği ile birlikte izlemeniz veya JS komut dosyasının stillerini yüklemeniz gerektiğini unutmayın.
4. Ertelenmiş bir indirme javascript kodunu yapılandırın
JavaScript kodunun böyle ertelenmiş bir indirmesini bir başlangıç \u200b\u200biçin, genellikle nasıl olduğunu anlarız. Standart JavaSpit modunda, dosyalar, tüm bu tür dosyalar alınabilen ve yürütülene kadar ayrıştırmanın HTML belgesini keser.
Genellikle özellikle önemli bir widget eklememiz gerekir. sosyal ağlar Sitenin bodrumunda. Hemen sayfada veya birkaç saniye olup olmadığı bize önemli değil.
Ertelenmiş bir yük uygulamak ya da oldukça işleme, böyle bir komut dosyası, hepimizin öznitelik erteleme etiketini kaydetmesi gerekir.