ترتیب فایل‌های CSS و JS و تاثیر آن بر سرعت لود سایت

ترتیب فایل‌های CSS و JS و تاثیر آن بر سرعت لود سایت

ترتیب استایل‌های CSS و اسکریپت‌های JS

Order of styles and scripts

ترتیب استایل‌های CSS و اسکریپت‌های JS

بهینه‌سازی ترتیب استایل ها و اسکریپت ها

ترتیب فراخوانی فایل‌های css و js:

تگ استایل (style tag) و فراخوانی فایل های css باید قبل از اسکریپت های js تعریف شوند. اگر ترتیب قرارگرفتن فایل ها و استایل های css و اسکریپت های جاوا اسکریپت را بدین صورت اجرا کنید، سرعت لود وب سایت خود را افزایش داده اید. دلیل این قضیه را در این مقاله بیان خواهیم کرد.

راه حل ساده این مسئله اینست که اطمینان کسب کنید که فایل های css (و استایل های inline) بالاتر از اسکریپت های java script قرار داشته باشند. گوگل ترتیب فایل های css و js را با تست کردن سناریوهای مختلف و ترکیب css و js های صفحه وب سایت شما انجام می دهد.

مراحل لود یک وب سایت:

هنگامی که مرورگر می خواهد یک وب سایت را لود کند، ابتدا کدهای html آنرا می گیرد سپس فراخوانی سایر المان های موردنیاز آن صفحه (مانند image و css و js) را شروع می کند. وقتی مرورگر می خواهد کدهای جاوااسکریپت را لود کند، لود سایر المان ها را متوقف می کند تا زمانیکه لود تمام اسکریپت های js به اتمام برسد.

گوگل اعلام کرده است: اکثر صفحات وب بین ۸۰ تا ۹۰ درصد زمان لودشان به انتظار برای شبکه (waiting for network) سپری می شود. تکنیک قوی و موثر برای کاهش زمان لود یک سایت (زمان انتظار network) حذف عواملی است که باعث سریالی شدن دانلود منابع می شوند.

ترتیب فراخوانی فایل‌های css و js

نحوه بهینه سازی ترتیب کدهای css و js:

شما براحتی می توانید ترتیب قرارگیری استایل های css و اسکریپت های js را با جابجایی چند خط در فایل html سایت تان (تگ head صفحه وب) بهینه کنید. در بخش زیر، یک قالب کلی برای رعایت ترتیب css و js های یک سایت را مشاهده می کنید:

<head>

    <meta name=description content=”description” />

    <title>title</title>

    <style>

        page specific css code goes here

    </style>

    <script type=”text/javascript”>

javascript code goes here

    </script>

</head>

در کدهای فوق می بینید که استایل های css بالاتر از اسکریپت های js قرار گرفته اند. اگر ترتیب css و js های صفحات وب سایت شما بدین صورت نمی باشد، براحتی می توانید آنها را مطابق فرمت بالا تصحیح کنید.

منابع فنی و کسب اطلاعات بیشتر:

همانطور که ملاحظه کردید اصلاح ترتیب قرارگیری کدها و فایل های css و js ساده می باشد اما دلیل این قضیه به این سادگی نمی باشد. یکی از دلایل اصلی اینست که استایل های css نقش مهمتری در چیدمان و نحوه نمایش یک صفحه وب بازی می کنند و اگر استایل های css منتظر لود فایل های javascript بمانند، در کل زمان لود افزایش خواهد یافت. با مطالعه مقالات وب سایت های زیر، می توانید اطلاعات دقیق تری راجع به دلایل اهمیت رعایت ترتیب قرارگیری فایل های css و js کسب خواهید کرد.

  • Critical rendering path
  • Defer javascript
  • CSSOM

برای کسب اطلاعات بیشتر در زمینه نکات و ترفندهای CSS و jQuery به مقالات زیر مراجعه کنید:

 

منبع: https://varvy.com

0/5 ( 0 نظر )

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

آخرین کتاب‌های الکترونیکی

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب آموزش گوگل آنالیتیکس

دانلود رایگان کتاب الکترونیکی

آموزش تصویری گوگل آنالیتیکس

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"