2018 yılının SEO trendleri arasında site hızı ve mobil kullanım ön planda tabi iş böyle olunca Google PageSpeed Insight için de özel çalışmalar yaparak kullanıcılara daha güzel öneriler verebileceği bir arayüz güncellemesini sizlere anlatacağız.
“Google’da nasıl yükselirim?” sorusunun cevabı aslında sorunun içerisinde. Google’ın yönergeleri doğrultusunda sitenizi daha hızlı yaparak Google’da yükselin. Pagespeed Insight artık daha doğru hız verilerini verebilmek için Lighthouse tarafından analiz edilen laboratuvar verilerine dayanarak hız skoru veriyor. Arayüz güncellemesi ile birlikte daha akıcı ve detaylı bilgiler elde etmeniz mümkün. Ayrıca eski haline göre çok daha hızlı bir şekilde hız skoru yükleniyor.
Yazı İçeriği
Peki PageSpeed Insight Yeni Arayüzünde Farklı Neler Var?
Eskiden siteden tek bir ekran görüntüsü verirken artık etkileşim sürecini daha iyi aktarabilmek için saniyelik kareleri bize gösteriyor. Alan verisi ve Origin Summary adı altında iki adet bölüm var. Bu bölümler “Chrome Kullanıcı Deneyimi Raporu” olarak geçiyor. Belirli bir trafiğin üzerindeki siteler için gerçek açılış hızı değerlerini gösterir. Örneğin sitenize en çok bağlanılan bölgedeki internet hızı yavaş ise sitenizin hız skoru biraz daha düşecektir.
Lab Verileri
Bildiğiniz üzere 9 temmuzda yapılan algoritma güncellemesi ile mobil hız çok önemli bir hal aldı. Google mobili her zaman ön planda tutuğu için webmaster tarafında da “mobile first indexing” güncellemesi gerçekleştirmişti. Yeni Pagespeed Insight’taki veriler 3G internet hızı üzerinden hesaplanarak İlk Zengin İçerikli Boya, Hız İndeksi, Etkileşim Süresi, İlk Anlamlı Boya, İlk CPU Boşta, Tahmini Giriş Gecikmesi olarak 6 madde ile sıralanıyor. Buradaki değerlerin iyi, orta veya kötü olduğunu kolay anlayabilmemiz için Google, sarı kırmızı ve yeşil renkleri kullanmış. Yeşil değerler her zaman iyi değerler, sarı orta, kırmızı ise kötü değerlerdir. Hedefiniz ilk aşamada kırmızı değerlere odaklanıp onları yükseltmek olmalıdır.
Fırsatlar
Hız optimizasyon önerilerinin bulunduğu bölüm eskisine nazaran çok daha basit ve anlaşılabilir şekilde hazırlanmış. Burada bulunan Fırsat ve Tahmini Tasarruf Miktarı’nı görebilmemiz ise eskisinden çok daha iyi. Her zamanki gibi birçok sitede olduğu gibi en başta görsel optimizasyonu önerisini alabileceğinizi düşünüyoruz.
Görsel optimizasyonunu sitenizdeki görselleri Photoshop’ta web için kaydet özelliği ile kaydettikten sonra TinyPNG tarzı sıkıştırma uygulamalarıyla kolayca sıkıştırarak yapabilirsiniz.
Diğer fırsatları da sırasıyla optimize ederek PageSpeed Insight hız skorunuzu yükseltebilirsiniz.
Teşhis
Sitenizin hız performansı hakkında daha detaylı bilgiler verir. Bu bölümü yazılımcınız ile görüşerek neler yapabileceğinizi öğrenebilirsiniz. Bazı durumlarda sunucu değişikliği de yapmanız gerekebilir.
Başarılı Denetimler
Bu bölümde ise başarılı bir şekilde yaptığınız sıkıştırma ve optimizasyonları gösterir. CSS ve Javascript gibi sıkıştırma işlemlerini başarılı bir şekilde yaptıysanız burada görebilirsiniz.
4 Adımda Web Sitenizin Hız Skorunu Katlayın
1- Resim Sıkıştırma
Resimlerinizi sıkıştırın. 100kb üzeri resimler Türkiye şartlarında yüksek boyutlardır. Bu sebeple resimlerinizi olabildiğince küçük boyutlarda kaydetmenin yollarını bulmalısınız. Siteniz eğer wordpress altyapısına sahipse sıkıştırma TinyPNG, WP Smush gibi sıkıştırma eklentilerini premium olarak kullanabilirsiniz. Ya da görselinizi ücretsiz sıkıştırma siteleri kullanarak boyutlarını küçültebilirsiniz.
2- HTML, CSS ve JavaScript Küçültme:
HTML, CSS ve JavaScript kodları çoğu zaman site açılış hızını etkileyen değerlerdir. Bazı önbellekleme eklentileri HTML, CSS ve Javascript kodlarını sıkıştırmasına rağmen bunların birçoğunu manuel olarak yapmanız daha sağlıklı olacaktır.
3- Önbellekleme Özelliği:
Cache eklentileri kullanarak sitenizde bir önbellekleme yapabilirsiniz. Siteniz wordpress altyapılı ise WP Fastest Cache, LiteSpeed, WP Super Cache, W3 Total Cache gibi eklentiler fazlasıyla işinizi görecektir. Özellikle premium versiyonlarında HTML, CSS ve JavaScript küçültme işlemlerini de yaparak hız skorunuzu büyük bir miktarda arttırmaya yardımcı olacaktır.
4- Htaccess:
Htaccess dosyasını düzenlemeden önce mutlaka yedeğini almanızı öneriyoruz yaptığınız değişiklikler sitenizin “internal server error” hatası almasına sebep olabilir. Bu hatayla karşılaştığımızda hemen yedek dosyanızı geri yüklersiniz. Uzman bir yazılımcıdan htaccess yapılandırması için destek almanız sizin için daha iyi olacaktır. Aşağıda paylaşmış olduğum htaccess kodunu sitenize uygulayabilirsiniz.
<ifmodule mod_expires.c> <filesmatch "\.(jpg|gif|png|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> </ifmodule> <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE image/x-icon </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 # Text ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType text/plain A3600 ExpiresByType text/xml A3600 # Video ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 # PDF ExpiresByType application/pdf A31536000 # Flash ExpiresByType application/x-shockwave-flash A31536000 # Font ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-font-otf A31536000 # Audio ExpiresByType audio/mpeg A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 # Zip/Tar ExpiresByType application/x-tar A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml </IfModule> <IfModule mod_headers.c> # Serve gzip compressed CSS files if they exist # and the client accepts gzip. RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA] # Serve gzip compressed JS files if they exist # and the client accepts gzip. RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA] # Serve correct content types, and prevent mod_deflate double gzip. RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1] RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1] <IfModule mod_deflate.c> # zararli bot engelleme RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR] RewriteCond %{HTTP_USER_AGENT} ^Bot mailto:[email protected] [OR] RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR] RewriteCond %{HTTP_USER_AGENT} ^Custo [OR] RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR] RewriteCond %{HTTP_USER_AGENT} ^Download Demon [OR] RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR] RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR] RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR] RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR] RewriteCond %{HTTP_USER_AGENT} ^Express WebPictures [OR] RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR] RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR] RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR] RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR] RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR] RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR] RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR] RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR] RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR] RewriteCond %{HTTP_USER_AGENT} ^HMView [OR] RewriteCond %{HTTP_USER_AGENT} HTTrack [NC,OR] RewriteCond %{HTTP_USER_AGENT} ^Image Stripper [OR] RewriteCond %{HTTP_USER_AGENT} ^Image Sucker [OR] RewriteCond %{HTTP_USER_AGENT} Indy Library [NC,OR] RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR] RewriteCond %{HTTP_USER_AGENT} ^Internet Ninja [OR] RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR] RewriteCond %{HTTP_USER_AGENT} ^JOC Web Spider [OR] RewriteCond %{HTTP_USER_AGENT} ^larbin [OR] RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR] RewriteCond %{HTTP_USER_AGENT} ^Mass Downloader [OR] RewriteCond %{HTTP_USER_AGENT} ^MIDown tool [OR] RewriteCond %{HTTP_USER_AGENT} ^Mister PiX [OR] RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR] RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR] RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR] RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR] RewriteCond %{HTTP_USER_AGENT} ^Net Vampire [OR] RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR] RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR] RewriteCond %{HTTP_USER_AGENT} ^Offline Explorer [OR] RewriteCond %{HTTP_USER_AGENT} ^Offline Navigator [OR] RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR] RewriteCond %{HTTP_USER_AGENT} ^Papa Foto [OR] RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR] RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR] RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR] RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR] RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR] RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR] RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR] RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR] RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR] RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR] RewriteCond %{HTTP_USER_AGENT} ^Teleport Pro [OR] RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR] RewriteCond %{HTTP_USER_AGENT} ^Web Image Collector [OR] RewriteCond %{HTTP_USER_AGENT} ^Web Sucker [OR] RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR] RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR] RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR] RewriteCond %{HTTP_USER_AGENT} ^WebGo IS [OR] RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR] RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR] RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR] RewriteCond %{HTTP_USER_AGENT} ^Website eXtractor [OR] RewriteCond %{HTTP_USER_AGENT} ^Website Quester [OR] RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR] RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR] RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR] RewriteCond %{HTTP_USER_AGENT} ^Widow [OR] RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR] RewriteCond %{HTTP_USER_AGENT} ^Xaldon WebSpider [OR] RewriteCond %{HTTP_USER_AGENT} ^Zeus </IfModule>
Faydalı Bağlantılar
Sizler için faydalı olabileceğini düşündüğümüz bağlantıları ziyaret ederek, daha fazla bilgi edinebilirsiniz.
Temmuz 2018 Google Hız Güncellemesi ile alakalı bilgi edinmek için : https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
Site hızınızı hemen test etmek için: https://developers.google.com/speed/pagespeed/insights/?hl=tr
Sadece mobil hız raporu almak için: https://testmysite.withgoogle.com/intl/tr-tr
Lighthouse eklentisini tarayıcınıza kurarak güncel raporlar almak için: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
Merhaba,
htaccess’e ekleyeceğimiz kodun, hangi işlemler için yapıldığını kısaca da olsa belirtebilirseniz çok güzel olur. Bilmeyenler için de ne yaptığına dair fikir edinmesini sağlar.
Selamlar Emre Bey, bize [email protected] mail adresimizden ulaşabilir ve bilgi alabilirsiniz.