افزایش سرعت بارگذاری صفحات وب‌سایت
افزایش سرعت بارگذاری صفحات وب‌سایت » در این مقاله آموزشی، 5 روش مهم و کاربردی در زمینه افزایش سرعت لود وب سایت را بیان خواهیم کرد. مانند: بهینه سازی تصاویر

افزایش سرعت بارگذاری صفحات وب‌سایت

 Speed up website loading

افزایش سرعت بارگذاری صفحات وب‌سایت

 

لزوم افزایش سرعت لود صفحات وب سایت:

از سال ۲۰۱۰ میلادی، سرعت لود وب سایت بعنوان یکی از فاکتورهای تاثیرگذار در الگوریتم رتبه بندی (Ranking) گوگل اعلام شده است. اما بنظر شما چه چیزی بیشتر از سایر موارد می تواند سرعت لود صفحات وب سایت را کاهش دهد؟

پاسخ سوال فوق Size می باشد. Size ، زمان زیادی را از مرورگرها می گیرد تا کدها و المان های تشکیل دهنده یک صفحه از وب سایت را لود کند. Browser باید استایل (style) ، اسکریپت (script) ، کدهای HTML و تصاویر را دانلود کند.

در این سالها، هر اندازه کاربران خواهان وب سایت هایی با قابلیت تعامل بیشتری هستند، تعداد کامپوننت های وب سایت ها افزایش می یابد و بدلیل اینکه هر کامپوننت استایل ها و اسکریپت های خود را دارد، بنابراین به ناچار سرعت لود صفحات وب سایت ها افزایش می یابد.

 

ابزارهای بررسی آنلاین سرعت لود وب سایت:

وب سایت ها و ابزارهای آنلاین زیادی برای آنالیز سرعت لود وب سایت وجود دارد که GtMetrix ، Google Pagespeed Insights و Website Grader از محبوب ترین آنها می باشند.

» مطالعه مقاله "آنالیز سرعت سایت توسط Google PageSpeed Insights" توصیه می شود.

نکته: ممکن است پس از بررسی سرعت سایت تان در ابزارهای فوق، آیتم های زیادی نیازمند بهبود باشند. اما معمولا برطرف کردن اکثر آنها سریع و راحت است. همچنین حل تمام مواردی که ابزارهای مذکور پیشنهاد می دهند دشوار است اما سعی کنید تا جای ممکن آنها را بررسی و برطرف نمائید تا بتوانید به کاربران وب سایت خود تجربه بهتری را ارائه بدهید.

» مطالعه مقاله "روش های بهبود تجربه کاربری وب سایت" توصیه می شود.

روش های بهینه سازی سرعت لود وب سایت مستقل از پلتفرم آنها می باشد اما می تواند بسته به نوع پلتفرم وب سایت، ابزارهای متفاوتی داشته باشد. ممکن است وب سایت با سیستم مدیریت محتوای وردپرس (WordPress) یا جوملا (Joomla) یا… (سایر CMS ها) پیاده سازی شده باشد یا اینکه وب سایت از ابتدا برنامه نویسی شده باشد مانند: ASP.NET MVC

 

اکنون روش هایی را معرفی می کنیم که هر وبمستری باید برای افزایش سرعت لود وب سایت خود بداند:

 

۱- بهینه سازی تصاویر (Optimize Images):

تصاویر یکی از موثرترین المان های وب سایت در زمینه مصرف پهنای باند وب سایت می باشند. اولین گام برای بهینه سازی تصاویر، در نظر گرفتن اندازه مناسب برای تصاویر می باشد. بعنوان مثال اگر قرار است تصویری در ابعاد ۱۰۰۰*۵۰۰ به نمایش در بیاید، و ما این تصویر را در سایز ۲۰۰۰*۱۰۰۰ آماده کره باشیم، مسلما سرعت لود این تصویر ۲ برابر کندتر از حالت بهینه خواهد بود. برخی طراحان وب سایت از طریق استایل های CSS ابعاد تصویر را اصلاح می کنند، اما متوجه نیستند که مرورگر آن تصویر را با ابعاد واقعی (یعنی ۲۰۰۰*۱۰۰۰) لود می کند.

