CLS'yi iyileştirmek Resim Öğeleri Sorunu

28-04-2021, 15:01:02

Merhaba,

Aşağıdaki Sorunda resimlere widt ve height değeri vermem gerektiğini belirtiyor şimdi sorunum şuki responsiv tasarımlarda bunu verdiğimizde dağılma ve kayma olacaktır bunu nasıl engeller ve nasıl çözüm üretebiliriz.

Resim öğelerinin açıkça belirtilmiş width ve height değerleri yok
[COLOR=var(--report-text-color-secondary)]Düzen kaymalarını azaltıp CLS'yi iyileştirmek için görsel öğelerde genişliği ve yüksekliği açıkça belirtilmiş şekilde ayarlayın.[/COLOR]

28-04-2021, 16:27:04

#2

BiELOF

Şimdi bir yazılımcıya sizin şu hatalarınız nedeni ile seo sıkıntıları yaşıyoruz desek adamlar seo konusunda bilgisi olmadığı için kızmamak gerekli.

SEO konusunda biraz bilgisi olan yazılımcılar örneğin wordpres temayı responsive kodlar iken Masaüstü görünüm için, cep telefonlarından girişler için, tablet girişleri için ve farklı boyutta ki ekranlara göre responsive kısımlarda düzenliyorlar.

Maalesef genelde wordpres temaları kodlayan kişiler görsel eklenilince widt ve height değeri otomatik algılamıyor olabilir.

Ya bu sorunu tema kodlayan kişiye destek mesajı atacaksınız veya eklediğiniz görsel eğer yazı içerisinde ise elle Görsel/METİN kısmından kendiniz width="300" height="350" gibi eklemelisiniz.

Wordpres kullanıyorsanız; Logo, Footer, Widget vb. kısımlarda ki görseller için hata alıyorsanız biraz uğraşarak bu sorunları çözebilirsiniz. (Kimi temalarda tema ayarları kısımlarında burada kullanılması gereken görsellerin değerlerinin girilmesi istenilmektedir.)

28-04-2021, 16:46:54

#3

Adalente

Benim Sitem WP Değil Benim Merak Ettiğim ise ben bu değerleri verdiğimde mobilden girildiğinde bu değerler üzerindenmi algılanıp resim gösterilir ?

BiELOF adlı üyeden alıntı: mesajı görüntüle

Şimdi bir yazılımcıya sizin şu hatalarınız nedeni ile seo sıkıntıları yaşıyoruz desek adamlar seo konusunda bilgisi olmadığı için kızmamak gerekli.

SEO konusunda biraz bilgisi olan yazılımcılar örneğin wordpres temayı responsive kodlar iken Masaüstü görünüm için, cep telefonlarından girişler için, tablet girişleri için ve farklı boyutta ki ekranlara göre responsive kısımlarda düzenliyorlar.

Maalesef genelde wordpres temaları kodlayan kişiler görsel eklenilince widt ve height değeri otomatik algılamıyor olabilir.

Ya bu sorunu tema kodlayan kişiye destek mesajı atacaksınız veya eklediğiniz görsel eğer yazı içerisinde ise elle Görsel/METİN kısmından kendiniz width="300" height="350" gibi eklemelisiniz.

Wordpres kullanıyorsanız; Logo, Footer, Widget vb. kısımlarda ki görseller için hata alıyorsanız biraz uğraşarak bu sorunları çözebilirsiniz. (Kimi temalarda tema ayarları kısımlarında burada kullanılması gereken görsellerin değerlerinin girilmesi istenilmektedir.)

28-04-2021, 17:03:47

#4

BiELOF

Adalente adlı üyeden alıntı: mesajı görüntüle

Benim Sitem WP Değil Benim Merak Ettiğim ise ben bu değerleri verdiğimde mobilden girildiğinde bu değerler üzerindenmi algılanıp resim gösterilir ?

Eğer kodlayan kişi responsive olarak ayarlamışsa style dosyasında bunu görebilirsiniz.

Örnek olması için bir tek sayfalık responsive HTML sitemde kullanılan kodlar;

@media(min-width:768px){#contact.contact-address,#contact.contact-phone,#contact.contact-email{padding:20px 0}
#contact.contact-phone{border-left:1px solid #ddd;border-right:1px solid #ddd}}
@media(min-width:992px){#testimonials.testimonial-item p{width:80%}}
@media(min-width:1024px){#header #logo{padding-left:60px}
#intro p{width:60%}
#intro.carousel-control-prev,#intro.carousel-control-next{width:5%}
#nav-menu-container{padding-right:60px}}
@media(max-width:768px){.back-to-top{bottom:15px}
#header #logo h1{font-size:28px}
#header #logo img{max-height:40px}
#intro h2{font-size:28px}
#nav-menu-container{display:none}
#mobile-nav-toggle{display:inline}}

Yani farklı boyutlar için masa üstü, diz üstü, tablet ve mobil girişler için bu şekilde ayrı ayrı kodlamış.

28-04-2021, 17:16:21

#5

Adalente

BiELOF adlı üyeden alıntı: mesajı görüntüle

Eğer kodlayan kişi responsive olarak ayarlamışsa style dosyasında bunu görebilirsiniz.

Örnek olması için bir tek sayfalık responsive HTML sitemde kullanılan kodlar;

@media(min-width:768px){#contact.contact-address,#contact.contact-phone,#contact.contact-email{padding:20px 0}
#contact.contact-phone{border-left:1px solid #ddd;border-right:1px solid #ddd}}
@media(min-width:992px){#testimonials.testimonial-item p{width:80%}}
@media(min-width:1024px){#header #logo{padding-left:60px}
#intro p{width:60%}
#intro.carousel-control-prev,#intro.carousel-control-next{width:5%}
#nav-menu-container{padding-right:60px}}
@media(max-width:768px){.back-to-top{bottom:15px}
#header #logo h1{font-size:28px}
#header #logo img{max-height:40px}
#intro h2{font-size:28px}
#nav-menu-container{display:none}
#mobile-nav-toggle{display:inline}}

Yani farklı boyutlar için masa üstü, diz üstü, tablet ve mobil girişler için bu şekilde ayrı ayrı kodlamış.

img tagına height auto verdim width dengeliyor ve height auto verdiğim için ondada sorun kalmadı şimdilik gördüğüm.