Blog

HTML’de, <img> bir resmi veya fotoğrafı web sayfanıza yerleştirmek için kullandığımız kod etiketidir.

Bu <img> etiketin iki gerekli niteliği vardır: src görüntüye giden yolu belirtmek ve alt görüntü için alternatif bir metin belirtmek için kullanılır. Nitelik alt, herhangi bir nedenden dolayı (belki yanlış görüntü yolu) görüntünün görüntülenmemesi durumunda ilgili görseli tanımlamak için kullanılmaktadır.

<img src="/ornek-resim.jpg" alt="Resmi tanımlayan açıklama kısmının geleceği yer">

alt Etikette öznitelik zorunlu olmasına rağmen birçok kişi bunu boş bırakmayı veya görüntüyle ilişkili olmayan bir metin yazmayı tercih ediyor.

İlgili Araç : Web sayfanızdaki görselleri şimdi SEO aracımız ile kontrol edebilirsiniz. 10 farklı kritere göre analiz gerçekleştirerek Alt Text Checker aracımızla en doğru tavsiyeleri alın. SEO uzmanlarımızın kullandığı Alt Text Checker aracını şimdi ücretsiz kullanabilirsiniz.

Çoğu web tasarımcı alt metnin ne kadar yararlı olduğunu bilmediği için ona çok az dikkat eder veya hiç dikkat etmez ve çoğu web tasarım veya seo eğitimlerinde de önemini vurgulamakta başarısız olunur.

Bu Türk SEM makalemizde alt metnin ne anlama geldiğini, ne işe yaradığını ve web sayfanıza bir resim eklerken ne kadar yararlı olduğunu sizlere anlatacağız. Ayrıca resimleriniz için alt metin yazarken dikkate alınması gereken birkaç noktayı vurgulayacağız.

İçeriğimizi kısa tuttuk, tam olarak doğru kullanımlarını anlamanızı sağlayacağız.

Alt Text Nedir?

Alt Text Türkçesi : Alt Metin

Alternatif veya alt metin, alt niteliği olarak da adlandırılır. Bir resmi doğru bir şekilde tanımlayan özlü, açıklayıcı bir metindir.

Varsayılan olarak tarayıcıda bir web sayfasını görüntülediğinizde bu metin gösterilmez. Yine de, bir resmi herhangi bir nedenle ziyaretçiniz görüntüleyemediği bir durumda, alt metin görünür hale gelir. Bu metin, okuyucuya veya kullanıcıya resmin ne hakkında olduğu ve hangi materyalleri barındırdığı konusunda bir fikir verecek kadar bilgilendirici ve açıklayıcı olmalıdır.

Örneğin, şöyle bir görseliniz varsa:

Dağ veya Göl gibi genel bir ifade vermek yerine tam açıklayıcı olmaya çalışmalısınız. Doğru kullanım; “Arka planda Hasandağı manzarası olan Helvadere gölü”

<img src="/imgs/hasandagi.jpg" alt="Arka planda Hasandağı manzarası olan Helvadere gölü">

Resim Alt Metni Neden Önemlidir?

Alt niteliğinin <img> etiket içine neden eklememiz gerektiği konusuna değinelim.

Ancak görsellerinize yalnızca basit alternatif metin eklemeyi değil, aynı zamanda açıklayıcı ve bilgilendirici alternatif metinler eklemeyi de düşünmeniz için birkaç neden daha var:

1. Bağlantı sorunlarınız olduğunda veya görüntünüzün yolu yanlış eklendiğinde, görüntünüz web sayfanıza yüklenemeyebilir. Bu durumda, alt metin değeri görüntünün yerine gösterilerek ziyaretçilerinizi bilgilendirir.
2. Alt Text, arama motorlarının web sayfanızın SEO‘sunu iyileştirmek için kullanabileceği bir görselin açıklanmasını sağlar. Arama motorlarına web sayfanızı SERP‘lerde daha yüksek sıralar için daha iyi bilgiler verir, yani uygun bir alt metne sahip olmak web sayfanızın daha üst sıralarda yer almasına yardımcı olur.
3. Ekran okuyucu kullanan görme engelli kullanıcılar, görüntünün açıklamasını dinleyebilirler. Ekranı göremeyen kişiler için erişilebilirliği artırmanın ziyaretçinizin sitenizde tam istifade etmesini sağlayacaktır.
4. Resminizi başka bir sayfaya veya belgeye bağlamak istediğiniz zamanlarda resim yüklenemediği koşullarda bağlantı metni olarak alt metni kullanılır.