بهینه سازی تصاویر (Optimize Images)

بنابراین توصیه می شود تصاویر استفاده شده در وب سایت خود را قبل از آپلود، بهینه کنید. ابزارهای آنلاین زیادی برای بهینه سازی تصاویر (بدون کاهش کیفیت و کوچک شدن ابعاد) وجود دارد که معروف ترین آنها TinyPng می باشد. برخی تصاویر می توانند تا ۸۰% بهینه شوند!

TinyPng

 

۲- کش مرورگر (Browser Caching):

چرا مرورگر باید هر بار که یک صفحه وب سایت لود می شود، تمام المان هایی را که قبلا لود کرده است را مجددا دانلود کند؟

فعال سازی کش (cache) مرورگر باعث می شود تا برخی از داده ها در مرورگر کاربر ذخیره شود تا دفعه بعد نیاز نباشد تمام منابع وب سایت مجددا روی مرورگر سیستم کاربر دانلود شوند. مدت زمان ذخیره شدن داده ها رو ی مرورگر، به تنظیمات مرورگر کاربر و نیز تنظیمات cache سمت سرور وب سایت (server-side) بستگی دارد.

برای انجام تنظیمات کش مرورگر روی سرور سایت خود، با توجه به نوع وب سرور خود، یکی از مقالات زیر را مطالعه نمائید:

 

کش مرورگر 

 

۳- فشرده سازی (Compression):

فعال سازی Compression مانند اینست که تمام وب سایت خود را در یک فایل زیپ (Zip File) قرار دهید. فشرده سازی می تواند بطور قابل توجهی، سایز صفحات وب سایت را کاهش دهد و در نتیجه باعث افزایش سرعت لود وب سایت شود.

بر اساس سایت Varvy ، فشرده سازی می تواند بین ۵۰ تا ۷۰ درصد از حجم فایل های html و css سایت شما را کاهش دهد. فشرده سازی تنظیماتی سمت سرور دارد. پس نحوه انجام Compression به وب سرور و تنظیمات آن بستگی دارد. در زیر، لیستی از وب سرورهای محبوب را آورده ایم:

 

فشرده سازی

 

۴- بهینه سازی استایل‌های CSS:

قبل از اینکه کاربران وب سایت را مشاهده کنند، کدهای css لود می شوند. هر اندازه که استایلهای css (چه بصورت inline و چه بصورت فایل css) زمان بیشتری برای لود صرف کنند، کاربران هم باید به همان اندازه منتظر لود صفحات آن وب سایت بمانند.

CSS بهینه باعث می شود صفحات وب سایت سریع تر دانلود شوند و در نتیجه وب سایت برای کاربران با سرعت بالاتری لود خواهد شد.

این سوال را از خودتان بپرسید: "آیا از تمام استایل ها در قالب وب سایتم استفاده می شود؟" اگر پاسختان منفی است، سعی کنید از شر استایل های اضافی (و یا فایل های CSS اضافی) خلاص شوید!

پس از اینکه استایل های بلا استفاده را از فایل های html و css قالب وب سایت خود حذف کردیم، مرحله بعدی اینست که فایل های css را کوچک‌سازی (minimization) کنیم. فضاهای خالی اضافی (Extra Spaces) در فایل های css باعث افزایش حجم این فایل ها خواهد شد.

 

بهینه سازی استایل‌های CSS

 

CSS Minimization باعث می شود فضاهای اضافی واقع در فایل های css حذف شوند و در نتیجه فایلهای css به کوچکترین سایز ممکن خود برسند.

» مطالعه مقاله "نحوه فشرده‌سازی فایل‌های CSS" توصیه می شود.

اکنون چطور می توانیم فایل های css را فشرده و کوچک کنیم؟

