آموزش رفع خطای Avoid CSS @import در GTmetrix

هدف استفاده از @import در CSS چیست؟

قانون @import در CSS این امکان را فراهم می‌کند که از داخل یک فایل استایل، فایل‌های استایل دیگری را فراخوانی کنید. این قابلیت برای سازماندهی و مدیریت بهتر فایل‌های CSS مفید به نظر می‌رسد؛ به‌عنوان مثال، زمانی که بخواهید استایل‌های پایه را در یک فایل اصلی قرار دهید و سایر استایل‌ها را جداگانه مدیریت کنید. با این حال، مشکل اصلی اینجاست که وقتی از @import استفاده می‌کنید، مرورگر فایل‌های CSS را به‌صورت دنباله‌دار (Sequential) و نه به‌صورت هم‌زمان (Parallel) بارگذاری می‌کند.

به زبان ساده، مرورگر ابتدا فایل اولیه را دانلود و پردازش می‌کند و پس از رسیدن به دستور @import، تازه شروع به دانلود فایل‌های موردنظر می‌کند. این موضوع می‌تواند زمان بارگذاری صفحات را به شکل قابل‌توجهی افزایش دهد، خصوصاً در سایت‌هایی که تعداد زیادی فایل CSS دارند.در چنین شرایطی، استفاده از شبکه توزیع محتوا (CDN) می‌تواند به شکل قابل‌توجهی زمان بارگذاری فایل‌های CSS را کاهش دهد و عملکرد کلی سایت را بهبود بخشد. سرویس‌هایی مانند Cloudflare با کش کردن فایل‌ها و توزیع آن‌ها در سرورهای مختلف دنیا، باعث می‌شوند کاربران سریع‌تر به محتوای سایت دسترسی پیدا کنند. اگر از وردپرس استفاده می‌کنید، پیشنهاد می‌شود با مطالعه آموزش نصب کلودفلر در وردپرس نحوه فعال‌سازی و تنظیم صحیح این سرویس را یاد بگیرید تا سرعت سایت شما بهینه‌تر شود.

برای درک بهتر، فرض کنید فایل myAwesome.css شامل کدی شبیه به زیر باشد:

<table> <tr> <td> <pre style=" color: black;"> @import url("Fantastic.css"); </pre> </td> </tr> </table>

مرورگر ابتدا فایل myAwesome.css را دانلود و پردازش می‌کند تا متوجه شود که نیاز به فایل Fantastic.css دارد. سپس شروع به دانلود و پردازش آن می‌کند. در نتیجه، یک چرخه طولانی و غیرضروری ایجاد می‌شود که عملکرد سایت شما را تحت تأثیر قرار می‌دهد.

چرا استفاده از CSS @import سرعت سایت را کند می‌کند؟

کد CSS

وقتی صحبت از سرعت بارگذاری سایت می‌شود، یکی از موارد مهم کاهش تعداد درخواست‌ها (Requests) و استفاده بهینه از منابع مرورگر است. دستور @import دقیقاً برخلاف این هدف عمل می‌کند. این دستور فایل‌های CSS را به ترتیبی بارگذاری می‌کند که هر فایل باید منتظر اتمام دانلود فایل قبلی باشد. این روند نه‌تنها زمان بارگذاری را افزایش می‌دهد، بلکه موجب مصرف بیشتر منابع شبکه و پردازنده مرورگر نیز می‌شود.

دلیل اصلی کندی عملکرد ناشی از استفاده از @import در نحوه کارکرد آن نهفته است. وقتی شما فایل CSS اصلی خود را با دستور @import به فایل دیگری متصل می‌کنید، مرورگر ابتدا فایل اصلی را دانلود و تجزیه می‌کند. پس از آن، درخواست دیگری برای دانلود فایل فراخوانی‌شده ارسال می‌کند. این فرایند به جای اینکه چندین فایل را به‌طور هم‌زمان دانلود کند، باعث ایجاد وقفه می‌شود.

برای مثال، فرض کنید فایل اصلی شما style1.css است و در آن با دستور زیر فایل دیگری به نام style2.css را فراخوانی کرده‌اید:

<table> <tr> <td> <pre style=" color: black;"> @import url("style2.css"); </pre> </td> </tr> </table>

در این حالت، مرورگر ابتدا فایل style1.css را دانلود می‌کند، سپس فایل style2.css. این یعنی هر فایل بعد از اتمام دانلود فایل قبلی بارگذاری می‌شود. اگر تعداد فایل‌های CSS زیاد باشد، زمان بارگذاری صفحه به شکل چشمگیری افزایش می‌یابد.

چطور از این مشکل جلوگیری کنیم؟

