WordPress hızlandırma için en basit yöntem, JavaScript ve CSS dosyalarını birleştirip lazy loading uygulaması yapmaktır. Bu sayede sayfa yüklendiğinde gereksiz kaynaklar ertelenir ve kullanıcı deneyimi hızlanır.

WordPress hızlandırma yöntemlerini tek tek uygulamak yerine, fonksiyon dosyanıza ekleyeceğiniz birkaç satır kodla tüm script optimizasyonu işlemlerini otomatik hale getirebilirsiniz.

WordPress hızlandırma için en basit yöntem, CSS ve JS birleştime ile lazy loading uygulamasıdır. Bu yazıda adım adım nasıl yapacağınızı göstereceğiz.

Bu yazıda aşağıdaki konuları ele alacağız:

• jQuery’yi footer’a taşıma
• CSS ve JS dosyalarını birleştirme
• Görüntülere lazy loading ekleme
• Harici kaynaklar için preload ve preconnect kullanma
• Gereksiz WordPress header çıktılarının kaldırılması

Bu yöntemlerin etkin olması için tema dosyanızın child theme veya özel tema olması önerilir.

Peki, kodu functions.php dosyanıza nasıl ekleyeceksiniz? Bir sonraki bölümde tüm adımları kodla anlatıyoruz.

1. functions.php dosyanıza kod ekleyin

Aşağıdaki kodu tema dizininizdeki functions.php dosyanızın en altına yapıştırın:

// Sistemiki A.Ş. tarafından yazılmıştır. function optimize_script_loading() { if (!is_admin()) { // jQuery’yi footer’a taşı wp_deregister_script('jquery'); wp_register_script('jquery', includes_url('/js/jquery/jquery.min.js'), false, null, true); wp_enqueue_script('jquery'); } // CSS dosyalarını birleştir wp_enqueue_style('combined-styles', get_template_directory_uri() . '/assets/css/combined.min.css', array(), '1.0', 'all'); // JS dosyalarını birleştir ve footer’da yükle wp_enqueue_script('combined-scripts', get_template_directory_uri() . '/assets/js/combined.min.js', array(), '1.0', true); } add_action('wp_enqueue_scripts', 'optimize_script_loading', 99); function add_lazy_loading_to_images($content) { return preg_replace('/(]+)(src=)/i', '$1loading="lazy" $2', $content); } add_filter('the_content', 'add_lazy_loading_to_images'); // Harici kaynaklar için preload ve preconnect function optimize_external_resources() { if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true); wp_enqueue_script('jquery'); } add_filter('style_loader_tag', 'css_preload_filter', 10, 4); function css_preload_filter($html, $handle, $href, $media) { $critical = array('style2'); if (is_admin() || in_array($handle, $critical)) return $html; $dom = new DOMDocument(); @$dom->loadHTML($html); $link = $dom->getElementsByTagName('link')->item(0); $link->setAttribute('rel','preload'); $link->setAttribute('as','style'); $link->setAttribute('onload',"this.onload=null;this.rel='stylesheet'"); $noscript = $dom->createElement('noscript'); $nslink = $dom->createElement('link'); $nslink->setAttribute('rel','stylesheet'); $nslink->setAttribute('href',$href); $nslink->setAttribute('media',$media ?: 'all'); $noscript->appendChild($nslink); $link->parentNode->insertBefore($noscript, $link->nextSibling); return $dom->saveHTML(); } add_filter('wp_resource_hints', 'font_resource_hints', 10, 2); function font_resource_hints($urls, $relation_type) { if ($relation_type === 'preconnect') { $urls[] = ['href'=>'https://fonts.googleapis.com']; $urls[] = ['href'=>'https://fonts.gstatic.com','crossorigin'=>true]; } return $urls; } } add_action('wp_enqueue_scripts', 'optimize_external_resources'); remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wp_shortlink_wp_head'); remove_action('wp_head', 'rest_output_link_wp_head'); remove_action('wp_head', 'wp_oembed_add_discovery_links');

Bu kod, hem lazy loading hem de script optimizasyonu işlemlerini otomatik hale getirir. Bir sonraki bölümde performans kazanımlarını inceleyeceğiz.

2. Performans kazanımları

• Sayfa yüklenme süresi %30’a kadar azalır.
• First Contentful Paint (FCP) süresi kısalır.
• Sunucu talepleri (requests) azalır.

Ölçüm yaparken Google PageSpeed Insights veya GTmetrix kullanabilirsiniz.

Bir sonraki bölümde sıkça karşılaşılan sorunları ve çözümlerini ele alacağız.

Sıkça Sorulan Sorular

• Bu yöntem tüm temalarla uyumlu mu? Çoğu modern tema ile uyumludur; ancak child tema kullanmanız uyumluluğu artırır.
• CSS dosyalarını manuel birleştirmem gerekebilir mi? Otomatik birleştime genellikle yeterlidir ama özel durumlarda manuel optimize edebilirsiniz.

Detaylı rehber için optimizasyon rehberimizi inceleyebilirsiniz.

Artık siteniz daha hızlı yüklenecek ve kullanıcı deneyimi iyileşecektir. Daha gelişmiş WordPress optimizasyonları için uzman ekibimizden destek alabilirsiniz.