یه تنفس عمیق و بعد همه چیز رو راجع بهش بخون

راحیل دست پیمان

راحیل دست پیمان

پر امید وانگیزه ادامه بده. موفق میشی. من بهت قول میدم.

به اشتراک گذاری بر روی facebook
به اشتراک گذاری بر روی twitter
به اشتراک گذاری بر روی linkedin
به اشتراک گذاری بر روی telegram

طراحی سایتت رو به‌راحتی با قالبهای آماده شروع کن

فروشگاه اینترنتی

افزایش سرعت سایت طراحی شده با المنتور | وردپرس

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

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

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

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

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

افزایش سرعت سایت وردپرسی

از سرور به سیستم: سفر داده های سایت

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

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

بنابراین ما یکسری درخواست و پاسخ سریع داریم. یکسری رفت و برگشت سریع. مثل بازی فوق العاده سریع پینگ پنگ.

زمان بارگذاری صفحه: چگونه سرعت سایت المنتوری رو اندازه گیری کنیم؟

مدت زمانی که از لحظه ارسال یک نمونه از داده ها به عنوان “پینگ” توسط مشتری تا زمان دریافت “پنگ” طول میکشه، روش اندازه گیری سرعت ماست.

ما به عنوان سازندگان وب، مسئولیت سفر برگشت و زمانی که کاربر برای دریافت پاسخ خود انتظار میکشه رو بر عهده داریم.

در طول این سفر بازگشت، چند ایستگاه داریم:

داده های ما پس از دریافت و پردازش درخواست از مشتری، از طریق سرور، از طریق Platform، که در مورد ما وردپرسه و همه افزونه های نصب شده روی اون، بالاخص سوگلی افزونه هامون، افزونه المنتور قبل از اینکه به سیستمی که مشتری کار می کنه برسه، بصورت محتوایی که کاربر ما کنجکاوه ببینه ارائه میشه.

افزایش سرعت سایت وردپرسیافزایش سرعت سایت وردپرسی

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

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

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

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

چطوری سایتمون رو از سمت سرور افزایش بدیم؟

1. لوکیشن، لوکیشن، لوکیشن

اولین چیزی که باید بهش توجه کنیم، مکان سرور هست. بعنوان یک قاعده کلی: ((کاربران خود را نزدیک و داده های خود را نزدیکتر نگه داربد.))

اگه من قصد راه اندازی یک فست فود رو در ایران دارم، همه کاربرانم هم حتما ایرانی هستن، پس بهتره سرور من هم در ایران باشه. ایجاد رستوران من در فرانسه یک برنامه تجاری خوب از آب درنمیاد. 

speed up site

2. استفاده از CDN

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

این مورد رو باید از سرویس میزبانیتون درخواست کنین. 

3. ارتقاء نرم افزار سرور

وقتی سرور ما درخواستی برای داده دریافت میکنه، اونو پردازش میکنه مثلا همون مثال رستوران رو درنظر بگیرین. وقتی مشتری سفارش غذا میده اگر در آشپزخونه پرسنل سریع و باتجربه داشته باشیم، سفارش مشتری بدون نقص و سریع آماده میشه. بسیاری از سرویسهای میزبانیروی پشته های نرم افزاری MySQL, Apache و PHP هستن. بدون اینکه وارد جزئیات فنی بشیم باید مظمئن بشیم که سرویس میزبانی سایتمون نرم افزارهاشو ارتقاء داده:

از آپاچی گرفته تا نگینکس

از MySQL تا MariaDB

باید مظمئن باشیم که نسخه PHP حداقل PHO 7 باشه. 

گاهی همین مورد به‌تنهایی سرعت سایت رو تا 50 درصد کاهش میده. 

4. سرور اشتراکی یا سرور اختصاصی

به طور کلی خدمات میزبانی، داده های ما رو بر روی سرورهای مشترک نگه می دارن.

به عبارت دیگه، ما فضای ذخیره سازی و برخی از سرویس ها رو با سایر وب سایت های ساکن در همان سیستم ذخیره سازی  به اشتراک می گذاریم.

speed up site

بعضی از کارشناسان معتقدن که این مسئله میتونه زمان بارگیری سایت رو مختل کنه و انتخاب یک سرور خصوصی مجازی (VPS) رو توصیه میکنن. نکته ای که هست اینه که استفاده از این سرورهای خصوصی نیاز به صرف هزینه و کار بیشتری داره. اگه در این مورد متخصص نباشیم هم ممکنه سایت و تجارتمون رو در معرض خطر قرار بدیم. 

