Giriş Yap
x
Güncel Scriptler ve Programlar, Warez, Php Script ve Asp Script, Tema, indir. Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
[-]

SPONSOR REKLAM


OptimiZasyoN avatar
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5

5 Adımda WordPress Sitenizi Hızlandırın


Çevrimdışı OptimiZasyoN
#1
WordPress sayfa açılışlarınızı hızlandırmak ister misiniz? Dave Rupert, WordPress sayfa açılış hızını 1 saniyenin altına indirdiği yöntemleri açıklamış. Makaledeki bilgiler Matt‘in (WordPress Geliştiricisi) dahi ilgisini çekmiş ki, yazıda onun da yorumunu görebilirsiniz.


WPDestek okurları için bu makalenin tamamını Türkçe’ye çevirdim.


WordPress Performansınızı Arttırın


Haziran ayında, Kyle Simpson ile bir röportaj yaptım. Web performansı ve Google’ın “Web’i Daha Hızlı Yapma” planı hakkında konuştuk. Bu plandan sonra Google, internet sitelerinin sayfa açılış hızlarını ödüllendireceğini bildirdi. Ve Webmaster Araçları’ndaki bölmede 1.4 saniyeyi işaretledi.


Beni şaşkınlıkla birlikte bir çeşit korku sardı. Çünkü, çok çaba göstermemize rağmen, 3-5 saniyeyi bulan sayfa açılış hızlarını iyi, 7 saniyeye ulaşan sayfa hızlarını ise kabul edilebilir bulurdum. The ATX Web Show röportajının kaydından sonra buradaki istatistiklerimin işe yaramaz olduğunu fark ettim ve sitemin hızını %500 arttırdım.


Bu sonuçlardan sonra tek düşündüğüm şey Web Optimizasyonu oldu. Şimdi webi milisaniyelerde görüntülüyordum. Eğer siz de benim gibiyseniz ve optimizasyona gerekli önemi vermediyseniz, belki de bu fikri yeniden değerlendirmelisiniz. Ve bu yanlızca sizin sorununuz değil, aslında kullanıcıların zamanını %80 oranında önyüz(frontend) çalıyor. Burada hedefi sadece birkaç kilobyte’lık tasarruf olarak düşünmeyin, hedef herşeyin olabilecek en düşük boyutlarda olduğundan emin olmak. Dosya boyutlarını azaltmak, istekleri azaltmak ve önbelleği etkinleştirmek.


Daha Hızlı Bir Web Sitesi için 5 Adım


Bu dökümanda CDN’ler ve benzeri ücretli yöntemleri kullanmadan YSlow ve Page Speed puanlarını arttıran yöntemleri adım adım anlattım. Pek çok site size sadece önbellek (cache) eklentisi kurmanızı söyler. Tabi ki bu eklentiyi kuracaksınız (5. Adım’a bakın), fakat optimizasyonları yaptıktan sonra. Aksi takdirde bu bir halta yaramaz, bu hastalığa çare olmaz, bir domuza ruj sürmeye benzer veya her neyle örneklendirmek isterseniz onu kullanın.


Adım 0: Doğru Araçları Yükleyin


webinspect 5 Adımda WordPress Sitenizi Hızlandırın Webkit Web Inspector
Web Inspector’ü kullanabilmeniz için Chrome veya Safari‘yi indirmeniz gerekiyor. Web Inspector’ün Kaynaklar Paneli sayfa açılış hızınızı gösteren görselleştirmelere ve adım adım eğlenceli karşılaştırmalar içeren geliştirmelere sahip.


firefox 5 Adımda WordPress Sitenizi HızlandırınFirefox


Eğer buna sahip değilseniz, yanlış sitedesiniz demektir. Eğer sahipseniz, Firebug eklentisini yüklemelisiniz.


firebug 5 Adımda WordPress Sitenizi Hızlandırın Firebug


