Sitemizin hızlı açılması için saatlerini, günlerini, aylarını veren kaç webmaster var? ya da bunu önemseyen, öneminin farkında olan kaç kişi var? Tabii ki bu soruları cevaplandırmak için bu yazıyı yazmadım. O yüzden, bu soruların cevaplarını başka bir makalemde ele alacağım. Bu yazıyı yazmamdaki amaç, herkesin kendi sitelerinin hızını kendilerinin yapabilmesini sağlamak, site hızlandırma taktiklerini öğrenmelerine yardımcı olmak.

Bu makaleyi yazmamdaki asıl amaç, kodlama ve tasarım bilgisi yeterli düzeyde olmayan arkadaşlara yönelik olduğu için, elimden geldiği kadar ayrıntıya inerek anlatmaya çalışacağım. Evet şimdi başlıyoruz;

Öncelikle, sitemizdeki hızı ve hatalarımızı test edeceğimiz sistem, google‘nin page speed hizmetinden başka bir şey değil. Öncelikle, sitemizi google page speed adresinden taratıyoruz. Bize, site hızımızı 100 üzerinden puan vererek derecelendiriyor ve sol kolonda yapmamız gereken, daha doğrusu düzeltmemiz gereken hatalarımızı sıralıyor. Farkettiyseniz, 3 başlık altında sıralamayı yapıyor google amca. Bunlardan kırmızı renkli yüksek öncelik, sarı renkli normal öncelik ve mavi renkli düşük öncelikte olan sitemizi yavaşlatan unsurlar.

Sitemizi yavaşlatan unsurları, kırmızı uyarı yani yüksek önceliği olanlardan başlıyoruz ve alta doğru ilerliyoruz. Bu yazının devamında, google’nin muhtemel vereceği hataların çözümlerini ayrıntılarıyla ele almaya çalışacağım.

İlk başta, css’i küçültün, javascript’ küçültün, html’yi küçültün tarzı hatalar için, pek ayrıntıya inmeye gerek yok. Bu işlemleri yapan online sıkıştırma araçları bulunmakta. Css ve javascript dosyalarınızı küçültebileceğiniz online araçlardan bazıları;

http://www.minifycss.com/css-compressor/

http://www.csscompressor.com/

http://javascriptcompressor.com/

http://jscompress.com/

Önemli Not: Css ve Js dosyalarınızı sıkıştırmadan önce mutlaka yedeğini alınız. Bazı durumlarda, bu sıkıştırma işleminden sonra özellikle internet explorer 8 versiyonunda bu sıkıştırılmış dosyaların yorumlanamadığına şahit oldum. Bu yüzden, işlemi uyguladıktan sonra sitenizi test ediniz ve eğer sağlamsa uygulamaya devam ediniz. Problem çıkması durumunda (site kayması v.b) eski dosyaları geri yükleyiniz ve Css dosyalarınızı manuel olarak düzenleyiniz.

Peki css dosyası elle manuel nasıl sıkıştırılır?

Css dosyamızı, kullandığınız editörle açıyoruz. (dreamweaver, Editplus, v.b) ve satır boşluklarını kaldırıyoruz. Örnek verecek olursam eğer, css dosyamızdaki kodlar, şu şekilde olur genellikle;

Her div id ve div class kodlarımızda, verdiğimiz her değer için 1 satır işgal ediyoruz boşu boşuna. Bu tip kodlamaları, şu şekilde birleştirmemiz gerekiyor;

Arkadaşlar, dikkat ettiyseniz, ilk başta 18 satır kod işgal eden css dosyamızı, optimize ederek 2 satıra düşürdük. Burada dikkat etmeniz gereken nokta, her div id ve div class’ı aynı satıra yazmak. Yani, css bilmeyen arkadaşlarımız için daha ayrıntılı söyleyecek olursam, { .. } parantezleri arasında kalan kodlar, tek bir div id ya da div classı gösteriyor bize.Yukarıda optimize ettiğim kodları incelerseniz, her satırda açılış ve kapanış parantezleri satırların başında ve sonunda bulunuyor.

