İki Basit Adımda Web Sitenizin Performansını Artırın

Yayınlanan: 2023-12-22

Adam bir ofisteki dizüstü bilgisayarda web sitesini güncelliyor.

Yani daha iyi performans gösteren bir web sitesi istiyorsunuz. En temel düzeyde, arama motorlarının bir web sayfasındaki gövde içeriğine mümkün olduğunca hızlı erişebildiğinden ve sayfanın hızlı yüklendiğinden emin olmanız gerekir.

Bununla birlikte, bu gereksinimlerin her ikisine de yardımcı olabilecek iki basit SEO en iyi uygulaması vardır ve bunlar:

  1. CSS'yi dışsallaştırma (basamaklı stil sayfaları)
  2. JavaScript'i haricileştirme

Bu makalede nedenini açıklayacağım ve başlamak için bazı basit adımlar vereceğim.

  • CSS nedir?
  • Javascript nedir?
  • Neden Javascript ve CSS'yi dışsallaştıralım?
  • JavaScript'iniz ve CSS'niz zaten haricileştirilmiş mi?
  • Javascript nasıl harici hale getirilir
  • CSS nasıl haricileştirilir?
  • Küçük adımlar, büyük etki
  • SSS: CSS ve JavaScript içeren iki basit adımı kullanarak web sitemin performansını nasıl artırabilirim?

CSS Nedir?

Basamaklı Stil Sayfaları (CSS), bir web sitesinin görünümünü ve hissini oluşturmak için, örneğin yazı tipleri ve renkler gibi HTML kodunun bir web sayfasında nasıl görüntülenmesi gerektiğini açıklar.

JavaScript Nedir?

JavaScript, arama kutusu, ses ve video veya haritalar gibi web sayfalarında etkileşimi mümkün kılan bir programlama dilidir.

Neden JavaScript ve CSS'yi Dışsallaştıralım?

Web sitenizin kodunun arama motoru dostu olmasını istiyorsunuz. Bu nedenle, temel kodun arama motoru örümceklerinin taramasını ve web sayfalarının neyle ilgili olduğunu anlamasını kolaylaştırdığından emin olmanız gerekir.

Bunun, arama motorlarının bir arama sorgusunun alaka düzeyini belirleyebilmesi için gerçekleşmesi gerekir. Arama motorlarının taraması gereken ilk şeylerden biri, gereksiz kod satırları değil, bir web sayfasındaki gövde içeriğidir.

Ayrıca web sitenizin hızlı olmasını da istiyorsunuz. Google gibi arama motorları, kullanıcı deneyimi için web sayfası performansını o kadar önemsiyor ki, buna ayrılmış sıralama sinyalleriyle birlikte sayfa deneyimi algoritma güncellemesini yayınladılar.

Hem CSS hem de JavaScript bir web sayfasını karmaşıklaştırabilir, yüklenmesini yavaşlatabilir ve arama motorlarının taramasını zorlaştırabilir. Bir web sayfasındaki asıl gövde içeriğinin kodun ilk yüz satırında erişilebilir olmasını istiyorsunuz.

Bu dosyaların harici hale getirilmesi az önce bahsettiğim sorunları çözmenin kolay bir yoludur. Bunu yapmak sayfa yükleme süresini hızlandırabilir, sıralamalara önemli ölçüde yardımcı olabilir ve tarama bütçesinden tasarruf sağlayabilir.

CSS'yi Dışsallaştırmanın Yararları

Harici bir CSS dosyası oluşturmak, web sitesinin görünümünü kontrol etmek için size tek bir yer sağlar; bu nedenle, değişiklik yapmak istediğinizde web sitesinin her sayfasını düzenlemekten çok daha verimlidir.

Bir CSS dosyanız olduğunda yalnızca harici dosyada değişiklik yapmanız gerekir ve bu değişiklikler sitenin tamamına uygulanır.

Harici bir CSS dosyasına sahip olmanın başka faydaları da vardır. Yazı tipi etiketleri gibi satır içi biçimlendirmeyi kaldırmanıza ve bunları hangi stilin uygulanacağını bildiren CSS etiketleriyle değiştirmenize olanak tanır. Bu, web sayfasında daha az kodun karmaşıklaşmasına neden olur.

Daha az kod, daha küçük dosya boyutları anlamına gelir. Daha küçük dosya boyutları, web sayfalarının daha hızlı yüklenmesi anlamına gelir.

JavaScript'i Dışsallaştırmanın Yararları

