پرش به محتویات

بارگذاری asset

«Performance» یکی از سه ستون Bricks است. از نسخه 1.3.4 راه‌حل بارگذاری asset جدید کنترل بیشتر و بهبود زمان بارگذاری صفحه می‌دهد.

YouTube
YouTube ↗

Bricks به‌صورت پیش‌فرض همه style (CSS) و script (JS) را در دو فایل اصلی سرو می‌کند:

  • frontend.min.css (293 kb)
  • bricks.min.js (354 kb)

همه style و script همیشه در هر صفحه در دسترس است.

معایب: حدود ۶۵۰ kb — پس از cache مشکل کمتری است، اما بازدید اول و شبکه‌های ضعیف تحت تأثیر بودند.

Bricks 1.3.4 تحویل asset جدید:

Script فقط در صورت نیاز — ۹۰٪ کاهش bricks.min.js (۳۵۴ kb → ۳۷ kb).

Styleهای بزرگ مثل animate.css و icon font فقط در صورت نیاز — ۶۰٪ کاهش frontend.min.css (۲۹۳ kb → ۱۱۶ kb).

کاهش بیشتر بارگذاری با «External Files»

style پیش‌فرض المان‌ها همچنان در frontend.min.css است. styleهای دیگر (CSS سفارشی سراسری، theme styles، template styles، style المان صفحه، پالت رنگ، CSS global element و غیره) به‌صورت inline بارگذاری می‌شوند — داده تکراری و غیرقابل cache زیاد.

برای بهینه‌سازی بیشتر CSS Loading Method را در Bricks - Settings - Performance روی External Files بگذارید.

پس از تغییر روش، Regenerate CSS files را بزنید (فقط وقتی روش External Files فعال است).

پس از تغییر به External Files حتماً Regenerate CSS files را بزنید تا پوشه و فایل‌های CSS ساخته شوند.

فایل‌های CSS minify شده در wp-content/uploads/bricks/css (یا uploads وردپرس) ساخته و per صفحه سرو می‌شوند.

توجه

اگر External Files با cache سرور/افزونه conflict دارد یا style ناقص است، به Inline Styles برگردید و از email گزارش دهید.

روش CSS Loading Method: External Files

CSS Loading Method: External Files

Enqueue دستی Style و Script

اگر افزونه Bricks شخص ثالث دارید یا style/script خاصی بارگذاری نمی‌شود، می‌توانید در functions.php child theme با hook wp_enqueue_scripts یا در enqueue_scripts المان سفارشی Bricks enqueue کنید.

add_action( 'wp_enqueue_scripts', function() {
  // isotopeJS (e.g. metro & masony layouts)
  wp_enqueue_script( 'bricks-isotope' );
  wp_enqueue_style( 'bricks-isotope' );

  // Icon font files
  wp_enqueue_style( 'bricks-font-awesome-6' );
  wp_enqueue_style( 'bricks-font-awesome-6-brands' );
  wp_enqueue_style( 'bricks-ionicons' );
  wp_enqueue_style( 'bricks-themify-icons' );

  // Animations
  wp_enqueue_style( 'bricks-animate' );

  // Tooltips
  wp_enqueue_style( 'bricks-tooltips' );

  // Datepicker
  wp_enqueue_script( 'bricks-flatpickr' );
  wp_enqueue_style( 'bricks-flatpickr' );

  // swiperJS (e.g. slider, carousel)
  wp_enqueue_script( 'bricks-swiper' );
  wp_enqueue_style( 'bricks-swiper' );

  // Lightbox
  wp_enqueue_script( 'bricks-photoswipe' );
  wp_enqueue_style( 'bricks-photoswipe' );

  // Code prettifier
  wp_enqueue_script( 'bricks-prettify' );
  wp_enqueue_style( 'bricks-prettify' );
}, 11 );