Add expires headers çözümü

Bu yazıda, pek çok webmaster'ın sorun yaşadığı bir konu olan add expires headers çözümünü sizler ile buluşturacağım.

 add expires headers çözümü

Add expires headers, bir web sitesinde en sık kullanılan, en sık çağrılan dosyaların indirilerek saklanmasıdır. Bu bir önbellekleme sistemidir, bu sebeple site hızınızı arttırmada size yardımcı olacaktır. Bu yüzden daha performanslı ve daha hızlı bir web sitesi için uygulanması gereklidir.

Daha geniş açıdan add expires headers ise kullanıma göre hangi dosyaların saklanılması gerektiğine karar verilmesini sağlar. Site ziyaret edildiğinde saklanmış olan dosyaların yeniden ne zaman çağrılması gerektiği add expires headers ile belirlenir. Böylece siteye tekrar giriş yapan bir kullanıcı aynı dosyalara sürekli sürekli istek göndermeyecek ve siteye daha hızlı erişim sağlayacaktır.

Add expires headers çözümü

Add expires headers çözümü ise oldukça basittir. Tek yapmanız gereken şey aşağıda yer alan kodları sitenizin .htacess dosyasına eklemektir. Bu işlemden sonra özellikle fazla ziyaretçiye sahip siteler sunucudaki yükün azalmasından dolayı oldukça rahatlayacaktır.

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault “access plus 1 month”

# My favicon

ExpiresByType image/x-icon “access plus 1 year”

# Images

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType image/jpg “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

# CSS

ExpiresByType text/css “access 1 month”

# Data interchange

ExpiresByType application/json “access plus 0 seconds”

ExpiresByType application/xml “access plus 0 seconds”

ExpiresByType text/xml “access plus 0 seconds”

# Javascript

ExpiresByType application/javascript “access plus 1 year”

# Favicon (cannot be renamed!) and cursor images

# HTML components (HTCs)

ExpiresByType text/x-component “access plus 1 month”

# HTML

ExpiresByType text/html “access plus 0 seconds”

# Manifest files

ExpiresByType application/x-web-app-manifest+json “access plus 0 seconds”

ExpiresByType text/cache-manifest “access plus 0 seconds”

# Media

ExpiresByType audio/ogg “access plus 1 month”

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType video/mp4 “access plus 1 month”

ExpiresByType video/ogg “access plus 1 month”

ExpiresByType video/webm “access plus 1 month”

# Web feeds

ExpiresByType application/atom+xml “access plus 1 hour”

ExpiresByType application/rss+xml “access plus 1 hour”

# Web fonts

ExpiresByType application/font-woff “access plus 1 month”

ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

ExpiresByType application/x-font-ttf “access plus 1 month”

ExpiresByType font/opentype “access plus 1 month”

ExpiresByType image/svg+xml “access plus 1 month”

Ana iş parçacığı çalışmasını en aza indir

Bu yazıda, Pagespeed'in vazgeçilmezlerinden biri olan "Ana iş parçacığı çalışmasını en aza indir" sorununa çözüm bulacağız ve bu sorunun nedenlerinden bahsedeceğiz.

Ana iş parçacığı nedir?

Ana iş parçacığı, temelde arka planda yazılan kodların son kullanıcıya ulaştırma amacıyla dönüştüren sistemin adıdır. HTML, CSS ve javascript gibi yazılımları ayrıştırıp çevirerek kullanıcıya sunar.

Fakat kullanıcı işlem yapmasına rağmen kod yoğunluğundan ötürü sistem yüklenmez ya da geç yüklenirse, yani UX (kullanıcı deneyimi) açısından olmaması gereken bir durum ortaya çıkarsa karşımıza Ana iş parçacığı çalışmasını en aza indir sorunu olarak çıkar. Bu yazıda ise bu durumun sebeplerinden ve çözümlerinden bahsedeceğiz.

Ana iş parçacığı neden sorun yaratır?

Burada karşımıza özellikle gereksiz eklenmiş olan kod parçaları veya sıkıştırılmamış kodlar karşımıza çıkar. Bunlar ana iş parçacığına fazladan yük bindirirler ve bunun sonucu olarak da hem bu sorunu yaşar hem de sitenizde yavaşlamalar görürsünüz. Aynı zamanda haliyle kullanıcı deneyimi oldukça kötü etkilenir.