JavaScript için harici bir dosya oluşturmanın da benzer faydaları vardır. JavaScript'i ayrı web sayfalarından harici bir dosyaya taşıdığınızda, web sayfalarınızın bilgi için JavaScript dosyasını çağıran yalnızca tek bir kod satırına ihtiyacı vardır.

JavaScript genellikle uzun ve hantal olduğundan, bunu yapmak basit bir şeyle web sayfasının boyutunu yarıya indirebilir.

JavaScript'iniz ve CSS'niz Zaten Dışsallaştırılmış mı?

CSS ve JavaScript'inizin haricileştirilmiş olup olmadığını kontrol etmek kolaydır. Web sitenizin ana sayfasına gidin ve kaynak koduna bakın. Kaynağı görüntülemek için sayfayı sağ tıklayın ve "sayfa kaynağını görüntüle"yi seçin.

BruceClay.com'daki "sayfa kaynağını görüntüle" ekran görüntüsü.
BruceClay.com'daki "sayfa kaynağını görüntüle" ekran görüntüsü

Bir web sayfasındaki haricileştirilmemiş JavaScript'ten alınan kod örneğinin bir örneğini burada bulabilirsiniz:

<script language=”javascript”>

var _pn=”Sizin+Kusursuz+Haklarınız”; //sayfa ad(lar)ı

var _mlc=”Hayır+Hata+Tavsiye”; //çok seviyeli içerik kategorisi

var _cp=”null”; //kampanya

var _acct=”WE531126G4MC09EN3”; //hesap numaraları

var _pndef=”başlık”; //varsayılan sayfa adı

var _ctdef=”dolu”; //varsayılan içerik kategorisi

var _prc=””; //ticaret fiyatı

var _oid=””; //ticaret siparişi

var _dlf=””; //filtreyi indir

var _elf=””; //bağlantı filtresinden çık

var _epg=””; //olay sayfası tanımlayıcısı

</script>

Bu, JavaScript'in sayfa koduyla nasıl değerli yer kaplayabileceğinin yalnızca bir örneğidir. Web sitelerinin haricileştirilmesi gereken çok sayıda (30+) JavaScript satırına sahip olması normaldir.

Alternatif olarak, harici bir JavaScript dosyasıyla şu şekilde görünecektir:

<script type=”text/javascript” src=”/sample.js”></script>

Aşağıda haricileştirilmemiş bir stil sayfası örneği verilmiştir:

.content { temizle: sol;

arka plan rengi: #ffffff;

arka plan resmi: URL(“/images/movie_reel2.jpg”); /* küçük makara */

/* arka plan resmi: URL(“/images/movie_reel.JPG”); büyük makara */

arka plan konumu: %100 %100; /* sag alt köşe */

arka planda tekrarlama: tekrarlama yok;

kenarlık: 2 piksel düz #666666;

kenar stili: katı katı yok katı;

dolgu: 0,5em 1em 1em 1em;

kenar boşluğu alt: 0em;

üst kenar boşluğu: 0em;

metin hizalama: sol;

}

h1 {

yazı tipi ailesi: Georgia, Times New Roman, Times, sans-serif;

yazı tipi boyutu: 18 piksel;

yazı tipi stili: italik;

yazı tipi ağırlığı: kalın;

renk: #003399;

metin hizalama: ortala;

}

Web sitelerinde, CSS'yi bir web sitesindeki çok sayıda sayfadan çağrılacak tek bir dosyaya dahil etmek yerine, bir web sayfasına sabit kodlanmış olarak kullanmak yaygındır.

Harici bir CSS dosyasıyla şöyle görünecektir:

<link rel=”stylesheet” href=”styles.css”>

JavaScript Nasıl Dışsallaştırılır

Bahsetmemiz gereken ilk şey, bazen bir web sayfasında, örneğin doğru izleme veya sayfa işlevselliği için JavaScript kodunun bulunmasının gerekli olduğudur.

İzleme ve işlevselliğin yanı sıra, JavaScript kodlarının tamamı sayfa hızına zarar vermez ve harici hale getirilmesi gerekir.

Aslında bazı durumlarda satır içi JavaScript kullanmak, örneğin JavaScript'in sayfanın oluşturulmasını engellediği durumlarda sayfa yükleme süresini ve performansını hızlandırabilir.

Sayfanın üst kısmında satır içi JavaScript kullanılması, büyük JavaScript dosyalarının yüklenmesini beklemek zorunda kalmadan sayfanın üst kısmındaki içeriğin kullanıcılar tarafından görülebilmesini sağlayabilir.