Bunu zaten kurmuş olabilirsiniz, fakat buna YSlow ve Page Speed eklentilerini kurmak için ihtiyacımız olacak.


yslow 5 Adımda WordPress Sitenizi Hızlandırın YSlow
Yahoo’nun geliştirdiği bir Firebug eklentisi. Sayfa hızınızı derecelendirir ve belirlenmiş kriterlere göre size bir başarı notu sunar.


pagespeed 5 Adımda WordPress Sitenizi Hızlandırın Page Speed
Google’ın geliştirdiği bir Firebug eklentisi. Page Speed YSlow’a çok benziyor. Sayfa hızınızı derecelendiriyor ve nasıl hızlandırabileceğinizi anlatıyor. Bu benim ikinci favorim.


webmaster araclari 5 Adımda WordPress Sitenizi Hızlandırın Webmaster Araçları


Eğer erişebiliyorsanız Webmaster Araçlarına sitenizi kayıt edin. Laboratuvar > Site Performansı sekmesinde, Google tarafından kayıt edilen ortalama sayfa hızı değerlerinize ait grafiğe ulaşabilirsiniz.


Adım 1: CSS Dosyanızı Küçültün & Optimize Edin

Bu sadece 3 adımdan oluşan bir işlem ve burada sitemizin ağırlık fazlasını kesip atacağız. Burada sizin %10′luk bir değişim söz konusu. Eğer size çok yavaş gelmeyecekse, satır satır ilerleyin ve bolca tekrar edin.

CSS Dosyanızı Küçültün

Page Speed’i açın ve “Analyze Performance”a tıklayın. “Minify CSS” başlıklı sekmeyi bulun. Burada sayfanızın çağırdığı her CSS dosyasının optimize edilmiş versiyonlarına ait indirme linklerini görebilirsiniz. Temanızın CSS’lerini bunlarla değiştirin.

WordPress için, temanızın tanımlamalarını içeren bölmeyi optimize edilmiş CSS dosyanızın en üstüne eklemeyi unutmayın.

Ne yazık ki WordPress’te, bir çok blogun kullandığı eklentiler içerisinde yapımcılarının imzalarını bulunduran eklentiler, optimize edilmiş dosyalara bile yapımcısının imzasını yerleştirebiliyor. Kullandığınız bazı eklentilerin CSS dosyanızı düzenlemesi mümkün. Yalnızca mükemmel bir dünyada WordPress eklentileri optimize kodlarla birlikte gelir.

Bu belki tavsiye edilmez, fakat ben eklentileri düzenleyerek içlerindeki CSS ve Javascript’e ekstra kodlar ekleyen bölümleri çıkarıyorum. Bunu her eklenti güncellemesinde tekrarlamak gerekiyor.

Öğrenme Noktası: Gereğini Aşmayın. Verimli CSS Seçicileri Kullanın.

Ben her zaman en iyi olanın en belirgin seçicileri kullanarak yazılan CSS’in iyi olduğunu önerirdim, ama bu yanlışmış. Bunun adı “aşırıya kaçmak” oluyor ve ayıklama işlemi için tarayıcıyı daha fazla çalıştırıyor. Hız oyununda kazananlar benzersiz sınıf ve benzersiz elemanlar olacaktır.

#header nav ul li a { ... }
/* kötü. 5 seçici bu iş için çok fazla. */

ul.commentlist { ... }
/* kötü. yapışık fazlalık. */
#header a { ... }
/* daha iyi. daha dolaysız. gerçekten iyi. */

.commentlist { ... }
/* daha iyi. sadece sınıf seçici fazla spesifik olabilir. daha fazla çevik.*/
Ben bunu üstü kapalı özetledim, ama Chris Coyier CSS-Tricks’deki CSS’i Verimli Kılmak yazısında harika anlatmış.

Küçültülmüş CSS Sonuçları