ابتدا چک کنید که آیا فایلهای CSS قالب وب سایت شما فشرده است یا خیر. زیرا برخی CMS ها بطور پیش فرض اینکار را انجام می دهند. اما سیستم های مدیریت محتوایی مانند وردپرس یا جوملا برخلاف اینست.

اگر CMS سایت شما بطور اتوماتیک فشرده سازی CSS  را انجام نمی دهد، می توانید براحتی از ابزارهای آنلاین رایگان مانند CSS Minifier استفاده کنید. فقط کافیست استایل های css سایت خود را داخل باکس مربوطه paste کنید سپس دکمه Compress را بفشارید تا نسخه فشرده و کوچک شده فایل css خود را مشاهده کنید.

 

CSS Minimization

 

۵- درج اسکریپت‌ها در پایین صفحه:

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

ساده ترین راه حل اینست که فایل های js را در پایین صفحه یا below the fold (قبل از تگ بسته body) درج کنید. در اینصورت صفحات وب سایت تان زودتر از اسکریپت های js لود می شود.

 

معرفی اتریبیوت های defer و async:

روش دیگری که قابلیت کنترل بیشتری را روی اسکریپت های js دارد، استفاده از اتریبیوت های defer و async برای فایل های جاوا اسکریپت خارجی (External Javascript) می باشد.

استفاده از اتریبیوت های defer و async بسیار سودمند می باشند، به شرطی که تفاوت بین آنها را بدانید:

  • Async: تعریف اتریبیوت Async برای فایل های js اکسترنال بدین معنیست که آن فایل js وقتی سایر المان های صفحه در حال لود می باشند، لود می شود. اما زمان لود شدن اینگونه فایل ها ممکن است خارج از ترتیب (out of order) باشد. بطور پیش فرض، فایل های سبک ابتدا لود می شوند. اما این قضیه می تواند برای برخی اسکریپت ها خوب باشد و برای برخی دیگر فاجعه!
  • Defer: در صورت استفاده از اتریبیوت defer برای یک فایل js ، باعث می شویم این فایل js پس از لود کامل صفحه وب سایت لود شود. همچنین این اتریبیوت باعث اجرای به ترتیب اسکریپت ها خواهد شد.

 

اتریبیوت های defer و async

 

فرمت استاندارد اعلان فایل js:

<script type=”text/javascript” src=”/path/filename.js”></script>

نحوه استفاده از اتریبیوت های defer و async:

<script type=”text/javascript” src=”/path/filename.js” defer></script>

<script type=”text/javascript” src=”/path/filename.js” async></script>

 

اهمیت فایل های js سایت تان می تواند ملاک تصمیم گیری شما برای استفاده از defer یا async باشد. فایل های js ضروری و با اهمیت بالا بهتر است اتریبیوت async داشته باشند تا نیاز نباشد برای لود شدن منتظر لود کامل صفحه وب سایت شوند. اما فایل های جاوا اسکریپتی که از اهمیت پایین تری برخوردارند، توصیه می شود با اتریبیوت defer تعریف شوند تا جلوی سرعت لودینگ صفحه را نگیرند و پس از لود کامل المان های صفحه، لود شوند.

اما به هر حال توصیه می کنیم اسکریپت های js سایت خود را با هر دو اتریبیوت defer و async تست کنید و نتیجه را با ابزارهای تست سرعت لود وب سایت (مانند GtMetrix و pingdom) چک کنید.

 

منبع: https://blog.hubspot.com/marketing/how-to-reduce-your-websites-page-speed


برچسب‌ها:

اتریبیوت asyncاتریبیوت deferافزایش سرعت سایتافزایش سرعت لود سایتبهینه سازی استایل‌های CSSبهینه سازی تصاویربهینه سازی سایتسئوی javascriptسرعت سایتسرعت لودینگ وب سایتفشرده سازی cssفشرده سازی Gzipکش مرورگر

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

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

نوزده − 9 =