Anlatım gerçekten son derece başarılı, emeğinize sağlık

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 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 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. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull1. gif http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull2. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull3. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull4. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull5. gif http://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull6. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull7. gifhttp://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. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/2off. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/3off. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/4off. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/5off. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/6off. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/7off. pnghttp://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. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/new_redirect. pnghttp://www.spinabifidaturkey.com/css/Themes/default/images/smflogo. pnghttp://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. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull1. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull2. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull3. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull4. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull5. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull6. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull7. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull8. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hhyfull9. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/hit. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/info. gifhttp://www.spinabifidaturkey.com/css/Themes/default/images/icons/online. gifCSS 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. pngBu 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 .2off .3off .4off .5off .6off .7off . collapse . hhyfull1 . hhyfull2 . hhyfull3 . hhyfull4 . hhyfull5 . hhyfull6 . hhyfull7 . hhyfull8 . hhyfull9 . hit . info . new_none . new_redirect . online . smflogo . upshrink 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 . board_2 . board_3 . board_4 . board_5 . board_6 . board_7 . bolubeyi61_collapse . bolubeyi61_hhyfull1 . bolubeyi61_hhyfull2 . bolubeyi61_hhyfull3 . bolubeyi61_hhyfull4 . bolubeyi61_hhyfull5 . bolubeyi61_hhyfull6 . bolubeyi61_hhyfull7 . bolubeyi61_hhyfull8 . bolubeyi61_hhyfull9 . bolubeyi61_hit . bolubeyi61_info . bolubeyi61_new_none . bolubeyi61_new_redirect . bolubeyi61_online . bolubeyi61_smflogo . bolubeyi61_upshrink 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 . board_2 . board_3 . board_4 . board_5 . board_6 . board_7 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.comecho ' ' . $txt . ' ' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '';foreach echo '' . $txt . '' . $txt . '' . $txt . '' . $txt . '';if (! empty foreach echo '', $post , '', $post , '', $post ,'', $post , '';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 ' ', sprintf , ' '; // Full Top 10 by smfmod.comDeğiştir: // Full Top 10 by smfmod.comecho ' ' . $txt . ' ' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '' . $txt . '';foreach echo '' . $txt . '';foreach echo '' . $txt . '' . $txt . '' . $txt . '' . $txt . '';if (! empty foreach echo '', $post , '', $post , '', $post ,'', $post , '';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: ', $txt , 'Değiştir: ', $txt , 'Bul: ', $txt , 'Değiştir: ', $txt , 'Ş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: ', $txt , 'Değiştir: ', $txt , 'Bul: ', $txt , 'Değiştir: ', $txt , 'Şimdi sıra geldi BoardIndex. template dosyasındaki online. gif isimli resimin kodlamasını düzeltmeye. Bul:', $context ? '' : '', '', $context ? '' : '', 'Değiştir:', $context ? '' : '', '', $context ? '' : '', 'Şimdi sıra geldi Index. template dosyasındaki upshrink. png isimli resimin kodlamasını düzeltmeye. Bul:';Değiştir:';Şimdi sıra geldi Index. template dosyasındaki smflogo. png isimli resimin kodlamasını düzeltmeye. Bul:', empty ? '' : '' . $settings . '', 'Değiştir:', empty ? '' : '' . $settings . '', 'Şimdi sıra geldi BoardIndex. template dosyasındaki info. gif isimli resimin kodlamasını düzeltmeye. Bul:Değiştir: 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 Sitemizin seo puanı:Page Speed Grade: (79%) C ve YSlow Grade: (90%) A olarak belirtilmiş. Optimizasyon sonrası aldığımız raporda Sitemizin seo puanı:Page Speed Grade: (97%) A ve YSlow Grade: (91%) A olarak belirtilmiş. Eklentileri konuya ekleme yetkim olmadığı için ekleyemedim. Orjinal konudan indirebilirsiniz.

Evet epeyce uğraştım. smf için anlattım ama farketmez diğer siteler ve sistemler için de uygulanabilir, kaynak olabilecek bir makale.

Güzel kaynak olmuş, pc ye geçince detaylı inceleyecegim inşallah.

Başarılı bir anlatım, tebrikler.