İyi Alternatif Metin Yazmak İçin İpuçları

Ünlü bir söz vardır: “Yapmaya değer her şey, iyi yapmaya değerdir.” Aynısı temel olarak alternatif metninizi yazarken de geçerlidir – kötü, alakasız veya anlamsız alternatif metin yazmaktansa alternatif metin yazmamak daha iyi olduğunu belirtebiliriz.

Alternatif metninizi yazarken aklınızda bulundurmanız gereken birkaç ipucu:

Resmi doğru bir şekilde tanımlayın

Alt Text (Alt Metin) yazmanın temel amacı ilgili görselin yerine geçebilmesidir.

Alt metnin amacına hizmet edebilmesi için görseli açıklayıcı ve doğru bir şekilde tanımlama yapması gerekir.

Yararlı bir ipucu : bir resmi göremeyen bir kullanıcıya o resmi tanımladığınızı düşünerek Alt Text içeriğini oluşturun.

Kısa tut

Bu noktada bu alt metinlerin bir paragraf biçiminde olacağını düşünmeye başlayabilirsiniz – ancak doğru kullanım değildir. Çoğu durumda görsellerimizi 6-7 kelimeyle açıklamanın ve tanımlamanın en iyi yolunu her zaman aramalıyız.

Ekran okuyucuların alt metni yaklaşık 125 karakterde kesebileceğini her zaman aklınızda tutun, bu nedenle bu sınıra uymak en iyisidir. Yine de her zaman tek bir kelimeyi alt metin olarak kullanmaktan kaçınmalısınız.

Örnek Kullanım : Helvadere Parkından Helvadere Gölü ve Hasandağı Manzarası

55 karakterlik bir kullanımla resmi tam olarak tanımladık. 125 karaktere kadar limitimiz olduğunu varsaysakta çoğunlukla 60 -70 karakterle tanımlamayı gerçekleştirebiliyoruz.

Anahtar kelimeleri kullanın ancak anahtar kelime doldurmaktan kaçının

Bir görseli tarif ederken anahtar kelime seçimimiz en önemli önceliğiniz olması normaldir. Fakat; ilgili imajı anahtar kelimelerle doldurmak doğru değildir.

Anahtar kelimelerinizin alt metninizde olması web sayfanızın arama motorlarında daha üst sıralarda yer almasına yardımcı olsa da, arama motorlarının yardımcı olmayan veya kötü alt metinlerin sorun meydana getireceğini unutmayın.

Hatalı Kullanım : Hasandağı, Helvadere, Aksaray, Türkiye, Dağ, Park, Göl Fotoğrafı

Bu madde yalnızca web sayfanızın saygınlığını güçlendiren önemli görselleri kullanmanız ve bunları tanımlamak için yalnızca en önemli anahtar kelimeleri kullanmanız gerektiği anlamına gelir.

Kendini tekrarlama

Tekrarlardan kesinlikle kaçının. Web sayfanızın başlığını veya başlığını neden alt metin olarak kullanıyorsunuz ki? Tekrarlanan altyazılardan veya web içeriklerindense boş bırakmak genellikle daha iyidir.

En iyi tavsiyemiz ise bu konuda bir görseli iyi tanımlayamadığınızda, rastgele bir metin eklemektense alternatif metni boş bırakmanız veya tekrar eden alternatif metin olarak resim açıklamalarını kullanmanızdır.

Resim Başlıkları ve Alt Metin

Resim açıklamaları ile alternatif metni karıştırmak veya alternatif metninizdeki içeriği resim açıklaması olarak tekrarlamak kolaydır.

Açıklamalar, kullanıcıların çevredeki metinle ilişki kurmasına yardımcı olmak için görüntüleri tanımlarken, alternatif metin, bir görüntüdeki bilgileri açıklar veya ekran okuyucu kullanıcıları için bir görüntüyü tanımlar.

Açıklamalar görselin gösterdiğiyle birebir aynı olmak zorunda değildir; görselin yerleştirildiği metin veya içerikle nasıl ilişkili olduğunu açıklar.

‘Resim’ veya ‘fotoğraf’ kelimelerini eklemeyin

alt niteliği image etiketinde kullandığınızda bu da arama motorlarının bunun bir imaj olduğunu bileceği anlamına gelir, bu nedenle alt metin yazarken imaj, resim veya fotoğraf kelimelerini kullanmaya gerek yoktur.

Ancak, insanların bağlamı veya ne tür bir resim veya fotoğraf olduğunu anlamalarına yardımcı olmak iyidir. Örneğin, headshot, çizim, ekran görüntüsü, grafik ve daha fazlasını söyleyebilirsiniz.

Yapay Zeka ile Alt Text Kullanımı

• Rankmath SEO eklentisi, bütünleşik olarak yapay zeka ile fotoğrafları tanımlıyor.
• Alt Text AI, herhangi bir işlet yapmadan yüklediğiniz her fotoğrafa otomatik olarak yapay zeka destekli içerik oluşturur. Bir kaç projemde kullandım oldukça işlevsel olduğunu belirtebilirim.

Özetleme

Bu Türk SEM makalemizde Türkçe yeteri kadar kaynak olmayan Alt Text konusunu inceledik ve bir de sizler için Alt Text Aracı yayınladık. Buraya kadar okuduysanız alt metnin ne anlama geldiğini ve neden önemli olduğunu öğrendiniz. Ayrıca, web sayfanıza resim eklerken nasıl kullanılacağına dair bazı önemli ipuçları da biliyorsunuz.

Son olarak, logonuz, düğme olarak kullanılan resimler ve daha pek çok şey dahil olmak üzere sitenizde kullandığınız tüm imajlere her zaman alternatif metin eklemeniz gerektiğini ve bunu neden yaptığınızı bilmeniz gerektiğini unutmamalısınız.

Ancak web sayfalarınızı süslemek ve bilgi aktarmaktan ziyade öncelikli amacı bu olan site tasarımının bir parçası olan görsellerin alt text gerektirmediğini de unutmayın.

Okuduğunuz için teşekkürler, sizlere SEO konusunda ücretsiz şekilde çok değerli bilgiler aktarıyoruz. Makalelerimizi takip ederek kendinizi geliştirebilir ve SEO uzmanlarımızın kullandığı araçları ücretsiz kullanabilirsiniz.

Web tasarımla uğraşan herkesin işine yarayacak muhteşem bir araçla bir konuyu da inceliyoruz. Yazı içerisinde bulunan aracımız sayesinde ilgili sayfa içerisinde ki tüm Inline CSS listelemelerini nitelikleriyle beraber görebileceksiniz. Sayfa hızı konusunda devamlı karşınıza Inline CSS konusu geliyorsa Türk SEM’in bu aracı sayesinde sorunlarınızı eksiksiz bir şekilde görebilirsiniz.

Inline CSS, Türkçe olarak Satıriçi CSS olarak da anılmaktadır.

Yukarı kısımdan incelemek istediğiniz sayfayı giriş yaparak kontrol edebilirsiniz. Kontroller sırasında satıriçi kullanılan CSS kodlarının ne olduğunu anlatan bir kılavuzla karşılaşacaksınız.

Inline CSS Nedir?

Inline CSS (Satır içi CSS), CSS kurallarını doğrudan bir HTML öğesine içerisinde style niteliğini kullanarak uyguladığınız bir tasarım yöntemidir. Bu yaklaşım CSS’yi doğrudan HTML kodlarınız içine eklemenize ve yalnızca uygulandığı belirli öğeyi etkilemenize olanak tanıyan o kısma özgü bir yöntemdir.

Satır içi stiller, HTML sayfanızdaki öğelerin görünümünü harici bir stil sayfasına (.css) bağlanmaya veya başlık bölümünü dahili stil sayfalarından veri çekmeye gerek kalmadan değiştirmenin hızlı ve pratilk bir yoludur.

Satır içi CSS’nin sözdizimi

Satır içi CSS için sözdiziminin kullanımı oldukça basittir. Bir HTML etiketi içindeki style niteliğiyle başlarsınız, ardından eşittir işareti gelir. Style niteliğinin değeri daha sonra tırnak işaretleri içine alınmış bir dizi CSS özellik-değer çifti ekleyerek kullanılabilir.

Her özellik karşılık gelen değerinden iki nokta üst üste işaretiyle ayrılır ve her özellik-değer çifti noktalı virgülle ayrılarak kullanılır.

‘Style’ Özelliği

Style niteliği, CSS’yi doğrudan bir HTML kodları içerisine eklemek için kullandığınız HTML niteliğidir. Satır içi stil için bir ağ geçididir ve tüm HTML öğeleri ve tarayıcılar tarafından desteklenir. Bir HTML etiketine style niteliğini eklediğinizde, tarayıcıya belirtilen stilleri yalnızca o öğeye uygulanmasını sağlar.

Style Niteliği içindeki CSS Özellik-Değer Çiftleri

Style özniteliği içinde, istediğiniz sayıda CSS özellik-değer çifti belirtmeniz mümkündür. Bir CSS özelliği, renk, kenarlık veya kenar boşluğu gibi biçimlendirmek istediğiniz bir öğenin tüm yönlerini kapsar. Değer, sırasıyla kırmızı, 2 piksel düz siyah veya 10 piksel gibi bu özelliği o alana özgü ayarlamanız için Inline CSS kullanılabilir.

İşte bir paragrafın metin rengini ve yazı tipi boyutunu değiştirmek için satır içi CSS’yi nasıl kullanabileceğinize dair bir örnek:

<!-- ORNEK INLINE CSS KODU -->
<p style="color: red; font-size: 20px;">Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.</p>

Şimdi bu kodun önizlemesine bakalım.

Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.

Satır İçi CSS’nin Avantajları

• Bireysel Öğelere Stil Eklemek Hızlı ve Kolay
• Değişiklikleri Test Etmek ve Önizlemek İçin Yararlıdır
• Yüksek Özgüllük Nedeniyle Diğer CSS Stillerini Geçersiz Kılar

Satır içi CSS’nin Dezavantajları

• Daha Büyük Projelerde Bakım Zorluğu
• Karmaşık HTML Yapısı
• Tekrar Kullanılamayan Kod
• Aşırı Kullanıldığında Sayfa Yükleme Performansını Azaltır
• Birden Fazla Öğe veya Sayfada Tutarlılıkla İlgili Zorluklar

Özellik	Inline CSS	Harici style.css
Tanım	HTML elemanlarının doğrudan “style” özelliği içinde tanımlanır	Ayrı bir .css dosyasında tanımlanır
Öncelik	En yüksek önceliğe sahiptir	Inline CSS’ten daha düşük önceliğe sahiptir
Yeniden kullanılabilirlik	Düşük, her eleman için tekrar yazılması gerekir	Yüksek, birçok sayfada kullanılabilir
Bakım	Zor, değişiklikler her eleman için ayrı ayrı yapılmalıdır	Kolay, tek bir dosyada değişiklik yapılır
Sayfa yükleme hızı	Sayfanın boyutunu artırır, yavaşlatabilir	Ayrı dosya olduğu için önbelleğe alınabilir, hızı artırır
Kod okunabilirliği	HTML içeriğini karmaşıklaştırır	HTML ve CSS’i ayırarak okunabilirliği artırır
Taşınabilirlik	Düşük, her HTML dosyasına özel	Yüksek, farklı HTML dosyalarında kullanılabilir
Ölçeklenebilirlik	Düşük, büyük projelerde yönetimi zordur	Yüksek, büyük projelerde daha kolay yönetilir

Sayfa hızına Etkisi ve Pagespeed Test Uyarısı

Çoğu zaman kolayımıza geldiği için kullandığımız Inline CSS uygulaması sitenizi yavaşlatma eğiliminde olan modası geçmiş bir uygulamadır. Örneğin; başlıklarınızı 20px ve kırmızı yapmak istediğinizi varsayalım. Sayfada 10 başlık varsa her birine aynı kodu yerleştireceksiniz. Bu durum gereksiz bir kod çokluğuna neden olmaktadır. Halbuki harici bir .css dosyasına .h1 başlık etiketi tanımlasanız bu kod yoğunluğunu azaltmış olacaksınız.