آماده برای افزایش سرعت سایتتون بشین

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

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

داده های سایت چگونه سفر میکنند؟

 

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

سرور پس از دریافت درخواست از یک مرورگر یا سرویس گیرنده، به سیستم عامل مراجعه می کنه، ساختار اونرو بررسی میکنه، لیست طولانی از شرایط وردپرس و سپس همه پلاگین ها و افزونه های نصب شده رو میخونه.

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

speed up site

نحوه پاسخگویی سرور به درخواستهای بعدی، بسته به اینکه سرویس گیرنده روی HTTP / 1 یا HTTP / 2 در حال اجراست یا خیر، متفاوت است.

speed up site

اگر مشتری از طریق HTTP / 1 در حال اجرا باشه، مشتری درخواست رو صادر میکنه.

سرور با ارسال جواب درخواستی به مشتری پاسخ میده. بعد هم مشتری درخواست بعدی رو میفرسته.

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

برای همین  HTTP / 2 بسیار کارآمدتره، اما متأسفانه هنوز هم کاربران در سراسر جهان با مرورگرهای HTTP / 1 وجود دارند.

بارگذاری صفحه به صفحه در مقابل بارگذاری کل سایت

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

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

تست یک وب سایت برای زمان بارگذاری صفحه: آزمایش تئوری سرعت

خب ما یک وبسایت رو برای نمونه درنظر گرفتیم.

افزایش سرعت سایت المنتور از سمت پلتفرم

گام اول: اجرای تست سرعت

Initial speed test using Google PageSpeed Insights

اجرای یک تست سرعت اساسی با استفاده از GT Matrix یا GoogleS PageSpeed Insights فقط نشون نمیده که سایت ما چقدر کنده، ایده هایی برای بهتر شدن سرعت شایتمون هم به ما میده.

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

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

  •  اطمینان از تجربه کاربری بهتر. کاهش زمان بارگذاری صفحه احتمال ناامید شدن کاربران و افزایش نرخ پرش رو کاهش میده.
  • برای جلو ماندن در رقابت.

موارد اندکیه که میتونیم در وردپرس برای افزایش سرعت سایت تغییر بدیم اما سرور هنوز هم باید تمام تعاریف و دستورالعمل های WordPress رو بخونه.

خبر خوب اینه که وردپرس به طور مداوم در حال بهبود امور مربوط به خودشه تا به سرعت بخشیدن سایتها کمک کنه.

 

گام دوم: بهینه سازی قالب سایت

شما احتمالاً از روند بدون قالب یا قالب کمتر که در بین طراحان وب باب شده شنیدید. 

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

hello theme

گام سوم: افزونه های اضافی وردپرس رو حذف کنین

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

توسعه دهندگان افزونه المنتور به سختی تلاش کردن تا شما رو از بسیاری افزونه ها بینیاز کنن، پس برای افزایش سرعت سایتهایی که با المنتور طراحی شده افزونه های اضافی رو بریزید دور. 

ما وزن محموله محتوای خودمون رو برای مرورگر سبکتر میکنیم. 

افزایش سرعت سایت المنتور از سمت محتوا

با نگاهی به شکست تست سرعت سایت نمونه، در قسمتی که معمولا بعنوان “آبشار” شناخته میشه میبینیم که سنگین ترین پرونده ها تصاویر ما هستن.

Waterfall of speed test using Google PageSpeed Insights

قبل از توضیح این مبحث بگم براتون که وردپرس از نسخه 4.5 بطور خودکار تراکم فایلهای JPEG رو که در پوشه رسانه بارگذاری میشن، کاهش میده که خیلی خوبه اما کافی نیست. برای کاهش حجم تصاویر میتونیم از برنامه ها و سایتهای آنلاینی مثل TinyPNG, Pixlr X, Optimole و غیره استفاده کنیم. وقتی صحبت از اندازه میشه، همیشه یک تصویر بزرگتر کیفیت بهتر نمیده. مثلا اگه یک عکس رو در فضای 400 در 400 میخواین قرار بدین، یک تصویر 24 در 24 اتلاف وزن میشه. در عوض باید سعی کنین تصاویری که بارگذاری میکنین در بزرگترین حالت خودشون برای اون فضا باشن. بخاطر بهتر بودن در دسک تاپ.

