javascript در طراحی سایت و بهینه سازی سرعت مجنتو ۲

وب‌سایتتان را با جاوا اسکریپت بهینه کنید

مسائل انیمیشنی چطوری میتونن روی برندتون اثر بذارن

وقتی سایت طراحی میکنید، طبیعتا میخواهید از مواد دیگه‌ای هم روی سایتتون استفاده کنید و همه سایت نوشته ساده نباشه. انیمیشن با اینکه سایت رو زنده تر و جذاب‌تر میکنه، اگه درست استفاده نشه میتونه اثر منفی داشته باشه.  مثلا اگه بارگذاری انیمیشن خیلی طول بکشه یا فقط بخشی از اون لود بشه، دیگه سایتتون حرفه ای به نظر نمیاد. چی کار کنیم که بتونیم انمیشن داشته باشیم و این مشکل هم پیش نیاد؟ یه سری کارها هست که هر کسی میتونه روی سایتشون اعمال کنه و کاری کنه که سایتش بهینه بشه و همیشه مخاطب رو راضی نگهداره و تجربه خوبی براش باقی بذاره.

تشخیص مشکل

یکی از بزرگترین دلایل بروز این مشکل اینه که سایتها میخوان همه عناصرشون رو به سریع‌ترین حالت ممکن بارگذاری کنند، در نتیجه اثرات ناخواسته ای روی برخی از محتوا میتونه بذاره. مرورگرها یه عملکرد دارن که میتونه این مشکل رو کاملا حل کنه.

روش کدنویسی

اولین وسیله حل این مشکل استفاده از حالت play انمیشینه. چون این ویژگی به مرورگر خبر میده که محتوا چه زمانی اجرا بشه و چه زمانی متوقف، خودتون میتونید طوری تنظیمش کنید که تا زمانی که بقیه محتوای سایت کامل بارگذاری نشه، انیمیشن متوقف بشه. قبلش یه کلاس  js-loading  استفاده کنید و بعد وقتی همه چیز کامل لود شد پاکش کنید. حالا میتونید براحتی حالت play انیمیشن رو طوری تنظیم کنید که فقط وقتی حالت کلاس  js-loading پاک شده، انیمیشن نمایش داده بشه (play بشه).

سایر مشکلات

با اینکه اکثر سایتها با این راهکار روی مرورگرهای مختلف بهتر نمایش داده میشن، اما باز هم یه سری خطرات وجود داره. بزرگترین مشکل اینه که خودِ جاوااسکریپت همیشه روی کامپیوتر کاربر نهایی درست فعال نمیشه، مثلا ممکنه خودِ کاربر غیرفعالش کرده باشه یا شاید بخاطر مشکلی که با یه افزونه دیگه داره این اتفاق بیفته. بنابراین تمام راهکارهایی که ماهیت جاوااسکریپت دارند زیاد قابل اعتماد نیستند. اگه چنین مسئله ای وجود نداشته باشه، این راهکار در اکثر شرایط خوب جواب میده و معتبره.

حذف کلیه tooltip از صفحه وب سایت توسط جاوا اسکریپت

جهت حذف تولتیپ از کد جاوا اسکریپت زیر استفاده نمایید:var links = document.getElementsByTagName( ‘a’ ); for( var index = 0; index < links.length; index++ ) { links[index].removeAttribute( ‘title’ ); };

بهینه سازی سرعت مجنتو ۲

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

در این مقاله قصد داریم روش های بهینه سازی سرعت مجنتو ۲ را بررسی نماییم.

۱٫ فعال سازی قابلیت Use Flat Catalog Category

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

Stores > Configuration > Catalog > Catalog > Storefront

و گزینه Use Flat Catalog Product را بر روی Yes قرار دهید.

۲٫ بهینه سازی کدهای CSS و JS

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

Stores -> Configuration > Advanced > Developer > JavaScript Settings

گزینه های Merge JavaScript Files و Minify JavaScript Files را بر روی Yes قرار دهید.

برای بهینه سازی CSS در پانل مدیریت به بخش زیر مراجعه نمایید:

Stores > Configuration > Advanced > Developer > CSS Settings

و گزینه Merge CSS Files و Minify CSS Files را بر روی Yes قرار دهید.

۳٫ فعال سازی کش

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

System > Cache Management

کلیه آیتم ها را انتخاب نموده و بر روی Enable قرار دهید.

۴٫ کاهش زمان پاسخ سرور

برای انجام این کار در کنترل پانل به آدرس زیر مراجعه نمایید:

Stores > Configuration > Advanced > System > Full Page Cache

و گزینه Caching Application را بر روی Varnish Cache قرار دهید.

۵٫ مجنتو را در حالت production ببرید. برای انجام لطفا کد زیر را اجرا نمایید:

bin/magento deploy:mode:set production

سعید رضایی و حامد حسین نسب