site hızlandırma – Konyaaltı Bilişim https://konyaaltibilisim.com Sunucu Hizmetleri, Network Hizmetleri, Web Tasarım Wed, 31 Mar 2021 09:06:35 +0000 tr hourly 1 https://wordpress.org/?v=6.7.4 https://konyaaltibilisim.com/wp-content/uploads/2019/12/cropped-favicon-yesil-32x32.png site hızlandırma – Konyaaltı Bilişim https://konyaaltibilisim.com 32 32 Cloudflare Nedir? Cloudflare ile Site Hızlandırma https://konyaaltibilisim.com/cloudflare-nedir-cloudflare-site-hizlandirma/ https://konyaaltibilisim.com/cloudflare-nedir-cloudflare-site-hizlandirma/#comments Tue, 12 May 2020 16:55:51 +0000 https://konyaaltibilisim.com/?p=22713

Rehber niteliği taşıyan bu makale ile, Cloudflare nedir, ne işe yarar? Cloudflare DNS ayarları nasıl yapılır? WordPress Cloudflare kurulumu nasıl yapılır? Cloudflare ile site hızlandırma gibi konuları, detaylı olarak inceleyeceğiz. Ayrıca, En iyi Cloudflare ayarlarına kapsamlı olarak değineceğiz.   

Cloudflare Nedir?

Cloudflare, web siteleri için, güvenlik ve hızlandırma hizmetleri sunan bir firmadır. Bu hizmetlerde önde gelen, dünyanın en büyük şirketlerinden birisidir. Öyle ki, 2014 yılındaki saldırıda, dünya üzerindeki, Cloudflare kullanan bir çok site offline duruma düşmüştü.

Cloudflare çalışma mantığı aslında çok basit. Biliyorsunuz, alan adımızı aldıktan sonra, hosting aldığımız sunucuya yönlendiriyoruz. Örneğin, GoDaddy üzerinden aldığımız domainin, DNS ayarlarını, ns1.guzel.net.tr, ns2.guzel.net.tr şeklinde değiştiriyoruz. 

Cloudflare kullanmak istersek, bu ayarları, kate.ns.cloudflare.com ve demon.ns.cloudflare.com şeklinde değiştirmemiz gerekiyor. Daha sonra, Cloudflare ayarlarımıza gidip, hosting ip adresimizi giriyoruz. Hepsi bu kadar, artık araya Cloudflare’i dahil etmiş olduk. Ayrıca, kötü niyetli kişiler, artık bizim gerçek ip adresimize ulaşamayacak.

Peki Cloudflare ne demek? Cloudflare kelime anlamı olarak “Bulut Parlaması” anlamına geliyor. Zaten logosunda da bunu çağrıştırıyor.

Cloudflare Nedir? Cloudflare Nasıl Çalışır?
Cloudflare Nedir? Cloudflare Nasıl Çalışır?

Cloudflare Ne İşe Yarar?

Cloudflare ile site hızlandırabiliriz, WordPress siteniz için ücretsiz CDN hizmetinden faydalanabiliriz. WordPress sitenizi HTTP3 ile sunabilirsiniz. Cloudflare DNS hizmeti de sunmaktadır. Üstelik bunlar ve diğer birçok özellik ücretsiz. 

 

Cloudflare ücretlerine  https://www.cloudflare.com/plans/ adresinden ulaşabilirsiniz.

Cloudflare içerisinde dahili bir güvenlik duvarı bulunmaktadır. Otomatik olarak saldırıları engellediği gibi, kendimiz de bu güvenlik duvarına ayarlar ekleyebiliyoruz. 

 

Ayrıca bizi DDOS ataklarından korumakta. Yine 2014 yılında 400 Gbps DDOS saldırı ile bir süre hizmet veremedi.

“Tarihin en büyük DDOS saldırısı, 2018 yılında, 1.7 Tbps ile Reddit sunucularına yapılmıştır. Reddit 10 dakika kapalı kalmıştır.”

Cloudflare İle Site Hızlandırma

Özellikle Cloudflare’a WordPress sitenizi  ekleyerek bir miktar hızlanmasını sağlamak mümkün. Yapmanız gereken ayarları, Cloudflare ayarları başlığında, detaylıca anlatacağım. Bu ayarlar sayesinde siteniz daha hızlı çalışacak ve kullanıcı deneyimi daha iyi olacak. Bu sayede, Cloudflare SEO’nuzu bile etkileyecek. 

Peki Cloudflare hızlandırmayı nasıl yapıyor? Cloudflare, CSS, JS, ve HTML dosyalarını küçültebiliyor. “Rocket Loader” özelliği ile JS içeren sayfaların açılış süresini hızlandırıyor. Bunu denedim gerçekten işe yarıyor. 

Google’ın geliştirdiği “Brotli” özelliğini kullanarak sıkıştırma yapıyor. Böylelikle Gzip’ten daha iyi bir sıkıştırma olanağı sağlıyor.Ayrıca test sitelerinden daha yüksek puan almanızı sağlıyor.

Bunları biliyoruz ama benim değinmek istediğim bir konu daha var. Cloudflare DNS hızı!

Bildiğiniz gibi DNS (Domain Name Server), sunucu ip adreslerini isme dönüştürmeye yarıyor. Yani birisi site adresimizi yazdığında, sitenin barındığı sunucunun ip adresine, yönlendirmeye yarıyor. Bunu, ip adreslerinin karşısında, site isimlerinin yer aldığı, dev bir rehber gibi düşünün.

Cloudflare, dünya üzerinde bulunan, farklı lokasyonlardaki sunucuları sayesinde, bu işi ciddi anlamda hızlandırıyor. Böylece, ziyaretçi ile web sitemiz arasındaki bağlantı, daha hızlı oluyor. 

Sizde DNS hızınızı, “tools.pingdom.com/“ adresine girerek test edebilirsiniz.

Clodflare Nedir? Cloudflare site hizlandirma - DNS Hızı
Clodflare Nedir? Cloudflare site hizlandirma – DNS Hızı

 

Web Sitenizi Cloudflare ile Statik Siteye Dönüştürün

Web sitenizi hızlandırmanın başka bir yolu da sitenizi statik web sitesine dönüştürmektir.

Statik web siteleri sadece HTML kodundan oluşur ve veri tabanından sorguda bulunmazlar.

Eğer bir e-ticaret siteniz varsa bu yöntem işinize yaramayabilir.

Cloudflare ile statik bir web sitesi sunmak için aşağıdaki kuralları Page Rule alanına eklemeniz gerekir.  

Cloudflare ile statik web sitesi oluşturma
Cloudflare ile statik web sitesi oluşturma

Cloudflare Nasıl Kurulur

WordPress Cloudflare kurulumunu, aşağıdaki adımları izleyerek, kolayca tamamlayabilirsiniz.

1. “https://www.cloudflare.com/” adresine girerek, “Sing Up” butonuna tıklayın.

Cloudflare kayıt olma

2.  “E-mail” adresinizi girin, ardından bir “şifre” belirleyin ve “Create Account” butonuna tıklayın.

Cloudflare e-mail ve şifre ekranı

3.  “Add Site“ butonuna tıklayın ve “siteadresiniz.com” şeklinde web sitenizi ekleyin.

Cloudflare site ekleme

4.  “Free” seçeneğini seçerek devam edin.

Cloudflare ücretsiz kullanım

5.  “Review your DNS records” altında, mevcut sunucu kayıtlarımızı, otomatik olarak taradı ve buldu. Burada bir işlem yapmanız gerekmiyor. “Continue” butonuna tıklayarak devam edin.

Cloudflare DNS kayıtları

6.  “Replace with Cloudflare’s nameservers” altında bulunan, name server isimlerini not alın. Bu nameserver’ları domain aldığımız alana giderek ekleyeceğiz. Şimdilik “Done, check nameservers” butonuna tıklayarak devam edin.

Cloudflare Nameserver ayarları

7.  Bu alanda “Cloudflare SSL ayarları” bulunuyor. Hiç bir değişiklik yapmadan devam edin.

Cloudflare SSL ayarları