Bu yavaşlamalar her türlü kodun optimize edilmemesinden dolayı oluşabilir, sitenizin makyajı olan CSS veya sitenizin eklemleri olan javascript kodları ise bunların başında gelir. 

Ana iş parçacığı çalışmasını en aza indir sorunu çözümü

Sorunun çözümü ise aslında oldukça basittir. Öncelikle yapmanız gereken temel şeylerden birisi sitenizde yer alan önemli ve daha az önemli CSS ve JS kodlarını belirlemektir.

1- Bu ayrımı gerçekleştirdikten sonra daha az önemli sınıfındaki CSS ve JS kodlarınızı sıkıştırmalısınız. İnternete CSS&JS Minifier yazdığınız taktirde pek çok sıkıştırma sitesine erişebilirsiniz. Bu tarz siteler aracılığı ile kodlarınızı sıkıştırmalısınız.

2- Sitenizde yer alan gereksiz kodları tespit etmeli ve kaldırmalısınız. Bu her ne kadar zaman alan bir işlem olsa da sitenizin hızlanması ve ana iş parçacığı çalışmasını en aza indirmenizde kritik bir rol oynar. 

3- 3.taraf javascript kodlarını erteleyebilir ya da kullanmıyorsanız kaldırabilirsiniz. Sitenizi büyük ölçüde ferahlatacaktır. Aynı zamanda sitenizde yer alsa dahi kullanmadığınız yazı tiplerini de mutlaka kaldırın. Ve unutmayın ki önemli olan skor değil, kullanıcı deneyimidir. 

Bu yazıda her ne kadar tek bir sorundan söz ettiysek de, sitenizin hızlanması için oluşturulan dev bir içerik olan Profesyonel Bir Site Hızlandırma Rehberi adlı yazımıza da göz atmanızı şiddetle tavsiye ediyorum.

https://technogezgin.com/ana-is-parcacigi-calismasini-en-aza-indir/
https://oguzturk.net/yeni-google-page-speed-optimizasyon-rehberi/

[Çözüm] Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor!

Pagespeed aracının son zamanlarda bazı sitelerde uyarı&tavsiye niteliğinde vermiş olduğu ve kullanıcı deneyimi açısından son derece önemli olan "Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor" sorununu bu yazıda çözüyoruz.

Dokunmatik cihazlarda, parmağınız ile tarayıcı ekranını hareket ettirdiğinizde hiçbir gecikme olmadan ekranda sizin hareketinize paralel bir biçimde gecikmesiz olarak hareket etmelidir. Aşağıda yer alan resimde de görebileceğiniz üzere kaydırma hızı, web siteleri açısından son derece önemli bir ölçüttür.

Fakat, kaydırma performansını artırmak için pasif işleyicileri kullanmıyor hatası alan bu sitelerde gerekli optimize işlemi yapılmadığı için kullanıcı deneyimi (UX) açısından son derece sıkıntılı olan bu durum ortaya çıkabilmektedir. 

"Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor" Çözümleri

Bu sorunu elle tek tek düzeltmek mümkün olsa bile aşağıda yer alan kodu, wordpress tema ayarlarınızdan custom.js dosyasına yapıştırmanız yeterli olacaktır. Bu sayede sitenizdeki toplu olarak tüm sorunlu kodlara işlem uygulayacaktır. 

(function() {
  var supportsPassive = eventListenerOptionsSupported();  

  if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();

Temel olarak yaptığımız işlem, sitenizde yer alan passive sorgusunu true ile değiştirerek kaydırma işleminin hiçbir zaman iptal edilmeyeceği komutunu eklemektir. 

Eğer bu işlem sizde işe yaramadıysa bir diğer çözüm yolu ise farklı bir kaynaktan alınan diğer bir kodu denemektir. Aşağıda yer alan kod parçasını bilgisayarınıza .JS dosyası olarak kaydettikten sonra, sitenizin .JS dosyalarının arasına atmalısınız. Daha sonra kodu temanızın  <head> - </head> arasına yerleştirin. 

!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});