Bu manuel sıkıştırma işlemini, yukarıda online sıkıştırma sitelerinden sıkıştırınca sitesinde kayma v.b sorunlar oluşan arkadaşlar için açıkladım. Mantık olarak bu online compressor sitelerninin mantığı da aynı şekilde işler ancak bazı kodları yanlış yorumlayarak iç içe olmayacak kodları iç içe ekleyebiliyor (nadirde olsa)

Şimdi site hızlandırma yöntemlerinden diğer page speed uyarılarına geçiyorum.

Resimleri CSS sprite görseller içinde birleştirin

Arkadaşlar, en çok karşılaştığım ve genellikle yüksek öncelikli hata olarak verilen Page Speed Css Sprite hatası, sitemizi yavaşlatan en önemli etkenlerin ilk sırasına yerleşiyor. Burada, temamızın bütün görsellerini sprite yapmayacağız, sadece google page speed’in birleştirmemizi istediği resimler için css sprite tekniğini kullanacağız.

Google Page Speed resimleri css sprite görseller içinde birleştirin hatasının çözümünü, ayrıntılarıyla ve kod bilgisi olmayan arkadaşların dahi yapabilmesi amacıyla çok basit şekilde ele alacağım. Öncelikle, google amcanın, bize birleştirmemizi istediği resimleri, page speed sayfasından bularak, masaüstümüzde bir klasör açıp içine kaydediyoruz.

Not: Bu makalemde bulunan kod değişikliklerinden önce, mutlaka dosyalarınızın bir yedeğini alınız.

Sprite yapacağımız resimleri, winrar programımızla .zip formatında sıkıştırıyoruz ilk önce. Daha sonra http://tr.spritegen.website-performance.org/ bu siteye giriyoruz ve gözat menüsünden, ziplediğimiz resimlerin winrar dosyasını seçiyoruz.

Diğer ayarlara gözattığımızda, yatay ve dikey aralık tercihi varsayılan olarak 50 px olarak girilmiş olduğunu görüyoruz. Bunu, sprite resmimizin boyutunu minimum ve aynı zamanda resimlerin position değerlerinin çakışmayacak kadar uzaklığını iyi ayarlamak gerekiyor. Ben kendi sitemde 15 px değerini kullandım, siz de 15 px olarak deneyin. Eğer sitenizde, diğer birleştirdiğimiz resimler de taşma v.b durumlar olursa, bu aralığı daha arttırrak aynı işlemleri uygulamanız gerekiyor.

Daha aşağıdaki ayarlardan Sınıf Öneki karşısındaki -sprite ön ekini siliyoruz, o kısım boş kalsın arkadaşlar. Ve son olarak en alttaki butona tıklayarak sprite işlemini gerçekleştiriyoruz.

Arkadaşlar, site bize 3 kısımdan oluşan 2 si css kodu, 1 tanesi de en altta birleştirilmiş resmimizden oluşan bilgileri verdi. İlk önce, en alttaki Tümleşik Resim Dosyanızı İndirin butonuna tıklayarak, birleştirilmiş resmimizi kaydediyoruz bilgisayarımıza ve bunu FTP ile sitemizin ana dizinine upload ediyoruz. Ve bir taraftan, boş bir not defteri açarak, upload ettiğimiz resmin linkini not defterine kopyalıyoruz. Bu ileride işimize yarayacak.

Sitenin bize verdiği ve her bir resime özel position değeri verdiği css kodlarımızı da not defterine koyalıyoruz. Örneğin, verilen kod şu şekilde bir kod olacak,

Aynı zamanda site bize birleştirdiğimiz resme ait bir css kodu daha veriyor. Tümleşik resim dosyası olarak açıklamasını yaptığı css kodumuza verdiği div id ismi

” olan bu kodu da not defterimize kaydediyoruz.

Arkadaşlari verilerimizi kaydettikten sonra, asıl çok dikkatli bir şekilde uygulamamız gereken adımları anlatmaya başlıyorum.