خوشبختانه روش‌های مؤثری برای مدیریت بهتر فایل‌های CSS و جلوگیری از مشکلات ناشی از استفاده از @import وجود دارد. در ادامه به چند روش کاربردی اشاره می‌کنیم:

  1. استفاده از تگ <link>

    به جای استفاده از دستور @import، فایل‌های CSS را مستقیماً از طریق تگ <link> در بخش <head> سند HTML خود وارد کنید. این روش به مرورگر اجازه می‌دهد که فایل‌ها را به‌صورت هم‌زمان بارگذاری کند، در نتیجه سرعت بارگذاری سایت افزایش می‌یابد.

  2. ترکیب فایل‌های CSS

    اگر سایت شما شامل تعداد زیادی فایل CSS است، بهتر است آن‌ها را در یک فایل واحد ترکیب کنید. این کار باعث کاهش تعداد درخواست‌های HTTP و بهبود عملکرد سایت می‌شود. ابزارهایی مانند Webpack و Gulp می‌توانند در این زمینه مفید باشند.

  3. درج مستقیم CSS (Inlining CSS)

    اگر فایل‌های CSS شما حجم کمی دارند یا شامل استایل‌های ساده‌ای هستند، می‌توانید آن‌ها را مستقیماً در فایل HTML خود قرار دهید. این روش برای استایل‌های حیاتی (Critical CSS) که باید سریع بارگذاری شوند، ایده‌آل است.

  4. استفاده از تکنیک بارگذاری تنبل (Lazy Loading)

    بارگذازی با تاخیر در مواردی که نیاز به فایل‌های CSS اضافی تنها در بخش‌های خاصی از سایت است، می‌توانید از تکنیک بارگذاری تنبل استفاده کنید تا این فایل‌ها فقط در زمان موردنیاز بارگذاری شوند.

GTmetrix به توسعه‌دهندگان و مدیران سایت توصیه می‌کند که برای بهینه‌سازی عملکرد سایت، استفاده از @import را حذف کنند و به جای آن از روش‌های جایگزین مانند <link> یا ترکیب فایل‌های CSS استفاده کنند.

آیا می‌توانیم برای بهبود امتیاز، عبارت @import را حذف کنیم؟

بله، حذف یا جایگزینی دستور @import یکی از بهترین راهکارها برای بهبود امتیاز عملکرد سایت در ابزارهای آنالیز مانند GTmetrix است. با این حال، حذف یا تغییر فایل‌های CSS باید با دقت انجام شود تا از تغییرات ناخواسته در ظاهر سایت جلوگیری شود.

برای این کار می‌توانید ابتدا تمامی فایل‌های CSS خود را بررسی کرده و مواردی که با دستور @import فراخوانی شده‌اند را شناسایی کنید. سپس با استفاده از روش‌های جایگزین، فایل‌ها را بهینه کنید. این اقدامات نه‌تنها امتیاز سایت شما را بهبود می‌بخشند، بلکه تجربه کاربری بهتری برای بازدیدکنندگان ایجاد می‌کنند.

روش رفع خطا با جایگزین کردن @import در CSS

راه‌حل رایج این است که به جای @import از تگ LINK استفاده کنید، مانند مثال زیر:

<link rel='stylesheet' type='text/css' href='myAwesome.css'> <link rel='stylesheet' type='text/css' href='Fantastic.css'>

مثالی فهمیدنی برای جلوگیری از @import در فونت‌های گوگل

فونت

در این مثال، دو روش برای بارگذاری استایل‌ها و فونت‌ها را بررسی می‌کنیم. روش اول، استفاده از تگ <link> برای بارگذاری فونت‌های گوگل است که روشی سریع و بهینه برای وارد کردن فایل‌های CSS است. این روش باعث می‌شود که مرورگر بتواند فایل‌های CSS را به‌طور موازی دانلود کند، که سرعت بارگذاری صفحه را افزایش می‌دهد.

کد زیر به شما این امکان را می‌دهد که فونت‌های گوگل را بدون مشکل بارگذاری کنید:

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>

در مقابل، در مثال دوم از دستور @import برای وارد کردن فایل‌های CSS در داخل تگ <style> استفاده شده است. این روش موجب می‌شود که فایل‌ها به‌صورت ترتیبی (Sequential) بارگذاری شوند و مرورگر باید ابتدا فایل اصلی را دانلود و پردازش کند، سپس به سراغ فایل‌های واردشده با @import برود. این روند نه تنها باعث افزایش زمان بارگذاری می‌شود، بلکه می‌تواند مشکلات عملکردی ایجاد کند و حتی باعث بروز خطاهای جاوااسکریپت در برخی موارد گردد.

کد زیر نمونه استفاده از @import است که به دلیل مشکلات عملکردی توصیه نمی‌شود:

<style> @import url('myAwesome.css'); @import url('Fantastic.css'); </style>

