SMF'de Resim Optimizasyonu - Ayrıntılı Örnek Anlatım

[bolubeyi61]

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 referans göstererek yayınlamalarını rica ederim.

Buradaki anlatımın uygulandığı demo siteyi görmek için tıklayınız.

Ö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 http://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 http://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 http://validator.w3.org sitesine gidip sayfamızı taratıp varsa mevcut xhtml hatalarını düzeltiyoruz.Son olarak da http://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 ü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:

Code Select Expand

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

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

Code Select Expand

http://www.spinabifidaturkey.com/css/Themes/default/images/expand.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull1.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull2.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull3.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull4.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull5.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull6.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull7.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull8.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull9.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/hit.gif
http://www.spinabifidaturkey.com/css/Themes/default/images/icons/info.gif
http://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 http://csssprites.com/ ya da http://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.
http://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:

Code Select Expand

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


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

Code Select Expand

.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.

Code Select Expand

.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:

Code Select Expand

.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:

Code Select Expand

<img src="', $settings['images_url'], $board_nonew_img, '', $context['theme_variant_url'], 'off.png" alt="', $txt['old_posts'], '" title="', $txt['old_posts'], '" />';

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

Code Select Expand

<img class="board_' . $board['id'] . '" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" />';

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:

Code Select Expand

<img id="newsupshrink" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="display: none;" />

Değiştir:

Code Select Expand

<img class="bolubeyi61_collapse" id="newsupshrink" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" align="bottom" style="display: none;" />

Bul:

Code Select Expand

<img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />

Değiştir:

Code Select Expand

<img class="bolubeyi61_collapse" id="upshrink_ic" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" style="display: none;" />

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:

Code Select Expand

      // Full Top 10 by smfmod.com

echo '<br />
    <span class="clear upperframe"><span></span></span>
    <div class="roundframe"><div class="innerframe">
        <div class="cat_bar">
            <h3 class="catbg">
            <a href="http://www.smfmod.com">' . $txt['hhyfull1'] . '</a>
            </h3>
        </div>
        <div class="smalltext">
<table border="0" width="100%" cellspacing="1" cellpadding="2">
<tr class="titlebg">
<td width="20%"><span class="smalltext">' . $txt['hhyfull2'] . '</span></td>
<td width="18%"><span class="smalltext">' . $txt['hhyfull3'] . '</span></td>
<td width="18%"><span class="smalltext">' . $txt['hhyfull4'] . '</span></td>
<td width="30%"><span class="smalltext">' . $txt['hhyfull5'] . '</span></td>
<td width="14%"><span class="smalltext">' . $txt['hhyfull6'] . '</span></td></tr>

<tr>
<td width="20%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull8'] . '</b></span></td></tr>';
foreach ($context['top_posters'] as $poster)
{echo '
<tr><td width="75%"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull1.gif" /><span class="smalltext">', $poster['link'], '</span></td>
<td width="25%" align="right"><span class="smalltext">', $poster['num_posts'], '</span></td></tr>';
}echo '</table></td>

<td width="18%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull9'] . '</b></span></td></tr>';
foreach ($context['repkarma'] as $member)
{echo '
<tr><td width="75%" valign="top"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull2.gif" /><span class="smalltext">', $member['link'], '</span></td>
<td width="25%" align="right" valign="top"><span class="smalltext">', $member['karma'], '</span></td></tr>';
}echo '</table></td>

<td width="18%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull10'] . '</b></span></td></tr>';
foreach ($context['top_starters'] as $poster)
{echo '
<tr><td width="75%" valign="top"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull3.gif" /><span class="smalltext">', $poster['link'], '</span></td>
<td width="25%" align="right" valign="top"><span class="smalltext">', $poster['num_topics'], '</span></td></tr>';
}echo '</table></td>

<td width="30%" valign="top"><table width="100%"><tr>
<td width="80%"><span class="smalltext"><b>' . $txt['hhyfull10'] . '</b></span></td>
<td width="20%" align="right"><span class="smalltext"><b>' . $txt['hhyfull11'] . '</b></span></td></tr>';
foreach ($context['top_topics_views'] as $topic)
{
echo '
<tr><td width="80%" valign="top"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull4.gif" /><span class="smalltext">', $topic['link'], '</span></td>
<td width="20%" align="right" valign="top"><span class="smalltext">', $topic['num_views'], '</span><img alt="" src="', $settings['default_theme_url'], '/images/hit.gif" /></td></tr>';
}
echo '</table></td>

<td width="14%" valign="top"><table width="100%"><tr>
<td width="100%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td></tr>';
foreach ($context['new_members'] as $poster)
{echo '
<tr><td width="100%" valign="top"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull5.gif" /><span class="smalltext">',$poster['link'], '</span></td></tr>';
}echo '</table></td></tr>