Benim düşüncem, insanların okuyabileceğim şekilde CSS yapmamın daha iyi olacağı yönünde, ama bu ekstra 180 KB ekliyor. Siz bir sonraki adıma geçip kullanılmayan sınıfları çıkarabilirsiniz, ama ben şahsen bazı jenerik sınıfların bulundurulmasını tercih ederim (tablolar gibi).

Toplam BoyutYüklenme SüresiKüçültme Öncesi248.96 KB2.57 snKüçültme Sonrası70.82 KB2.07 sn

Adım 2: Optimize Görseller

Görselleriniz çok şişman. Photoshop’un “Save for Web” özelliği çok güzel optimizasyonlar sunuyor, ama burada fazlalıklar var. Resimleriniz atılması gereken gereksiz, kocaman meta verilerine sahip. Bunu düzeltmek çok kolay olmayabilir.

Burada resimlerinizi optimize edecek bazı araçlar var.
Page Speed resimlerinizdeki fazlalıkları atıp size optimize hallerini sunar.
Kayıt edin ve sitenize yükleyin(upload edin).

YSlow > Tools > All Smush.it – bu sayfanızdaki tüm resimleri bir defada küçültür ve klasör yapısını bozmaz.

Bu inanılmaz derece pratik.
ImageOptim (Mac için) çevrimdışı çalışan ve belirlediğiniz klasördeki resimleri optimize eden harika bir araç.

Resimlerinizi internete upload etmeden önce bunu uygulayın, daha sonra upload edin.

Bazen sadece 400 B kazancınız olur ve “Buradaki amaç nedir?” diye düşünebilirsiniz. Yüzdelere odaklanın.

Eğer resminiz %9 oranında küçülmüşse, bu kullanıcılarınızın resminizi %9 daha hızlı göreceği anlamına gelir. Matematik!


Resminizi ya da resminizin bulunduğu klasörü optimize işleminden önce yedeklediğinizden emin olun.


Eğer resimlerinizde Adobe RGB renk profilini kullanıyorsanız, bazı optimize araçları bu profili resminizden silebilir ve resminizde renk kayıpları oluşur. Adobe RGB profili yazdırma işlemleri için resminize 50 KB ekler. sRGB profilini kullanın.


Resimlerinizi Orantılı Şekilde Boyutlandırın


Bu iyi bir başlangıç. 400×400 px boyutlarınızdaki görseli sayfanızda 200×200 px olarak kullanıyorsanız onu 200×200 px olarak boyutlandırın. Büyük resimlerin indirilmesi ve tarayıcı tarafından boyutlandırılması uzun sürer.


Resim Boyutlarını Belirtin


Resim boyutunu belirtme hakkında çok büyük bir taahhüt bulunmasa da, Page Speed resimlerinizin boy ve en oranlarını belirtmenizi öneriyor, böylelikle tarayıcının bunu ayırt etmesine gerek kalmıyor. Bunu etiketinize ekleyin. Görevi tamamlamanız toplamda 2 dakika sürer.


Sprite’la Beni


Sprite’ları kullanın. Biraz zamanınızı harcayın, ileride bunu kazanırsınız. Bu tonlarca HTTP isteğini önler ve hatta sitenizi çok daha hızlandırır. Google performans gurusu Steve Souders, sizin için SpriteMe adında bir araç yaptı. Bookmarklet’i tarayıcınıza ekleyin ve anasayfanızdayken buna tıklayın, sonra bırakın işini yapsın. O size sprite edilmiş resimlerinizi ve stil dosyanız için gerekli CSS kodlarını paketleyip verir.

Gereken yetenek: Matematik.
Küçültülmüş Resim Sonuçları


Resimlerimin optimizasyonlarından sonra ki kazançlarım burada. Kazançlardaki doğru orantıyı görebilirsiniz. %17′lik KB kazancının sonucu %23′lük hız artışı.


Toplam BoyutYüklenme SüresiKüçültme Öncesi70.82 KB2.07 snKüçültme Sonrası54.66 KB1.60 sn