به‌طور کلی، استفاده از @import برای وارد کردن استایل‌ها به دلیل ایجاد تاخیر در بارگذاری و اثرات منفی بر عملکرد صفحه باید اجتناب شود. به جای آن، بهتر است از روش‌هایی مانند <link> برای بارگذاری بهینه منابع استفاده کنید.

روش رفع خطای Avoid CSS @importدر پرستاشاپ

  1. یک اسکن GTmetrix انجام دهید تا فایل حاوی کد مشکل‌دار را پیدا کنید.
  2. با استفاده از یک برنامه FTP، فایل مورد نظر را دانلود کنید (ترجیحاً از SFTP استفاده کنید).
  3. پس از تهیه نسخه پشتیبان کامل از وب‌سایت خود، فایل را جستجو کرده و عبارت @import را پیدا کنید.
  4. عبارت قدیمی را با کد جدید جایگزین کنید، برای مثال:

 

@charset "UTF-8"; @font-face { Old+Standard+TT"; src: url("//fonts.googleapis.com/css/"); font-display: swap; }

 

  1. فایل اصلاح‌شده را دوباره آپلود کرده و عملکرد وب‌سایت خود را بررسی کنید.

روش رفع خطای Avoid CSS @import در وردپرس

به جای استفاده از @import، می‌توانید از تابع wp_enqueue_style استفاده کنید. نمونه کد زیر را در فایل functions.php مربوط به قالب خود قرار دهید:

function load_stylesheets() { wp_register_style('mystyle', get_template_directory_uri() . '/css/style.css', array(), 1, 'all'); wp_enqueue_style('mystyle'); } add_action('wp_enqueue_scripts', 'load_stylesheets');

نکته: اگر از قالب فرزند استفاده می‌کنید، به جای get_template_directory_uri() از get_stylesheet_directory_uri() استفاده کنید.

چگونه استایل‌های خارجی را در وردپرس بارگذاری کنیم؟

برای بارگذاری فایل‌های CSS از سایت‌های خارجی مانند Google Fonts، از تابع wp_enqueue_style به شکل زیر استفاده کنید:

function theme_external_files() { wp_enqueue_style('my_external_theme_font', '//fonts.googleapis.com/css?family=Roboto'); } add_action('wp_enqueue_scripts', 'theme_external_files');

حرف آخر

در نهایت، رفع خطای Avoid CSS @import در GTmetrix ممکن است اقدام کوچکی به نظر برسد، اما تاثیر قابل توجهی در بهبود سرعت بارگذاری سایت و بهینه‌سازی عملکرد آن دارد. استفاده از روش‌های بهینه‌تر مانند <link> و ترکیب فایل‌ها، نه تنها زمان بارگذاری را کاهش می‌دهد، بلکه تجربه کاربری بهتری برای بازدیدکنندگان فراهم می‌کند. نکته طلایی این است که به جای اتلاف زمان و منابع با استفاده از @import، با انتخاب تکنیک‌های مدرن‌تر و کارآمدتر، می‌توانید به راحتی امتیاز عملکرد سایت خود را در ابزارهایی مانند GTmetrix بهبود بخشید.

سوالات پرتکرار:

  1. چرا GTmetrix به من هشدار می‌دهد که از دستور @import در CSS استفاده نکنم؟

GTmetrix هشدار می‌دهد چون استفاده از @import باعث بارگذاری متوالی فایل‌های CSS می‌شود که زمان بارگذاری سایت را افزایش می‌دهد و می‌تواند بر عملکرد سایت تاثیر منفی بگذارد.

  1. چگونه می‌توانم از @import در CSS اجتناب کنم؟

برای اجتناب از @import، می‌توانید به جای آن از تگ <link> در بخش <head> صفحه HTML خود برای بارگذاری فایل‌های CSS استفاده کنید.

  1. آیا استفاده از @import در پروژه‌های بزرگ‌تر تاثیر بیشتری دارد؟

بله، در پروژه‌هایی با تعداد زیادی فایل CSS، استفاده از @import می‌تواند باعث تاخیر در بارگذاری صفحات و کندی عملکرد سایت شود.

  1. آیا ترکیب کردن فایل‌های CSS می‌تواند به عملکرد سایت کمک کند؟

بله، ترکیب فایل‌های CSS به یک فایل واحد باعث کاهش تعداد درخواست‌های HTTP می‌شود و عملکرد سایت را بهبود می‌بخشد.

  1. آیا تغییر از @import به روش‌های دیگر به عملکرد سایت آسیب می‌زند؟

نه، در صورتی که به درستی فایل‌ها را با روش‌های جایگزین مانند <link> یا wp_enqueue_style بارگذاری کنید، عملکرد سایت بهبود خواهد یافت و مشکلی ایجاد نمی‌شود.

منابع:

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *