Konu: SMF'de Resim Optimizasyonu - Ayrıntılı Örnek Anlatım  (Okunma sayısı 17526 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

04 Mayıs 2013, 14:55
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

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:
Kod: [Seç]
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:
Kod: [Seç]
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 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:

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:
Kod: [Seç]
.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: [Seç]
.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: [Seç]
.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: [Seç]
<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:
Kod: [Seç]
<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:
Kod: [Seç]
<img id="newsupshrink" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="display: none;" />
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
<img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
      // 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:
Kod: [Seç]
      // 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:
Kod: [Seç]
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_none.png" alt="" /> ', $txt['old_posts'], '</li>
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
<li class="floatleft"><img src="', $settings['images_url'], '/new_none.png" alt="" /> ', $txt['old_posts'], '</li>
Değiştir:
Kod: [Seç]
<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 2 yerde geçiyor.
Bul:
Kod: [Seç]
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
<li class="floatleft"><img src="', $settings['images_url'], '/new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
', $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:
Kod: [Seç]
', $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:
Kod: [Seç]
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
Değiştir:
Kod: [Seç]
<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:
Kod: [Seç]
', 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:
Kod: [Seç]
', 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:
Kod: [Seç]
<a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>
Değiştir:
Kod: [Seç]
<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ş.

« Son Düzenleme: 22 Eylül 2016, 21:50 Gönderen: admin »

04 Mayıs 2013, 20:26
Yanıtla #1
  • *
    • İleti: 211
    • Karma: 15
    • webtiryaki.com
    • Profili Görüntüle

cok değerli bir paylaşim eline sağlik


10 Temmuz 2013, 22:34
Yanıtla #2
  • *
    • İleti: 264
    • Karma: 14
    • smf destek
    • Profili Görüntüle

gerçekten elinize sağlık çok detaylı bir anlatım olmuş


03 Nisan 2014, 20:16
Yanıtla #3
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

Çok güzel bir paylaşım olmuş teşekkürler. resimler yenilenirse iyi olur.

Ayrıca şunu sormak istiyorum xml hatalarını kontrol ettim ve > bu işaret te çok hata var örnek bir kod vereyim.

</tbody><tbody><tr><td colspan="4">

burada ki kırmızı işareti ne ile nasıl değişmem gerekecek diğerlerine ona göre yaparsam sorunlar düzelirmi ? örnek olarak cevaplarsanız sevinirim.


03 Nisan 2014, 20:20
Yanıtla #4
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Muhtemelen board.index.template dosyanızın kodlaması hatalı. Bu dosyada yaptığınız değişiklikleri geri almanız ya da dosyanın sıfırını kullanmanız çözüm olabilir.


03 Nisan 2014, 22:03
Yanıtla #5
  • sempatiko

bolubeyi usta benim siteye yapabilirmisiniz bu işlemi


03 Nisan 2014, 22:07
Yanıtla #6
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

dosyayı değiştirin benlik bi iş değil ki.


03 Nisan 2014, 22:25
Yanıtla #7
  • sempatiko

dosyayı değiştirin benlik bi iş değil ki.

abi ben Resim Optimizasyonu -  diyorum


03 Nisan 2014, 22:27
Yanıtla #8
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Uzun iş kusura bakma. O kadar vakit ayıramam. Nasıl yapılacağını anlatmışım inceleyip yapabilirsiniz.


18 Nisan 2014, 14:28
Yanıtla #9
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Hocam üye ranklarını csssprites ile birleştirip kullanabilirmiyiz? Ben rankları birleştirdim.Ama üye grubu sayfasında  resimismi.png şeklinde yazınca resim geliyor.Fakat csssprites teki bir resmi oraya getirmek için nasıl yapabiliriz.

Biliyorsunuz ranklar mesaj olan tüm sayfalarda çıkıyor.Bu çok işe yarar diye düşünüyorum.Teşekkürler.