Ve tüm işlem bu kadar. Eksik gördüğünüz ya da yapamadığınız yerler için yorumlar bölümünü kullanabilirsiniz. 

https://www.mustafavarol.com/wordpress-kaydirma-performansini-artirmak-icin-pasif-isleyicileri-kullanmiyor/ 
https://edofhi.com/baslik/cozum-kaydirma-performansini-artirmak-icin-pasif-isleyicileri-kullanmiyor/

DA-PA Değeri nedir?

İçindekiler

1. DA PA nedir?
2. DA nedir?
3. PA nedir?
4. Spam Score nedir?
5. DA PA Değeri önemli midir?

2016 senesinde Google, Pagerank sistemini güncellemeyi durdurdu. Bununla birlikte internete yeni bir kavram daha girdi: DA (alan adı otoritesi) ve PA (sayfa otoritesi). Gelin, kısaca da pa değeri nedir öğrenelim.

DA PA nedir?

DA ve PA değeri dünyaca ünlü bir seo aracı olan Moz şirketi tarafından oluşturulan bir ölçüm sistemidir. Web sitelerinin arama motorundaki gücünü ve etkisi ölçmeyi sağlar. 100 üzerinden değerler atanır.

DA Değeri nedir?

DA yani domain authority, bir alan adının gücünü ve imajını belirten bir ölçüm aracıdır. Alan adı otoritenizi belirleyen başlıca faktörler ise alan adının ne kadar süredir yayında olduğu, dış kaynaklarda ne kadar referans aldığı, alan adı niteliği ve uzunluğu gibi durumlara göre değerlendirilmesi ile ortaya çıkan bir puanlamadır. Belli bir yaşı doldurmuş alan adlarında dış referanslar da değerini çok etkilemektedir.

PA Değeri nedir?

PA yani page authority, sitenizde yer alan belirli bir sayfanın otoritesidir. DA alan adının tamamını kapsayan bir ölçüm iken, PA sadece ölçüm yaptığınız sayfanın otoritesini size sunar. PA değeri sitenizin her sayfasında farklı değerlerde olabilir ve bu normaldir. Tamamen sayfanızın eskimesine ve yıllanmasına bağlıdır.

DA ve PA değeri kadar önemli olan bir diğer ölçüm ise, spam score adı verilen parametredir. Gelin şimdi bir de buna göz atalım.

Spam Score nedir?

Spam score, DA ve PA değerlerinin tam tersi bir sistem ile çalışan bir sistemdir ve sitenizin kaderini tek başına belirleyebilir. Genelde negatif seo çalışmaları ve zararlı backlinkler ile saldırı amaçlı arttırılmakta ve sitenizin arama motorlarındaki sırasını kaybettirecektir.

Spam skorunuz yüksek ve DA PA değerleriniz düşükse ilk önce Google Search Console ile sitenize verilen zararlı ve kötü niyetli backlinkleri reddetmeli ve spam score düze çekildikten sonra DA PA değerinizi arttıracak kaliteli backlinkler edinmeniz gerekir. Eğer tüm bu işlemlere rağmen olumlu bir sonuç alamadıysanız siteniz Google tarafından cezalandırılmış olabilir.

DA PA Değeri önemli midir?

DA ve PA değeri önemlidir. Backlink, tanıtım yazısı veya sponsorluk alınacağı zaman karşı sitenin değerini kolayca öğrenilebilir ve kolayca analiz edilebilir. Ayrıca Alexa gibi kandırılmaya müsait bir sisteme göre daha güvenilir olduğu da kesindir. Bu sebeple göz önünde bulundurulmalıdır.

CSS ile kaydırma çubuğu (scrollbar) oluşturma

Genellikle web sitelerinde bulunan kaydırma çubuklarını hepsi tarayıcıdan tarayıcıya farklılık gösterse bile aynıdır. Ancak anlatacağım basit bir yöntemle sitenizi diğerlerinden ayıracak ufak bir dokunuş yapmış olacaksınız. CSS ile kaydırma çubuğu oluşturma yazıma hoş geldiniz.

Eğer bu yazıda aradığınız şey sıfırdan kendi yazımınız olan bir kaydırma çubuğu oluşturmaksa yanlış yerdesiniz. Fatih Hayrioğlu'nun yazmış olduğu CSS ile kaydırma çubuğu özelleştirme yazısı ile gerekli bilgileri öğrenebilirsiniz.