Kurulum işlemi tamamlandı. Şimdi domain paneline giderek not aldığımız nameserver’ları değiştirmemiz gerekiyor. Ben domain adresimi, GoDaddy üzerinden almıştım, o yüzden GoDaddy üzerinden anlatacağım. Diğer firmaların nameserver ayarları da, hemen hemen aynı şekilde yapılmakta.

1.  “https://tr.godaddy.com/” adresine giderek “Giriş” yapın.

Godaddy Giriş
Godaddy Giriş

 

 

 

 

 

 

 

 

2.  Değiştirmek istediğiniz alan adınızın karşısındaki “DNS” butonuna basın.

Godaddy nameserver değiştirme
Godaddy nameserver değiştirme
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3.  Ad Sunucuları altındaki “Değiştir” butonuna basın.
 
Godaddy nameserver ayarlama
Godaddy nameserver ayarlama
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4.  Daha önce not aldığınız “ad sunucularını” bu alana girip kaydedin.
 
 
Godaddy ad sunucusu ayarlama
Godaddy ad sunucusu ayarlama

Tebrikler! WordPress Cloudflare kurulum işlemini tamamladınız. Nameserver değişiklikleri biraz zaman almaktadır. Değişim işlemi bittiğinde, değişimin tamamlandığına dair bir mail alacaksınız. Ayrıca, Cloudflare yönetim panelinde, “Great news! Cloudflare is now protecting your site” şeklinde bir ibare göreceksiniz.

Cloudflare koruması aktif

Cloudflare Ayarları

 

Cloudflare “Overview” ayarları:

Bu alanda site ile ilgili istatistikler bulunmaktadır. Günlük, haftalık, aylık olarak ziyaretçi sayısı, yapılan sorgular gibi bilgiler yer alıyor.

 

Eğer saldırı altında olduğunuzu düşünüyorsanız “Quick Actions” altında yer alan “Under Attack Mode” seçeneğini aktif edebilirisiniz.  

 

Ayrıca burada çok işinize yarayacak bir mod var. Development Mode. Bu ayarı aktif ederseniz, Cloudflare devre dışı kalacak. Örneğin sitenizde bir değişiklik yaptınız ve bir sorun oluştu diyelim. Bu ayarı açarak sorunun Cloudflare kaynaklı olup olmadığını basitçe anlayabilirsiniz.

Cloudflare genel bakış

 

Cloudflare “Analitycs” ayarları: 

Bu alanda, yapılan isteklerle ilgili istatistikleri görebilirsiniz. Bu istekler bir CSS dosyası, JS dosyası yada bir resim olabilir. “Total Requests” toplam istek sayısını, “Cached Requests” ön bellekten sunulan istekleri ve “Uncached Requests” direk sunucunuzdan alınan istekleri gösterir. “Bandwitdh” sekmesinde, ön bellekten sunulan veri miktarını, MB cinsinden görebilirsiniz.
Cloudflare ayarları - analitycs

Cloudflare “DNS” ayarları: 

Cloudflare DNS ayarları bu bölümden yapılmaktadır. WordPress siteniz zaten bir sunucuda kurulu ise, Cloudflare bu ayarları otomatik algılar. Sizin hiç bir şey yapmanıza gerek yok. 
 
Cloudflare DNS ayarları

Fakat web siteniz Google Cloud, Contabo, gibi VPS ya da Dedicated sunucular üzerine kurmak istiyorsanız, eklemeniz gereken bazı kayıtlar var. Aşağıdaki adımları izleyerek kolayca DNS ayarlarını yapabilirsiniz.

VPS sunucu Cloudflare DNS ayarları

1. Add recort butonuna basın. Type bölümünü “A” seçin. Name kısmına sitenizin adresini başında www olmadan yazın. “IPv4 address” kısmına sunucunuzun IP adresini girin. TTL alanını “Auto” seçin ve Save butonuna tıklayın.

Cloudflare DNS ayarları A kaydı ekleme

 

2. Add recort butonuna basın. Type bölümünü “CNAME” seçin. Name kısmına “www” yazın. “Target” kısmına web sitenizin adresini başında www olmadan yazın. TTL alanını “Auto” seçin ve Save butonuna tıklayın.

VPS sunucu Cloudflare DNS ayarları

 

Cloudflare “SSL” ayarları: 

Bildiğiniz gibi SSL web sitenizi şifreleyip ziyaretçilere sunmanıza yarıyor. Eğer sitenizde SSL yoksa mutlaka eklemelisiniz. Google SSL’e çok önem veriyor.  Cloudflare WordPress SSL için ücretsiz hizmet veriyor diyebiliriz. 

Off: Bu ayar SSL’i tamamen kapatıyor ve sitenizi HTTP üzerinden yayınlıyor.

Flexible: Yanlızca ziyaretçi ile Cloudflare arasında SSL uyguluyor. Cloudflare ile sunucunuz arasında ise sunucunuz üzerindeki SSL geçerli oluyor.
Full: Ziyaretçi, Cloudflare ve sunucunuz arasında SSL uyguluyor.
Full (strict): Ziyaretçi, Cloudflare ve sunucunuz arasında SSL uyguluyor. Fakat burada kendi SSL’inizi yükleyebiliyorsunuz.

Ben burada “Full” seçeneğini seçmenizi öneriyorum. Böylece sunucunuzda bir SSL sorunu olsa bile, web siteniz SSL üzerinden yayın yapmaya devam edecektir. Eğer özel bir firmadan ücretli SSL hizmeti kullanıyorsanız “Flexible” seçeneğini kullanmanızı öneririm.

 
Cloudflare SSL ayarları

 

Cloudflare “Firewall” ayarları: 

Cloudflare Firewall otomatik olarak algıladığı saldırıları engelleyecektir. İsterseniz Firewall rules altında, özel firewall kuralları oluşturabilirsiniz. Mesela aşağıdaki kuralda, 36.158 ile başlayan tüm IP’lerin sitenize girişini engelleyebilirsiniz.

 
Cloudflare firewall kural oluşturma.

 

Cloudflare “Access” ayarları: 

Cloudflare Access ile bağlantıları daha güvenli hale getirebilirsiniz. Örneğin WordPress wp-admin girişine sadece belirlediğiniz ip adresinden giriş yapılmasını sağlamanız mümkün. Ya da bu kuralları sosyal medya, Gmail hesapları ile ilişkilendirebilirsiniz.

 
Cloudflare Access ayarları

Cloudflare “Speed” ayarları: 

Auto Minify: Bu bölümde JavaScript, CSS ve HTML dosyalarınız küçültülerek tarayıcıya daha hızlı gönderilmesi sağlanacaktır. Fakat LiteSpeed Cache gibi bir ön bellek eklentisi kullanıyorsanız bu ayarları açmayın. Bu ayarları nasıl yapacağınızı bilmiyorsanız, LiteSpeed cache ayaları makalemi incelemenizi öneririm. 

Brotli: Brotli, tarayıcıya gönderilen verilerin sıkıştırılmasını sağlayan bir Google hizmetidir. Tıpkı Gzip gibi. Bu ayar açık olduğunda site hızınızda artış olur ve test sitelerinden yüksek puan alırısınız.

Rocket Loader: Bu özellik aktif olduğunda JS dosyaları tarayıcıya daha hızlı gönderilir. Ziyaretçiler sayfaya girdiğinde, “First paint” olarak adlandırılan, ilk görüntü daha hızlı sunulur. 

AMP Real URL: AMP sayfalarında Google URL adresi yerine, web sitenizin orjinal adresi görünür.

Mobile Redirect: Mobil cihazlar için optimize edilmiş sayfalarınız varsa, alt alan adınıza yönlendirebilirsiniz . Keep Path seçili iken, adresin tamamı yönlendirilir. Drop Path seçili ise tüm sayfaları tek bir sayfaya yönlendirir.

 
Cloudflare Speed ayarları

 

Cloudflare “Caching” ayarları: 

Purge Cache: Cloudflare JS, CSS, HTML ve resimler gibi statik içeriğinizi ön belleğine alarak daha hızlı gönderilmesini sağlar. Bir nevi WordPress ücretsiz CDN hizmeti diyebiliriz. Ön belleğe alınmış dosyaları buradan silebilirsiniz. 

