Web Optimizasyonu İçin En İyi Rehber (İpuçları ve En İyi Uygulamalar)

Web optimizasyonu web geliştirme ve bakımın hayati bir parçasıdır, fakat aynı zamanda webmasterlar tarafından sıklıkla göz ardı edilen bir şeydir. Sadece tasarruf edebileceğiniz parayı ve bunun doğru şekilde yapıldığında okurunuzu ve trafiğinizi artırmaya nasıl yardımcı olabileceğini düşünün.

Web sitenize (veya blogunuza) herhangi bir optimizasyon yapmadıysanız veya sitenizi hızlandırmaya nasıl yardımcı olabileceğini merak ediyorsanız, lütfen bir araya getirdiğimiz bu optimizasyon ipuçlarına bir göz atın.

Daha iyi okunabilmesi için her şeyi 3 ayrı bölüme ayırdık - sırasıyla sunucu tarafı optimizasyonu, varlık optimizasyonu (CSS, Javascript, resimler vb. web bileşenlerini içerir) ve platform, odaklanacağımız yer WordPress optimizasyonu. Son bölümde, yararlı bulduğumuz birkaç bağlantıya geçtik. Atlamadan sonra tam liste.

Optimizasyon: Sunucu tarafı

1. İyi bir Web Host seçin

   Web barındırma hesabınızın yapmak üzere olduğunuz optimizasyonlarla doğrudan bir ilişkisi yoktur, ancak doğru web barındırma hesabını seçerek çok önemli olduğumuza karar verdik. Barındırma hesabı, web sitenizin / blogunuzun temeli olup, güvenlik, erişilebilirlik (cPanel, FTP, SSH), sunucu kararlılığı, fiyatlar ve müşteri tüm önemli rolleri desteklemektedir. Emin ellerde olduğundan emin olmalısın.

   Önerilen okuma: Bir Web Host Nasıl Seçilir tarafından wikiHow Herhangi bir web hosting hesabı satın almadan önce bilmeniz gereken adımlar ve ipuçları veren harika bir makaledir.

2. Ayrı Ayrı Ana Bilgisayar Varlıkları

   Varlıklardan bahsettiğimizde, web bileşenleri demek istiyoruz. Görüntüler ve statik komut dosyaları Bu sunucu tarafı işleme gerektirmez. Bunlar arasında web grafikleri, resimler, Javascriptler, Basamaklı Stil Sayfaları (CSS) vb. Var. Ayrı ayrı barındırma varlıkları zorunlu değildir, ancak blogun trafik sıkışıklığı gösterdiği sırada bu uygulamada sunucu kararlılığı açısından muazzam bir sonuç gördük.

   Önerilen Kaynaklar: Carpool Lane'deki Paralel İndirmeleri Maksimize Etme.

3. GZip ile Sıkıştırma

   Kısacası, içerik bir HTTP isteği yapıldığında sunucu tarafından istemci tarafına (tersi) geçer. İçeriği gönderilmek üzere sıkıştırmak, her isteği işleme koymak için gereken süreyi büyük ölçüde azaltır.

   GZip bunu yapmanın en iyi yollarından biridir ve kullandığınız sunucu türüne göre değişir. Örneğin, Apache 1.3 mod_zip kullanır, Apache 2.x mod_deflate kullanır ve işte bunu nasıl yaptığınız nginx. Sunucu tarafı sıkıştırma işlemlerine aşina olmanız için gerçekten çok iyi makaleler:

   • Apache dosya sıkıştırmasını etkinleştirerek bir web sitesini hızlandırın
   • Mod_gzip ve Apache Kullanarak Web Çıkışını Sıkıştırın
   • GZIP Sıkıştırma ile Sitenizi Nasıl Optimize Ederiz?
   • ASP için sunucu tarafı sıkıştırması

4. Yönlendirmeleri Küçült

   Web yöneticileri her zaman URL yönlendirmesi yapar (Javascript veya META yönlendirmeleri olsun). Bazen amacı kullanıcıları eski bir sayfadan yeniye yönlendirmek veya kullanıcıları doğru sayfaya yönlendirmektir. Her yönlendirme ek bir HTTP isteği ve RTT (gidiş-dönüş zamanı) oluşturur. Yönlendirmeniz ne kadar fazlaysa, kullanıcı o kadar yavaş gidecektir.

   Önerilen Kaynaklar: Yönlendirmelerden Kaçının Google Kodu ile size konuyla ilgili iyi bir genel bakış sunar. Bu makale ayrıca servis hızını artırmak için yönlendirmeyi en aza indirmenin bazı pratik yollarını da önermektedir..