Öncelikle bu işlemi kendiniz de yapmak isterseniz scrollbar generator şeklinde aratarak örnekleri inceleyebilir ve kendinizce düzenlemeler yapabilirsiniz. Ben ise bu yazıdaki anlatımı Webkit Scrollbar Generator üzerinden anlatacağım.

Bu siteye giriş yaptıktan sonra sizi aşağıdaki karışık bir ekran karşılayacaktır. Ben ise bu ekranı sizin için bölmelere ayırdım. Şimdi sırasıyla anlatıma geçebiliriz.

İlk bölmede yapacağınız değişiklikler kaydırma çubuğunun arka planında oynamalar yapacaktır. bg bölümü ile arka planın rengini  belirlerken, bgHover ile fare imleci arka plana geldiği zaman oluşacak renk belirlenir. bgActive ise imleç arka plana basılı tutuluyken alacağı rengi belirleyecektir.

İkinci bölmede yer alan bg bölümü, kaydırma çubuğunuzun rengini belirleyecek bölümdür. İlk bölümdeki gibi çubuğun arka planında bir değişiklik olmayacaktır. Seçtiğiniz renk çubuğunuzun rengidir.

bgHover bölümü ise, kullanıcıların fare imlecini kaydırma çubuğunun üzerine getirdiği anda alacağı renktir. bgActive bölümünden farkı ise bgHover imleç çubuğun üzerine gelirken renk değiştirirken bgActive ise kullanıcı kaydırma çubuğunun üzerine tıkladığı zaman renk değişimi gerçekleşecektir.

Birinci ve ikinci bölümlerde yer alan Size değeri boyutu ayarlarken, Curve ise çubuğun yuvarlaklık derecesini belirler.

Üçüncü bölümde herhangi bir değişiklik yapmanıza gerek yoktur. Program, site açıldığı zamandan beri varsayılan olarak bu bölümü kod üzerinde none olarak gösterir, yani istediğiniz değişikliği yapsanız bile kaydırma çubuğu tasarımında bir değişiklik olmayacaktır.

İşiniz bittikten sonra en altta yer alan kod editörü bölümü ile scrollbar kodlarınızı alıp sitenizde yer alan /head kodunun hemen üzerine ekledikten sonra sorunsuzca çalıştığını fark edeceksiniz. Benzer yazılar için Webmaster Aracı kategorisine göz atabilirsiniz.

Bu içeriği videolu anlatım olarak dinleyebilir, daha kaliteli ve açıklayıcı bir anlatım ile uygulayabilirsiniz. Keyifli seyirler. 

İyi Bir Blog Yazısı Nasıl Yazılır?

Günümüzde blog açmak oldukça popüler bir aktivite. Pek çok kimse blog açarak insanlara ulaşmak, düşüncelerini aktarmak, insanlara fayda sağlamak, bunları yaparken belki maddi gelir de elde etmek istiyor. Peki blogumuzu açtık, şimdi ne yazı yazabiliriz? İdeal bir blog yazısı nasıl olmalı? Bu yazımda sizlere kendimce bu soruların cevaplarını vereceğim.

Bloguma Ne Yazabilirim - Yazacak Yazı Bulamıyorum!

Blog açmanızın bir nedeni olmalı öncelikle. Blogunuzda ne anlatacaksınız; kişisel bir blog mu yoksa spesifik bir alana mı yönelik içerikler üreteceksiniz? Mesela sanat, kültürel içerikler veya bilim gibi. Bu bağlamda uzmanlığınıza veya hobinize yönelik içerikler yazmanız hem daha kolay içerik bulmanıza hem de yazdığınız içeriklerin kalitesinin yüksek olmasına yarayacaktır.

Bunun yanında güncel olayları takip edebilir ve insanların arama motorlarında aratacağı şeylere yönelik içerikler yazmanız da trendleri yakalamanıza ve blogunuzun takipçi sayısını artırmanıza yardımcı olacaktır.

İyi Bir Blog Yazısı Nasıl Olmalı?