Caching Level: 
No query string: Sorgu dizesi olmadan statik öğeleri ön bellekten sunar. Ör: konyaaltibilisim.com/resim.jpg
Ignore query string: Sorgu dizesinden bağımsız olarak herkese aynı kaynağı sunar. Ör: konyaaltibilisim.com/resim.jpg?ignore=this-query-string
Standart: Sorgu dizesi her değiştiğinde farklı bir kaynak sunar. Ör: konyaaltibilisim.com/resim.jpg?with=query

Browser Cache TTL: Bu ayar, ön belleğe alınmış statik dosyaların, yaşam süresini belirler. Bu ayarı 1 yıl olarak belirlemenizi tavsiye derim. Eğer dosyalarınızda değişiklik olursa yeni dosyalarınız yeniden ön belleğe alınacaktır. 

CSAM Scanning Tool: Eğer sitenize editörleriniz ya da aboneleriniz tarafından çocuklara yönelik cinsel istismar ile ilgili görüntü dosyası yüklenirse sizi uyaracaktır.

Always Online: Site açılmıyor ise Cloudflare önbelleğinden siteniz yayın yapmaya devam eder. 

 

Cloudflare Caching ayarları

Cloudflare “Workers” ayarları: 

Bu özellik ile, JavaScript dosyalarını, herhangi bir sunucuya ihtiyaç duymadan çalıştırabilirsiniz. Cloudflare Workers rehberi için  https://developers.cloudflare.com/workers/quickstart adresini ziyaret edebilirsiniz.

Cloudflare Workers ayarları

 

Cloudflare “Page Rules” ayarları: 

Bu bölümden sayfalar için özel kurallar oluşturabilirsiniz. 

Örneğin aşağıdaki adımları izleyerek wp-admin için yüksek güvenlik sağlayabilirsiniz.
Create Page Rule butonuna tıklayın
URL bölümüne siteadresiniz.com/wp-admin* girin
Then the settings are bölümünden “Security Level” ve “High” seçimini yapın.
“Cache Level” seçin ve “Bypass” yapın.
“Disable Performance” seçin. 
“Disable Apps” seçin.
Save and Deploy butonuna tıklayın.

 

Cloudflare Page Rules wp-admin güvenlik ayarları

 

Elementor eklentisi ile, sayfa ya da yazıları düzenlerken sorun yaşıyorsanız, aşağıdaki kuralları ekleyerek sorunu giderebilirsiniz.

Cloudflare Page Rules Elementor sorununu giderme

 

Cloudflare “Network” ayarları: 

HTTP/3: Google tarafından oluşturulan HTTP/3 protokolü mevcut HTTP protokolüne göre daha hızlı ve daha güvenli çalışmaktadır. Bu ayarı açık tutmanızı öneriyorum.
 
0-RTT Connection Resumption: Sitenizi ziyaret etmiş kullanıcılar, tekrar dönüş yaptıklarında performansınızı arttırır.
 
WebSockets: Websocket sayesinde TCP protokolü üzerinden yapılan bağlantılar için çift yönlü iletişim kurulmasına olanak tanır. Ayrıca güvenli bağlantı kurulduğunda istek sayısı azalır ve CPU kullanımı düşer. Websocket daha çok gerçek zamanlı uygulamalarda kullanılır. Örneğin Chat yazılımları gibi.
 
Onion Routing: Tor tarayıcılar kullanan, şüpeli saldırganlar için, extra güvenlik sağlar.

Pseudo IPv4: Web sunucunuz IPv6 protokolünü desteklemiyorsa bu ayarı aktifleştirin.


IP Geolocation: Sitenize gelen tüm isteklere IP adresinin ülke kodunu ekler. 

Maximum Upload Size: Ziyaretçilerin sitenize tek bir seferde yükleyebilecekleri veri miktarını belirtin.

 
Cloudflare Network ayarları

Cloudflare rehberi ve ayarları burada bitiyor. Umarım bilgilendirici bir makale olmuştur. Sormak istediklerinizi aşağıya yazabilirisiniz. 

]]> https://konyaaltibilisim.com/cloudflare-nedir-cloudflare-site-hizlandirma/feed/ 4 LiteSpeed Cache Ayarları https://konyaaltibilisim.com/litespeed-cache-ayarlari/ https://konyaaltibilisim.com/litespeed-cache-ayarlari/#comments Tue, 05 May 2020 21:58:03 +0000 https://konyaaltibilisim.com/?p=20982

06.02.2021 Güncelleme: CSS ve JS ayarlarında daha hızlı önbellek alınması için değişikliğe gidildi.

LiteSpeed Cache Ayarları için hazırladığım bu rehber makale ile siteniz bozulmadan hızlanacak.

En iyi cache eklentisini bulmak için, birçok farklı WordpPress cache eklentileri kullandım, fakat en yüksek verimi LiteSpeed Cache ile aldım. 

Bu makalede de tüm deneyimlerimi detaylarıyla anlattım. Her ayarın ne anlama geldiğini ve etkinleştirdiğinizde sitenize ne gibi etkileri olacağını ayrıntılarıyla öğreneceksiniz. 

LiteSpeed Cache Kullanımı ile ilgili detaylı bilgiye sahip olacaksınız. Böylece web sitenizi hızlandıracak ayarları siz belirleyeceksiniz. Çünkü LiteSpeed Cache Ayarları temadan temaya farklılık göstermektedir. 

Hazırsanız başlayalım.

LiteSpeed Nedir? Neden LiteSpeed Kullanmalıyız?

LiteSpeed cache kullanımı ve ayarlarına geçmeden “LiteSpeed nedir?” kısaca değinelim. Basitçe anlatmak gerekirse LiteSpeed bir web server yazılımıdır. Apache ya da Microsoft ISS gibi. Kısaca LSWS (LiteSpeed Web Server) olarak adlandırılır. Web server sunucu tarafında çalışır. Kodları derleyip tarayıcımıza saf HTML olarak gönderir.

LiteSpeed, Apache’nin tersine ücretli bir yazılımdır. OpenLiteSpeed adı altında ücretsiz ve açık kaynaklı bir sürümü de bulunmaktadır.

LiteSpeed, WordPress’e özel bir yazılım değildir. Fakat WordPress, Jumlo, Magento, Presta Shop gibi hazır yazılımlar için eklentisi mevcut. Türkiye’de ise Veridye, Güzel Hosting, Turhost gibi firmalar ücretsiz olarak OpenLiteSpeed yazılımını sunuyor.

Neden LiteSpeed cache kullanmalıyız? LiteSpeed, yoğun ziyaretçi trafiğinde Apache’den çok daha iyi bir performans sunmaktadır. Load Balans(Yük dengeleme) teknolojisini çok iyi kullanmaktadır. Bu sayede Apache’den %60 daha iyi performans sunar. Yani ziyaretçi sayınız arttığında sunucu özelliklerinizi arttırmadan hizmet devamlılığı sağlıyor.

Ayrıca WordPress tarafını ilgilendiren kısmı “PHP SAPI” modülü. Bu sayede PHP kodlarını derlemesi %50 daha hızlı oluyor. Aşağıda Litespeed – Apache ve Nginx web serverlarının saniyede işledikleri istek sayısını karşılaştırılmış. 

LiteSpeed Apache Nginx karşılaştırılması

Örnek Bir LiteSpeed Testi

Aşağıdaki resimlerde, bu sayfanın hız testleri bulunmakta. Birinci testte LiteSpeed aktif iken, ikinci testte LiteSpeed ya da başka bir cache eklentisi kullanılmadı. Sonuçlar ortada… 

LiteSpeed Aktif:

LiteSpeed Cache Ayarları Pingdom Hız Testi LiteSpeed Cache Ayarları PageSpeed Hız Testi Mobil LiteSpeed Cache Ayarları PageSpeed Hız Testi Masaüstü

LiteSpeed Devre Dışı:

LiteSpeed Devre Dışı Pingdom Hız Testi LiteSpeed Devre Dışı PageSpeed Hız Testi Mobil LiteSpeed Devre Dışı PageSpeed Hız Testi Masaüstü

LiteSpeed Cache Nasıl Çalışır? LiteSpeed Cache'i Anlamak.

LiteSpeed Cache yaptığı işlem, tarayıcının, sunucudan talep ettiği dosyaları bir takım işlemden geçirerek göndermesidir. Aslında diğer tüm cache eklentileri hemen hemen aynı şekilde çalışır. Buradaki amaç talep edilen sorguları azaltmak veri miktarını minimuma indirmektir.

