PDA

Orijinalini görmek için tıklayınız : smfde resim optimizasyonu



bolubeyi
22.Mayıs.2014, 07:33
Bir çok smf kullanıcısı sitelerinin daha çabuk açılmasını sağlamak ve seo puanlarını yükseltme amacıyla resim optimizasyonu yapmak istemekte. Smfnin kod yapısından anlayan arkadaşlar internetteki mevcut kaynaklardan faydalanarak bu resim optimizasyonu işlemini yapabilmekte. Ancak şimdiye kadar smf için hazırlanmış bir kaynağa rastlamadım. Bu işin nasıl yapılacağını bana çok soran oldu. Hepimizin sitesi kodlama ve içerik bakımından birbirinden farklı olduğu için yapılacak olan resim optimizasyonu çalışması temelde her site için aynı olmasına rağmen kodlamasında farklılıklar olacaktır. Bu nedenle bu işin demo bir site üzerinden nasıl yapılacağını dilim döndüğünce en basit şekilde anlatmaya çalışacağım.

Bu makaleyi hazırlamak için 1 gün çalıştım. Başka yerlerde yayınlamak isteyenlerden buradaki konuyu (https://www.simplemachines.org/community/index.php?topic=503126.0) referans göstererek yayınlamalarını rica ederim.

Buradaki anlatımın uygulandığı demo site (https://www.spinabifidaturkey.com/css/index.php)yi görmek için tıklayınız. (https://www.spinabifidaturkey.com/css/index.php)

Özetle yapılması gereken işlemler şunlar:
Bir site analiz sitesine gidip sitemizin raporunu alıyoruz. Bu iş için yerli ve yabancı bir çok site mevcut. Yerli siteler zaman zaman doğru raporlar sunamadıkları için ben GTmetrix | Website Speed and Performance Optimization (https://gtmetrix.com) sitesini tercih ediyorum.
Aldığımız rapor doğrultusunda resimlerimizi CSS sprites ile birleştiriyoruz.
Birleştirdiğimiz resimi ve sitemizde bulunan diğer resimlerin hostumuzda kapladıkları yeri azaltmak amacıyla sıkıştırıyoruz. Bu iş için ben 301 Moved Permanently (https://tinypng.org/) sitesini tercih ediyorum.
Yükseklik ve genişlik değerleri verilmemiş resimlerimiz varsa bunlara yükseklik ve genişlik değerleri veriyoruz.
Bu işler bittikten sonra https://validator.w3.org sitesine gidip sayfamızı taratıp varsa mevcut xhtml hatalarını düzeltiyoruz.Son olarak da GTmetrix | Website Speed and Performance Optimization (https://gtmetrix.com) sitesinde sitemiz için tekrar rapor hazırlatıp resim optimizasyonu yapmadan önceki ve sonraki durumu kıyaslıyoruz.

ışe başlayalım:
şimdi bu işlemleri demo site (https://www.spinabifidaturkey.com/css/index.php) üzerinde uygulayarak yapalım. Demo sitede hhy89'un top10 modifikasyonu ve Bigguy'un cbi v0.5 (Custom Board Icons) olmak üzere iki modifikasyon kurulu. Sitenizdeki içerik ne kadar fazla ve ne kadar çok modifikasyon kurulu ise işiniz o oranda artacak, daha fazla zaman ayırmak durumunda kalacaksınız.

Aldığımız raporda (ek: optimizasyon-oncesi.pdf)
Sitemizin seo puanı:
Page Speed Grade: (79%) C ve YSlow Grade: (90%) A olarak belirtilmiş.

Specify image dimensions başlığı altında şu resimlere ait genişlik ve yükseklik değerlerinin bulunmadığı belirtiliyor:
Kod:

https://www.spinabifidaturkey.com/css/Themes/default/images/collapse.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull1.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull2.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull3.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull4.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull5.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull6.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull7.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull8.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull9.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hit.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/1off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/2off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/3off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/4off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/5off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/6off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/7off.png
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/info.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/online.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/new_none.png
https://www.spinabifidaturkey.com/css/Themes/default/images/new_redirect.png
https://www.spinabifidaturkey.com/css/Themes/default/images/smflogo.png
https://www.spinabifidaturkey.com/css/Themes/default/images/upshrink.png


şu resimlerin de CSS sprites ile birleştirilmesi öneriliyor:
Kod:

https://www.spinabifidaturkey.com/css/Themes/default/images/expand.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull1.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull2.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull3.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull4.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull5.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull6.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull7.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull8.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull9.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/hit.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/info.gif
https://www.spinabifidaturkey.com/css/Themes/default/images/icons/online.gif


CSS sprites ile resimleri birleştirme:
şimdi hem genişlik ve yükseklik değerleri belirtilmeyen resimlere genişlik ve yükseklik değerlerini vermemiz hem de CSS sprites özelliği ile resimleri birleştirmemiz gerekiyor. ışe CSS sprites özelliği ile resimleri birleştirerek başlıyoruz. CSS sprites meselesini hallettikten sonra ilk genişlik ve yükseklik değerleri verilmeyen resim sayısında azalma olacaktır.

CSS sprites nedir sitelerimize nasıl uygulayacağız?
Sayfalarımızda onlarca resim mevcut. Bir tarayıcı onlarca küçük resim yerine 1 tane büyük resimi daha çabuk yükler. Bu nedenle küçük resimlerimizi birleştirip tek resim haline getirilir. Birleştirilen resimlere ait ve index.css dosyamıza eklenecek olan pozisyon kodları belirlenir. Bu işlemi https://csssprites.com/ ya da https://tr.spritegen.website-performance.org/ sitesi gibi online olarak yapan web siteleri mevcut. Resimleri birleştirme işlemi yapıldıktan sonra sitelerimizin template.php dosyalarında kod değişikliği yapıp bu kod değişikliklerine karşılık gelen resim adresleri ve bu adreslerdeki resim pozisyonları css dosyamızda belirtilir. Umarım anlatabilmişimdir.

Yukarıda adresleri belirtilmiş birleştirilecek olan resimleri tek dosyada toplayıp zipliyoruz.
https://tr.spritegen.website-performance.org/ sitesine gidip zipli dosyamızı yükledik.
Site bize birleştirilmiş resimi ve bu resimin içindeki küçük resimlere ait pozisyon kodlarını verecek.

ışlemi yaptığımızda birleştirilmiş resimimiz şu:
Kod:

https://www.spinabifidaturkey.com/css/Themes/default/images/birlestirilmis_resim.png

Bu resimi 301 Moved Permanently (https://tinypng.org/) sitesine gidip sıkıştırdıktan sonra temamızın images klasörüne atıyoruz.
https://www.spinabifidaturkey.com/css/Themes/default/images/birlestirilmis_resim.png

Bu resimin içindeki küçük resimlere ait css pozisyon kodları da şunlar:
Kod:

.1off{ background-position: 0 0; width: 64px; height: 64px; }
.2off{ background-position: 0 -114px; width: 64px; height: 64px; }
.3off{ background-position: 0 -228px; width: 64px; height: 64px; }
.4off{ background-position: 0 -342px; width: 64px; height: 64px; }
.5off{ background-position: 0 -456px; width: 72px; height: 72px; }
.6off{ background-position: 0 -578px; width: 64px; height: 64px; }
.7off{ background-position: 0 -692px; width: 64px; height: 64px; }
.collapse{ background-position: 0 -806px; width: 13px; height: 13px; }
.hhyfull1{ background-position: 0 -869px; width: 10px; height: 10px; }
.hhyfull2{ background-position: 0 -929px; width: 9px; height: 8px; }
.hhyfull3{ background-position: 0 -987px; width: 9px; height: 9px; }
.hhyfull4{ background-position: 0 -1046px; width: 9px; height: 9px; }
.hhyfull5{ background-position: 0 -1105px; width: 4px; height: 8px; }
.hhyfull6{ background-position: 0 -1163px; width: 9px; height: 9px; }
.hhyfull7{ background-position: 0 -1222px; width: 9px; height: 9px; }
.hhyfull8{ background-position: 0 -1281px; width: 10px; height: 7px; }
.hhyfull9{ background-position: 0 -1338px; width: 10px; height: 8px; }
.hit{ background-position: 0 -1396px; width: 6px; height: 9px; }
.info{ background-position: 0 -1455px; width: 18px; height: 18px; }
.new_none{ background-position: 0 -1523px; width: 19px; height: 20px; }
.new_redirect{ background-position: 0 -1593px; width: 19px; height: 21px; }
.online{ background-position: 0 -1664px; width: 18px; height: 18px; }
.smflogo{ background-position: 0 -1732px; width: 256px; height: 34px; }
.upshrink{ background-position: 0 -1816px; width: 20px; height: 20px; }


Daha sonra bu css kodlarını css çakışmasına meydan vermemek için noktaların başına bir isim yazıp (ben bu örnekte bolubeyi61 yazdım. Siz başka bir isim yazabilirsiniz) arka planda görüntülenecek resimin urlsini her satıra aşağıda gösterildiği şekilde ekleyip index.css dosyamızın en altına ekliyoruz.
Kod:

.board_1{ background: url(../images/birlestirilmis_resim.png) 0 0; width: 64px; height: 64px; }
.board_2{ background: url(../images/birlestirilmis_resim.png) 0 -114px; width: 64px; height: 64px; }
.board_3{ background: url(../images/birlestirilmis_resim.png) 0 -228px; width: 64px; height: 64px; }
.board_4{ background: url(../images/birlestirilmis_resim.png) 0 -342px; width: 64px; height: 64px; }
.board_5{ background: url(../images/birlestirilmis_resim.png) 0 -456px; width: 72px; height: 72px; }
.board_6{ background: url(../images/birlestirilmis_resim.png) 0 -578px; width: 64px; height: 64px; }
.board_7{ background: url(../images/birlestirilmis_resim.png) 0 -692px; width: 64px; height: 64px; }
.bolubeyi61_collapse{ background: url(../images/birlestirilmis_resim.png) 0 -806px; width: 13px; height: 13px; }
.bolubeyi61_hhyfull1{ background: url(../images/birlestirilmis_resim.png) 0 -869px; width: 10px; height: 10px; }
.bolubeyi61_hhyfull2{ background: url(../images/birlestirilmis_resim.png) 0 -929px; width: 9px; height: 8px; }
.bolubeyi61_hhyfull3{ background: url(../images/birlestirilmis_resim.png) 0 -987px; width: 9px; height: 9px; }
.bolubeyi61_hhyfull4{ background: url(../images/birlestirilmis_resim.png) 0 -1046px; width: 9px; height: 9px; }
.bolubeyi61_hhyfull5{ background: url(../images/birlestirilmis_resim.png) 0 -1105px; width: 4px; height: 8px; }
.bolubeyi61_hhyfull6{ background: url(../images/birlestirilmis_resim.png) 0 -1163px; width: 9px; height: 9px; }
.bolubeyi61_hhyfull7{ background: url(../images/birlestirilmis_resim.png) 0 -1222px; width: 9px; height: 9px; }
.bolubeyi61_hhyfull8{ background: url(../images/birlestirilmis_resim.png) 0 -1281px; width: 10px; height: 7px; }
.bolubeyi61_hhyfull9{ background: url(../images/birlestirilmis_resim.png) 0 -1338px; width: 10px; height: 8px; }
.bolubeyi61_hit{ background: url(../images/birlestirilmis_resim.png) 0 -1396px; width: 6px; height: 9px; }
.bolubeyi61_info{ background: url(../images/birlestirilmis_resim.png) 0 -1455px; width: 18px; height: 18px; }
.bolubeyi61_new_none{ background: url(../images/birlestirilmis_resim.png) 0 -1523px; width: 19px; height: 20px; }
.bolubeyi61_new_redirect{ background: url(../images/birlestirilmis_resim.png) 0 -1593px; width: 19px; height: 21px; }
.bolubeyi61_online{ background: url(../images/birlestirilmis_resim.png) 0 -1664px; width: 18px; height: 18px; }
.bolubeyi61_smflogo{ background: url(../images/birlestirilmis_resim.png) 0 -1732px; width: 256px; height: 34px; }
.bolubeyi61_upshrink{ background: url(../images/birlestirilmis_resim.png) 0 -1816px; width: 20px; height: 20px; }


Sonra ekteki img_trans.gif isimli resimi temamızın images klasörüne atıyoruz.

şimdi sıra geldi css dosyasında girdiği pozisyonları tanımladığımız birlestirilmis_resim.png isimli resimin classlarını template dosyalarımıza eklemeye. Unutmamak için hepsini sırayla template dosyalarımızda ilgili kodları editleyerek ekliyoruz.

css dosyamızda kategori resimleri için şu kodlar var:
Kod:

.board_1{ background: url(../images/birlestirilmis_resim.png) 0 0; width: 64px; height: 64px; }
.board_2{ background: url(../images/birlestirilmis_resim.png) 0 -114px; width: 64px; height: 64px; }
.board_3{ background: url(../images/birlestirilmis_resim.png) 0 -228px; width: 64px; height: 64px; }
.board_4{ background: url(../images/birlestirilmis_resim.png) 0 -342px; width: 64px; height: 64px; }
.board_5{ background: url(../images/birlestirilmis_resim.png) 0 -456px; width: 72px; height: 72px; }
.board_6{ background: url(../images/birlestirilmis_resim.png) 0 -578px; width: 64px; height: 64px; }
.board_7{ background: url(../images/birlestirilmis_resim.png) 0 -692px; width: 64px; height: 64px; }


Bu kodların classını board.index.template dosyamızda şu satıra eklememiz gerekiyor:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], $board_nonew_img, '', $context['theme_variant_url'], 'off.png';


şimdi bu satırdaki kodlamayı şu şekilde değiştiriyoruz:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif';


Bu değişiklikle bütün kategori iconlarına ait düzenlemeyi bitirmiş olduk.

şimdi sıra geldi board.index.template dosyasında adı 2 yerde geçen collapse.gif isimli resime ait kodlamayı yapmaya. collapse.gif isimli resime ait kodlama aşağıdaki kodlarda görüldüğü üzere 2 yerde geçiyor:
Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/collapse.gif


Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif


Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/collapse.gif


Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif


Böylece bu 2 satırdaki kodlamaya class vererek collapse özelliğine CSS sprites özelliğini eklemiş olduk.

şimdi sıra geldi hhy89'un top10 modifikasyonuna ait ikonlara CSS sprites özelliği eklemeye.

Dosyamızdaki top10 kodlamasını index.css dosyasına eklediğimiz kodlamaya istinaden img claslarını vermek üzere şu şekilde değiştiriyoruz:
Bul:
Kod:

// Full Top 10 by smfmod.com

echo '




' . $txt['hhyfull1'] . ' (https://www.smfmod.com)







' . $txt['hhyfull2'] . '

' . $txt['hhyfull3'] . '

' . $txt['hhyfull4'] . '

' . $txt['hhyfull5'] . '

' . $txt['hhyfull6'] . '








' . $txt['hhyfull7'] . '

' . $txt['hhyfull8'] . '

';
foreach ($context['top_posters'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull1.gif', $poster['link'], '

', $poster['num_posts'], '

';
}echo '






' . $txt['hhyfull7'] . '

' . $txt['hhyfull9'] . '

';
foreach ($context['repkarma'] as $member)
{echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull2.gif', $member['link'], '

', $member['karma'], '

';
}echo '






' . $txt['hhyfull7'] . '

' . $txt['hhyfull10'] . '

';
foreach ($context['top_starters'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull3.gif', $poster['link'], '

', $poster['num_topics'], '

';
}echo '






' . $txt['hhyfull10'] . '

' . $txt['hhyfull11'] . '

';
foreach ($context['top_topics_views'] as $topic)
{
echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull4.gif', $topic['link'], '

', $topic['num_views'], 'https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hit.gif

';
}
echo '






' . $txt['hhyfull7'] . '

';
foreach ($context['new_members'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull5.gif',$poster['link'], '

';
}echo '










' . $txt['hhyfull12'] . '

' . $txt['hhyfull13'] . '

' . $txt['hhyfull14'] . '

' . $txt['hhyfull15'] . '




';
if (!empty($context['latest_posts']))
foreach ($context['latest_posts'] as $post)
echo '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull6.gif', $post['board']['link'], '

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull7.gif', $post['short_subject'], ' (https://webmaster.bbs.tr/',$post['href'],')

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull8.gif', $post['poster']['link'],'

https://webmaster.bbs.tr/', $settings['default_theme_url'], '/images/hhyfull9.gif', $post['time'], '

';
echo '











';

// Full Top 10 by smfmod.com

template_info_center();
}

function template_info_center()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings;

// Here's where the "Info Center" starts...
echo '



https://webmaster.bbs.tr/', $settings['images_url'], '/collapse.gif
', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '


';

// Full Top 10 by smfmod.com


Değiştir:
Kod:

// Full Top 10 by smfmod.com

echo '




' . $txt['hhyfull1'] . ' (https://www.smfmod.com)







' . $txt['hhyfull2'] . '

' . $txt['hhyfull3'] . '

' . $txt['hhyfull4'] . '

' . $txt['hhyfull5'] . '

' . $txt['hhyfull6'] . '








' . $txt['hhyfull7'] . '

' . $txt['hhyfull8'] . '

';
foreach ($context['top_posters'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $poster['link'], '

', $poster['num_posts'], '

';
}echo '






' . $txt['hhyfull7'] . '

' . $txt['hhyfull9'] . '

';
foreach ($context['repkarma'] as $member)
{echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $member['link'], '

', $member['karma'], '

';
}echo '






' . $txt['hhyfull7'] . '

' . $txt['hhyfull10'] . '

';
foreach ($context['top_starters'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $poster['link'], '

', $poster['num_topics'], '

';
}echo '






' . $txt['hhyfull10'] . '

' . $txt['hhyfull11'] . '

';
foreach ($context['top_topics_views'] as $topic)
{
echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $topic['link'], '

', $topic['num_views'], 'https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif

';
}
echo '






' . $txt['hhyfull7'] . '

';
foreach ($context['new_members'] as $poster)
{echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif',$poster['link'], '

';
}echo '










' . $txt['hhyfull12'] . '

' . $txt['hhyfull13'] . '

' . $txt['hhyfull14'] . '

' . $txt['hhyfull15'] . '




';
if (!empty($context['latest_posts']))
foreach ($context['latest_posts'] as $post)
echo '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $post['board']['link'], '

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $post['short_subject'], ' (https://webmaster.bbs.tr/',$post['href'],')

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $post['poster']['link'],'

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $post['time'], '

';
echo '











';

// Full Top 10 by smfmod.com


şimdi sıra geldi BoardIndex.template dosyasındaki new_none.png isimli resimin kodlamasını düzeltmeye. Söz konusu resim yerde geçiyor.
Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/', $context['theme_variant_url'], 'new_none.png ', $txt['old_posts'], '



Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif ', $txt['old_posts'], '



Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/new_none.png ', $txt['old_posts'], '



Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif ', $txt['old_posts'], '




şimdi sıra geldi BoardIndex.template dosyasındaki new_redirect.png isimli resimin kodlamasını düzeltmeye. Söz konusu resim yerde geçiyor.
Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/', $context['theme_variant_url'], 'new_redirect.png ', $txt['redirect_board'], '



Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif ', $txt['redirect_board'], '



Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/new_redirect.png ', $txt['redirect_board'], '



Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif ', $txt['redirect_board'], '



şimdi sıra geldi BoardIndex.template dosyasındaki online.gif isimli resimin kodlamasını düzeltmeye.
Bul:
Kod:

', $context['show_who'] ? '' : '', 'https://webmaster.bbs.tr/', $settings['images_url'], '/icons/online.gif', '', $context['show_who'] ? ' (https://webmaster.bbs.tr/' . $scripturl . '?action=who' . ')' : '', '


Değiştir:
Kod:

', $context['show_who'] ? '' : '', 'https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif', $context['show_who'] ? ' (https://webmaster.bbs.tr/' . $scripturl . '?action=who' . ')' : '', '


şimdi sıra geldi Index.template dosyasındaki upshrink.png isimli resimin kodlamasını düzeltmeye.

Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/upshrink.png';


Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif';


şimdi sıra geldi Index.template dosyasındaki smflogo.png isimli resimin kodlamasını düzeltmeye.
Bul:
Kod:

', empty($settings['site_slogan']) ? 'https://webmaster.bbs.tr/' . $settings['images_url'] . '/smflogo.png' : '' . $settings['site_slogan'] . '
', '


Değiştir:
Kod:

', empty($settings['site_slogan']) ? 'https://webmaster.bbs.tr/' . $settings['images_url'] . '/img_trans.gif' : '' . $settings['site_slogan'] . '
', '


şimdi sıra geldi BoardIndex.template dosyasındaki info.gif isimli resimin kodlamasını düzeltmeye.
Bul:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/icons/info.gif (https://webmaster.bbs.tr/', $scripturl, '?action=stats)


Değiştir:
Kod:

https://webmaster.bbs.tr/', $settings['images_url'], '/img_trans.gif (https://webmaster.bbs.tr/', $scripturl, '?action=stats)


Böylece smf resim optimizasyonu işlemini bitirmiş olduk.
şimdi https://validator.w3.org sitesine gidip sitemizin xhtml hatalarını denetliyoruz. Hata varsa düzelttikten sonra tekrar GTmetrix | Website Speed and Performance Optimization (https://gtmetrix.com) sitesine gidip sitemiz için yeniden rapor talep ediyoruz.

Bu işlemler sonrası optimizasyon öncesi ve sonrası kıyaslamayı yapalım.
Optimizasyon öncesi aldığımız raporda (ek: optimizasyon-oncesi.pdf)
Sitemizin seo puanı:
Page Speed Grade: (79%) C ve YSlow Grade: (90%) A olarak belirtilmiş.

Optimizasyon sonrası aldığımız raporda (ek: optimizasyon-sonrasi.pdf)
Sitemizin seo puanı:
Page Speed Grade: (97%) A ve YSlow Grade: (91%) A olarak belirtilmiş.

Kaynak (https://www.webmasterlord.net/484-smfde-resim-optimizasyonu.html)