5. DNS Aramalarını Azaltın

   Göre Yahoo! Geliştirici Ağı Blogu, DNS'nin (Etki Alanı Adı Sistemi) belirli bir ana bilgisayar adı veya etki alanı adı için IP adresini çözmesi yaklaşık 20-120 milisaniye sürer ve işlem doğru şekilde tamamlanana kadar tarayıcı hiçbir şey yapamaz.

   Yazar Steve Souders Bu bileşenlerin en az iki, ancak en fazla dört ana bilgisayar adına bölünmesinin DNS aramalarını azalttığını ve yüksek derecede paralel indirmelere izin verdiğini öne sürdü.. Daha fazla oku makalede.

Optimizasyon: Varlıklar (CSS, Javascriptleri, Görüntüler)

1. Birden Çok Javascript'i Birinde Birleştirme

   Millet rakaz.nl gibi birden çok Javascript'i nasıl birleştirebileceğinizi paylaşıyor:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   URL'yi değiştirerek tek bir dosyada:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   .htaccess değiştirilerek ve PHP kullanılarak. Buraya TIKLAYIN daha fazla okumak için.

2. Javascript ve CSS'yi sıkıştır

   küçültmek Birden fazla CSS ve Javascript dosyasını bir araya getirebilen, içeriklerini sıkıştırabilecek (yani gereksiz boşluk / yorumların kaldırılması) sıkıştırabilen ve sonuçları HTTP şifrelemesi (gzip / deflate) ve optimum istemci tarafı önbelleğe almayı sağlayan başlıkları içeren bir PHP5 uygulamasıdır..

   

   Onları çevrimiçi sıkıştır!Javascriptlerinizi ve CSS dosyalarınızı çevrimiçi olarak manuel olarak sıkıştırmanıza izin veren bazı web servisleri de vardır. İşte tanıdığımız çok az şey var:

   • compressor.ebiene (JavaScript, CSS)
   • javascriptcompressor.com (JavaScript)
   • jscompress.com (JavaScript)
   • CleanCSS (CSS)
   • CSS Doktoru (CSS)

3. Üstbilgi Bitiş / Önbelleğe Alma Özelleştirme

   Kredi: httpwatch

   Özel bir Expiry başlığı kullanarak, görüntüler, statik dosyalar, CSS, Javascript gibi web bileşenleriniz, aynı kullanıcı sayfayı ikinci kez yeniden yüklediğinde gereksiz HTTP isteğini atladı. İhtiyaç duyulan bant genişliğini azaltır ve sayfaya daha hızlı sunumda kesinlikle yardımcı olur.

   Tavsiye edilen okumalar:

   • Yahoo! Geliştirici Ağı Blogu - Sona Erme Başlığı Ekleme
   • Apache 1.3'teki Resimlere İyi Son Kullanma Süresi Nasıl Eklenir?
   • HTTP Önbelleğe Alma
   • Web Yazarları ve Webmasterları İçin Önbelleğe Alma Eğitimi

4. Boşaltılmış Varlıklar

   Yüklemeyle, Javascriptleri, görüntüleri, CSS ve statik dosyaları, web sitesinin barındırıldığı ana sunucudan ayırmak ve başka bir sunucuya yerleştirmek veya diğer web hizmetlerine güvenmek anlamına gelir. Biz burada önemli bir gelişme gördük Hongkiat varlıkları diğer web servislerine deşarj ederek, sunucuyu genellikle PHP işlemlerini yapmak için bırakarak. Boşaltma için çevrimiçi servislerin bazı önerileri:

   • Görüntüler: Flickr, Smugmug, Ücretli toplantılar *
   • Javascriptlerinizi: Google Ajax Kütüphanesi, Google App Motoru, Ücretli toplantılar *
   • İnternet formus: WuFoo, FormStack
   • RSS: Google Feedburner
   • Anket ve Anketler: SurveyMonkey, PollDaddy

   * Ücretli toplantılar - Ücretli servisler her zaman daha iyi güvenilirlik ve stabiliteye sahiptir. Web siteniz sürekli olarak varlıkları istiyorsa, emin ellerde olduklarından emin olmanız gerekir. Amazon S3 ve Cloud Front ürününü öneriyoruz.