Javascriptleri Küçültün ve Optimize Edin


Tıpkı CSS’te olduğu gibi, Page Speed ile sayfanızdaki JS’lerin küçültülmüş hallerini indirebilirsiniz. Küçültülmüş hallerini alıp sitenizdekilerle değiştirin. Bu size %10′luk bir değişim sağlar. Yine kullanmış olduğunuz eklentiler JS’lere ekstra satırlar ekliyorsa, bu eklentileri düzenleyerek bunu engelleyin.
Tek JS Kütüphanesi ile Hepsine Hükmedin


Eğer JQuery, Mootools ve Prototype kütüphanelerini birlikte kullanıyorsanız, birşeyleri yanlış yapıyorsunuzdur. Bu kütüphaneler birbirlerinin aynısı olan pek çok fonksiyon taşırlar ve siz bunları kullandığınızda basit anlamıyla kendinizi tekrar etmiş gibi olursunuz, bant genişliğini çöpe atmış olursunuz. Kullanmış olduğunuz eklentileri iyi bir göz atın. Hangi eklentinin hangi kütüphaneyi kullandığını bulun ve tek bir kütüphaneye odaklanıp onu kullanın (JQuery). Seçtiğiniz kütüphaneyi kullanan alternatif eklentiler kullanın.

JS Küçültme Sonuçları


Sizin sonuçlarınız değişik olabilir. Eğer birden çok JS kütüphanesini elediyseniz, yüzlerce KB tasarruf ettiğinizi görebilirsiniz.
Toplam BoyutYüklenme SüresiKüçültme Öncesi54.66 KB1.60 snKüçültme Sonrası39.28 KB1.53 sn

Adım 4: .htaccess ile Apache’nin GZIP Özelliğini & Tarayıcı Önbelleğini

Etkinleştirin

Bu işi iyice öğrenmek uzun zamanımı aldı.

Bu uygulama için yeterince cahildim, google’layıp birkaç iyi kaynak buldum. Eğer Apache üzerinden yayın yapıyorsanız (muhtemelen öyledir), aşağıdakileri .htaccess dosyanıza WordPress’e ait kodlardan hemen sonra ekleyin. Eğer bu işlemin ne yaptığını anlayamadıysanız, sorun değil. Sırasıyla şunları yapıyor:


Gzip ve mod_deflate mime türlerini algılıyor.
Mime türü için mod_expires’ı algılayıp bitiş(expire) süresini ayarlıyor.
Mime türü için mod_headers’ı algılayıp, Tarayıcı Önbelleği limitlerini ayarlıyor.


# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

# Expires Headers - 2678400s = 31 days
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType image/gif "access plus 2678400 seconds"
ExpiresByType image/jpeg "access plus 2678400 seconds"
ExpiresByType image/png "access plus 2678400 seconds"
ExpiresByType text/css "access plus 518400 seconds"
ExpiresByType text/javascript "access plus 2678400 seconds"
ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

# Cache Headers
<ifmodule mod_headers.c>
# Cache specified files for 31 days
<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"
</filesmatch>
# Cache HTML files for a couple hours
<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesmatch>
# Cache PDFs for a day
<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"
</filesmatch>
# Cache Javascripts for 31 days
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"
</filesmatch>
</ifmodule>
webperformant.htaccess
Ben bu kodları bir düzine sitede ve farklı hostlarda denedim, bir problem görmedim. Zaten desteklenmeyen özellikleri görmezden geliyor. Eğer faydasını gördüyseniz, lütfen GitHub üzerinden yorum yapınız.


GZIP ve Tarayıcı Önbelleği Sonuçları


Artık tarayıcılar sitenize ait dosyaları saklayıp, gerektiğinde yükleyecekler. Bir sonraki sayfada tarayıcı görselleri yeniden indirmeye gerek duymayacak, mesela arkaplan resimleri gibi. Tabi bu görseller tarayıcı önbelleğinde bulunduğu sürece.