Yukarıda yer verdiğimiz test aracı sizler için tam olarak kusursuz bir kılavuz sunmaktadır. İlgili sayfalarınızı kontrol ederek sıklıkla tekrar ettiğiniz kodlara göz atabilirsiniz.

Bir webmasterın işine yarayacak bir çok etkili aracı Web Sitesi Test Araçları kısmında yayınlamaktayız.

Son Bilgi

Bir SEO ajansı olarak bizi genellikle hız konusunda ilgilendirse de Inline CSS konusunda yaşadığınız sorunları bizlere yazabileceğinizi, fikir alabileceğinizi unutmayın.

Veri sıkıştırma aracı olarak kullanılan gzip, Unix tarafından yazılmış program olan compress’e güçlü bir alternatif geliştirmek için çalışmalar yapan Jean-Loup Gailly ve Mark Adler tarafından geliştirilmiştir.

İşlevleri ve davranışları uyarlanabilir Lempel-Ziv algoritmasını kullanarak dosya sıkıştırmayı sağlayan POSIX standardında tanımlanmış bir teknolojidir. Üstlenen ekibin başarılı çalışmalar yaptığı ve şu an en yaygın kullanılan sıkıştırma yöntemi olduğunu belirtmeliyiz. Siteniz için aşağıdaki kısımdan test edebilirsiniz.

Gzip teknolojisi sitenizde %80’e varan tasarruf sağlamaktadır.

Sitenizde GZIP’i Test Edin

Gzip nasıl çalışır?

Gzip, ‘GNU ZIP‘in kısaltmasıdır ve veri sıkıştırma yöntemi LZ77’nin (Lemprl-Ziv 77) bir çeşidi olan özgürce kullanılabilen deflate algoritmasına ve Huffman kodlaması temeline dayanır. Bu teknikleri kullanarak, gzip dosyaları yinelenen veri dizelerini tarar. Program bu yinelenen dizilerle karşılaşırsa, bunları ilk görünen dizeye bir bağlantıyla değiştirir. Bu dizilerin uzunluğu genellikle 32.000 baytla sınırlıdır. Bir karakter dizisi önceki 32.000 baytta görünmüyorsa, .gz sonunu alan gzip dosyasında (sıkıştırılmadan) saklanır. Prosedür tek tek dosyalarla sınırlıdır, bu nedenle paketleme programı tar’ın .tar , .gz ve .tgz sonlarıyla sözde tarball arşivleri oluşturması gerekir. İşin teknik ve hikaye kısmı işin aslı bu kadar. Daha da fazla anlatıp uzatmaya gerek. Şimdi sizin sunucunuzda nasıl etkinleştirileceğini ve sitenizde yapmanız gereken ayarlardan bahsedeceğiz.

Apache web projeniz için gzip sıkıştırmasını nasıl kullanırsınız

Web sunucuları genellikle, etkinleştirilmesi gereken bir modül biçiminde pratik sıkıştırma sürecini sunar . Günümüzde, birçok web barındırma sağlayıcısı bu özelliği paylaşmaktadır, ancak geçmişte durum böyle değildi. Bunun nedeni muhtemelen sıkıştırma sürecinin ek işlemci gücü gerektirmesinden kaynaklıydı. Gzip’in sunucunuz tarafından yetkilendirilip yetkilendirilmediğinden emin değilseniz, sunucu yöneticinizle doğrudan iletişime geçebilir veya alternatif olarak manuel bir sorgu yapabilirsiniz. Örneğin, bir Apache web sunucusunda, basit bir phpinfo() çıktısı kullanarak sunucu modül ayarlarını kontrol edin. HTTP_ACCEPT_ENCODING bilgisi, hangi sıkıştırma yönteminin seçildiğini söyler.

Eğer sunucunuzda kurulu bir gzip mevcutsa, sıkıştırma yardımcısını herhangi bir amaçla kullanmak için birkaç seçeneğiniz vardır.

.htaccess dosyasında Gzip sıkıştırmasını etkinleştirme