21.yüzyıl insanlarının gözlemlediğim bir huyu var, tabii buna ben de dahilim :). Her şeyi çabuk tüketiyorlar ve çabuk tüketilebilecek şeylere rağbet ediyorlar. 1000 sayfalık bir roman mı, ne kadar güzel olursa olsun günümüzde talep görmez. 100 sayfalık çerezlik akıcı bir hikaye mi, trend olması işten bile değil. Bu bağlamda siz de blog yazılarınızı kolay okunabilir, hızlıca göz gezdirilebilir ve başlıklara bölünmüş şekilde ayarlarsanız bu çok daha makul olacaktır.

Bunun yanında içeriğinizi güçlü tutmanız, sizle aynı konuda içerik üreten diğer sitelerden farklı bilgiler barındırıyor olmanız da hem insanların aklında kalmanıza hem de yazınızın güçlü bir yazı olmasına yarayacaktır. Güçlü yazılar arama motorlarında üst sıralarda yer alır, insanların aklında kalır ve bu yazılar sadece bir defa değil pek çok defa aynı kişi tarafından ziyaret edilebilir.

Siz de bunu yapıyorsunuzdur zaten, bir sorununuz olur ve bu sorunu farklı ele alıp çözmenize yardımcı olan kişinin sitesine o sorunla karşılaştığınız pek çok defa ziyaret edersiniz.

Son olarak da yazdığınız yazıların akıcı olmasına, anlatım bozuklukları içermemesine, imla kurallarına uygun olmasına özen gösterin. Bu yazınıza hem profesyonellik katacak hem de ziyaretçilerinizin sizin ne anlatmak istediğinizi daha iyi anlamasını sağlayacaktır. 

Şunu da belirteyim: Günümüzde blogcuların önemsemediği bir olay var, alıntı yapmak. Nedense pek çoğu bunu zararlı bir eylem olarak görüyor, istemiyor. Aslında alıntı yapmak oldukça önemli bir olaydır. Bir ziyaretçi sizin sitenize girer, yazınızı bir güzel okur ve sonra ileri okuma olarak alıntı yaptığınız ve referans olarak belirttiğiniz siteye gider.

Sonuç olarak hem sizin siteniz, hem alıntı yaptığınız site +1 puan alır , kullanıcının kafasında yer edinir. Ayrıca yazınızda kaynakçaya yer vermeniz yazınızı daha profesyonel gösterecektir. 

Benim blogculara vereceğim tavsiyeler bu yönde. Umarım işinize yaramıştır. Sizin de blogculara verecek tavsiyeleriniz varsa veya aklınızda sorular varsa yorum kısmında belirtebilirsiniz. 

Birbirinden değerli 8 telifsiz resim sitesi

İnternet dünyasında oluşturulan içeriklerde, ister yazılı içerik ister video içerik olsun görsel desteği çok önemlidir. Pek çok telifsiz resim bulma sitesi arasında en kaliteli 8 tanesini sizler için seçtim. 

Başlamadan önce belirtmeliyim ki, pek çok stok fotoğraf sitesi içeriklerini Creative Commons ile lisanlamıştır. Bu da bu resimleri ticari amaçla olmadığı sürece dilediğiniz şekilde kullanabileceğiniz anlamında gelir.

Ancak yine de dikkat etmeniz gereken birkaç husus bulunuyor. 

• Bazı telifsiz fotoğraf siteleri, kullandığınız resimler için atıfta bulunmanızı isteyebilir. Örneğin, sitemizdeki Yasal Uyarı sayfasının en sonuna bakacak olursanız bunun bir örneğini görebilirsiniz. Bu yüzden sitelerin kullanım koşullarına göz atmanızda fayda var.
• Bir diğer husus ise görselinden faydalandığınız kişiye bağış yapabileceğinizdir. Bu husus üsttekine göre daha esnek ve zorunlu olmasa bile durumunuz elveriyorsa bunu düşünebilirsiniz.

Şimdi, gelin telifsiz fotoğraf ve resim bulabileceğiniz en kaliteli 10 sitenin listesine göz atalım.

Pixabay

Pixabay, telif hakkı olmayan resim ve videoları paylaşan etkileşimli bir topluluktur. Tüm içerikler sanatçıya gelir sağlamadan, izin almaksızın ve ticari amaç gütmeden Pixabay Lisansı ile yayınlanmaktadır.