Bu işlemler; css ve javascript dosyalarını küçültme, gereksiz boşlukları silme, birleştirip tekbir dosya olarak sunma ve sıkıştırma gibi işlemlerdir.

Örneğin style.css, fontawesome.css, main.css gibi bir çok css dosyasını optimize ettikten sonra 23vf3.css gibi rastgele bir isimden oluşan tek bir css dosyasına dönüştürür. 

Bu dosyaları /wp-content/cache/css altına atar. Cache’i yani önbelleği her temizlediğinizde bu dosya silinir ve yenisi oluşturulur.

Tabi tek yaptığı bu değil. Seçtiğimiz ayarlara göre resimleri optimize eder, fontları düzenler, dosyaların aynı anda gönderilmesini sağlar. 

LiteSpeed tüm bu işlemleri sunucuda kurulu olan yazılımı sayesinde yapar. Diğer cache eklentileri ise PHP ile yapar. İşte LiteSpeed’i diğer cache eklentilerinden ayıran ve daha hızlı cache almasını sağlayan en önemli özellikte budur.

Aşağıda Lite Speed Cache ayarları için detaylı inceleme yapacağız.

WordPress Litespeed Cache Kurulumu ve Ayarları

LiteSpeed Cache kurulumu yapabilmeniz için, sunucunuzda LiteSpeed web server altyapısı yüklü olmalıdır.  Sunucunuzun LiteSpeed’ i Destekleyip desteklemediğini öğrenmek için hizmet aldığınız hosting firması ile iletişime geçebilirsiniz. Veridyen, Güzel Hosting, Turhost gibi birçok firma LiteSpeed server hizmeti sunmaktadır. Dilerseniz LiteSpeed web server kurulumunu da anlattığım, WordPress’i Google Cloud’a kurun adlı makalemi inceleyerek kendi LiteSpeed sunucunuzu kolayca kurabilirsiniz.

WordPress LiteSpeed Cache eklentisi kurulumu gayet basit.

Eklentiler – Yeni Ekle’ye tıklayın.

Arama kısmına “LiteSpeed Cache” yazın.

İlk sırada görünecektir, “Hemen Yükle” butonuna basın.

“Etkinleştir” butonuna basın.

FTP üzerinden kurmak isterseniz buradan indirerek  kurlum işlemini gerçekleştirebilirsiniz.Lite

LiteSpeed Cache Ayarları

LiteSpeed Cache "Dashboard" Ayarları

LiteSpeed cache ayarları gösterge paneli.

LiteSpeed Cache Ayarları Dashboard

İlk bölümde Quic Cloud alanı bulunuyor. Quic Cloud LiteSpeed’e ait CDN servisidir. LiteSpeed eklentisi ile senkronize çalışır. Böylece diğer CDN hizmetlerinden daha avantajlı hale gelmektedir. Quic Cloud servisine ayrıca değineceğiz.

Alt kısımda ise yükleme süreleri ile ilgili istatistikler yer alır. Aynı zamanda ayarlar hakkında kısa bilgilerde buradan takip edilebilir.

LiteSpeed Cache "General" Ayarları

LiteSpeed cache ayarları genel ayarlar bölümü.

LiteSpeed Cache Ayarları - General

Automatically Upgrade: Bu ayar açık duruma getirildiğinde, LiteSpeed güncellemeleri otomatik olarak yapacaktır. Bu ayarı kapalı tutmalısınız. Bazı güncellemeler LiteSpeed’e yeni özellikler getiri. Bu da sitenin bozulmasına neden olabilir. Yeni güncelleme geldiğinde kendimiz yapmamız ve değişikleri takip etmemiz daha iyi olacaktır.

Domain Key: Bu alandan Quic Cloud CDN hizmetine bağlantı kurabilirsiniz. CDN hizmeti kullanmıyorsanız bağlanmanıza gerek yok. 

Notifications: Tanıtımlar ve yeni haberler ile ilgili bilgilendirme almak istiyorsanız bu ayarı etkinleştirin. Kapalı tutabilirsiniz.

LiteSpeed Cache "Cache" Ayarları

LiteSpeed cache ayarları ön bellek kontrol bölümü. 

[1] Cache

Bu bölüm hangi tür içeriğin ön belleğe alınacağını belirler.

LiteSpeed Cache Ayarları - Cache

Enable Cache: LiteSpeed Cache’i devre dışı bırakır ya da etkinleştirir. “Disable” konuma alındığında ön belleğe alınmış tüm veriler silinecektir.

Cache Logged-in Users: Site üyeleri, siteye giriş yaptıklarında, özel önbellek sunulmasını sağlar. Eğer kullanıcılara özel, değişkenlik gösteren sayfalarımız varsa, bu ayar mutlaka aktif edilmelidir. 

Cache Commanters: Yorum yapmış ve yorumu onaylanmış ziyaretçiler için, özel önbellek uygulanır. Mutlaka açık olmalıdır. Böylece yorumu onaylanmış kullanıcılar sorun yaşamadan yorum yazmaya devam edebilirler.

Cache REST API: WordPress REST API kullanarak yapılan isteklerin ön belleğe alınmasını sağlar.

Cache Login Page: Bu ayar giriş sayfasının ön belleğe alınmasını sağlar.

Cache favicon.ico: Favicon, favorites icon’un kısaltmasıdır. Chrome gibi web tarayıcıların, sol üst köşesinde sayfanın icon’u gösterilmektedir.  Bu ayar aktif edilerek her sayfa için ayrı istek oluşturulması engellenir. Bu ayar .htaccess üzerinde değişiklikler yapacatır.

Cache PHP Resources: Temaların ve eklentilerin oluşturduğu PHP isteklerinin ön belleğe alınmasını sağlar.

Cache Mobil: Bir sayfanın içeriğinde, sadece mobil cihazlarda görünen fakat masaüstü cihazlarda devre dışı olan bölümler varsa bu ayarı etkinleştirin. Böylece mobil cihazlar için özel ön bellek uygulanacaktır.

List of Mobile User Agents: Bu ayar, bir cihazın mobil olup olmadığını belirlenmesini sağlayan ajanların listesidir. Her bir ajan arasında “|” sembolü olmalıdır.

 

Private Cached URIs: Genel bir sayfanın, özel bir sayfa gibi görünmesini sağlar. Böylelikle General – Default Private Cache TTL ayarını alması sağlanır. Örneğin, siteniz.com/blog/ozel-yazi sayfası genel bir sayfadır. Buraya ekleyerek özel bir sayfa olmasını sağlayabilirsiniz.

Örnekler:

/blog/ozel-yazi$ = sadece /blog/ozel-yazi sayfasını Private yapar.

^/blog/ozel-yazi = /blog/ozel-yazi ile başlayan tüm sayfaları Private yapar.

 

Drop Query String: İstenilen sorguların önbelleğe alınmasını engeller. Her satıra bir dize yazılmalıdır.

Force Cache URIs: Buraya eklenen sayfalar için ön bellek zorunlu tutulur. Farklı ayarlarda ön belleğe alınması engellenmiş yolları buraya eklerseniz, ön belleğe alınmasını zorlayabilirsiniz.

Force Public Cache URIs: Bu alana eklenen genel sayfalar için ön belleği zorunlu hale getirir.

Drop Query String: Belirli sorgu dizelerinin ön belleğe alınmasını engeller.

 

[2] TTL

Bu bölüm ön belleğe alınmış verilerin yaşam süresini belirler.

LiteSpeed Cache Ayarları - TTL

TTL, “Time To Live” cümlesinin kısaltmasıdır. Türkçeye “canlı kalma” olarak çevrilebilir. Aşağıdaki ayarlar ön belleğe alınmış sayfaların, yaşam süresini saniye cinsinden belirler. Bu süre dolduğunda ön bellek otomatik olarak silinir.

 