İşte JavaScript'i nasıl haricileştireceğiniz:

  1. Web sayfasının HTML kaynak koduyla birlikte açma ve kapama <script> etiketini bularak haricileştirmek istediğiniz JavaScript kodunu tanımlayın.
  2. <script> ile </script> arasındaki javascript kodunu kesin.
  3. Notepad gibi bir metin düzenleyici kullanarak yeni bir belge oluşturun ve JS kodunu yeni boş belgeye yapıştırın.
  4. Dosyayı “.js” dosya uzantısıyla kaydedin.
  5. Dosyayı sunucunuza yükleyin ve yolunu not edin.
  6. Orijinal html dosyanıza geri dönün ve aşağıdakini ekleyin; burada "path/filesource.js", yeni oluşturulan .js dosyasının URL'sidir:
    <script language=”JavaScript” src=”path/filesource.js”></script>
  7. Artık gömülü JavaScript kodu yalnızca bir satırla değiştirildi.

Arama motorları web sayfasını taradıklarında, sayfanın geri kalanına geçmeden önce okuyabilecekleri yalnızca bir satır kod olacaktır.

Daha sonra bu, Google'ın sayfa deneyimi algoritmasının, özellikle de İlk Giriş Gecikmesinin güncellenmesine yardımcı olabilir. (Mart 2024'te FID'nin yerini Sonraki Boyayla Etkileşim (INP) alacağını unutmayın.)

CSS Nasıl Dışsallaştırılır

Stil sayfalarını dışsallaştırmak için, dosyayı .css dosya uzantısıyla kaydetmek dışında, JavaScript dosyasıyla aynı talimatları uygulamanız yeterlidir. Orijinal web sayfası kodundaki tüm CSS kodlamasını aşağıdakiyle değiştireceksiniz:

<link href=”cssfilename” rel=”stylesheet” type=”text/css”>

Bir kez daha orijinal sayfanızda örümcekler için sitenin daha kolay indekslenmesine olanak tanıyan tek satırlık bir kod kaldı.

Küçük Adımlar, Büyük Etki

JavaScript ve CSS'yi dışsallaştırmak, web sitenizin performans sorunlarını çözmez, ancak bu harika bir başlangıçtır.

Birlikte çalıştığımız bir müşteri bu iki en iyi uygulamayı uyguladı ve 20.000 kod satırının sayısını 1.500'e düşürdü. Web sitesi daha sonra sıralamada önemli bir iyileşme gördü ve birçok anahtar kelime için organik arama sonuçlarının en üstüne çıktı.

Yani evet, etkilidir ve web sayfalarınızın performansını artırırken başlamak için iyi bir yerdir.

Web sitenizin hızını ve arama sıralamasını artırmak için yardıma mı ihtiyacınız var? Ücretsiz danışmanlık için bizimle iletişime geçin.

SSS: CSS ve JavaScript içeren iki basit adımı kullanarak web sitemin performansını nasıl artırabilirim?

Web sitenizin performansını optimize etmek, web geliştirmenin dinamik ortamında kullanıcı memnuniyeti ve arama motoru sıralaması için çok önemlidir. CSS ve JavaScript'ten etkili bir şekilde yararlanmak sitenizin hızını ve işlevselliğini önemli ölçüde artırabilir. Web sitenizin performansını artırmak için iki basit ama güçlü tekniği inceleyelim.

CSS ve JavaScript Dosyalarını Küçültün ve Birleştirin

Web sitesi hızını optimize etmek söz konusu olduğunda dosya boyutlarını azaltmak çok önemlidir. Birden fazla CSS veya JavaScript dosyasını tek bir dosyada birleştirmek, HTTP isteklerini en aza indirerek yükleme sürelerini artırır. Küçültme, kod işlevselliğini değiştirmeden gereksiz karakterleri (boşluk, yorumlar) kaldırır.