Pixabay'deki telifsiz resimleri kopyalayabilir, değiştirebilir ve ticari kullanımlar dahil olmak üzere, izin istemeden ve resim sahibine atıfta bulunmadan, kullanabilirsiniz. Ancak her resmin koşulları aynı olmayacağı için yine de her resimden resme dikkat etmeniz gerekir.

Picspree

Picspree, kreatif kişilerin herhangi bir projede kullanmak üzere yararlanabilecekleri ücretsiz bir stok görsel kaynağıdır. Tüm görseller ücretsizdir. Bu, görsellerin atıf veya izin gerekmeden, reklam amaçlı projelerde bile kullanıma hazır oldukları anlamına gelir.

Görseller herhangi bir projede, sosyal medya platformlarında rahatlıkla kullanılabilir. En güzel yanlarından birisi de herhangi bir atıf şartının olmamasıdır. Ancak siz yine de resmi aldığınız sayfayı destek amaçlı kaynakça şeklinde link bırakabilirsiniz.

Free Images

Free Images'deki resimleri hemen hemen her şey için kullanabilirsiniz. Ancak ticari amaçlı kullanımda sorun olabilir. Bu yüzden tavsiyem sadece blogunuz, sosyal medya hesaplarınız için kullanın ya da lütfen Lisans Sözleşmesinin ilgili bölümünü kontrol edin, önleminizi alın.

Pexels

Pexels, oldukça popüler olan bir başka telifsiz görsel sitesidir. Fotoğrafların kullanım izni ise oldukça basittir:

• Bir fotoğrafın değiştirilmemiş kopyalarını satmayın, örneğin onu stok fotoğraf, poster, baskı olarak veya herhangi bir değer katmadan fiziksel bir ürün üzerinde satmayın. 
• Görselde ürününüzün insanlar veya markalar tarafından onaylandığını ima etmeyin. 
• Fotoğrafları diğer stok fotoğraf veya duvar kağıdı platformlarında yeniden dağıtmayın veya satmayın.

Bu kurallara uyduğunuz sürece Pexels'i de rahatlıkla kullanabilirsiniz. 

Unsplah

Dünyanın her yerinden fotoğrafçılar topluluğu tarafından size sunulan 2 milyondan fazla ücretsiz yüksek çözünürlüklü görüntü Unsplah'de bulunuyor. 

Ayrıca resimleri olduğu gibi satmadığınız sürece herhangi bir atıfta bulunmadan-yapmanız öneriliyor tabii ki ama zorunlu değil- ticari amaçlı dahi kullanabilirsiniz. Bu yönü ile Unsplah çok işe yarar olabiliyor.

Stockvault

2004 yılından bu yana Stockvault.net, ziyaretçilerine ücretsiz stok fotoğraflar, "kullanıma hazır" web düzenleri ve logolar sunarak telifsiz ajanslara yönelme imkânı olmayanlara yardımcı oluyor. 

"Hiçbir şekilde telifsiz stokla rekabet etmeye çalışmıyoruz, bunun yerine "bir şekilde" ücretsiz stok görüntülerine olan ihtiyacı karşılamaya çalışıyoruz." şeklinde amaçlarını belirtiyorlar.

Bu sitede genel konuşulamayacak kadar farklı atıf gerektiren ve gerektirmeyen görsel bulunuyor. Bu yüzden kullandığınız resmin lisansına göre hareket etmeniz en doğrusu olacaktır.

StockSnap.io

StockSnap'teki tüm fotoğraflar Creative Commons - CC0 altında yayınlanmıştır. Bu lisans, ticari amaçlarla bile olsa fotoğrafları izin almadan indirmenize, kopyalamanıza, değiştirmenize ve dağıtmanıza izin verir.

Creative Commons CC0 lisansı, StockSnap'teki tüm fotoğrafları fotoğrafçılara atıfta bulunmadan ücretsiz olarak kullanmanıza izin verir. Gerekli olmasa da, atıfta bulunmanız her zaman takdir edilmektedir.

Styledstock.co

Styledstock, diğer sitelerin aksine kurallar konusunda biraz daha katı ancak çok daha net bir yol izlemektedir. 

