Hız kullanılabilirlik.
Daha doğru söylemek gerekirse, web sitesi hızı, kullanılabilirliğin önemli bir parçasıdır. Kullanıcının yüklendiği andan itibaren pee'deyse, insan zihninin yarattığı en sezgisel arayüz sizi iyi yapmaz.
Bu kadar. Makale bitti ... Tamam, aslında bunun için çok daha fazlası var, ama bu ilk cümle bilmeniz gerekenlerin yaklaşık yarısı. Web sitelerimizi hızlı hale getirmeliyiz.
“Çabuk yanan”, “aşırı hızlı”, hatta “hızlı bir mermiden daha hızlı” gibi üstün ifadeler kullanabiliyordum ama yetersiz kalabiliyorlardı. “Çok hızlı” diye bir şey olmadığını söylemek daha kolay.
Ne tür bir hızdan bahsettiğimi konuşmak için bir dakika ayırmamız gerek. Kısacası, tüm hız. Daha spesifik olarak, üç çeşit hız:
Bu, tüm bilgilerin kullanıcılarınızın cihazlarına indirilmesi için gereken süredir. Bu, öncelikle internet bağlantısının hızından ve dosyaların gerçek boyutundan etkilenir.
Bağlantı hakkında fazla bir şey yapamazsınız , ancak dosya boyutu hakkında çok şey yapabilirsiniz .
Dosyalarınız indirildikten sonra tarayıcı tarafından işlenmeli ve işlenmelidir. Tüm bu işleme ve işleme, kodunuzun ne kadar iyi yazıldığına ve kullanıcının telefonuna, tabletine veya dizüstü bilgisayarına / masaüstüne yapılan her şeyden etkilenir.
Kontrol edebileceğiniz tek şey kendi kodunuz, ama bu büyük bir fark yaratıyor.
Ve sonra psikolojik faktör var. Hızlı web siteleri, yavaş ilerledikleri gibi görünebilir ve hissedebilirler . Yavaş web siteleri, bazı hilelerin yargısal uygulamasıyla biraz daha hızlı hissetmek için yapılabilir.
Bu bölüm, kullanıcılarınızı incelemek ve web siteniz veya uygulamanızla etkileşim kurduklarında neler olduğunu bilmelerini sağlamakla ilgilidir.
Sitenizin hızlı ilerlediğini hissettirmek için web sitesi hızının her üç yönüne de dikkat etmeniz gerekir. Ve site ne kadar büyükse, optimize etmek için o kadar çok şey var.
Hadi başlayalım o zaman.
Birçok kez, özellikle çok sevdiğim bu küçük, deneysel projelerde, kendimi CSS üzerinde kodun diğer bölümlerinden daha fazla zaman harcayarak buluyorum. Çoğu zaman HTML veya JavaScript’ten daha fazla CSS yazılır. Yani, tam olarak, CSS'nizin dosya boyutunu ne kadar etkileyebileceğinin bir göstergesidir.
Ardından, web sitenizin gerçekten kullanıcının masaüstünde, dizüstü bilgisayarında, tabletinde veya telefonunda ne kadar hızlı çalışacağıyla ilgili bir sorun var. Bir “gerçek” işin ya da bir web sayfası oluşturmanın çoğu, GPU'nuzdan biraz yardım alarak yazılım tarafından yapılır.
Hızlı bir şekilde yüklenebilir, ancak yavaşça kaydırın. CSS'nizin yazılma şekli, belirli bir aygıtın, dosyalar indirildikten sonra web sayfasını gerçekte ne kadar hızlı görüntüleyebildiğini doğrudan etkiler.
Bir web sitesini daha hızlı çalışacak şekilde optimize ederken, CSS genellikle başlamak için iyi bir yerdir.
Stil sayfanızda bulunan ve hiçbir şey yapmayan CSS, dosyalarınızı gereksiz yere daha büyük hale getirir. Tamam, bu bir no-brainer gibi görünebilir; ama yine de en iyilerimize olur.
Bazı içerikleri çıkarır ve eski CSS'yi silmeyi unutursunuz. Bir kapsayıcı öğenin sınıfını veya kimliğini değiştirir ve eski CSS'yi silmeyi unutursunuz. Biraz CSS yazarsınız, daha iyi bir yol olduğunu fark edersiniz ve unutursunuz… bunu alırsınız.
Birden fazla ön uç geliştiriciyi karışıma katın ve dikkatli değilseniz, bir kullanıcı dostu olmayan, yönetilemez bir stil sayfası veya bunların bir koleksiyonu için bir reçeteniz var. Kullanılmayan kod, sayfa yüklemesini veri olarak varlığına göre yavaşlatır. Geliştirmeyi yavaşlatır, çünkü stil sayfasını okurken insanları karıştırır.
Ayrıca, daha yavaş oluşturma süreleri anlamına da gelebilir, çünkü tarayıcının tüm CSS ile uygun HTML öğelerine eşleşmesi için daha fazla CSS vardır.
Tüm eski CSS'yi manuel olarak gözden geçirip silerseniz, kullanılmayan CSS seçicilerini bulmanıza yardımcı olacak otomatik araçları kullanın ya da bir şeyleri kırılana kadar rastgele bir şeyleri silin (bunu yapma), eski kodu çıkarmanız gerekir.
Tarayıcının CSS ile uygun HTML ile nasıl eşleştiğinden bahsetmişken, CSS seçicilerine bakma zamanı gelmiştir. Hangi seçmenlerin en hızlısı olduğu, hangisinin yavaş olduğu, yavaş olanlarla uğraşmanız gerekip gerekmediği, vb.
Sorun şu ki bu bilginin çoğu eskidir. 2000 yılında, Dave Hyatt (Safari'de çalışan bir geliştirici ve W3C'nin CSS Çalışma Grubu'nun aktif üyesi) şunları yazdı:
CSS3 seçmenleri hakkındaki üzücü gerçek, sayfa performansı ile ilgileniyorsanız gerçekten kullanılmaması gerektiğidir.
Eğer bir bakacaksan döküman Bu alıntı geldi, onun gibi seçmenler hakkında konuştuğunu göreceksiniz : İlk çocuk ve diğer sözde seçmenler. Ve haklıydı.
O hala; ancak son on beş yılda bilgisayarlar biraz ilerlemişlerdir. Günümüzde, bilgisayarın CSS'yi sunması için gereken ekstra çaba, ucuz mobil cihazların en ucuzunu kullananlar dışında herkes tarafından fark edilmemelidir.
Bu kendi içinde bir endişe, bu yüzden, gerçekten, projeye, hedef demografinize ve benzerlerine bağlı olacaktır. Basitçe söylemek gerekirse, en iyi kararınızı kullanın ve belki de sözde seçmenlerin üzerine çıkmayın.
Aksi takdirde, sayfalarınız kitap uzunluğuna ulaşmadıkça, kullandığınız seçicilerin sitenizin performansı üzerinde çok az etkisi olmalıdır. Yine de, yukarıda belirtilen belgeye bir göz atın ve en hızlı ve nelerin yapılmadığıyla ilgili bilgi edinin. Bilgileri hala yararlı bulabilirsiniz.
Ayrıca görebilirsiniz Bu makale CSS-Tricks'ten biraz daha yeni bir konu için.
Elbette, diğerlerinden daha uzun süren CSS özellikleri de vardır. Genişlik, yükseklik ve renk gibi klasik özellikler hala en hızlı olanıdır. Biraz daha uzun süren (ve tarayıcıdan tarayıcıya kadar değişebilen) kutu-gölge gibi CSS3 özellikleri olma eğilimindedir .
Web sayfalarının oluşturulmasıyla ilgili olarak, bir öğeye gölge düşürme işlemi karmaşıktır. Dikkat çekici olan şu ki, işaret edildiği gibi HTML5 Rocks Gerekli olan işleme gücü, alt gölgenin belirli boyutlarına bağlı olarak büyük ölçüde değişebilir.
Bu makale aynı durumun sınır yarıçapı ve dönüşüm gibi diğer özellikler için geçerli olduğunu belirtir .
Yine, bunların ortalama masaüstü veya dizüstü bilgisayarınızda bir sayfanın oluşturulması üzerinde çok az etkisi olacaktır. Ancak mobil cihazlar daha büyük bir isabet alabilir ve bunun sonucunda tecrübe yaşayabilir. Herkes dalgalı kaydırmadan nefret eder.
Yine de, bu, aynı efektleri üretmek için görüntüleri kullanma maliyetine karşı tartılmalıdır. Bir zamanlar bir kez yuvarlanmış köşeler almak için yaptığımız şeyleri hatırlayan var mı?
Sadece aşırıya kaçmayın ve stilleriniz yeterince hızlı olmalıdır.
Şimdi başka bölgelere giriyoruz. CSS animasyonları son derece hızlı olabilir, ya da tarayıcıyı oyunların sorun yaşamayacağı noktaya kadar yavaşlatabilirler.
Bu kısmen, tüm animasyonların eşit şekilde üretilmemesi nedeniyle gerçekleşir. Ağır kaldırma işlemlerinin bir kısmı donanım tarafından yapılırken, diğer türdeki animasyonların tamamen kendi işlevlerini yapması gerekir. Bu özellikle mobil cihazlarda maliyetlidir.
İçinde başka bir makale HTML5 Rocks'ta, en hızlı hareketli olan CSS özellikleri konum , ölçek , döndürme ve opaklıktır.
“Maliyet” düşük tutarken nelerin canlandırılabileceğine dair daha kapsamlı bir genel bakış için makaleye göz atın.
Burada size, yazarın size verebileceği en pratik tavsiyeyi sunduğum yer. LESS, SASS ve Stylus gibi CSS ön işlemcileri kullanın. Elbette, yanlış kullanırsanız, hedeflediğinizden daha büyük stil sayfaları oluşturabilirsiniz. ama potansiyel faydalar buna değer.
Örneğin, sunucuya yapılan HTTP isteklerinin sayısını azaltmak istiyorsanız (her zaman iyi bir fikir), tüm sıfırlamaları, çerçeveleri bir LESS / SASS dosyasına ekleyin. Derleme yaparken, hepsi tek bir stil sayfasında olacak. Ayrıca, çoğu önişlemciler, tüm CSS'yi küçültülmüş formda çıkarma seçeneği sunar.
Böylelikle, dosya boyutunu gereksiz yere etkilemeden kod organizasyonu için ihtiyaç duyduğunuz sayıda farklı dosya kullanabilirsiniz.
JavaScript gerçekten yavaş olabilir. Daha spesifik olmak gerekirse, JavaScript, hız denkleminin “işlenmesi” kısmında CSS'den çok daha doğrudan bir etkiye sahip olabilir. Daha da kötüsü, JS, görünüşte önemsiz şeylere ulaşmak için dosya boyutu bakımından katlanarak daha da ağırlaşabilir.
Ağrılı bir yavaşlıktan iki kat daha fazla ve kullanıcılarımız çoğu kez kurbanlar, özellikle de mobil tarayıcılardakiler. Ancak bu, dilin hatası değildir. JS'leri ne kadar berbat ettiğimiz, genelde programlamanın cehaletiyle doğrudan orantılıdır.
Ben geliştirici değilim. Sık sık şeyler yapmak için jQuery veya bağımsız tek tek JS eklentileri gibi kütüphaneler kullandım. Ne kadar çok yapmam gerekiyorsa, hepsini daha fazla eklenti yapmam gerekiyor. Bu eklentiler ve çerçeveler, asla kullanamayacağım ekstra seçenekler ve özellikler içeriyor.
Orada bant genişliğinde hırsızlık var.
Ek olarak, eklentiler birlikte iyi çalışmayabilir. Birbirlerini yavaşlatabilirler ya da bir diğeri tamamen çalışmadan durabilirler.
Orada israf edilen işlem gücü var.
Web sitenizi gerçekten hızlandırmak istiyorsanız, milisaniyelerinizi (veya bazı durumlarda, birkaç durumda) tıraş edin. Yapmanız gereken şey şu:
CSS gibi, JS'yi harici dosyalarda tutmak ve HTML'inize bağlamak en iyisidir. Çok fazla JS kodunuz yoksa ve bir HTTP isteği eklediğinde bu kadar büyük bir şey olduğunu düşünmüyorsunuz, ancak şu şey var: harici CSS ve JS dosyaları tarayıcı tarafından önbelleğe alınır.
Aynı sayfa tekrar istendiğinde veya sitenizdeki aynı CSS veya JS'yi kullanan diğer sayfalar istendiğinde, önbelleğe alınan harici dosyalar yeniden indirilmek yerine kullanılır. Bu, daha hızlı site yükleme süreleri ve biraz daha hızlı işlem. Her seferinde sunucuya yapılan ekstra çağrıya değecek.
Temel olarak, teori şu şekilde gider: tarayıcı, önce bir sayfanın kaynak kodunun en üstünde ne varsa yapar. Bu yüzden etiket gibi şeyler en üste gider.
Ancak, JavaScript dosyaları, tarayıcınız yüklenene kadar HTML'nizi oluşturmaya bırakarak her şeyi yavaşlatabilir. Yaygın olarak kullanılan JS efektlerinin ve eklentilerinin çoğunun yalnızca sayfanın geri kalanı ekrandayken çalışması gerektiğinden, bu idealden daha azdır.
Kullanıcının deneyimini iyileştirin ve etiketin hemen önündeki sayfanın altındaki harici dosyalara bağlantı vererek algılanan yükleme süresini kısaltın.
Bir kullanıcı, JS gerektiren bir şeyle etkileşime girdiğinde, gitmeye hazır olmalıdır.
Tam teşekküllü bir uygulama tasarlıyorsanız, bu bölümü görmezden gelebilirsiniz. İyi, esnek ve hafif bir çerçeve, geliştiricilere büyük bir avantaj sağlayabilir. Bununla birlikte, küçük ve orta ölçekli web siteleri için, bir JavaScript çerçevesi de dahil olmak üzere fazla olabilir. Bu web sitelerinde, JS çoğunlukla içerik yönetimi için CMS'nin arka ucunda kullanılacaktır. Ön tarafta, bir resim kaydırıcısına veya duvar düzenine veya iki resmine sahip olabilirsiniz. Gerçekten havalıysanız, arama çubuğunda otomatik tamamlamanız da olabilir.
Çoğu içeriğin hayranlık duyması ve bunun gibi canlandırılması gerekmez. JavaScript, kullanıcı deneyimini geliştirmek için mümkün olduğu kadar ayrılmalıdır. Bir siteyi güzel bir şekilde kullanmak, özellikle mobil cihazlarda yavaş, yavaş bir siteye neden olabilir.
Bir şekilde, tüm kod çerçeveleri JavaScript, PHP, Python, HTML veya CSS olsun, hepsi aynıdır: her özellik bir grup koddur. Bir iş için bir çerçeve veya eklenti seçerken, sunduğunuz her özelliği, hatta çoğunu kullanacağınızı kendinize sorun.
Değilse, çerçeve modüler midir? Gerçekten ihtiyacınız olan parçaları seçebilir ve seçebilir misiniz? Eğer öyleyse, ve eğer dosya boyutu ticaret-değer buna değer olduğuna inanıyorum, o zaman bunun için tüm yollarla gitmek! Aksi takdirde, neleri karıştırabileceğinizden daha fazlasını yapabileceğinizi görmek en iyi uygulamadır.
Kalıcı olarak değil! Bu şekilde düşünün, sitenizde JS tarafından gizlenen herhangi bir içerik veya işlevsellik var mı? Kullanıcılar tarayıcılarında JS etkin olmadan erişebilir mi?
Öyleyse, o zaman harika. Ancak, kullanıcılar önemli bilgileri göremez, sizinle iletişim kuramazsa veya JavaScript olmadan düzgün bir şekilde gezinemiyorsa, bir sorunla karşılaşırsınız. Elbette, hâlâ etkin olan çoğu insana güvenebilirsiniz, ancak her zaman bu uç davalara sahip olursunuz.
Bu, web sitesi hızıyla nasıl ilişkilidir? Web sitenizin bir kısmı aniden işe yaramıyorsa ne kadar yavaş göz atılacağını hayal edin.
Ciddi değil, eğer bir geliştirici değilsen ve bir tane için bütçen varsa, küçük, basit işler için bile bir tane al. Uzun vadede, bir kez doğru yapmak için deneyimli birisini işe almak daha ucuzdur.
İşlerin korkunç bir şekilde yanlış gitmesi durumunda (ve burada bilgisayarlar hakkında konuşuyoruz, bu yüzden bir şeyler ters gidecektir), neyin daha hızlı gittiğini öğreneceklerdir. Bu tür problemleri bulma ve çözme konusunda deneyime sahip olacaklar. Başka hiçbir şey yoksa, o belirli konulara gitmede daha iyi olacaklar.
En önemlisi, daha az kodla yapılması gerekenlerin nasıl yapıldığını bilirler. Daha az kod (genellikle) daha hızlı çalışır ve (her zaman) daha hızlı yüklenir. Bu verebileceğim en basit tavsiye.
(Eğer bir geliştiriciyseniz ya da öğreniyorsanız, bu makalenin en altında yer alan öğreticilerin bir listesini hazırladım. Bazı yeni başlayanlar, hızlı çalışan JavaScript yazmanın rehberleridir.)
Denklemden video çektiğinizde, içeriğe dayalı herhangi bir sitede en büyük şey görüntülerdir. Görüntüler, büyük, hantal ve optimize edilmedikleri zaman cehennem gibi yavaş olma eğilimindedir.
Şimdi, retina ekranlarının çoğalmasıyla, her aygıtta iyi görünmesini istiyorsak, daha büyük resimler kullanmamıza neden oluyor, sorun çözmeyi daha kolay olmayacak. Daha da kötüsü, bant genişliğinden daha fazla harcama yapmanıza gerek kalmadan, unutmayı kolaylaştıran bir sorun.
Her bayt sayarsak, unutmaya gücümüz yetmez.
İyi haber şu ki, bu hiçbir şekilde yeni bir sorun değil. Neden bu iyi? Bu, seçim yapabileceğiniz çok sayıda potansiyel çözüm bulunduğunu ve bir seferde birden fazla kullanabileceğinizi gösterir. Aslında, bu genellikle iyi bir fikir.
Böylece, İSS'ler ve hosting şirketleri bize tüm sınırsız ücretsiz bant genişliğini (nefesini tutmayın) verene kadar, işte yapabileceğiniz şeyler:
Görselleri açmadan önce, görsel olarak CSS ve JavaScript ile görsel olarak söyleyebildiğiniz kadar yapın. Kod görüntülere göre transfer için her zaman daha ucuz olacaktır, bu yüzden olabildiğince fazla yapıştırın. CSS tabanlı drop-shadows, gradyanlar ve benzerleri tarafından tüketilen işleme gücüne rağmen, trade-off'ları düşünün.
Ayrıca, SVG görüntülerinin, bu örnekte, “kod” olarak kabul edildiğini de unutmayın, çünkü bunların hepsi şunlardır: Görüntü olarak işlenen XML kodu. Böylece, vektörle ilgili herhangi bir şeye ihtiyaç duyduğunuzda kullanılmalıdır.
Şimdi, söz konusu retina ekranlarına dönersek, onlar hakkında ne yaparız? Orada bant genişliğinden nasıl kurtuluruz?
Bu, öğeye ve görüntü kümesi özelliğine döndüğümüz yerdir. Nispeten yeni ve tam olarak desteklenmiyorlar, ancak tarayıcıların, kullanılan cihaz için uygun görüntü boyutunu seçmesine izin veriyorlar.
Bu nedenle, sitenizi iMac'te görüntüleyen bir kullanıcı için herhangi bir bant genişliği oluşturmayacak olsa da, büyük bir olasılıkla geniş bantlı oldukları için bir anlaşma kadar büyük değil. Bu arada, telefonundaki bir kişi, aynı görüntünün daha küçük bir halini alır ve uzun süre beklemelerini engeller.
Herhangi bir durumda hangi görüntü formatının kullanılacağını öğrendiğinizde, birçok görüntü boyutu sorunu giderilir. Belirli görüntü biçimleri, sıkıştırmanın nasıl çalıştığı vb. Hakkında devam edebilirdim, ancak gerçekten sadece birkaç şeyi hatırlamanız gerekiyor:
Bu gerçekten hepsi bu. Bunu yaparsanız ve görüntüleri kaydettiğinizde optimizasyon ayarları ile oynarsanız, genellikle nispeten küçük dosya boyutlarında oldukça iyi kalitede alabilirsiniz.
Ancak, Chrome ve Opera tarafından otomatik olarak desteklenen WebP adı verilen yeni bir biçim var. Google iddialar WebP dosyaları, PNG'lerden% 26 daha küçük ve birkaç faktöre bağlı olarak% 25-34 daha küçüktür.
Bu iki şey hariç harika bir haber: Firefox ve IE. Artık, geri dönüşler ve fazladan bir komut dosyası kullanmanın sakıncası yoksa, şimdi WebP biçimini kullanabilirsiniz. Sadece indir WebPJS ve sen gitmek için iyisin.
WebPJS, çalışmasını sağlamak için JavaScript ve biraz Flash kullanır ( iç çek … ama bu sadece IE için). Çok sayıda ve daha fazla büyük resmi hızlı bir şekilde sunmanız gerekiyorsa, bunun da olumsuz bir etkisi vardır.
Resimlerinizde kullanabileceğiniz iki çeşit sıkıştırma vardır. İlk olarak, kayıplı sıkıştırma var . Bu JPEG gibi kayıp formatlarda kullanılır. İstediğiniz kadar kaliteyi, kalitenin daha kötü, daha kötü ve daha kötü olacağı anlayışıyla sıkıştırmanızı sağlar. Nesneler pikselleşecek ve tanımını kaybedecek.
Kayıpsız sıkıştırma , PNG gibi formatlarda kullanılır ve dosya boyutlarını bir dereceye kadar azaltabilir. Bununla birlikte, sınırları vardır. Kaliteyi kaybetmeden görüntüyü küçültmenin imkânsız olduğu bir nokta vardır.
Photoshop veya benzer gelişmiş bir resim düzenleyiciniz varsa, görüntüleri sıkıştırmak için bunları kullanmak en iyisidir, böylece işiniz bittiğinde çıktının nasıl görüneceğini görebilirsiniz.
(Otomatik araçlar, özellikle çevrimiçi araçlar, benim tecrübelerime göre, bazı şeyleri çok fazla sıkıştırabiliyor. Yine de, aşağıdaki bağlantılar bölümünde bulduğum en iyi sıkıştırma araçlarını listeleyeceğim.)
WordPress gibi bir CMS kullanıyorsanız, çok büyük olan resimleri otomatik olarak yeniden boyutlandıracaktır. Bunları sizin için otomatik olarak sıkıştıracak eklentileri bulmak da kolaydır.
Aklınızdan çıkarmayın, sadece yükleme yapacağınızı bildiğiniz durumlarda otomatik sıkıştırma ve aynı amaç için benzer kalitede birçok görüntü öneririm. Bir fotoğraf blogu bir örnektir.
Kullanıcıların kendi resimlerini yükledikleri bir site çalıştırıyorsanız,… otomatik yeniden boyutlandırma ve sıkıştırma mutlak bir zorunluluktur ve bu nedenle her sosyal ağ bunu yapar.
İşte yukarıdaki üç kategoriden hiçbirine uymayan bir çift tavsiyemiz.
Kodunuzu “küçültmek” demek, tüm ekstra boşlukların ve satır sonlarının alındığı anlamına gelir. Bu, dosya boyutunu oldukça azaltabilir.
Çok fazla iş gibi görünebilir, ancak CSS ve JS'yi otomatik olarak küçültmek ve minimize edilmiş dosyaları kaynak dosyalarınız için ayrı tutmak için oldukça açık nedenlerden ötürü araçlar var.
Önceden de belirtildiği gibi, çeşitli CSS ön işlemcileri, kodunuzun tümünü ilk sırada minyatür formda üretebilir.
Sunucunuzun doğru şekilde ayarlanması koşuluyla, tüm kodunuz tarayıcıya sıkıştırılmış bir biçimde gönderilebilir. Metin dosyaları çok iyi sıkışır, önemli ölçüde gönderilen dosyaların boyutunu azaltır.
Şimdi, sunucunuzun gönderdiği dosyaları sıkıştırmak için bir ya da iki kez alması gerekecek ve kullanıcının tarayıcısı bunları sıkıştırmak zorunda kalıyor, ancak bu genellikle bant genişliği ticaretine değer.
Bunun nasıl çalıştığına dair tam bir açıklama için bkz. GZIP Sıkıştırma ile Sitenizi Nasıl Optimize Edilir .
Tarayıcı önbellekleme, modern tarayıcılar sayesinde bir ölçüde otomatik olarak gerçekleşir. Bir tarayıcı bir siteye gider ve orada bulduğu görüntüleri ve diğer bilgileri geçici olarak depolar.
Bu şekilde, aynı kullanıcı belirli bir süre içinde geri dönerse, tarayıcı aynı görüntüleri tekrar tekrar sormak zorunda kalmaz. Sadece sahip olduklarını yükler ve sahip olamayacağı yeni görüntüler ister.
Ancak, tarayıcılara ne tür önbellek ve ne kadar süreyle bu rehber .
Ve sonra sunucu önbelleğe alma var. Temel olarak sunucu önbelleğe alma, sitenizi alır ve kullanıcılarınız ile gerçek sunucunuz arasında bir çeşit "kopya" koyar. Neden rahatsız ediyorsun?
Peki, özellikle geniş bir içerik yönetimi sistemi kullanan kişiler için yararlıdır. Kullanıcılarınızın sitenizin gerçek bir kopyası yerine gerçek bir kopyasına erişmesi, veritabanınıza yapılan çağrı sayısını azaltır. Bilgi her seferinde yeniden işlenmesi gerekmediğinden daha hızlı görüntülenir ve yüklenir.
Nasıl kurulduğuna bağlı olarak, sunucu önbelleklemesi genel olarak bant genişliği maliyetlerini de düşürebilir. Temel olarak, siteniz ne kadar büyükse, önbelleğe almak için daha fazla nedeniniz var.
Ve şimdi, hepiniz beklediğiniz bölüm: linkler listesi! Çoğunlukla dersler ve rehberler ve önerebileceğiniz birkaç resim sıkıştırma aracı var.
Yahoo! Bir zamanlar olduğu kadar büyük bir anlaşma olmayabilir, ancak geliştirici ağının üzerinde çok iyi şeyler var. Bu onların içerir Web sitenizi hızlandırmak için en iyi yöntemler Yapabileceğiniz bazı temel şeyleri kapsar. Bazıları bu yazı ile aynı zemini kapsamakta, ancak daha fazlası var.
Girişte algılanan site hızından da bahsettim, ayrıca algılanan perfomance olarak da anıldım. Bu konuda daha fazla bilgi edinmek isterseniz Algılanan Performansa Yeni Başlayanlar Kılavuzu: Mobil Sitenizi Yerel Bir Uygulama gibi hissettirmenin 4 Yolu .
Effeckt.css Kullanıcının hangi platformda olduğu fark etmeksizin hızlı işlemek için tasarlanan CSS tabanlı animasyonlar kümesidir.
Bu CSS'nizin tarayıcı tarafından olabildiğince hızlı indirildiğinden ve işlendiğinden emin olmanız için bir kılavuzdur.
Yeni başladığı zaman, doğru kodlamayı öğrenmek öğrenebileceğiniz hilelerin rastgele ipuçları kadar büyük bir hız artışı olabilir. Hata kodu işlem süresi açısından daha maliyetlidir, bu yüzden işleri doğru şekilde yapmayı öğrenin.
İşte bir temel rehber Bu, özellikle hızlı çalışan JavaScript yazarak daha net odaklanır.
Başlığın dediği gibi, bu Özellikle JavaScript V8'de hedeflenen tüm önerilerdir.
Ve bazen, muhtemelen jQuery kullanarak sona erecek. Eğer bunu yapacaksan, en azından seni yavaşlatmayan jQuery seçicilerini nasıl yazacağını bilmelisin. Ve işte burada Site Noktası kapsamına girmiş .
Oku bunu Web'deki görüntü formatları hakkında daha fazla bilgi için. Bilgi biraz eski ama yine de geçerli ve bilmesi güzel.
Bu Google Geliştirici Ağı tarafından sağlanan görüntü optimizasyonu için daha teknik bir kılavuzdur.
Compressor.io kişisel olarak karşılaştığım daha etkileyici araçlardan biridir. Bu bir çevrimiçi uygulama, bu yüzden sıkıştırmak istediğiniz dosyaları yüklemeniz gerekecek, ancak JPG'ler için harikalar yaratabilirsiniz. Her ikisi de oldukça şaşırtıcı sonuçlara sahip hem kayıp hem de kayıpsız sıkıştırma seçenekleri sunar ve aynı zamanda toplu işleme de yapabilir.
Trimage Kayıpsız sıkıştırma konusunda uzmanlaşmıştır, ancak kendi bilgisayarınızda, Windows, Mac veya Linux'ta kurulabilir. Bilgisayarınıza yüklendiğinden (ve evet, çeşitli komut satırı seçenekleriyle birlikte bir GUI ile birlikte gelir), geliştirme iş akışının bir parçası olarak kolayca otomatik olarak çalıştırılabilir.
Her zaman olduğu gibi, öğrenecek daha çok şey var. Ancak, sağladığımız bilgilerle ve bize bağladığımız kaynaklarla donanmış olursanız, Cehennemizi rahatsız etmeyen sitelerinizi ve uygulamalarınızı kullanıcılarınızdan uzaklaştıracaksınız.
Ve bu onları etkilemek için ilk adım.