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

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

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

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:


Değiştir:


Bul:


Değiştir:


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:
// Full Top 10 by smfmod.com

echo '

' . $txt['hhyfull1'] . '

' . $txt['hhyfull2'] . '	' . $txt['hhyfull3'] . '	' . $txt['hhyfull4'] . '	' . $txt['hhyfull5'] . '	' . $txt['hhyfull6'] . '
'; foreach ($context['top_posters'] as $poster) {echo ' '; }echo ' ' . $txt['hhyfull7'] . ' ' . $txt['hhyfull8'] . ' ', $poster['link'], ' ', $poster['num_posts'], '	'; foreach ($context['repkarma'] as $member) {echo ' '; }echo ' ' . $txt['hhyfull7'] . ' ' . $txt['hhyfull9'] . ' ', $member['link'], ' ', $member['karma'], '	'; foreach ($context['top_starters'] as $poster) {echo ' '; }echo ' ' . $txt['hhyfull7'] . ' ' . $txt['hhyfull10'] . ' ', $poster['link'], ' ', $poster['num_topics'], '	'; foreach ($context['top_topics_views'] as $topic) { echo ' '; } echo ' ' . $txt['hhyfull10'] . ' ' . $txt['hhyfull11'] . ' ', $topic['link'], ' ', $topic['num_views'], '	'; foreach ($context['new_members'] as $poster) {echo ' '; }echo ' ' . $txt['hhyfull7'] . ' ',$poster['link'], '
' . $txt['hhyfull12'] . ' ' . $txt['hhyfull13'] . ' ' . $txt['hhyfull14'] . ' ' . $txt['hhyfull15'] . ' '; if (!empty($context['latest_posts'])) foreach ($context['latest_posts'] as $post) echo ' '; echo ' ', $post['board']['link'], ' ', $post['short_subject'], ' ', $post['poster']['link'],' ', $post['time'], '

';

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