<tr>
<td width="100%" colspan="5" height="0"><table width="100%">
<tr class="titlebg">
<td width="30%"><span class="smalltext"><b>' . $txt['hhyfull12'] . '</b></span></td>
<td width="30%"><span class="smalltext"><b>' . $txt['hhyfull13'] . '</b></span></td>
<td width="17%"><span class="smalltext"><b>' . $txt['hhyfull14'] . '</b></span></td>
<td width="23%"><span class="smalltext"><b>' . $txt['hhyfull15'] . '</b></span></td></tr></table>
<table cellspacing="1" width="100%" cellpadding="0"  border="0">';
if (!empty($context['latest_posts']))
foreach ($context['latest_posts'] as $post)
echo '
<tr><td valign="top" width="30%"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull6.gif" /><span class="smalltext">', $post['board']['link'],  '</span></td>
<td valign="top" width="30%"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull7.gif" /><span class="smalltext"><a href="',$post['href'],'">', $post['short_subject'], '</a></span></td>
<td valign="top" width="17%"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull8.gif" /><span class="smalltext">', $post['poster']['link'],'</span></td>
<td valign="top" width="23%"><img alt="" src="', $settings['default_theme_url'], '/images/hhyfull9.gif" /><span class="smalltext">', $post['time'], '</span></td></tr>';
echo '</table></td></tr></table>
</div>
</div></div>
    <span class="lowerframe"><span></span></span>
<br />';

// 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 '
    <span class="clear upperframe"><span></span></span>
    <div class="roundframe"><div class="innerframe">
        <div class="cat_bar">
            <h3 class="catbg">
                <img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />
                ', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '
            </h3>
        </div>
        <div id="upshrinkHeaderIC"', empty($options['collapse_header_ic']) ? '' : ' style="display: none;"', '>';

        // Full Top 10 by smfmod.com

Değiştir:

Code Select Expand

      // Full Top 10 by smfmod.com

echo '<br />
    <span class="clear upperframe"><span></span></span>
    <div class="roundframe"><div class="innerframe">
        <div class="cat_bar">
            <h3 class="catbg">
            <a href="http://www.smfmod.com">' . $txt['hhyfull1'] . '</a>
            </h3>
        </div>
        <div class="smalltext">
<table border="0" width="100%" cellspacing="1" cellpadding="2">
<tr class="titlebg">
<td width="20%"><span class="smalltext">' . $txt['hhyfull2'] . '</span></td>
<td width="18%"><span class="smalltext">' . $txt['hhyfull3'] . '</span></td>
<td width="18%"><span class="smalltext">' . $txt['hhyfull4'] . '</span></td>
<td width="30%"><span class="smalltext">' . $txt['hhyfull5'] . '</span></td>
<td width="14%"><span class="smalltext">' . $txt['hhyfull6'] . '</span></td></tr>

<tr>
<td width="20%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull8'] . '</b></span></td></tr>';
foreach ($context['top_posters'] as $poster)
{echo '
<tr><td width="75%"><img class="bolubeyi61_hhyfull1" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $poster['link'], '</span></td>
<td width="25%" align="right"><span class="smalltext">', $poster['num_posts'], '</span></td></tr>';
}echo '</table></td>

<td width="18%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull9'] . '</b></span></td></tr>';
foreach ($context['repkarma'] as $member)
{echo '
<tr><td width="75%" valign="top"><img class="bolubeyi61_hhyfull2" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $member['link'], '</span></td>
<td width="25%" align="right" valign="top"><span class="smalltext">', $member['karma'], '</span></td></tr>';
}echo '</table></td>

<td width="18%" valign="top"><table width="100%"><tr>
<td width="75%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td>
<td width="25%" align="right"><span class="smalltext"><b>' . $txt['hhyfull10'] . '</b></span></td></tr>';
foreach ($context['top_starters'] as $poster)
{echo '
<tr><td width="75%" valign="top"><img class="bolubeyi61_hhyfull3" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $poster['link'], '</span></td>
<td width="25%" align="right" valign="top"><span class="smalltext">', $poster['num_topics'], '</span></td></tr>';
}echo '</table></td>

<td width="30%" valign="top"><table width="100%"><tr>
<td width="80%"><span class="smalltext"><b>' . $txt['hhyfull10'] . '</b></span></td>
<td width="20%" align="right"><span class="smalltext"><b>' . $txt['hhyfull11'] . '</b></span></td></tr>';
foreach ($context['top_topics_views'] as $topic)
{
echo '
<tr><td width="80%" valign="top"><img class="bolubeyi61_hhyfull4" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $topic['link'], '</span></td>
<td width="20%" align="right" valign="top"><span class="smalltext">', $topic['num_views'], '</span><img class="bolubeyi61_hit" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /></td></tr>';
}
echo '</table></td>