Performans araçları için bir not, bazı sayfalarda sayfa boyutu 0 KB olarak görünebilir. Bu sayfanın açılması için gerekenler tarayıcı önbelleğinden karşılanmıştır.


Burada bir problemle karşılaştım. GIDZipTest ve HTTP Sıkıştırma Testi GZip’in aktif olduğunu söylese de Page Speed bunu görmedi. Sonunda bunu Page Speed’de yakaladım ama doğru oranlar alamadım.


Adım 5: Performans için WordPress Eklentileri


WordPress’in web performansı için son adımda buradaki bazı eklentileri yüklemek gerekiyor. Yazının başında da söylediğim gibi, yarım yamalak berbat kodları düzeltmediğiniz sürece bu eklentilerin sitenizi hızlandırmasını beklemek yanlış. Sitenizin sağlam kemiklere ihtiyacı var. Ve okurlarınız bunu hak ediyor.


WP Minify


WP Minify, JS ve CSS dosyalarınızı optimize edip birleştirren mükemmel bir eklenti. Bende Javascript dosyalarını birleştirdiğinde bir problemle karşılaştım fakat, hiçbir eklenti betikleri mükemmel birleştirip sonunda çalışır halde sunamaz. Yine de deneyin. Eğer JS’lerinizi başarıyla sıkıştırıp tek dosya haline getirebilirseniz sizi alkışlayacağım.


WP Super Cache


Şimdi sayfanız optimize edildi, sayfa yüklenme hızınıza baktığınızda göreceğiniz ilk mavi nokta muhtemelen HTML’iniz olacaktır. Bunun sebebi gidip-dönüşler:

Alıcı İsteği -> WordPress Sunucusu -> Veritabanı -> WordPress Sunucusu -> Alıcı


Önbelleklemeyi etkinleştirdiğimizde veritabanına uğramak gerekmiyor:
Alıcı İsteği -> WordPress Sunucusu -> Alıcı
DAHA HIZLI! Aslında bu işlem daha karmaşık fakat basit anlatımıyla bu şekilde gerçekleşiyor.


Bu işlem için WP SUPER CACHE‘i muhteşem buluyorum ve şiddetle öneriyorum. Kurulumu sırasında başınızı ağrıtacak geçici klasör oluşturma, bazı klasörler yazma izni verme, wp-config.php dosyasına satır ekleme ve .htaccess dosyasını düzenleme gibi işlemler olabilir. %30 oranla WordPress kurulumunuzda beyaz ekran görebilirsiniz fakat bu sizi korkutmasın. Sadece yönergeleri izleyin ve adım adım kurulumu gerçekleştirin. Sonuçta ziyaretçileriniz HTML’inize sadece milisaniyeler içinde ulaşabilecek.
Sonuç Olarak


Sizin sonuçlarınız değişebilir, ama ziyaretçilerinize çok daha iyi bir web deneyimi yaşatacağınıza söz veriyorum. Bana bir bakın, 4 saat google’ladım, engellerle karşılaştım ve blog notları yazdım. Sizin sadece 1 saatinizi alacak.


Toplam BoyutYüklenme SüresiÖncesi248.96 KB2.57 snSonrası36 KB796 ms
Şimdi daha iyi bir web sitesinden sadece 1 saat uzaktasınız.

Bunları yapmamanın bir bahanesi olamaz.


Kaynak: Web Performant WordPress by Dave Rupert


Çeviri için izin alınmıştır. Lütfen makaleyi paylaşırken, tamamını paylaşmak yerine bir kısmını paylaşın ve bu yazıyı kaynak gösterin.
Düşüncelerinizi yorumlarınızda belirtirseniz sevinirim.
Thanks Dave. A very useful article.
Ara
Cevapla
 


Anahtar Kelimeler