Default Public Cache TTL: Sayfalar ve Yazılar gibi birçok sayfayı bu ayar kontrol eder. Varsayılan olarak ön bellek süresi 604800 saniyedir (1 hafta). Yani sayfalarınız ön belleğe alındıktan 1 hafta sonra ön bellek otomatik olarak silinecektir. Eğer sayfalarınızda çok fazla değişiklik olmuyorsa bu ayarı 4 hafta gibi arttırmanızı tavsiye ederim. Böylece sayfalarınızın yeniden önbelleğe alınma sırasında oluşan gecikmeyi azatmış olacaksınız. Bu ayar minimum 30 saniye olarak belirlenebilir.

 

Default Private Cache TTL: Bu ayar özel sayfalarınızı kontrol eder. Abone kullanıcıların erişebildiği sayfalar gibi. Varsayılan olarak 30 dakika olarak belirlenmiştir. En fazla 1 saat olarak ayarlanabilir.

 

Default Front Page TTL: Bu ayar ana sayfanızı kontrol eder. Varsayılan ön bellek süresi 1 hafta olarak ayarlanmıştır. Woocommerce gibi eklentiler bu ayardan etkilenebilir. Çünkü ana sayfa gibi davranan sayfalar oluşturabiliyorlar.

 

Default Feed TTL: Bu ayar RSS yayınlarının ön bellek sürelerini kontrol eder. Varsayılan olarak 0 ayarlanmıştır. Yani yayınlar ön belleğe alınmaz. Sıfırdan büyük herhangi bir rakam verilirse 30 saniye olarak ayarlanır. Sık yayın yaptığınız bir siteniz varsa, bu ayarı etkinleştirmek sürekli ön belleğin temizlenmesine yol açabilir.

Default REST TTL: REST(Representational State Transfer) XML ve JSON verilerini kullanarak uygulamanın haberleşmesini sağlayan bir servistir. Bu servis çağrılarının saniye cinsinden ön belleğe alınacağı süreyi belirtir.

Default HTTP Status Code Page TTL:

403: Bu ayar “yasaklı” sayfaları ön bellekte tutma süresini belirler. Varsayılan olarak 3600 saniyedir (30 dakika).

 

404: Bu ayar “sayfa bulunamadı” sonuçları veren sayfaları kontrol eder. Varsayılan değer 1 saattir. Örneğin bir kullanıcı “www.siteadresiniz.com/1000” adresine ulaşmaya çalışsın. Siteniz sayfa bulunamadı hatası verir. İşte LiteSpeed Cache bu bulunamayan sayfaları ön belleğe alır. Bulunamayan sayfaları önbellekte tutmaya gerek yok.  Bu ayar düşük tutulmalıdır.

 

500: Bu ayar “sunucu hatası” sonucu ön belleğe alınan sayfalar için geçerlidir. 30 dakika yeterli.

[3] Purge

LiteSpeed cache ayarları – LiteSpeed cache temizleme bölümü.

LiteSpeed Cache Ayarları - Purge

Purge All On Upgrade: Eklenti güncelleme sonrasında tüm ön belleği temizler. Bu ayarı açık tutmalısınız.

Purge Stale: Çok önemli bir özellik. Sayfanız değişse bile, sayfanın eski kopyasını, yeni içerik oluşturuluncaya kadar gösterir. Bu, ön bellek temizleme sonrasında, sayfaların yenide ön belleğe alınmasını hızlandırır. Bunu yaparken eski içeriği gösterebilir. Mutlaka açık olmalıdır.

 

Auto Purge Rules For Publish / Update: Yeni yazı yayınladığında ya da güncellendiğinde ön bellek temizlenir.

 

Scheduled Purge URLs: Belirlediğiniz saatte, seçtiğiniz sayfaların ön belleğini temizler. Her satıra bir URL girilebilir.

 

Scheduled Purge Time: Yukarıdaki kuralın temizleme zamanını belirler.

Purge All Hooks: Buraya eklenen WordPress kancaları çalıştığında, tüm ön bellek temizlenir.

[4] Exludes

LiteSpeed cache ayarları – hariç tutma bölümü

LiteSpeed Cache Ayarları - Excludes

 

 

Do Not Cache URIs: Ön belleğe alınmasını istemediğiniz sayfaları bu alana ekleyin. “$” ve “^” işareti kullanılabilir.

 

Do Not Cache Query Strings: Sorgu dizelerini ön belleğe almasını engelleyebilirsiniz. Her satıra bir sorgu yazılır.

 

Do Not Cache Categories: Eklediğiniz kategoriler ön belleğe alınmaz.

 

Do Not Cache Tags: Eklediğiniz etiketler ön belleğe alınmaz.

 

Do Not Cache Cookies: Eklediğiniz çerezler ön belleğe alınmaz.

 

Do Not Cache User Agents: Belirli kullanıcıların ön belleğe alınması engellenir. Her kullanıcı arasına “|” işareti ekleyin.

 

Do Not Cache Roles: Kullanıcı rollerinin ön belleğe alınması engellenir. Bu ayar çok kullanışlıdır. Yönetici modunda iken sayfaların ön belleğe alınmamış halini görürsünüz. Bu da bazı hataların çözümünde size yol gösterir.

[5] ESI

LiteSpeed Cache Ayarları – giriş yapmış kullanıcılara ön bellekten sayfa sunulması.

LiteSpeed Cache Ayarları - ESI

 

Bu bölüm LiteSpeed Enterprice lisansı gerektirmektedir. Eğer Veridyen, Güzel Hosting, Turhost gibi paylaşımlı sitelerden host kiraladıysanız bu bölümü kullanamazsınız. Quic Cloud CDN servisini kullanırsanız, bu bölümü kullanabilirsiniz.

 

ESI – Edge Side Includes, “kenar bölümleri dahil etmek” olarak Türkçe’ye çevrilebilir. Bu bölümün amacı yönetici ve editör grupları için farklı önbellek alanları oluşturmaktır.

[6] Object

LiteSpeed Cache Ayarları – RAM üzerinden ön bellek ayarları

LiteSpeed Cache Ayarları - Object

Object Cache: Sunucumuzda eğer “Memcached” ya da “Redis” servisleri yüklü ise, buradan durumunu görebiliriz. Bu sayede ön bellek, sabit disk yerine, ondan çok daha hızlı olan RAM üzerinden alacaktır. Bu özellik Veridyen, Güzel Hosting, Natro gibi paylaşımlı sunucularda devre dışıdır. İsterseniz Google Cloud üzerine WordPress kurulumu ile kendi sunucunuzu kurabilir ve bu özelliklerden faydalanabilirsiniz.

Method: Ben Memcached kullanıyorum, sanki Redis’ten daha hızlı çalışıyor gibi.

Host: Farklı bir sunucuda, Memcached ya da Redis hizmeti yüklü ise, bu alana girebilirsiniz.

Port: Yine Memcached ya da Redis’in bağlantı portlarında değişiklik yaptıysanız bu alana girebilirsiniz.

Default Object Lifetime: Her bir nesnenin yaşam süresini belirtin.

Username/Password: Bağlantı güvenliği için, kullanıcı adı ve şifre kullanıyorsanız, buraya yazın. Varsayılan olarak kullanılmaz.

Redis Database ID: Redis hizmeti için farklı veritabanları kullanabilirsiniz.

Global Groups: Ağ düzeyinde önbelleğe alınan grupları gösterir.

Do Not Cache Groups: Ön belleğe alınmayacak grupları belirtin.

Persistent Connection:  Ön bellek alınırken, sunucu ve istemci arasındaki bağlantıyı canlı tutarak, daha hızlı ön bellek alma işlemi yapar. Mutlaka açık olmalıdır.

Cache Wp-Admin: Wp-admin açılışını hızlandırır. Fakat yönetim alanında, bazen eski veriler görülebilir. (Ben yine de kullanıyorum F5 yapınca düzeliyor.)

Store Transients: “Cache Wp-admin” ayarı kapalı durumdayken, geçici verileri veritabanına kaydeder.

[7] Browser

LiteSpeed Cache Ayarları – Web tarayıcı ayarları bölümü

LiteSpeed Cache Ayarları - Browser

Browser Cache: Bu ayar sitemizdeki, statik dosyaların, ön belleğe alınmasını sağlar. Kullanıcılar tekrar ziyarete geldiğinde, değişmemiş dosyalar tarayıcı ön belleğinden sunulur. Özellikle sayfa geçişlerinin çok hızlı olmasını sağlar. Bu ayar mutlaka açık olmalıdır.