Tüm sitenizde (bunlar geçerli dizine ve tüm alt dizinlere uygulanır) gerçekleştirmek ve web sunucunuzu gerçek zamanlı olarak yapılandırmak için bir .htaccess dosyası içerisine bir kod ekleyerek kullanabilirsiniz. .Htaccess dosyası genellikle kök dizinde bulunur ve yapılandırma dosyasının siteye ulaşan her istekte otomatik olarak okunmasını mümkün kılar. Ancak bazı web barındırma sağlayıcılarında .htaccess dosyası farklı bir klasörde saklanır, gizlenir veya erişime kapalı olabilir. Bu durumda yapmanız gereken sahip olduğunuz tek seçenek barındırıcıyla iletişime geçip erişim istemektir. Yapılandırmaları gerçekleştirebiliyorsanız, .htaccess dosyasına aşağıdaki kodu ekleyerek gzip sıkıştırmayı ( mod_gzip ) veya deflate algoritmasını ( mod_deflate ) açın :

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

PHP aracılığıyla gzip sıkıştırmasını etkinleştirin

Basit bir PHP komutu kullanarak sıkıştırma işlemini sitenizde etkinleştirmeni mümkündür. Ancak zahmetli bir sorun var o da: kodun her PHP belgesi için ayrı ayrı girilmesi gerektiğidir. Bu nedenle, bu seçeneği yalnızca .htaccess dosyasını düzenlemek için gerekli haklara sahip olmadığınız sunucularda kullanmalısınız. Her satırın başına yerleştirmeniz gereken kod satırı şu şekildedir:

<?php
ob_start("ob_gzhandler");
?>

WordPress eklentisi aracılığıyla gzip’i uygulayın

Bu iki manuel çözüme ek olarak, kurulumu yalnızca asgari çaba gerektiren bir seçeneğimiz de mevcut: kullandığınız içerik yönetim sistemi için bir eklenti kullanarak gzip sıkıştırmasını etkinleştirebilirsiniz. Birkaç dakika içinde yerleştirebileceğiniz ve ihtiyaçlarınıza göre uyarlayabileceğiniz bu tür yararlı eklentiler, öncelikle PHP tabanlı WordPress gibi CMS’ler için sitenizin hızlanmasına fayda sağlar. Aşağıdaki liste, WordPress siteniz için en popüler üç eklentiyi içerir:

• W3 Total Cache : WordPress eklentisi W3 TotalCache, web sitesi performansını on kat artırmayı vaat ettiğini söylemeliyiz. Çeşitli önbelleğe alma mekanizmalarına ve özel mobil desteğe ek olarak, SEO ve kullanılabilirlik paketi ayrıca gzip sıkıştırmayı etkinleştirme seçeneklerini de içeren bir çok ayar yapmanızı sağlayan bir eklentidir.
• GZIP sıkıştırmasını kontrol edin ve etkinleştirin : En yaygın CMS WordPress için de geliştirilen bu eklenti, projeniz için gzip sıkıştırmasının etkinleştirilip etkinleştirilmediğini kontrol etmenizi sağlayan eklentidir. GZIP Sıkıştırma kapalıysa, bu eklenti kurulumda size yardımcı olacaktır.

Joomla! kullanıyorsanız web sitenizde sıkıştırma işlevi doğrudan gelmektedir.

NGINX web sunucunuzda gzip nasıl etkinleştirilir

Sitenizin içeriğini ziyaretçilerinize bir NGINX web sunucusu kullanarak teslim ettiğinizde, projenizin yükleme süresini iyileştirmek için gzip işlemini kullanma olanağınız da bulunmaktadır. Bunu yapmak için, yalnızca ngx_http_gzip_module modülünü yapılandırmanız gerekir. Varsayılan olarak sıkıştırma hizmetini etkinleştirmek veya devre dışı bırakmak için kullanılan ‘gzip’ yönergeleri kapalıdır. Bu ayarı değiştirmek için, nginx.conf dosyasını açın ve CTRL + F ile ‘gzip’ yönergesini arayın. Ardından, ‘gzip off’u ‘gzip on’ olarak değiştirin. Aşağıdaki tablo, NGINX gzip sıkıştırmasını yapılandırmak için diğer yönergelerin anlamını ve olanaklarını gösterir:

Direktif	Sözdizimi	Standart ayar	Tanım
gzip_tamponları	gzip_buffers – sayı ve boyut;	gzip_tamponları 32 4k, 16 8k;	Sıkıştırma işlemi için tampon numarasını ve boyutunu tanımlar
gzip_comp_seviyesi	gzip_comp_level – sıkıştırma oranı;	gzip_comp_level 1;	Sıkıştırma oranını belirtir; olası değerler: 1–9
gzip_min_uzunluğu	gzip_min_length – minimum uzunluk;	gzip_min_length 20;	Paket dosyasının minimum uzunluğunu bayt cinsinden belirtir
gzip_http_sürümü	gzip_http_version – sürüm numarası;	gzip_http_sürüm 1.1;	Bir isteğin sıkıştırılmış bir yanıtla yanıtlanması gereken HTTP sürümünü belirtir
gzip_türleri	gzip_types – içerik türü;	gzip_types metin/html;	Sıkıştırmanın hangi içerik türlerine uygulanacağını düzenler (ayrıca şunlar da mümkündür: CSS, JSON, XML, …)

GZIP ve alternatifleri arasında farklar

Aşağıdaki tabloda gzip’in başlıca alternatifleri arasındaki avantaj ve dezavantajlara değindik.

Yöntem	Avantajlar	Dezavantajlar
gzip	– Yaygın kullanım ve geniş uyumluluk – Hızlı sıkıştırma ve açma – Makul sıkıştırma oranı – Düşük bellek kullanımı	– Bazı modern algoritmalara göre daha düşük sıkıştırma oranı
bzip2	– Gzip’ten daha iyi sıkıştırma oranı – Büyük dosyalarda etkili	– Gzip’ten daha yavaş – Daha fazla CPU ve bellek kullanımı
xz	– Çok yüksek sıkıştırma oranı – Büyük dosyalar için ideal	– Sıkıştırma ve açma işlemleri yavaş – Yüksek bellek kullanımı
lzma	– xz’ye benzer yüksek sıkıştırma oranı – xz’den biraz daha hızlı	– Yine de gzip’ten yavaş – Yüksek CPU kullanımı
zstd	– Hızlı sıkıştırma ve açma – İyi sıkıştırma oranı – Düşük bellek kullanımı	– Çok büyük dosyalarda gzip kadar etkili değil
lz4	– Çok hızlı sıkıştırma ve açma – Düşük CPU ve bellek kullanımı	– Sıkıştırma oranı diğerlerine göre düşük

GZIP’i test edin

Gzıp’i test etmek için Gzıp Test Aracı kısmından site adresinizi girerek gerçekleştirebilirsiniz.

Bilgi

Sitenizde gzip sıkıştırma ile hızlandırma bir noktaya kadar oldukça fazla etkilidir. Fakat; iyi bir sunucu da oldukça önemlidir. İyi bir TTFB değeri için hosting firmalarını hız değerlerine göre listeledik.

Google Lighthouse‘un “Aşırı büyük bir DOM boyutundan kaçının” uyarısı dikkat etmeniz gereken bir performans ölçümüdür. Bunun Belge Nesne Modeli –  The Document Object Model (DOM) konusunu dikkatlice inceleyip, bu yazımızda Türk SEM SEO uzmanlarımız tarafından kullanılan DOM aracını sizlerle paylaşacağız. Büyük bir DOM boyutu performans sorunlarına, bakım sorunlarına ve çok daha fazlasına neden olabilir.

Bu Türk SEM blog yazımızda Google Lighthouse’daki ‘Aşırı büyük bir DOM boyutundan kaçının‘ uyarısını nasıl çözeceğinizi göstereceğiz. Öncelikle, bunun ne anlama geldiğini anlamanıza yardımcı olalım.

DOM Kontrol Aracı

Türk SEM SEO Uzmanları tarafından kullanılan DOM kontrol aracını şimdi herkes kullanabilir. Aracımızda 5 temel DOM kontrolü gerçekleştirilip, düzenlemeniz gereken kısımlar tek tek açıklanmaktadır. Tüm DOM düzenlemelerini görebilirsiniz.

Araç üzerinde uzun süreli çalışmalar yapacaksanız Tüm DOM hataları test aracı sayfasından çalışmalarınızı gerçekleştirebilirsiniz.

