أسرار السرعة: تقنيات لا يعرفها معظم المطورين
بعد الأساسيات (التخزين المؤقت، ضغط الصور)، هناك تقنيات متقدمة يمكنها تسريع موقعك بشكل كبير.
تحميل CSS الحرج (Critical CSS)
/* المشكلة: CSS يحظر عرض الصفحة */
/* الحل: أدرج CSS الحرج مباشرة في HTML */
<head>
<style>
/* فقط CSS اللازم لما فوق الطي */
body { font-family: sans-serif; margin: 0; }
.header { background: #1a1a2e; color: white; padding: 1rem; }
.hero { padding: 4rem 2rem; }
</style>
<!-- باقي CSS يتحمل بشكل غير حاظر -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>تحميل JavaScript بذكاء
# أضف في functions.php:
function defer_scripts($tag, $handle) {
$defer_scripts = array('jquery-migrate', 'comment-reply');
if (in_array($handle, $defer_scripts)) {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'defer_scripts', 10, 2);
# إزالة السكربتات غير الضرورية:
function remove_unnecessary_scripts() {
wp_dequeue_script('wp-embed');
wp_dequeue_style('wp-block-library');
}
add_action('wp_enqueue_scripts', 'remove_unnecessary_scripts');Redis Object Cache
# تثبيت Redis (يسرّع استعلامات قاعدة البيانات):
sudo apt install redis-server php-redis -y
sudo systemctl enable redis
# في wp-config.php:
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
# ثبّت إضافة Redis Object Cache
# Settings > Redis > Enable Object Cacheتحسينات قاعدة البيانات
# إضافة فهارس مخصصة:
# في phpMyAdmin أو MySQL:
ALTER TABLE wp_postmeta ADD INDEX meta_key_value (meta_key(191), meta_value(100));
ALTER TABLE wp_options ADD INDEX autoload (autoload);
# تنظيف autoloaded options:
SELECT option_name, LENGTH(option_value) as size
FROM wp_options WHERE autoload='yes'
ORDER BY size DESC LIMIT 20;Preloading و Prefetching
<!-- في header.php -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>ملخص المهارات المكتسبة
- تطبيق Critical CSS لعرض أسرع
- تحميل JavaScript بشكل defer
- إعداد Redis للتخزين المؤقت للكائنات
- تحسين قاعدة البيانات بالفهارس
الخطوة التالية: طبّق تقنية واحدة في كل مرة وقِس التأثير على سرعة الموقع.