Browser Cache TTL: Tarayıcı tarafından, ön belleğe alınmış dosyaların, yaşam süresini saniye cinsinden belirler. Bu alan “31557600 saniye” yani 1 yıl olmalıdır. Böylelikle Google Pagespeed’te görünen, “Statik öğeleri verimli bir önbellek politikasıyla yayınlayın” sorunu da çözülür. Ben bu ayarlı 1 yıldan uzun tutmak için 33000000 şeklinde yapıyorum.

[8] Advanced

LiteSpeed Cache Ayarları – Gelişmiş ayarları bölümü

LiteSpeed Cache Ayarları - Advanced

Login Cookie: Aynı alan adında, birden fazla web aplikasyonu barındırıyorsanız, bu ayarı aktif edebilirsiniz. Böylece giriş yapan kullanıcılar sorun yaşamazlar. Eğer kullanmıyorsanız boş bırakın.

Improve HTTP/HTTPS Compatibility: Sayfalarınızda hem HTTP hem HTTPS alanlar varsa, bu alanların, daha düzenli çalışmasını sağlar.

 

Instant Click: Bir bağlantının üzerine geldiğinizde, sayfa önceden yüklenir ve hazır hale getirilir. Ancak bu ayar, sunucu yükünüzü arttırır. Kapalı olmasını tavsiye ederim.

LiteSpeed Cache "CDN" Ayarları

LiteSpeed cache ayarları – CDN ayarları.

[1] CDN Settings

CDN – Content Delivery Network, içerik dağıtım ağı olarak Türkçe’ye çevirebiliriz. Kısaca, web site içeriğimizin diğer ülkelerdeki sunuculardan sunulmasıdır. Böylece ziyaretçiler kendilerine en yakın sunucudan hızlı bir şekilde sitemize ulaşmış olur.

LiteSpeed Cache Ayarları - CDN

 

QUIC.cloud CDN: QUIK.cloud CDN aktif hale getirir. 

 

Use CDN Mapping: CDN hizmet sağlayıcıları kullanmadan, kendi CDN ağınızı eklemenizi sağlar.

Alt domain ekleyerek CDN gibi davranmasını sağlayabilirsiniz. Ayrıca aşağıda bulunan artı butonu ile CSS, JS ve resimler için ayrı ayrı CDN oluşturabilirsiniz.

HTML Attribute To Replace: HTML Header bölümündeki hedeflenen alanlar buraya girilmelidir.

 

Orjinal URLs: Boş kalırsa site adresiniz varsayılan olarak ayarlanır. Değiştirmek isterseniz başına “//” koyarak ekleyebilirsiniz. Birden fazla eklemek için araya virgül koyun.

 

Included Directories: Yanlızca belirlenen klasörler CDN’e aktarılacaktır.

 

Exclude Path: Eklenen yollar hariç bırakılır. Her satıra bir adet girin.

 

Load JQuery Remotely: JQuery’leri uzak bir CDN hizmetinden yükleyerek, sayfa yükleme hızını arttırır. (Ben bir faydasını görmedim.) 

 

Cloudflare API: En çok bilinen ve kullanılan CDN hizmetlerinden biri. Bu ayar aktif olursa, LiteSpeed üzerinden Cloudflare ön belleği temizlenebilir.

[2] Manage

CDN bağlantısı yaptığımız servislerin, yönetim bölümü bulunmaktadır.

LiteSpeed Cache Ayarları - CDN Manage

 

QUIC.cloud: QUIC.cloud yönetim alanı. Şu an boş ama eminim ileride yeni özellikler gelecektir.

 

Cloudflare: Cloudflare yönetim alanı.

Development Mode: Bu ayar açıldığında Cloudflare devre dışı kalacaktır. Geliştirici modunu açıp testlerinizi yapabilirsiniz.

Cloudflare Cache: “Purge Everything” ile, Cloudflare üzerindeki tüm ön belleği temizleyebilirsiniz.

LiteSpeed Cache "Image Optimization" Ayarları

LiteSpeed Images Optimization, tüm resimleri, otomatik olarak, sıkıştırıp, WebP formatında yayınlamanızı sağlar. Üstelik bu işlemi, LiteSpeed kendi özel sunucuları üzerinde yapıyor. 

Google, PageSpeed testlerinde, “Resimleri yeni nesil biçimlerde yayınlayın” diyor.  Yani resimlerimizin WebP formatında olmasını istiyor. LiteSpeed harika bir şekilde bunu başarmakta. Üstelik otomatik olarak ve eklediğiniz her bir resme! Böylece sizi ek bir eklenti derdinden de kurtarıyor. 

Eğer otomatik olarak yapmasını istemiyorsanız, Images Optimization Settings üzerinden, “Auto Request Cron” ve “Auto Pull Cron” ayarlarını kapatabilirsiniz.     

[1] Image Optimization Summary

LiteSpeed Cache Ayarları – görüntü optimizasyonu özeti

LiteSpeed Cache Ayarları - Images Optimizations Summary

Gather Image Data: Resimleriniz tarayıp bilgi toplar. 

Pull Images:  Tarana resimleri, LiteSpeed özel Image Optimization sunucularına göndermeye yarar. Gönderilen resimler işlenip geri iade edilir.

Optimization Status: Yapılan işlemler hakkında bilgi verir.

Storage Optimization: Optimizasyon işlemi yapılmadan önce, her bir görüntünün yedeği alınır. Bu yedeğin boyutunu görmek için “Calculate Backups Disk Space” butonunu kullanın.   

Delete all backups of the original images: Yedeği alınmış tüm resimlerin, orjinal halleri silinir. 

Optimization Tools: Tüm resimlerin orijinal hali ile optimize edilmiş hali arasında geçiş yapabilirsiniz. 

 

[2] Image Optimization Settings

LiteSpeed Image Optimization ayarları

LiteSpeed Cache Ayarları - Images Optimization Settings

Auto Request Cron: Resimlerin otomatik olarak işlenmesi için bu alan aktif olmalıdır.

Auto Pull Cron: Devre dışı bırakıldığında resimler otomatik olarak optimize edilmez.

Optimize Original Images: Optimize edilmiş resimlerin, yedeğinin otomatik olarak alınmasını sağlar.

Remove Original Images: Optimize edilmiş resimlerin, yedeklerini otomatik olarak siler.

Optimize Losslessly: Resimleri görüntü kaybı olmadan otomatik sıkıştırır.

Preserve EXIF/XMP data: Resimlerin içerisine gömülü olan, telif hakkı, anahtar kelime gibi metinleri korur. Eğer resimlerinizin içerisine telif hakkı eklemiyorsanız, mutlaka ekleyin. Google bu tarz detayları sever. Photoshop ile yapabilirsiniz.

Cerate WebP Versiyon: Resimlerin WebP versiyonunu oluşturur. 

Image WebP Replacement: Görüntüleri optimize edilmiş WebP versiyonu ile değiştirir. Yükleme hızı önemli ölçüde artar. Mutlaka kullanın.

WebP Attribute To Replace: WebP içerisinde oluşturulacak öznitelikleri buradan değiştirebilirsiniz.

WebP For Extra srcset: WordPress mantığı dışında oluşturulan srcset öğelerinde, WebP ile değiştirilmesini etkinleştirin.

WordPress Image Quality Control: Resimlerin sıkıştırma oranını belirleyin. Ne kadar küçük olursa resim boyutu o kadar küçülür. Fakat resim kalitesi de aynı oranda düşer.

 

LiteSpeed Cache "Page Optimization" Ayarları

LiteSpeed Cache Ayarları – Sayfa optimizasyonu. Bu ayarlar, sitemizin hızını büyük oranda arttıracak. Fakat sitemizin, bazı alanlarında bozukluklar oluşabilir. Bu ayarları değiştirirken sık sık sitenizi gözlemleyin. Hala yedek almadıysanız mutlaka sitenizi yedekleyin.

[1] CSS Settings

LiteSpeed Cache Ayarları - CSS Settings

ÖNEMLİ UYARI: Aşağıdaki ayarlar açık olduğunda, sayfa önbelleklerini oluşturma süresi yükselir. Sayfalar ilk olarak önbelleğe alınacağında daha geç alınır ve yavaşlığa sebep olur. Unutmayın önemli olan hız testlerinden aldığımız puan değil, gerçekteki site hızı ve kullanıcı deneyimidir. O yüzden aşağıdaki ayarları ben kapalı tutmayı tercih ettim.

