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

امروزه سرعت صفحه یک عامل مهم در بازاریابی دیجیتال تلقی نمی گردد و تأثیر بسزایی در موارد زیر دارد:

• اینکه چه مدت بازدیدکنندگان در سایت شما می مانند.
• اینکه چه تعداد از آنها به مشتری پولی تبدیل می شوند.
• در جستجوی پولی چه مبالغی بر اساس CPC پرداخت می شود.
• در جستجوی ارگانیک گوگل چه رتبه ای کسب می کنید.

متأسفانه، بیشتر وب سایت ها در مورد سرعت صفحه عملکرد ضعیفی دارند و این تأثیر منفی مستقیمی بر درآمد آنها دارد.

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

یکی از مواردی که دچار چنین مشکلی می شود، بهینه سازی سرعت صفحه است. درک این موضوع آسان است زیرا اکثر مردم از درک اهمیت این جزئیات ناچیز غافل هستند و از ارزش سرمایه‌گذاری زمانی و پولی برای بهبود آن آگاه نیستند.

آنچه که ممکن است برای برخی از بازاریابان و کسانی که بر بهینه سازی موتورهای جستجو تمرکز دارند، بی اهمیت به نظر برسد، در بررسی با داده های غول های صنعتی تا داده های تحلیلی خودمان بسیار مهم می باشد.

من فرض می‌کنم که شما نیز مثل من هستید و می‌خواهید نتایج و البته درآمدتان را به حداکثر برسانید، درست است؟

پس بیایید شروع کنیم به ساختن وب سایتی که سریعتر از هرچیز دیگری است!

1. نادیده گرفتن هزینه ی میزبانی وب

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

مطمئناً، وب‌سایت شما در اغلب مواقع مانند اکثر میزبان‌های وب در دسترس خواهد بود، اما آنقدر آهسته بارگذاری می‌شود که بازدیدکنندگان شما ناامید می‌شوند و از خرید صرف نظر می کنند.

این خریداران عقیده دارند که "این مشکل قابل تحمل نیست!"

این چیزی است که ممکن است به سختی برای شما قابل درک باشد؛ زیرا به منزله ی کودک شماست و شما آن را دوست دارید.

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

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

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

به بیان بهتر باید گفت که:

اکثر مردم فرزندان خود را بدون قید و شرط دوست دارند. اما بچه شخص دیگری را که فریاد می زند، اشیاء را پرت می کند، شب آنها را در رستوران خراب می کند، چه؟ از آن بچه متنفر خواهند شد! در مورد وب سایت شما هم همینطور است.

تفاوت در واقعیت چقدر است؟

طبق مطالعه انجام شده توسط آمازون، تنها 100 میلی‌ثانیه تفاوت – یعنی واحد زمانی که حتی درک آن برای انسان دشوار است - برای کاهش 1 درصدی فروش این سایت کافی بود.

Walmart نیز به نتایج مشابهی دست پیدا کرد.

اگر آن واحد کوچک زمان تأثیر مستقیم زیادی بر فروش داشته باشد، فکر می‌کنید یک ثانیه بیشتر یا کمتر چه تأثیری خواهد داشت؟

موضوع به همین جا ختم نمی شود زیرا سرعت بارگیری (یا کندی) وب سایت نیز بر رتبه بندی جستجوی ارگانیک و هزینه های پرداخت به ازای هر کلیک تأثیر می گذارد.

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

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

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

2. درخواست های HTTP را کاهش دهید

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

حال اگر جزو افرادی هستید که مخاطب این مقاله هستند، احتمالاً فکر می کنید که " من نیازی به نگرانی در مورد آن ندارم. می دانم دارم چه کار می کنم و درخواست اضافی به وب سایت خود اضافه نمی کنم!»

این ممکن است تا حدی درست باشد و شما درخواست اضافی به وب سایت خود اضافه نکنید، اما برای 90+٪ از وب سایت هایی که من با آنها مواجه می شوم، هنوز این مورد پابرجاست.

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

مشکل از اینجا شروع می شود:

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

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

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

بهتر است:

• فایل های جاوا اسکریپت را در یک فایل ادغام کنید.
• فایل های CSS را در یک فایل ادغام کنید.
• افزونه هایی را که فایل های جاوا اسکریپت و/یا CSS خود را بارگیری می کنند، کاهش داده و یا حذف کنید.
• از sprites برای تصاویر پر کاربرد استفاده کنید.
• تا جایی که ممکن است به جای فایل های تصویری از فونت هایی مانند FontAwesome یا Ionic Icons استفاده کنید زیرا در این صورت تنها یک فایل باید بارگذاری شود.

3. اسلش (\) انتهایی را وارد کنید

حذف اسلش آخر بر روی لینک هایی که به وب سایت شما اشاره می کنند، چه از منابع خارجی (تلاش های ایجاد لینک) یا از داخل وب سایت شما، تأثیر نامطلوبی بر سرعت دارد.

