سرفصل‌ها

  • ۱ آموزش افزایش سرعت لود سایت به کمک ابزار GTmetrix
    • ۱٫۱ خلاصه‌ای از خطا
  • ۲ Avoid CSS @import چیست و چگونه کار میکند؟
    • ۲٫۱ چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟
    • ۲٫۲ جایگزین مناسب CSS @import

آموزش افزایش سرعت لود سایت به کمک ابزار GTmetrix

در جلسه قبل خطای Avoid bad requests را بررسی کردیم. در این جلسه قصد داریم درباره مشکل رایج AvoidCSS @import صحبت کنیم و ببینیم چطور میتوانیم این مشکل را در سایت پیدا و رفع کنیم و و چرا اصلاً این موضوع برای افزایش سرعت سایت ما مشکل‌ساز است. با ما همراه باشید.

خلاصه‌ای از خطا

نام: Avoid CSS @import
نوعCSS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۷%

[gap height=”۱۵″]

Avoid CSS @import چیست و چگونه کار میکند؟

این متد یک فایل css را در درون یک فایل css دیگر وارد میکند یا به عبارتی فراخوانی میکند، خیلی وقت‌ها برنامه‌نویس‌ها به اشتباه میان فایل استایل دهی اصلی را در HTML فراخوانی می‌کند و بقیه فایل‌های استایل‌دهی را با دستور زیر داخل فایل استایل‌دهی اصلی صدا می‌زنند.

@import url(“Adress-other-style.css”)

چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟

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

جایگزین مناسب CSS @import

با ابزارهای آنلاین می‌توان به راحتی فایل‌هایی که به شکل @import فراخوانی شده‌اند را پیدا کرد و یکی از بهترین ابزارهای آنلاین سایت GTmetrix است و بعد از زدن آدرس سایت در بخش مربوط به Avoid CSS @import خطاها را پیدا کنید و از جایگزین‌های بهتر همانند دستور زیر استفاده کنید و در بخش head سایت فراخوانی کنید و یا اینکه اگه امکانش بود با فایل‌های CSS دیگر ادغام کنید. در آینده نحوه ادغام صحیح فایل‌های CSS را در دوره GTmetrix اشاره خواهیم کرد.

<link rel=”style.css” href=”style.css” type=”text/css”>

 

این جلسه از آموزش GTmetrix هم به پایان رسید در جلسه  بعد به معرفی Avoid landing page redirect در pagespeed  گوگل میپردازیم.

منبع: میزفا

جهت کسب اطلاعات و مشاهده مقالات بیشتر به بخش مقالات آموزشی مراجعه نمایید.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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