<td width="14%" valign="top"><table width="100%"><tr>
<td width="100%"><span class="smalltext"><b>' . $txt['hhyfull7'] . '</b></span></td></tr>';
foreach ($context['new_members'] as $poster)
{echo '
<tr><td width="100%" valign="top"><img class="bolubeyi61_hhyfull5" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">',$poster['link'], '</span></td></tr>';
}echo '</table></td></tr>

<tr>
<td width="100%" colspan="5" height="0"><table width="100%">
<tr class="titlebg">
<td width="30%"><span class="smalltext"><b>' . $txt['hhyfull12'] . '</b></span></td>
<td width="30%"><span class="smalltext"><b>' . $txt['hhyfull13'] . '</b></span></td>
<td width="17%"><span class="smalltext"><b>' . $txt['hhyfull14'] . '</b></span></td>
<td width="23%"><span class="smalltext"><b>' . $txt['hhyfull15'] . '</b></span></td></tr></table>
<table cellspacing="1" width="100%" cellpadding="0"  border="0">';
if (!empty($context['latest_posts']))
foreach ($context['latest_posts'] as $post)
echo '
<tr><td valign="top" width="30%"><img class="bolubeyi61_hhyfull6" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $post['board']['link'],  '</span></td>
<td valign="top" width="30%"><img class="bolubeyi61_hhyfull7" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext"><a href="',$post['href'],'">', $post['short_subject'], '</a></span></td>
<td valign="top" width="17%"><img class="bolubeyi61_hhyfull8" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $post['poster']['link'],'</span></td>
<td valign="top" width="23%"><img class="bolubeyi61_hhyfull9" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /><span class="smalltext">', $post['time'], '</span></td></tr>';
echo '</table></td></tr></table>
</div>
</div></div>
    <span class="lowerframe"><span></span></span>
<br />';

// 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:

Code Select Expand

<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_none.png" alt="" /> ', $txt['old_posts'], '</li>

Değiştir:

Code Select Expand

<li class="floatleft"><img class="bolubeyi61_new_none" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /> ', $txt['old_posts'], '</li>

Bul:

Code Select Expand

<li class="floatleft"><img src="', $settings['images_url'], '/new_none.png" alt="" /> ', $txt['old_posts'], '</li>

Değiştir:

Code Select Expand

<li class="floatleft"><img class="bolubeyi61_new_none" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /> ', $txt['old_posts'], '</li>


Ş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:

Code Select Expand

<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>

Değiştir:

Code Select Expand

<li class="floatleft"><img class="bolubeyi61_new_redirect" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /> ', $txt['redirect_board'], '</li>

Bul:

Code Select Expand

<li class="floatleft"><img src="', $settings['images_url'], '/new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>

Değiştir:

Code Select Expand

<li class="floatleft"><img class="bolubeyi61_new_redirect" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" /> ', $txt['redirect_board'], '</li>

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

Code Select Expand

', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="icon" src="', $settings['images_url'], '/icons/online.gif', '" alt="', $txt['online_users'], '" />', $context['show_who'] ? '</a>' : '', '

Değiştir:

Code Select Expand

', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="bolubeyi61_online" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" />', $context['show_who'] ? '</a>' : '', '

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

Bul:

Code Select Expand

<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';

Değiştir:

Code Select Expand

<img id="upshrink" class="bolubeyi61_upshrink" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="trans" title="', $txt['upshrink_description'], '" style="display: none;" />';

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

Code Select Expand

', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '

Değiştir:

Code Select Expand

', empty($settings['site_slogan']) ? '<img id="smflogo" class="bolubeyi61_smflogo" src="' . $settings['images_url'] . '/img_trans.gif" width="1" height="1" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '

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

Code Select Expand

<a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>

Değiştir:

Code Select Expand

<a href="', $scripturl, '?action=stats"> <img class="bolubeyi61_info" src="', $settings['images_url'], '/img_trans.gif" width="1" height="1" alt="', $txt['forum_stats'], '" /></a>

Böylece smf resim optimizasyonu işlemini bitirmiş olduk.
Şimdi http://validator.w3.org sitesine gidip sitemizin xhtml hatalarını denetliyoruz. Hata varsa düzelttikten sonra tekrar http://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ş.

[cee山]

Emeğinize sağlık çok çok Teşekkürler.

[Xenforo]

Teşekkürler hocam çok işime yaradı.

[bolubeyi61]

iyi günlerde kullanın arkadaşlar. iyi forumlar.