Anlaşılır İpucu: Otomatik küçültme ve birleştirme işlemleri için Grunt veya Gulp gibi oluşturma araçlarını kullanın. Daha hızlı dosya dağıtımı için İçerik Dağıtım Ağlarını (CDN'ler) kullanmayı düşünün.

Kritik Olmayan Kaynaklar için Geç Yüklemeyi Uygulayın

Tembel yükleme, gerekli olmayan kaynakların yüklenmesini ihtiyaç duyulana kadar erteler. Örneğin, ekranın alt kısmındaki resimler veya ikincil JavaScript, eşzamansız olarak yüklenebilir ve bu da ilk sayfa yükleme hızını artırır.

Anlaşılır İpucu: Tarayıcılara bunları yalnızca görünüm alanına geldiklerinde yüklemeleri talimatını vermek için resimler için `loading=”lazy”` özelliğini kullanın; böylece kullanıcı deneyimi ve yükleme süreleri optimize edilir.

Alıcının Niyeti Arama Terimleri ve Rolleri

Alıcı amacına yönelik arama terimlerini anlamak, etkili optimizasyon için çok önemlidir. "Web sitesi hızını iyileştirme teknikleri", "CSS ve JavaScript optimizasyonu" veya "tembel yükleme uygulaması" gibi terimler, kullanıcının web sitesi performansını artırma niyetini gösterir. Bu terimleri içeriğinize entegre etmek, kullanıcı sorgularıyla uyumlu hale gelir ve görünürlüğü artırır.

Performansın Kullanıcı Deneyimi ve SEO Üzerindeki Etkisi

Optimize edilmiş web sitesi performansı, kullanıcı deneyimini doğrudan etkileyerek etkileşimi artırır ve hemen çıkma oranlarını azaltır. Dahası, arama motorları daha hızlı yüklenen sitelere öncelik vererek SEO sıralamalarını olumlu yönde etkiler.

Estetiği Performansla Dengelemek

Performansı optimize etmek çok önemli olsa da, görsel olarak çekici bir web sitesini sürdürmek de aynı derecede hayati öneme sahiptir. Estetik ve işlevsellik arasındaki dengeyi bulmak, hızdan ödün vermeden ilgi çekici bir kullanıcı deneyimi sağlar.

Sürekli İzleme ve Testin Rolü

Web sitesi performans ölçümlerini düzenli olarak izlemek ve testler yapmak, optimum işlevselliği sürdürmenin anahtarıdır. Google PageSpeed ​​Insights ve Lighthouse gibi araçlar, performans darboğazlarının belirlenmesine yardımcı olarak zamanında ayarlama yapılmasına olanak tanır.

Geleceğin Trendleri: Optimum Performans için Gelişen Stratejiler

Teknoloji ilerledikçe, HTTP/3 ve geliştirilmiş JavaScript çerçeveleri gibi ortaya çıkan trendler, performans optimizasyon stratejilerini yeniden şekillendirmeye devam ediyor. Bu trendler hakkında güncel kalmak, web sitenizin rekabetçi kalmasını ve iyi optimize edilmiş olmasını sağlar.

Web sitenizin performansını CSS ve JavaScript optimizasyonları yoluyla artırmak, başarılı web geliştirmenin temel taşıdır. Dosya küçültme, yavaş yükleme ve gelişen trendlere uyum sağlama gibi teknikleri kullanarak kullanıcı deneyimini zenginleştiriyor ve sitenizin dijital alanda görünürlüğünü artırıyorsunuz.

Adım Adım Prosedür: Web Sitesi Performansını Artırma

  1. Mevcut Performans Metriklerini Değerlendirin : İyileştirilecek alanları belirlemek için Google PageSpeed ​​Insights gibi araçları kullanın.
  2. CSS ve JavaScript Küçültme Uygulayın : Dosyaları sıkıştırmak ve birleştirmek için derleme araçlarını veya çevrimiçi hizmetleri kullanın.
  3. İçerik Dağıtım Ağlarını (CDN'ler) göz önünde bulundurun : Daha hızlı dosya dağıtımı için CDN'leri tercih edin.
  4. Tembel Yükleme Fırsatlarını Değerlendirin : Tembel yüklemeye uygun, kritik olmayan kaynakları belirleyin.
  5. Tembel Yüklemeyi Uygulayın : Görüntüler veya ikincil komut dosyalarının eşzamansız yüklenmesi için `loading=”lazy”` özelliğini entegre edin.
  6. Alıcının Niyeti Arama Terimlerini Araştırma : Web sitesi performansıyla ilgili kullanıcı sorgularını anlayın.
  7. Alıcının Amacı Anahtar Kelimelerini Entegre Edin : Daha iyi görünürlük için içeriğinize alakalı terimleri ekleyin.
  8. Performans Metriklerini İzleyin : Metrikleri düzenli olarak analiz edin ve stratejileri buna göre ayarlayın.
  9. Estetik ve İşlevselliği Dengeleyin : Hızdan ödün vermeden görsel çekiciliği sağlayın.
  10. Gelişen Trendler Hakkında Güncel Kalın : Geleceğe hazır stratejiler için web optimizasyonundaki gelişmeleri takip edin.

Bu kapsamlı adım adım kılavuz, CSS ve JavaScript optimizasyon tekniklerini kullanarak web sitenizin performansını etkili bir şekilde artırmak için ayrıntılı bir yol haritası sağlar. Bu adımların izlenmesi, kullanıcı beklentilerine ve arama motoru algoritmalarına uygun, akıcı, yüksek performanslı bir web sitesi sağlar.