פרטי השיעור
ניהול תמונות ומשאבים סטטיים בצורה יעילה
תמונות ומשאבים סטטיים כמו 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.