“Aşırı büyük bir DOM boyutundan kaçının” uyarısının anlamı nedir?

DOM, esasen sitenizdeki farklı öğelerin bir tür veritabanı veya çıktısı diyebiliriz. Bu veriler başlıklarınızı, paragraflarınızı, resimlerinizi, bağlantılarınızı ve daha fazlasını içerir. Bunun iyi bir görsel temsilini Elementor gibi bir WordPress sayfa oluşturucu eklentilerin kod çıktısı olarak gösterebiliriz.

Genel olarak her Elementor widget’ı tüm ‘DOM ağacı’ içindeki bir öğe olacak şekilde kod açar ve kapatır. Bunu tarayıcınızın DevTools veya Inspect Element ekranlarında görebilirsiniz:

Pagespeed’te DOM ile ilgili bir uyarı aldıysanız şu şekilde olmalıdır.

Aslında mesah oldukça açık: ‘Aşırı büyük bi DOM boyutundan kaçının.’ Lighthouse bu uyarıyı üç alanda bildirir:

• Sayfanın toplam öğe sayısı. DOM ağacında 800’den fazla öğeniz varsa Lighthouse’da bir uyarı görürsünüz.
• En fazla sayıda iç içe geçmiş öğeyi içeren kod parçasını temsil eden bir değer maksimım değerden fazlaysa – maksimum DOM derinliği uyarısı verir.
• Lighthouse ayrıca, HTML öğelerinden ziyade DOM ağacındaki herhangi bir nesne olan ve 60’tan fazla ‘alt’ düğüme sahip bir ana düğüm hakkında da bilgi verecektir.

Ancak, bu metriğin Google Lighthouse için bir ‘Tanı’ olması nedeniyle Performans puanlarınızı doğrudan etkilemediğini söylemeliyim. Ancak DOM değerleri genel Temel Web Vitals’ın bir kısmını etkileyecektir. Boyaya Etkileşim (INP) Temel Web Vital’ın DOM boyutunuzla daha doğrudan bir ilişkisi olacaktır.

“Aşırı DOM boyutundan kaçının” uyarısı nasıl çözülür

1. İyi bir kod tabanına sahip temaları ve eklentileri seçin
2. Görüntüleri optimize etmek ve tembel yüklemeyi uygulamak için Optimole’u kullanmak faydalı olabilir
3. Sayfalandırmayı veya sonsuz kaydırmayı uygulayıp yükü parçalayın
4. Sitenizin öğelerini azaltmak için minimalizm kavramlarını sitenizde kullanın

İşin aslını söylemek gerekirse DOM konusu genellikle WordPress sitelerde tema ile alakalıdır. Sade ve doğru kodlanmamış temalar uzun ve uzun kodlarla DOM konusunda hatalara neden olmaktadır. Bu sayfa açılış süresine de direk etki etmektedir. Türk SEM web sitemiz turksem.com maalesef kullandığı temada DOM konusuna çok fazla önem vermemişler. Bu sebeple DOM değerlerimiz oldukça kötü çıkmaktadır.

Temayı değiştirmek çoğu zaman oldukça fazla zahmetlidir ve bizde bu durumu yaşıyoruz. 3 kere temamızı değiştirmek istedik ama 15 yıllık yayında olmasından dolayı oldukça zahmetli olmaktadır. Fakat; eldeki kesin veri Türk SEM’in web sayfası turksem.com ‘un temasını değiştirmemiz gerektiğidir.

TTFB değeri konusunu da yakın zamanda inceledik, ilgili konumuza da göz atabilirsiniz.

Optimize Edilmiş WordPress Teması ve Katkı Sağlayan Eklentiler

Bir çok araştırmamız sonrasında Neve Themes bizim için oldukça iyi bir seçenek olmuş. Sizde çalışmanızda kullanmak için Neve temasına bir göz atabilirsiniz.

Optimole eklentisi bir çok konuda ki temel ihtiyaçlarınıza fayda sağlayabilir. Litespeed ve Wp Rocket ile entegreli çalışabilir.

Türk SEM SEO araçları sayfamızda yayınladığımız Web Sitesi Hız Testi aracı ile de çeşitli hızla ilgili verilere ulaşabilirsiniz.