"Görsel telif hakkı hala yazarının mülkiyetinde olmakla birlikte, orijinal yazar veya kaynak belirtmeden bunları ticari amaçlarla uyarlamakta ve kullanmakta özgürsünüz." şeklinde kullanabileceğiniz şekilleri göstermiştir. Aşağıdaki listede ise nerelerde kullanılmasının yasak olduğu yazmaktadır.

• Fotoğrafları ücretsiz stok fotoğraf web sitelerinde paylaşmak
• Fotoğrafları bir fotoğraf paketinde veya tek başına yeniden satmak
• Bunları aşağılayıcı veya yasa dışı içerikte kullanmak
• Tişörtler, posterler, telefon kılıfları ve kitap kapakları satmak (Styledstock ile iletişime geçin.)
• Fotoğrafı değiştirmek, değiştirmek veya rötuşlamak ve yeniden satmak veya sahipliğini talep etmek

Bu kuralları ihlal etmediğiniz sürece dilediğiniz biçimde kullanabilirsiniz. 

Önemli Uyarı: Lütfen, yine de sitelerin lisans koşullarını okuyun ve ona göre siteleri kullanın.

https://wpekran.com/telifsiz-gorseller-stok-fotograf-siteleri/

Siteye Yükleniyor Efekti Ekleme

Daha önce hiç yükleniyor animasyonu ile karşılaştınız mı? Bu kod sayesinde sitenize yükleniyor efekti verebilirsiniz.

Yükleniyor efekti nedir, ne için kullanılır?

Yükleniyor efekti, ilk resme benzer animasyonları siteniz yükleniyorken ziyaretçilere gösterir. Bu animasyon, web siteleri için oldukça faydalıdır. 

Eğer web sitenizin yükleme süresi çok uzunsa, ziyaretçiler web sitenizin kapalı olduğunu düşünebilir ve sitenizden ayrılabilir. Ancak bir yükleme efekti eklemeniz durumunda ziyaretçiler web sitenizin şu anda yüklenmekte olduğunu görecek ve beklemeye devam edecektir. 

Yükleme efekti eklemenin oldukça fazla yolu olsa dahi, size yazımızda anlatacağımız yöntem ile web sitenizin açılış hızında büyük değişiklikler olmadan bu kodu kullanabileceksiniz. 

Ayrıca bu efektlerden tercih alanınızı genişletmek için pek çok versiyonunu ekledik, seçtiğiniz animasyonu yorumlarda paylaşabilirsiniz. Şimdi, bu kodu sitenize nasıl ekleyebilirsiniz bundan bahsedelim.

Kodu paylaşmadan önce, bu kod en iyi şekilde jQuery 1.7.1 sürümü ile çalışır. Lütfen sitenizdeki jQuery kütüphanesi yerine aşağıdaki kütüphaneyi ekleyin.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> 

Eğer buraya kadarki işlemlerde sorun yaşamadıysanız, devam edebiliriz. Blogger panelinden Tema ve HTML'yi düzenle tuşuna basarak aşağıdaki kodu </body> kodunun hemen üstüne eklemelisiniz.

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]> </script>

Üstteki kodu ekledikten sonra, aşağıdaki kodu </body> kodunun hemen altına ekleyin.

Örnek bir loading ekranı

<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

Daha sonra, CTRL+F yolu ile </head> kodunu aratıp hemen üstüne aşağıdaki kodu ekliyoruz.

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

Bundan sonra Temayı kaydet diyoruz ve temamızı görüntülüyoruz. Ve tüm işlem bu kadardı sevgili dostlar. Web sitenize girdiğinizde kodun başarılı bir şekilde çalıştığını görebilir, sitenizin aynı hız ile açıldığını görebilirsiniz.

Bir hız farkının olmamasını kodların CSS ve SVG şeklinin oldukça saf olmasıdır. Eğer sadece yukarıda bahsettiğimiz yükleniyor kodunu beğenmediyseniz aşağıdaki bağlantıdan geri kalan yükleniyor kodlarını bulabilir ve sitenize ekleyebilirsiniz.

https://www.arlinadzgn.com/2018/08/memasang-efek-preloading-keren-di.html