5 Adımda WordPress Sitenizi Hızlandırın indir, 5 Adımda WordPress Sitenizi Hızlandırın Videosu, 5 Adımda WordPress Sitenizi Hızlandırın online izle, 5 Adımda WordPress Sitenizi Hızlandırın Bedava indir, 5 Adımda WordPress Sitenizi Hızlandırın Yükle, 5 Adımda WordPress Sitenizi Hızlandırın Hakkında, 5 Adımda WordPress Sitenizi Hızlandırın nedir, 5 Adımda WordPress Sitenizi Hızlandırın Free indir, 5 Adımda WordPress Sitenizi Hızlandırın oyunu, 5 Adımda WordPress Sitenizi Hızlandırın download


5 Adımda WordPress Sitenizi Hızlandırın konusu
5 Adımda WordPress Sitenizi Hızlandırın Konusunun Etiketleri Etiketler 5 Adımda WordPress Sitenizi Hızlandırın indir, 5 Adımda WordPress Sitenizi Hızlandırın download, 5 Adımda WordPress Sitenizi Hızlandırın script indir, 5 Adımda WordPress Sitenizi Hızlandırınwarez script, 5 Adımda WordPress Sitenizi Hızlandırın hakkinda, 5 Adımda WordPress Sitenizi Hızlandırın teması, 5 Adımda WordPress Sitenizi Hızlandırın ücretsiz indir, 5 Adımda WordPress Sitenizi Hızlandırın full indir,5 Adımda WordPress Sitenizi Hızlandırın temasi indir,5 Adımda WordPress Sitenizi Hızlandırın full warez,5 Adımda WordPress Sitenizi Hızlandırın php script indir,5 Adımda WordPress Sitenizi Hızlandırın free download,5 Adımda WordPress Sitenizi Hızlandırın çözümü,5 Adımda WordPress Sitenizi Hızlandırın hatası,5 Adımda WordPress Sitenizi Hızlandırın programını indir,5 Adımda WordPress Sitenizi Hızlandırın kurulumu,5 Adımda WordPress Sitenizi Hızlandırın crack,5 Adımda WordPress Sitenizi Hızlandırın serial,5 Adımda WordPress Sitenizi Hızlandırın asp indir,5 Adımda WordPress Sitenizi Hızlandırın tasarim indir,5 Adımda WordPress Sitenizi Hızlandırın script arşivi,5 Adımda WordPress Sitenizi Hızlandırın resimli anlatım,5 Adımda WordPress Sitenizi Hızlandırın videolu anlatım,5 Adımda WordPress Sitenizi Hızlandırın html tema
5 Adımda WordPress Sitenizi Hızlandırın Konusunun Linki Direk Link
5 Adımda WordPress Sitenizi Hızlandırın Konusunun HTML Kodu HTML Link
5 Adımda WordPress Sitenizi Hızlandırın Konusu BBCode Linki BBCode Link
5 Adımda WordPress Sitenizi Hızlandırın Konusunu Paylaş Sosyal Paylaş


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  WordPress Güvenlik Tedbirleri! trojen 0 333 10.10.2015, Saat:17:16
Son Yorum: trojen
  Wordpress Wp-Config Yerini Değişitrme trojen 0 336 10.10.2015, Saat:17:11
Son Yorum: trojen
  Wordpress .htaccess güvenlik önlemi Alma trojen 0 266 10.10.2015, Saat:17:09
Son Yorum: trojen
Photo Wordpress'de Anasayfada Resimler Gözükmüyor Sky Wolker 3 1,214 17.10.2014, Saat:02:10
Son Yorum: xxxxxx
  Wordpress Video Galerisi Hakkında warezing 1 1,018 17.10.2014, Saat:02:08
Son Yorum: xxxxxx



Konuyu Okuyanlar: 1 Ziyaretçi
istanbul escort bayan travesti travestiler
ankara escort kayseri escort antalya escort pornolar konya escort