5. Web Görüntülerini Kullanma

   Resimler web sitenizin önemli bir parçasıdır. Bununla birlikte, eğer uygun şekilde optimize edilmezse, günlük olarak tahmin edilemeyecek kadar büyük miktarda bant genişliği kullanarak bir yük haline gelebilir ve sonuçlanabilir. İşte bazı Resimlerinizi optimize etmek için en iyi yöntemler:

   • PNG Görüntülerini Optimize EdinSmashing Magazine'deki Folks, PNG resimlerinizi optimize etmenize yardımcı olabilecek bazı akıllı teknikleri anlatıyor.
   • Web İçin Optimize Etme - Bilmeniz gerekenler (formatlar) Jpeg, GIF, PNG ve resimlerinizi web için nasıl kaydetmeniz gerektiği hakkında daha fazla bilgi edinin..
   • Görüntüleri ÖlçeklemeHer zaman ekleme ekleme Genişlik ve yükseklik Her görüntü için. Ayrıca, web üzerinde daha küçük bir sürüme ihtiyaç duyduğunuz için bir görüntüyü küçültmeyin. Örneğin: 200 × 200 piksellik bir görüntüyü web siteniz için değiştirerek 50 × 50 piksele kadar zorlamayın. Genişlik ve yükseklik. Bunun yerine 50 × 50 piksel alın.

   Web Servisleri ve Araçları ile Optimize Etme. İyi haber, resimlerinizi optimize etmek için Photoshop uzmanı olmanıza gerek yok. İşinizi yapmanıza yardımcı olacak çok sayıda web servisi ve aracı var..

   • Smush.itMuhtemelen görüntüleri optimize etmek için en etkili çevrimiçi araçlardan biri. Bunun için bir WordPress eklentisi bile var!
   • JPEG ve PNG StripperGereksiz meta verileri (önemsiz) JPG / JPEG / JFIF ve PNG dosyalarından çıkarmak / temizlemek / kaldırmak için kullanılan bir Windows aracı.
   • Çevrimiçi Resim Optimize EdiciGiflerinizi, animasyonlu gifleri, jpgs'leri ve pngs'lerinizi kolayca optimize etmenizi sağlar, böylece Dinamik Sürücü ile sitenize mümkün olan en hızlı şekilde yüklerler
   • SuperGIFTüm GIF resimlerinizi ve animasyonlarınızı zahmetsizce küçültün.
   • İşte dahası.

6. CSS’yi kullanma

   Modern web siteleri stilin temeli olarak CSS'i, görünüm ve his olarak kullanır. Yalnızca CSS değişikliklere büyük esneklik sağlamakla kalmaz, aynı zamanda ihtiyaç duyulan kodlar açısından daha azdır. Ancak, eğer kötü kodlanmışlarsa, geri tepme olabilir. CSS'inizin uygun şekilde optimize edildiğinden emin olmanız için bazı kontrol listeleri veya rehberler aşağıda belirtilmiştir:

   • Elementlerin Çocuklarını Çocuğa Uygun Tutmakİşaretlemenizi CSS Seçicileri ile nasıl temiz tutabilirsiniz?.
   • CSS’yi kısa tutunAynı stili verdiklerinde, kodlar ne kadar kısaysa o kadar iyidir. İşte bir CSS Shorthand kılavuzu muhtemelen ihtiyacınız olacak.
   • CSS Sprite kullanCSS Sprite tekniği, bir sayfanın her yüklenişinde, birden çok görüntüyü (veya tümünü) tek bir görüntü dosyasında birleştirerek HTTP isteğini azaltır ve çıktısını CSS ile kontrol eder Arka plan konumlu bağlıyor. CSS Sprite oluşturmak için bazı yararlı rehber ve teknikler:
     • Çevrimiçi CSS Sprite Generator
     • En İyi Çevrimiçi ve Çevrimdışı CSS Sprites Jeneratör
   • Her bildirimi yalnızca bir kez kullanmaCSS dosyalarınızı optimize etmek istediğinde, uygulayabileceğiniz en güçlü önlemlerden biri her bildirimi yalnızca bir kez kullanmaktır.
   • CSS dosyalarının miktarını azaltınNedeni basit, ne kadar fazla CSS dosyası sahibi olursanız, bir web sayfası istendiğinde yapması gereken daha fazla HTTP isteğine sahip olursunuz. Örneğin, aşağıdaki gibi birden fazla CSS dosyasına sahip olmak yerine:

     Bunları tek bir CSS'de birleştirebilirsiniz:

   Tavsiye edilen okumalar:

   • CSS Dosyanızı Kontrol Etmek, Temizlemek ve Optimize Etmek İçin Yararlı AraçlarCSS kodunuzu tamamen bilmiyor olsanız bile, CSS kodunuzu optimize etmek için kullanabileceğiniz faydalı araçlardan bazıları.
   • Temiz ve Optimize Edilmiş CSS Kodunun 7 İlkesiOptimizasyon sadece dosya boyutunu küçültmekle kalmaz, aynı zamanda düzenli, dağınık ve verimli olmakla da ilgilidir.
   • CSS’yi optimize etmek için En İyi UygulamalarBu makaleyi gerçek hayattaki optimizasyon ipuçlarından ziyade akademik bir alıştırma gibi düşünün.