Temamızın style.css kodunu, (yedeğini aldıktan sonra) bilgisayarımıza indirip, bir editörler açıyoruz. Şimdi, not defterimize kopyaladığımız, bütün resimlerin ayrı ayrı position değerleri bulunan yukarıdaki css kodunun ilk satırındaki resmimizi, temamızın css dosyasında aratıyoruz. Yukarıda örnek verdiğim koddaki resim dosyasının ismi, “resim-1-2″ gördüğünüz gibi. Bu resmi, temamın css dosyasında arıyorum, ve buluyorum. Karşıma şuna benzer bir kod çıkıyor.

En alt satırda gördüğünüz gibi, resim-1-2.png dosyama ait olan css kodu bu. Yapacağımız değişiklik ise şöyle olacak arkadaşlar. Sprite işlemi yaptığımız sitenin verdiği kodlarda, (yani not defterine kaydettiğimiz) ilk satırda bulunan yani resim-1-2.png resmine ait css kodunu ve birleştirdiğimiz resme ait css kodunu derleyeceğiz. Bu kısmı çok dikkatlice yapmamız gerekiyor.

Arkadaşlar temamızın style.css inde bulunan ilgil resmimize ait css kodu ile, sprite yaptığımız not defterimizde bulunan aynı resme ait css kodu arasındaki benzerliklere dikkat etmenizi istiyorum. Dikkatli bakarsanız, widht, height ve backraund url kısımları her iki kodda da mevcut.

Bizim yapacağımız olay, bu 3 ana kod öbeğini, temamızdaki kodların yerine, not defterimizdeki kodları koymaktan başka bir şey değil aslında. İşi pratik olarak yapabilmeniz için uygulayacağınız yol şöyle olmalıdır. Temamızın css dosyasındaki ilgili resme ait css kod öbeğindeki SADECE backgraund url, widht ve hedight satırlarını siliyoruz ve bunların yerine kendi kodumuzu yapıştırıyoruz. Diğer kod satırlarını hiç ellemiyoruz arkadaşlar.

Yani işin özü, temamızdaki kodlarda bulunan widht, height ve backgraund satırlarını, üzerine position satırınıda ekleyerek oluşturduğumuz kod ile değiştiriyoruz.

Bu işlemi, birleştirdiğimiz bütün resim kodlarımız için uyguluyoruz arkadaşlar.

Eğer, doğru şekilde yaptıysak sprite işlemini, page speed hata raporunda Resimleri CSS sprite görseller içinde birleştirin hatasının yok olduğunu ve google page speed puanımızın 4 ile 8 puan arasında arttığını göreceksiniz.

Küçük CSS’leri Satır İçi Yapın

Burada google amca bize diyor ki, altta linklerini verdiğim css dosyaları, zaten 3-5 satırdan oluşuyor, ve bu kadar az kod için css çağırarak neden fazladan sorgu oluşturuyorsun? Mantıklı baktığımız zaman çok doğru söylüyor Google amca. Peki nasıl yapacağız bu işlemi? Css dosyaları nasıl satır içi yapılır? Page Speed küçük css’leri satır içi yapın uyarısı nasıl düzeltilir?

Page Speed’in bize satır içi yapmamızı istediği css dosyalarını bilgisayarımıza kaydediyoruz öncelikle. 3-5 satır koddan oluşurlar bu dosyalar bir editörle açtığımız zaman görürüz. Öncelikle, bu css dosyamız, temamızın hangi dosyasından sorgu yapılarak çağırılıyor bunu bulmamız gerekiyor.

Not: WordPress sistemini kullanan arkadaşlar, öncelikle header.php dosyasına baksınlar. Genellikle bu tip sorgulamalar header.php dosyasından yapılır. Peki header.php dosyasında nasıl bir kod arayacağız? Muhtemelen sorgu kodumuz şu şekilde olacaktır,