اما چگونه:

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

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

https://example.com (نامناسب)

یا

https://example.com/services (بازهم نامناسب)

در مقابل.

https://example.com/ (مناسب)

یا

https://example.com/services/ (این هم مناسب)

4. فشرده سازی را فعال کنید

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

نگران نباشید، بازدیدکنندگان شما نیازی به انجام کار اضافی نخواهند داشت زیرا همه مرورگرهای مدرن از GZIP پشتیبانی کرده و به طور خودکار آن را برای تمام درخواست های HTTP پردازش می کنند.

5. ذخیره سازی (Caching) مرورگر را فعال کنید

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

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

6. فشرده کردن حجم منابع

کوچک کردن فایل‌های CSS و جاوا اسکریپت، فضای خالی و کامنت‌های غیرضروری را حذف می‌کند تا حجم فایل کاهش یابد و در نتیجه زمان لازم برای دانلود آن‌ها کاهش می‌یابد.

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

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

7. اولویت بندی محتوای بالای صفحه

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

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

همچنین گنجاندن هر CSS و جاوا اسکریپتی که برای رندر کردن آن ناحیه به‌جای یک فایل CSS خارجی مورد نیاز است، ضروری است.

8. بهینه سازی فایل های رسانه ای

از آنجایی که دستگاه‌های تلفن همراه مجهز به دوربین‌هایی باکیفیت رایج هستند و سیستم‌های مدیریت محتوای مدرن مانند سامان 360 آپلود تصاویر را راحت می‌کند، بسیاری از افراد می توانند عکسی گرفته و آن را آپلود کنند بدون اینکه بدانند اغلب تصویر حداقل چهار برابر بزرگ‌تر از حدنصاب حجم موجود است.

این امر سرعت وب سایت را به طور قابل توجهی، به ویژه برای کاربران تلفن همراه کند می کند.

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

بهینه سازی تصاویر

• فرمت ایده آل را انتخاب کنید. فرمت JPG برای تصاویر عکاسی عالی است، در حالی که GIF یا PNG برای تصاویر با مناطق بزرگ و رنگ ثابت مناسب تر هستند. فایل های 8 بیتی PNG برای تصاویر بدون کانال آلفا (پس زمینه شفاف) و فایل های 24 بیتی برای تصاویر با کانال آلفا هستند.
• از اندازه مناسب تصاویر اطمینان حاصل کنید. اگر تصویری با عرض 800 پیکسل در وب سایت شما نمایش داده شود، استفاده از یک تصویر با عرض 1600 پیکسل هیچ فایده ای ندارد.
• فایل تصویر را فشرده کنید. علی رغم اینکه Adobe Photoshop برترین برنامه ویرایش تصویر است، قابلیت فشرده سازی تصویر فوق العاده ای دارد. همچنین می‌توانید از ابزارهای آنلاین تیز استفاده کنید.

بهینه سازی ویدیو

• فرمت ایده آل را برای ویدئو انتخاب کنید. MP4 در بیشتر موارد بهترین فرمت است زیرا کوچکترین اندازه فایل را تولید می کند.
• اندازه (ابعاد) بهینه را بر اساس اندازه صفحه نمایش بازدیدکنندگان ارائه دهید.
• اگر از ویدیو در پس‌زمینه به‌عنوان عنصر طراحی استفاده می‌شود، ترک های صوتی را حذف کنید.
• فایل ویدئویی را فشرده کنید. من بیشتر اوقات از Adobe Premiere استفاده می کنم، اما Camtasia نیز انتخاب خوبی است.
• طول ویدئو را کاهش دهید
• به جای اینکه ویدئوها را به صورت محلی ارائه کنید و از کد جاسازی iframe آنها استفاده کنید آنها را در YouTube یا آپارات آپلود نمایید.

البته نباید به این موارد بسنده کنید؛ زیرا اینها فقط ظاهر ماجرا هستند.

برای بهینه سازی واقعی رسانه در وب سایت، باید تصاویر با اندازه مناسب را بر اساس اندازه صفحه نمایش به جای تغییر اندازه آنها ارائه دهید.

بر اساس اجرای یک تصویر، دو راه برای رسیدگی به این موضوع وجود دارد.

• تصاویر درون HTML وب سایت شما را می توان با استفاده از مجموعه src ارائه کرد، که به مرورگر امکان می دهد تا تصویر مناسب را بر اساس اندازه صفحه نمایش دستگاهی که بازدیدکننده استفاده می کند انتخاب، دانلود و نمایش دهد.
• تصاویری که از طریق CSS قرار می‌گیرند، معمولاً به‌عنوان تصاویر پس‌زمینه، می‌توانند با استفاده از پرسش‌های رسانه‌ای برای انتخاب تصویر مناسب بر اساس اندازه صفحه نمایش دستگاهی که بازدیدکننده استفاده می‌کند، ارائه گردند.

9. از Caching و CDN ها استفاده کنید

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