گام چهارم: ابعاد و وضوح مناسب برای تصاویر

 وردپرس در ایجاد چندین نمونه از تصویر، در اندازه های مختلف آماده برای استفاده در حالت واکنش گرا خوب عمل میکنه. (به همین دلیله که  افزونه Elementor برای بارگذاری و پخش تصاویر به ویژگی رسانه وردپرس بسنده کرده.)

هنگام بازبینی تصویری در Google Chrome، میتونیم این اتفاق رو در کد مشاهده کنیم.

Example of wordpress instances of image sizes

مورد بعدی که بر وزن تصویر تأثیر میذاره ، وضوح اونه که با پیکسل بر اینچ یا PPI اندازه گیری میشه. با DPI که مفهومی مشابه است اشتباه نگیرین.

قبلاً اینطوری که 72 PPI برای تمام فایلهای گرافیکی ما کافی بود. اما حالا باید فرمت های نمایش مانند 4K و Retina رو هم در نظر بگیرین.

 Retina یک سیستم نمایشگر اپله که در آیفون ها ، iPad ها ، iMac ها و MacBook ها رایجه. 

نکته: رزولوشن تصاویر رو در 300 ppi نگه دارین

تراکم پیکسلی فناوری Retina از یک دستگاه به دستگاه دیگر متفاوته. کارشناسان معمولاً برای تأمین این مسئله حداقل به 220 PPI پایبند بودن. اما در حال حاضر این نظر قاطع رو دارن که 300 ppi مناسبتره.

نکته: ویدئوهای کوتاه بهتر از GIF ها هستن

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

گام پنجم: استفاده از لود تنبل

 

روش کار افزونه های لود تنبل ، از نظر عامیانه ، “مخفی نگه داشتن” فایلهای اصلیه تا زمانی که مشتری به اونها احتیاج داشته باشه. وقتیکه سرور پاسخ اولیه خودش رو ارسال میکنه، HTML که کلاینت دریافت میکنه داراری مکانیابه. بریا همین کلاینت منتظر دریافت این درخواستها قبل از ارائه اون قسمت صفحه به کاربر نیست.

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

LazyLoad by WP Rocket

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

گام ششم: المانهای اضافی رو حذف کنین.

تا اونجا که میشه بهتره از بخشها، ابزارکها و ستونهای کمتری استفاده کنین. مثلا اگه بتونین همه این مطلب رو در یک بخش بنویسین خیلی بهتره. 

گام هفتم: حداقل سازی

Minification به روند پاکسازی تمام محتوای زائد، HTML بیش از حد و فضای زیاد اشاره داره، که فضای زیادی رو اشغال می کنه.

برنامه هایی مانند Kangax HTML Minifier یا Minifier، ابزاری هستند که برای شناسایی و حذف کد های اضافی و پیچیده HTML ، avaScript و CSS طراحی شدن، و به طور قابل توجهی از وزن داده های سایت ما کاهش میدن تا سرعت سایت المنتوری ما افزایش پیدا کنه..

گام هشتم: تست دوباره سرعت سایت

حالا بعد از پاکسازی و ساده سازی سایتمون دوباهر سرعت سایت رو با جی تی متریکس اندازه میگیریم.

Final speed test using Google PageSpeed Insights

سرعت زمان 4 ثانیه و کمتر میتونه یک سرعت خوب باشه، البته که گوگل توصیه زیر 2 ثانیه میکنه اما در حقیقت برای فروشگاههای آنلاین سرعت 4 تا 7 ثانیه میشه گفت قابل قبوله. یکراه دیگه برای اینکه بدونید چه سرعتی برای سایت شما مناسبه، مقایسه سایتتون با سایت رقباست. 

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

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

فروشگاه اینترنتی

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

شاید مقاله‌های زیر رو هم دوست داشته باشی بخونی

Create-a-Sticky-Side-Nav-Menu

ایجاد یک منوی سایدبار خلاقانه با المنتور

ادامه مطلب
افزایش سرعت سایت وردپرسی

افزایش سرعت سایت طراحی شده با المنتور | وردپرس

ادامه مطلب
درج لوگوی سایت در المنتور

درج لوگوی سایت در المنتور | ویجت سایت لوگو

ادامه مطلب
لینک خروج در منوی سایت

اضافه کردن دکمه خروج از حساب کاربری به هدر سایت

ادامه مطلب

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

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

48 − 44 =