<*link rel=”stylesheet” type=”text/css” media=”all” href=”<*?php bloginfo(‘stylesheet_directory’); ?>/dosya.css” /*>

Page Speed’in bize düzeltmemizi söylediği, yani bilgisayarımıza kaydettiğimiz dosya ismini dikkatlice kodda bulunan dosya ismiyle aynı olup olmadığına bakın. Yanlış kodu silerseniz, işlem başarısız olacaktır. Kodun sonundaki /dosya.css” /> kısmından kontrolümüz yapıyoruz ve bu satırı siliyoruz header.php dosyamızdan (ya da hangi dosya içerisindeyse)

Not: Silmeden önce, dosyanızın bir yedeğini mutlaka alınız.

Daha sonra, bilgisayarımıza indirdiğimiz css dosyamızı bir editörle açıyoruz ve koyalıyoruz içerisindeki bütün kodları. Daha sonra, bu kopyaladığımız kodların başına <style type=”text/css”> ve sonuna da </style> koyarak bir kod bütünü oluşturuyoruz. Yani yeni oluşturduğumuz kodlar şu şekilde olacak;

<style type=”text/css”>

kopyaladığımız css kodları

</style>

Elde ettiğimiz yeni kodları, header.php içerisinde <head> </head> tagları arasında uygun bir yere ekliyoruz. Ancak, dikkat etmeniz gereken nokta, kodları diğer kodlar arasına değil, kodların bitiş tagından hemen sonra ekleyiniz. Yoksa, sitede kaymalar, ya da başka problemler çıkabilir.

Eğer işlemi doğru yaptıysak, page speed hatalarından Css’leri satır içi yapın hatasının yok olduğunu göreceksiniz.

Ölçeklenmiş resimler sunun hatası

Page Speed uyarılarından, gözlemlediğim kadarıyla önemli önceliklerde (yani kırmızı seviyede) en çok denk geldiğim hata bu. Bu sorunu çözdüğünüz zaman, page speed puanınız, 4-10 puan arasında bir artış gösterecektir. Bu problem, sitemizi en çok yavaşlatan unsurların arasında yer alıyor. Peki page speed ölçeklenmiş resimler sunun hatasını nasıl çözeceğiz?

Öncelikle, problemi açık açık anlayalım. Sitelerimizin anasayfalarında, konularımızla ilgili resimlerin küçültülmüş hallerini yani webmasterlar arasında thumb diye tabir edilen resimler kullanırız. WordPress sistemlerde bu otomatik resim boyutlandırma işlemini özel alanları kullanarak yaparız.

Burada otomatik boyutlandırılan resimler, fiziki olarak küçülmezler css ya da php kodlarıyla otomatik boyutlandırılır sadece. Bu resimlerin üzerine mause ile sağ tık yapıp resim linkini kopyalayıp tarayıcımızda açtığımız zaman, resmin gerçek boyutunu görürüz. İnternet tarayıcıları, bu boyutu kod yardımıyla boyutlandırılan resimleri yorumlarken çok zaman kaybederler.

Page Speed bu yüzden hata vermektedir zaten. Google amca bize diyor ki,” bu resimin boyutu 150×150 px ise, sen gidip 1024×768 px resmi boyutlandırırsan, bu hiç bir işe yaramaz, sonuç itibariyle 2024×768 px boyutundaki ve 400 kb büyüklüğündeki resim sunucundan çekilecek üstelik web tarayıcıya bunu boyutlandırma emri vererek sayfa yüklenmesini yavaşlatacaksın” diyor bize google amca.

Yapmamız gereken şey, eğer bu küçük resimlerimiz 150×150 px boyutundaysa, resim fiziki olarak gerçek boyutu 150×150 px olmalı. Ancak, her konu eklerken resimleri bu boyutta kırparak yüklemek bir süre sonra bıkkınlık oluşturacaktır site sahibi üzerinde :)

Bu aşamada size bir iyi bir de kötü haberim var. Önce hangisini söyleyeceğimi bilemiyorum :) İlk önce iyi haberi söyleyeyim. Bu resimleri bilgisayarınızda photoshop ile 150×150 px olacak şekilde her konu eklerken boyutlandırmanız gerekmiyor. WordPress sistemler, bu işi bizim için yapıyor. Kötü haber ise, bundan önceki özel alan ile eklediğimiz resimleri, tek tek yine wordpress sistemini kullanarak boyutlandırma nız gerekecek. Çünkü google page speed hatasını yok etmek istiyoruz biz ve mevcut hatalı boyutlandırılmış resimleri tek tek düzenlememiz gerekecek.

Çok fazla konusu olanlar için kötü bir durum ancak uğraşmak ya da uğraşmamak tamamen size kalmış bir olay tabii ki ben sadece anlatıyorum :)

WordPress admin panelimizin Ayarlar menüsünün altında bulunan Ortam ayarına giriyoruz öncelikle. Karşımıza aşağıdaki gibi bir ekran çıkıyor. Burada bizi ilgilendiren kısım, kırmızı ile kare içerisine aldığım küçük ve orta boy resimlerin boyutları. Kullandığımız temanın, küçük resimler için tam olarak hangi boyutları kullandığını öğrenmek için (özel alan kullananlar için) ya page speedin verdiği hata açıklamasına bakıyoruz, ya da temamızın ilgili dosyasına, yani anasayfadaysa küçük resimler index.php içinde özel alanımıza ait kodları buluyoruz. Şuna benzer kodlarda, resimlerin otomatik hangi boyutlara göre boyutlandırıldığını görebiliyoruz.

<img src=”<?php $key=”thumbnail”; echo get_post_meta($post->ID, $key, true); ?>  width=”117px” height=”96px”/>

Width ve height değerlerinden boyutlarımızı öğreniyoruz.

Google Page Speed’in verdiği hata raporunda ise şu şekilde belirtir resim boyutunun kaç olduğunu

HTML’de veya CSS’de yeniden boyutlandırıldı ve boyutu 450×330 pikselden 117×96 piksele değiştirildi. Ölçeklenmiş resim sunmak, 4KiB tasarruf sağlayabilir (%41 azalma).

Burada, olması gereken boyut, 117×96 px örnekte verdiğim. Siz de kendi temanızın olması gereken boyutunu öğrendikten sonra, az önce girdiğimiz Ortam ayarlarındaki, Orta boyut kısmının karşısındaki değerlere, belirlediğimiz resim boyutlarını yazıyoruz ve kaydediyoruz.

Eee hani zordu, bunda ne var ki? diye sorabilirsiniz. Ancak, daha işe yeni başladığımızı belirterek asıl zahmet verecek aşamaları anlatmaya devam ediyorum.

Not: Bu anlatacağım işlemi, bundan sonra ekleyeceğimiz yazılarda ve bundan önceki mevcut yazılarımızda bulunan resimleri tek tek optimize ederek uyguluyoruz. Çok konusu olanlar yandı valla :) Aşağıdaki resimleri inceleyelim lütfen.

Kırmız ile işaretlediğim Orta seçeneğini seçip, yazıya dahil et diyoruz. Daha sonra, yazı alanına eklenen resmin üzerine tıklayıp, resmi düzenle diyoruz. Açılan pencerede en üstte Gelişmiş Ayarlar menüsüne girinca, karşımıza aşağıdaki gibi bir ekran çıkıyor.

Kaynakta verilen resim linki, resmimizin, belirttiğimiz boyutlarda kırpılmış halinin linki oluyor. Bu linki alıp, kullandığımız özel alanın karşısına yapıştırıyoruz. İşte bu boyutlandırma işlemini, eski yazılarımızdaki resimler için manuel olarak yapmamız gerekiyor eğer page speed hatalarındaki Ölçeklenmiş resimler sunun hatasını yok etmek ve page speed puanımızı arttırmak istiyorsak.

Küçük JavaScript’leri Satır İçi Kullanın

Bu hatanın mantığı, yukarıda anlattığım Küçük Css’leri satır içi kullanın başlığındaki anlattıklarımla aynıdır arkadaşlar. Değişen tek şey, ilgili javascript kodlarımızı şu kodların arasına yazarak ekliyoruz sitemizde. <script type=”text/javascript”> KODLAR BURAYA </script>

Arkadaşlar, daha bir çok Page Speed hatası var farkındayım, ancak henüz 4 tane hatanın açıklaması bile konuyu oldukça uzun yapmaya yetti. Bakıyorum da 2200 karakter olmuş makale :) Bu yüzden diğer page speed hatalarını bundan sonraki makalelerimde açıklamayı uygun gördüm.

Şimdilik iyi çalışmalar dilerim…