CSS Minify: Bu ayar CSS dosyalarınızdaki boşlukları, satır başlarını ve açıklama bölümlerini siler. 

CSS Combine: Tüm CSS dosyalarınızı teki bir CSS dosyası olarak birleştirir. Böylece toplam sorgu sayınız azalır. Bu ayarı yaptıktan sonra sitenizde bozulmalar oluşabilir. Bu adresten nasıl düzelteceğinizi öğrenebilirsiniz.

CSS HTTP/2 Push: Tarayıcı CSS dosyasına talepte bulunmadan CSS gönderilecektir. Bu ayar sitenizin bozulmasına neden olmaz. Ben bu ayarı açtığımda sitemde 503 hatası aldım. Sitenizi test ettikten sonra bu ayarı aktifleştirmelisiniz.

Load CSS Asynchronously: Bu ayar açık olduğunda CSS ve HTML aynı anda yüklenir. Sayfalar daha hızlı yüklenecektir ama başlangıçta biçimlendirme görünmez. Siteniz ilk açıldığında anlık olarak bozuk bir görüntü oluşacaktır ve ardından düzelecektir.

Generate Critical CSS: Yukarıdaki ayar aktif ise çalışır. LiteSpeed cache sayfa açılışlarında ilk görüntünün düzgün gelebilmesi için “kritik CSS’leri” oluşturur. Eğer temanızda kritik CSS önceden hazırlanmışsa bu ayarı etkinleştirmenize gerek yok. Aynı zamanda Quic.cloud hizmentinden faydalanıyorsanız CDN üzerinde kritik CSS oluşturulmasını sağlayabilirsiniz. 

Generate Critical CSS In Background: Bu ayar kritik CSS dosyalarının arka planda oluşturulmasını sağlar. Bu ayar açık olmalıdır.

Separate CCSS Cache Post Types: Kritik CSS dosyalarının hangi türler için oluşturulacağını bu alandan belirleyebilirsiniz. Örneğin “page” değerini girdiğinizde tüm sayfalar için kritik CSS oluşturulacaktır. 

Separate CCSS Cache URIs: Kritik CSS’leri belirlediğiniz adresler için oluşturur.

Inline CSS Async Lib: Bu ayar CSS kütüphanesini satır içi yaparak görüntü oluşturulmasını hızlandırır. Bu ayar açık olmalıdır.

Font Display Optimization: Google PageSpeed hatalarından birisi olan, “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın” hatası alıyorsanız, bu ayarı “Swap” konumuna getirmelisiniz. Böylece font yüklene kadar, yazılar tarayıcı varsayılan fontunda görünmeye devam eder.

 

[2] JS Settings

Litespeed cache js ayarları

JS Minify: Bu ayar gereksiz boşlukları ve açıklama satırlarını silerek java script dosyalarını küçültür. Açık konumda olmalıdır.

JS Combine: Tüm java script dosyalarını birleştirirerek sorgu sayısını azaltır. Bu ayar sonrasında sitenizde bazı bozulmalar olabilir. Bu adresten sorunları nasıl düzelteceğinizi görebilirsiniz. Bu ayar açık oluğunda sayfa önbelleklerini oluşturma süresi yükselir. Sayfalar ilk olarak önbelleğe alınacağında daha geç alınır ve yavaşlığa sebep olur. 

JS Combine External and Inline: Harici JS ve satır içi JS kodlarını, birleştirilmiş JS dosyasına dahil eder. Böylece JS sorunlarını minimize etmiş olur. Bu ayar yukarıdaki ayar açıksa çalışır.

JS HTTP/2 Push: JS dosyaları tarayıcı tarafından istenmeden gönderilir. Açık konumda olmalıdır.

Load JS Deferred: Java dosyalarını erteleyerek, görünür içeriğin daha hızlı yüklenmesini sağlar. Bu ayar Pingdom, GTmetrix ve PageSpeed hız testlerinde daha yüksek puan almanızı sağlar. Açık konumda olmalıdır. Fakat bu ayar açıkken Contact Form 7 eklentisinden, mesaj gönderme başarılı iletisi çalışmayabilir. Bu ayarı açtıktan sonra iletişim formundan bir gönderi yaparak test etmelisiniz. 

Load Inline JS: DOM tamamen yüklendikten sonra, satır içi JS kodlarını çalıştırır.

[3] Optimization Settings

LiteSpeed Cache Ayarları - Optimization Settings

 

CSS/JS Cache TTL: Küçültülmüş ve birleştirilmiş CSS – JS dosyalarınınön bellek süresini belirler. Varsayılan olarak 1 haftadır. Açık konumda olmalıdır.

HTML Minify: Tüm HTML’lerden gereksiz boşlukları ve açıklama satırlarını silerek küçültür. Açık konumda olmalıdır.

Inline CSS Minify: HTML sayfalarının içindeki tüm CSS kodlarını küçültür. Açık konumda olmalıdır.

Inline JS Minify: HTML sayfalarının içindeki tüm JS kodlarını küçültür. Açık konumda olmalıdır.

DNS Prefetch: DNS’i önceden getirerek ziyaretçi gecikmesini azaltır.

DNS Prefetch Control: Resimler, CSS, JS dosyaları için DNS önceden getirmeyi etkinleştirir.

Remove Comments: Bu ayar JS ve CSS dosyalarındaki açıklama satırlarını silerek dosyaların küçülmesini sağlar. Dikkat, Bu ayar sitenizde bozukluklara yol açabilir. Açık konumda olursa performans artışı sağlar.

Remove Query Strings: Sorgu dizelerini statik kaynaklardan kaldırır. Bu sayede statik dosyalarınızın extra sorgu oluşturması engellenir. Google reCAPTCHA otomatik olarak atlanır. Açık konumda olmalıdır.

Load Google Fonts Asynchronously: Google Fontlarının eş zamanlı olarak yüklenmesiniz sağlar. 

Remove Google Fonts: Google Font’larını devre dışı bırakmanızı sağlar. Bu ayarı açtıktan sonra Google Fontları hala yüklenmeye devam ediyorsa “Load Google Fonts Asynchronously” ayarını da kapatmanız gerekebilir.

Remove WordPress Emoji: Wordpress emojilerini kaldırır. Bu ayar GT Metrix, Pingdom, PageSpeed gibi test sitelerinden yüksek puan almanızı sağlar.

Remove Noscript Tag: Bu seçenek etkinleştirilirse <noscript> etiketleri kaldırılacaktır. Bu sayade daha küçük sayfa boyutları elde edilir, ancak JavaScript çalışmayan eski tarayıcılar ile daha az uyumlu bir siteye sahip olursunuz.

 

[4] Media Settings

LiteSpeed Cache Ayarları - Media Settings

LiteSpeed cache ayarları – görüntü dosyaları cache ayarları

 

Lazy Load Images: Sitenizdeki fotoğraf ve videolar, ekranda göründüğü anda yüklenmeye başlar. Deneyimlerime göre, bu ayar bazı temalarda düzgün çalışmıyor. Ayrıca, bu ayar etkin olduğunda sitede gözle görünür bir yavaşlık oluyor. Siz kendi sitenizde bu ayarı test ettikten sonra açmalısınız. 

 

Lazy Load Image Placeholder: Resimler yüklene kadar gri bir alan görünecektir. Bu alanlar için istenirse farklı bir resim eklenebilir. Bu ayarın etkin olabilmesi için “Lazy Load Images” ayarının etkin olması gerekir.

 

Responsive Placeholder Background Color: Resimler yüklenen kadar gösterilen gri alan yerine farklı bir renk seçilebilir.

 

Generate Reponsive Placeholder In Background: Resimler yüklenen kadar belirlenen resim ya da renklerin arka planda hazır halde tutulmasını sağlar. Bu ayar açık olmalıdır.

 

Lazy Load Iframes: Iframe’ler için lazy load uygulanır. Örneğin sayfa içine çektiğimiz Google Map. Sitede bozulmalara yol açılabilir.

 