WordPress için Optimizasyon

Zaman zaman, WordPress blogumuzun performansını izler, karşılaştırır ve analiz ederiz. Site yavaş çalışıyorsa, nedenini bilmemiz gerekir. İşte yaptığımız bazı temel değişiklikler ve WordPress blogunuzun hızını önemli ölçüde artıracağını düşündük..

1. Worpress Blog'unuzu Önbelleğe Alın

   WP-Cache Sizi çok daha hızlı ve daha duyarlı hale getirmek için son derece etkili bir WordPress sayfa önbellekleme sistemidir. Biz de tavsiye WP Süper Önbellek Daha önce bahsedilen eklenti geliştirir ve çok iyi bir iş yapar..

2. Kullanılmayan Eklentileri Devre Dışı Bırak ve Sil

   Blogunuzun çok yavaş yüklendiğini fark ettiğinizde, yüklü çok sayıda eklentiniz olup olmadığını görün. Suçlu olabilirler.

3. Gereksiz PHP Etiketlerini Kaldırma

   Temanızın kaynak kodlarına bakarsanız, bunlara benzer çok sayıda etiket bulacaksınız:

   Sunucuya yüklenmesine neden olmayan metin içeriğiyle hemen hemen değiştirilebilirler. Çıkış yapmak Michael Martin'ler WordPress Blo'unuzdan silmek için 13 etiketg

Önerilen Kaynaklar:

• WordPress'i Hızlandırmanın En Kolay 3 YoluJohn Pozadzides, blogunun bir Digg trafik yükselişinde sorunsuz bir şekilde gezinmesini paylaşıyor.
• MAX Performansı için 13 Harika WordPress Hızı İpuçları WordPress sitenizin yüksek trafik veya bilmediğiniz gizli sorunlar nedeniyle olabileceği kadar iyi performans göstermediğini tespit ederseniz denemeniz gereken birkaç şey var..
• 40 WordPress Optimizasyon İpuçlarıSlaytlarda optimizasyon ipuçları. 40 dakikada 40 tavsiye.

En son ama en kötü değil…

İşte size web optimizasyonunda size yardımcı olmak için daha geniş bir perspektif ve daha iyi analizler sağlayan bazı faydalı web servisleri ve araçları..

• Yahoo! YSlow

  YSlow web sayfalarını analiz eder ve yüksek performanslı web sayfaları için bir dizi kurala dayanarak performanslarını artırmanın yollarını önerir. Web sitesinin daha hızlı yüklenebilmesi için yapılması gerekenler hakkında size iyi bir fikir verir..

  (Firebug gerekli)

  

• Sayfa Hızı

  Benzer Yahoo! YSlow, Google Sayfa Hızı web sitesi performanslarını ve bunların nasıl iyileştirileceğini değerlendiren açık kaynaklı bir Firebug eklentisidir. (Firebug gerekli)

  

• Pingdom Araçları

  Pingdom Araçları tüm nesneleri (resimler, CSS, JavaScripts, RSS, Flash ve çerçeveler / iframe'ler dahil) web sitenizin tam yükünü alın ve yüklenen sayfa hakkında, toplam nesne sayısı, toplam yükleme süresi ve tüm boyutlar gibi genel istatistikler nesneleri.

  

Tavsiye edilen okumalar:İşte kontrol etmeye değer daha fazla ipucu ve araç.

• Google Web Doktoru
• Daha Hızlı Web Sayfaları Geliştirmenize Yardımcı olacak 15 Araçlar
• Web Sitenizi Hızlandırmak ve Kodunuzu Optimize Etmek İçin 15+ Tavsiye!