קורס: אופטימיזציה של קוד PHP עבור אתר WordPress
פרטי השיעור

ניהול תמונות ומשאבים סטטיים בצורה יעילה

תמונות ומשאבים סטטיים כמו CSS, JavaScript ותמונות הם חלק חשוב בכל אתר אינטרנט. ניהול נכון שלהם משפר את זמני הטעינה ומפחית את העומס על השרת.

שימוש בפורמטים מתקדמים לתמונות

פורמטים מודרניים כמו WebP מציעים דחיסה טובה יותר ללא פגיעה באיכות. זה עוזר לצמצם את זמן הטעינה של הדפים.

דוגמה להמרת תמונות ל-WebP:

<?php
// Check if the source file exists
$sourceImage = 'example.jpg';
$destinationImage = 'example.webp';

if (!file_exists($sourceImage)) {
    echo "Source image does not exist.";
    exit;
}

// Create an image resource from the source file
$image = imagecreatefromjpeg($sourceImage);

// Convert the image to WebP and save it
if (imagewebp($image, $destinationImage)) {
    echo "Image converted successfully to WebP format.";
} else {
    echo "Failed to convert image to WebP format.";
}

// Free memory
imagedestroy($image);
?>

שימוש בכלי דחיסה לתמונות

שימוש בדחיסה מבוקרית לצמצום גודל התמונות ללא אובדן איכות משמעותי.

דוגמה לשימוש ב-Library:

composer require spatie/image-optimizer

שימוש בקוד לדחיסת תמונות:

<?php
// Install the Spatie Image Optimizer package first with: composer require spatie/image-optimizer
use Spatie\ImageOptimizer\OptimizerChainFactory;
// Function to optimize an image
function optimizeImage($imagePath) {
// Check if the file exists
if (!file_exists($imagePath)) {
echo "Image file does not exist.";
return false;
}
// Create an OptimizerChain instance
$optimizerChain = OptimizerChainFactory::create();
// Optimize the image
try {
$optimizerChain->optimize($imagePath);
echo "Image optimized successfully: $imagePath";
return true;
} catch (Exception $e) {
echo "Failed to optimize image: " . $e->getMessage();
return false;
}
}
// Example usage
$imagePath = 'example.jpg'; // Replace with the path to your image
optimizeImage($imagePath);
?>

שימוש ב-CDN לניהול משאבים סטטיים

CDN (Content Delivery Network) מפיץ משאבים סטטיים על שרתים ברחבי העולם, ומשפר זמני טעינה למשתמשים.

דוגמה להגדרת CDN בוורדפרס:

<?php
// Function to replace default URLs with CDN URLs
function replace_with_cdn_url($url) {
$cdn_domain = 'https://cdn.example.com'; // Replace with your CDN domain
$site_url = site_url();
// Replace the default site URL with the CDN domain
return str_replace($site_url, $cdn_domain, $url);
}
// Apply the CDN URL filter to media attachments
add_filter('wp_get_attachment_url', 'replace_with_cdn_url');
// Apply the CDN URL filter to script and style URLs
function enqueue_with_cdn($url) {
$cdn_domain = 'https://cdn.example.com'; // Replace with your CDN domain
$site_url = site_url();
// Replace the default site URL with the CDN domain
return str_replace($site_url, $cdn_domain, $url);
}
add_filter('script_loader_src', 'enqueue_with_cdn');
add_filter('style_loader_src', 'enqueue_with_cdn');
?>

טעינה אסינכרונית של קבצי JavaScript

טעינה אסינכרונית מונעת חסימת טעינת דפי HTML עד לסיום טעינת JavaScript.

דוגמה בוורדפרס:

function async_js($tag, $handle, $src) {
if ('example-script' !== $handle) {
return $tag;
}
return '';
}
add_filter('script_loader_tag', 'async_js', 10, 3);
?>

אופטימיזציה של CSS

איחוד ודחיסת קבצי CSS מפחיתים את כמות הבקשות לשרת.

דוגמה לדחיסת CSS:

yarn add clean-css-cli
cleancss -o style.min.css style.css

תרגול

  • המירו תמונות באתר לפורמט WebP.
  • השתמשו ב-CDN עבור משאבים סטטיים.
  • בצעו טעינה אסינכרונית של קבצי JavaScript.

משאבים נוספים

צפיות מבקרים: 100