Inline Lazy Load Images Library: Lazy Load çalışabilmesi için bir java script kodu gerekir. Bu kodu HTML’in içinde çağırarak fazladan bir JS kodu uygulanmaz.

[5] Media Exludes

LiteSpeed Cache Ayarları - Media Excludes

Lazy Load Image Excludes: Listedeki görüntülere lazy load uygulanmaz.

 

Lazy Load Image Class Name Excludes: Bu listeye eklenen CSS class’larını kullanan resimlere lazy load uygulanmaz.

[6] Discussion Settings

LiteSpeed Cache Ayarları - Discussion Settings

Gravatar Cache: Gravatar resimlerinin ön belleğer alınmasını sağlar.

Gravatar Cache Cron: Gravatar resimlerini otomatik olarak ön belleğe alır.

Gravatar Cache TTL: Gravatar resimlerinin ön bellek ömrünü belirler.

[7] Tuning Settings

LiteSpeed cache ayarları – ince ayar bölümü. Sitenizde oluşabilecek bozulmaları engellemeniz için ince ayarlar yapmanızı sağlar. 

LiteSpeed Cache Ayarları - Tuning Settings

Combined CSS Priority: “Combine CSS” özelliğini kullandıysanız ayrılmış CSS dosyalarınızdan önce birleştirilmiş CSS dosyalarınız yüklenecektir.

CSS Excludes: Bu alana yazılmış CSS dosyaları küçülmez ya da birleştirilmez. Her satıra bir adres girin. Sitenizin bozulmasına neden CSS dosyalarını bu alana ekleyerek düzeltebilirsiniz. Ör: /wp-content/style.css

Combined JS Priority: “Combine JS” özelliğini kullandıysanız ayrılmış JS dosyalarınızdan önce birleştirilmiş JS dosyalarınız yüklenecektir.

JS Excludes: Bu alana yazılmış JS dosyaları küçülmez ya da birleştirilmez. Sitenizin bozulmasına neden JS dosyalarını bu alana ekleyerek düzeltebilirsiniz. Her satıra bir adres girin. Ör: /wp-content/custom.js

Max Combined File Size: Maximum birleştirilmiş dosya boyutunu belirler. Yüksek boyutlar belirlerseniz daha az dosya oluşturulur. Bu sayede daha az sorgu oluşacaktır. Bu sayede daha yüksek puan elde edilebilir ancak bellek kullanımı artacaktır. Varsayılan olarak 2 MB verilmiştir.

 

Critical CSS Rules: Ekranın üst kısmındaki görünür içeriğin daha hızlı yüklenmesi için gerekli CSS dosyalarınızı buraya yazabilirsiniz.

JS Deferred Excludes: Listelenen JS dosyalarını ertelemeden yükler. Buraya eklediğiniz JS dosyaları görünür içeriğin geç gelmesine sebep olabilir.

 

URI Excludes: Listelenen sayfalar da ön bellek hariç tutulur.

Role Excludes: Seçilen kullanıcı gruplarında ön bellek hariç tutulur.

]]> https://konyaaltibilisim.com/litespeed-cache-ayarlari/feed/ 95 Google Hız Testi Analytics.js Çözümü https://konyaaltibilisim.com/google-hiz-testi-analytics-js-cozumu/ https://konyaaltibilisim.com/google-hiz-testi-analytics-js-cozumu/#comments Wed, 18 Sep 2019 14:21:02 +0000 https://konyaaltibilisim.com/?p=20769

Google PagaSpeed ile hız testi yaptığınızda, “Statik öğeleri verimli bir önbellek politikasıyla yayınlayın” şeklinde bir uyarı alabilirsiniz. Bu uyarının altında, “analytics.js” dosyası bulunuyorsa, bu makaledeki adımları izleyerek, “analytics.js” dosyasını lokalden çalıştırabilirsiniz. Zorda kalmadıkça eklenti kullanmak istemiyorum zira bazı eklentiler siteyi yavaşlatabiliyor. O yüzden önce eklentisiz olarak daha sonra eklenti ile çözümü anlattım.

Eklentisiz Çözüm

Gerekli Dosyaların Oluşturulması

Öncelikle sitenizin root alanına, aşağıdaki JS dosyalarını oluşturun. Örneğin benim sitem “public_html” klasörü altında, buraya iki dosyayı ftp yoluyla oluşturuyorum.

  • local-ga.js
  • local-analytics.js

Google Analytics dosyalarının oluşturulması

Local-ga.js Dosyasının İçeriğinin Oluşturulması

Bu dosyanın içeriğine, Google Analytics İzleme Kodu içerisinde bulunan, JavaScript kodunu ekleyeceğiz. Bu koda aşağıdaki adımları uygulayarak kolayca ulaşabilirsiniz.

  • Google Analytics’e giriş yapalım.
  • Sol menüden “Yönetici” alanına girelim.
  • “İzleme Bilgileri” ne girelim.
  • “İzleme Kodu” na girelim.
  • “https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1” linkini kopyalım.
cloudflare nedir

Linki tarayıcıya kopyalayarak açalım. Tüm içeriği kopyalayıp, oluşturmuş olduğumuz local-ga.js dosyasının içerisine yapıştıralım.

Burada dikkat etmemiz gereken bir durum var. Bağlantıdan eklenen içerik,

// Copyright 2012 Google Inc. All rights reserved.

şeklinde başlıyor.
Bu bilgi satırını tamamen silmeliyiz. Çünkü Cache eklentileri, JavaScript küçültme işlemi yapıyorlar. Bilgi satırları da tamamen siliniyor, sonrasında kod çalışmıyor.

Google Pagespeed Analytics Çözümü

Local-analytics.js Dosyasının İçeriğinin Oluşturulması

https://www.google-analytics.com/analytics.js  adresine girerek, içeriğin tamamını kopyalayıp, root altında oluşturduğum local-analytics.js dosyasının içerisine yapıştırıyorum ve kaydediyorum.

Şimdi “local-ga.js” dosyasına geri dönelim. “local-ga.js” içerisindeki “https://www.google-analytics.com/analytics.js” satırını bularak “https://www.siteadresiniz.com/local-analytics.js” olarak değiştiriyorum. 

Burada dikkat etmeniz gereken bir konu daha var. Web siteniz “siteadresiniz.com” şeklinde olsa bile buraya eklerken başına “www” mutlaka ekleyin. Çünkü Google PageSpeed’de daha fazla puan alınmasını sağlıyor.

Google Pagespeed Analytics Çözümü

Google Analytic Kodunun Siteye Eklenmesi

Son olarak siteye Analytic kodunu eklerken, izleme kodunda bulunan, “https://www.googletagmanager.com/gtag/js?id=xx-xxxxxxxx-x” şeklindeki adresi “https://www.siteadresiniz.com/local-ga.js” şeklinde değiştiriyoruz.

Hepsi bu kadar. Sitemizi Google PageSpeed üzerinden test ettiğimizde, “Statik öğeleri verimli bir önbellek politikasıyla yayınlayın” altında, analitics.js hatasını görmememiz gerekiyor. Ayrıca Google Analytics üzerinden baktığımızda gerçek zamanlı veri alabiliyorsak sorun yok demektir.

Şunu unutmayalım, Google Analytics üzerindeki, Java Script kodunu güncelleyebilir. Böyle bir durumda kodumuz çalışmayacaktır. Siz de dosyalarınızda gerekli güncellemeleri yapmalısınız.

 

Eklenti İle Çözüm

Complete Analytics Optimization Suite (CAOS) eklentisi ücretsiz  olarak sunulmakta ve Google Analytics kodunu sitenizden çalışmasını sağlamaktadır.

Google Analytics Tracking ID kısmına Analytics ID’nizi girin. Alt kısımdan da Footer seçin, bu sayede Analytics kodu en son açılacak. Yanlız dikkat etmeniz gereken bir durum var, başka bir Analytics kodu ekleme eklentisi kullanıyorsanız devre dışı bırakmanız gerekiyor. Yada kodu manuel olarak eklemişseniz onu da iptal etmeniz gerekiyor.

Makalem umarım faydalı olmuştur. Sormak istedikleriniz varsa yorumlar bölümüne yazabilirsiniz.

 
]]> https://konyaaltibilisim.com/google-hiz-testi-analytics-js-cozumu/feed/ 6