طراحی سایت با کاربرد
10. کش مرورگر را فعال کنید
هنگامی که از یک وب سایت بازدید می کنید، عناصر صفحه ای که بازدید می کنید در هارد دیسک شما در یک کش یا حافظه موقت ذخیره می شوند.
این بدان معناست که دفعه بعد که از سایت بازدید می کنید، مرورگر کاربرد شما می تواند صفحه را بدون ارسال درخواست HTTP دیگری به سرور بارگذاری کند.
در اینجا نحوه توضیح Tenni Theurer، سابقاً یاهو آمده است:
اولین باری که شخصی به وب سایت شما می آید، قبل از اینکه بتواند از صفحه شما استفاده کند، باید سند HTML، شیوه نامه ها، فایل های جاوا اسکریپت و تصاویر را دانلود کند. این ممکن است 30 مؤلفه و 2.4 ثانیه باشد.
تصویر چسبانده شده 0 3
هنگامی که صفحه بارگیری شد و اجزای مختلف در حافظه پنهان کاربر ذخیره شدند، برای بازدیدهای بعدی فقط چند مؤلفه باید دانلود شوند.
در آزمایش Theurer، این تنها سه جزء و 0.9 ثانیه بود که تقریباً 2 ثانیه از زمان بارگذاری کاهش یافت.
تصویر چسبانده شده 0 13
Theurer می گوید که 40 تا 60 درصد از بازدیدکنندگان روزانه سایت شما با حافظه پنهان خالی وارد می شوند، بنابراین بسیار مهم است که صفحه خود را برای این بازدیدکنندگانی که برای اولین بار بازدید می کنند سریع کنید. اما فعال کردن حافظه پنهان می تواند زمان قابل توجهی از بازدیدکنندگان بازگشتی را کاهش دهد و تجربه کاربری بهتری را ارائه دهد.
نحوه تنظیم کش بستگی به این دارد که سایت خود را با وردپرس یا HTML ایستا اجرا کنید.
با W3 Total Cache سرعت وب سایت خود را در وردپرس افزایش دهید
اگر یک سایت وردپرسی دارید، می توانید از افزونه ای مانند W3 Total Cache استفاده کنید تا به راحتی کش را فعال کنید.
پس از نصب آن، در قسمت «تنظیمات عمومی» به «حافظه پنهان صفحه» بروید و کادر کنار «فعال کردن» را علامت بزنید.
کش صفحه w3
این مرحله ساده به خودی خود باید عملکرد سایت را افزایش دهد – اما کارهای بیشتری وجود دارد که می توانید برای بهبود نتایج خود با این افزونه انجام دهید.
فعال کردن کش مرورگر به شما امکان می دهد نسخه کش شده سایت خود را در مرورگر بازدیدکننده ذخیره کنید. این بدان معناست که وقتی کاربر به سایت شما باز می گردد، سریعتر بارگذاری می شود.
میتوانید این گزینه را با رفتن به تنظیمات عمومی > حافظه پنهان مرورگر و علامت زدن کادر کنار «فعال کردن» فعال کنید.
کش مرورگر
اگر از VPS یا سرور اختصاصی استفاده میکنید، میتوانید برای افزایش سرعت عناصر پویا در سایت خود، ذخیره شی را نیز فعال کنید.
این ویژگی همچنین در تنظیمات عمومی شما قرار دارد.
کش شی
با این حال، اگر از یک سرور اشتراکی استفاده می کنید، بهتر است این گزینه را غیرفعال کنید. کش کردن اشیاء یک فرآیند فشرده منابع است و می تواند منجر به کاهش سرعت سایت شما شود - دقیقا برعکس آنچه می خواهید با افزونه انجام دهید.
هنگامی که تنظیمات خود را پیکربندی کردید، باید فوراً بهبودهایی را در زمان بارگذاری خود مشاهده کنید. W3 Total Cache ادعا می کند که کاربران آن 10 برابر پیشرفت در نتایج Google PageSpeed و تا 80٪ در پهنای باند پس از پیکربندی کامل افزونه صرفه جویی کرده اند.
اگر یک سایت HTML ایستا دارید، می توانید کش کردن توسط در فایل htaccess. خود را فعال کنید.
میتوانید خطوط کدی را اضافه کنید که به مرورگرها میگوید چه چیزی را در حافظه پنهان نگه دارند و چه مدت آن را ذخیره کنند، که چیزی شبیه به این خواهد بود:
htaccess کش وب سایت خود را سرعت بخشید
این به شما امکان میدهد مدت زمانی را که میخواهید هر نوع فایل در حافظه پنهان یک بازدیدکننده ذخیره شود، تنظیم کنید.
به طور کلی، منابع استاتیک باید حداقل یک هفته طول عمر کش داشته باشند. منابع شخص ثالث مانند تبلیغات یا ویجت ها باید حداقل یک روز طول عمر کش داشته باشند.
برای همه منابع قابل کش مانند فایلهای جاوا اسکریپت و CSS، فایلهای تصویری، فایلهای رسانهای و PDF، حافظه پنهان را حداقل بین یک هفته تا یک سال تنظیم کنید.
11. اندازه تصویر را کاهش دهید
تصاویر می توانند نقش مهمی در سرعت سایت شما داشته باشند. آنها اغلب فایل های بسیار بزرگی هستند که می توانند زمان بارگذاری صفحه را کاهش دهند.
اما حذف کامل آنها یک گزینه نیست.
این را در نظر بگیرید: میانگین تبدیل وب سایت تجارت الکترونیک در حدود 1-3٪ است.
اما این عدد برای برخی از سایتها مانند NatoMounts میتواند تا 5 درصد افزایش یابد - که میانگین نرخ تبدیل آن در حدود پنج درصد است که تقریباً 85 درصد از این تبدیلها در تلفن همراه است.
یکی از بهترین راهها برای رساندن نرخ تبدیل به این سطح، شامل تعداد زیادی تصاویر مفید محصول است. در یک نظرسنجی، 66 درصد از مصرف کنندگان گفتند که می خواهند قبل از خرید حداقل سه عکس محصول را ببینند.
این بدان معنی است که اگر می خواهید یک سایت تجارت الکترونیک موفق را راه اندازی کنید، تصاویر کاملاً ضروری هستند.
این همچنین به این معنی است که فشرده سازی تصویر بسیار مهم است - و این مهم است که آیا سایت شما دارای یک فروشگاه تجارت الکترونیک است یا خیر.
با ابزاری مانند Pingdom میتوانید ببینید که تصاویر چقدر روی هر یک از صفحات خود تأثیر میگذارند. تست سرعت صفحه را اجرا کنید، سپس به «درخواستها بر اساس نوع محتوا» نگاه کنید.
در این مثال می بینید که تصاویر بیش از 40 درصد از محتوای صفحه را تشکیل می دهند.
درصد تصویر
کاهش اندازه آنها احتمالاً می تواند تأثیر زیادی بر مدت زمان بارگذاری صفحه داشته باشد.
در واقع، در یک مطالعه، تغییر اندازه 22 مگابایت تصاویر به 300 کیلوبایت منجر به کاهش 70 درصدی زمان تعامل یا مدت زمانی که کاربر برای تعامل با یک سایت باید منتظر بماند، شد.
فشرده سازی تصویر تاثیر گذار
یکی از سادهترین راهها برای کاهش اندازه فایلهای تصویر، برش دادن تصاویر به اندازه صحیح است. به عنوان مثال، اگر می خواهید یک تصویر با عرض 570 پیکسل ظاهر شود، اندازه تصویر را به آن عرض تغییر دهید.
فقط آپلود نکنیدتصویری با عرض 2000 پیکسل و پارامتر عرض را به اندازه دلخواه تنظیم کنید. برای این کار، صفحه شما باید تصویر کامل را بارگیری کند، سپس آن را به اندازه مناسب تنظیم کنید و صفحه شما را کندتر کند.
اگر از پارامتر عرض برای کوچکتر نشان دادن تصاویر در سایت شرکت کاربرد خود استفاده می کنید، تغییر اندازه آن تصاویر باید در اولویت باشد. این یک راه آسان برای کاهش اندازه کل هر صفحه است و می تواند تأثیر زیادی بر سرعت سایت شما داشته باشد.
در مرحله بعد، می توانید فایل های تصویری خود را با چند ابزار مختلف فشرده کنید.
اگر سایت شما بر روی وردپرس اجرا می شود، WP Smush یک گزینه عالی است.
کادر کنار «Automatically smush my images on upload» را علامت بزنید و همه تصاویر جدید شما بدون یک ثانیه کار اضافی فشرده می شوند.
همچنین میتوانید از این افزونه برای تغییر اندازه خودکار تمام فایلهای جدیدی که آپلود میکنید استفاده کنید. حداکثر عرض و ارتفاع را تنظیم کنید، و هر تصویری که از آنها فراتر رود "مشکل" خواهد شد.
سرعت وب سایت خود را wp smush افزایش دهید
اگر از وردپرس استفاده نمی کنید، می توانید از ابزار غیر وردپرسی مانند Compressor.io استفاده کنید.
قبل از افزودن یک تصویر به سایت خود، آن را در این ابزار آپلود کنید و انتخاب کنید که فشرده سازی با اتلاف یا اتلاف می خواهید.
کمپرسور io
(اگر مطمئن نیستید که کدام بهترین است، به خواندن ادامه دهید - فقط در یک دقیقه به آن خواهیم رسید.)
سپس، میتوانید اطلاعاتی درباره کاهش حجم فایل مشاهده کنید و بتوانید فایل جدید و کوچکتر را دانلود کنید.
نتایج کمپرسور IO
پس از اینکه فایل تصویری جدید را ذخیره کردید، می توانید آن را در سایت خود آپلود کنید.
در مرحله بعد، همچنین باید مطمئن شوید که از انواع فایل های مناسب برای هر تصویر استفاده می کنید. این ممکن است یک نگرانی جزئی به نظر برسد، اما انواع فایلهایی که استفاده میکنید میتوانند بر اندازه هر فایل تأثیر بگذارند.
شما چند گزینه مختلف دارید و رایج ترین آنها JPG، PNG و GIF هستند.
انواع فایل های تصویری
JPG به طور کلی بهترین گزینه شما برای عکس است. از فشرده سازی با اتلاف استفاده می کند، به این معنی که برخی از داده های یک تصویر هنگام ذخیره در این فرمت از بین می روند.
این از دست دادن اطلاعات برای بینندگان در عکسها غیرقابل تشخیص است، اما باعث میشود اندازه فایل کوچکتر از اکثر انواع فایلهای تصویری باشد.
بنابراین اگر صفحاتی با تعداد زیادی عکس آپلود می کنید، مطمئن شوید که همه آنها JPG هستند می تواند زمان بارگذاری را به میزان قابل توجهی کاهش دهد، بدون اینکه اصلاً بر ظاهر آنها تأثیر بگذارد.
از طرف دیگر PNG ها از فشرده سازی بدون تلفات استفاده می کنند. این بدان معناست که وقتی تصویری را به صورت PNG ذخیره میکنید، هیچ دادهای را از دست نمیدهید و اندازه فایل حاصل بزرگتر از JPG است.
اگر نیاز به داشتن خطوط واضح و جزئیات واضح دارید، PNG راهی برای رفتن است. این بهترین گزینه برای لوگوها، اسکرین شات ها، لاین آرت و سایر گرافیک های دقیق است.
در نهایت، GIF ها فقط باید برای گرافیک های کوچک یا ساده کمتر از ۱۰×۱۰ پیکسل، یک پالت رنگی با ۳ رنگ یا کمتر، و برای تصاویر متحرک استفاده شوند.
هنگامی که اندازه ها و فرمت های تصویر خود را درست کردید، می توانید مطمئن شوید که کدی که برای پیاده سازی آنها استفاده می کنید نیز درست است. به ویژه، مطمئن شوید که از کدهای خالی تصویر src اجتناب کنید.
در HTML، کد یک تصویر شامل موارد زیر است:
<img src=””>
هنگامی که هیچ منبعی در علامت نقل قول وجود ندارد، مرورگر درخواستی را به دایرکتوری صفحه یا خود صفحه واقعی ارسال می کند. این می تواند ترافیک غیر ضروری را به سرورهای شما اضافه کند و حتی داده های کاربر را خراب کند.
خوشبختانه، این یک راه حل آسان برای ایجاد است. یا مسیر فایل تصویری را که می خواهید اضافه کنید اضافه کنید، یا برچسب های اضافی را به طور کلی حذف کنید.
12. از CDN استفاده کنید
علاوه بر سروری که سایت شما را میزبانی می کند، می توانید از شبکه های دیگر سرورها نیز برای کاهش زمان بارگذاری برای بازدیدکنندگان خود استفاده کنید.
وقتی سایت شما روی یک سرور میزبانی می شود، هر کاربری که از آن بازدید می کند درخواست هایی را به همان سرور ارسال می کند.
این بدان معناست که وقتی سایت شما ترافیک بالایی را تجربه می کند، زمان پردازش هر درخواست افزایش می یابد و زمان بارگذاری برای همه آنها کاهش می یابد.
وقتی در نظر بگیرید که زمانهای پرترافیک معمولاً پتانسیلهای رشد زیادی را برای کسبوکار شما ارائه میکنند، این ایدهآل نیست.
بعلاوه، برای کاربرانی که از نظر فیزیکی دورتر از سرور شما هستند، زمان بارگذاری بیشتر است زیرا اطلاعات فاصله بیشتری برای سفر دارند - حتی زمانی که ترافیک زیادی را تجربه نمی کنید.
یک CDN یا شبکه تحویل محتوا می تواند به شما در رفع این مشکلات کمک کند.
با CDN، سایت خود را در یک شبکه جهانی از سرورها ذخیره می کنید. وقتی مرورگر کاربر فایل هایی را از سایت شما درخواست می کند، این درخواست به نزدیکترین سرور ارسال می شود.
به عنوان مثال، فرض کنید سرور اصلی شما در کالیفرنیا است، اما از یک CDN برای میزبانی فایل ها در سطح جهانی استفاده می کند. شبکه شما ممکن است چیزی شبیه به این باشد:
نقشه cdn
اگر کاربری از آفریقای جنوبی از سایت شما بازدید کند، مرورگر thir میتواند فایلها را از سرور مجاور دانلود کند.
محتوایی که کاربر دریافت میکند یکسان است، اما میتواند بسیار سریعتر از زمانی که مرورگر آنها به سروری که از نظر جغرافیایی دور است، درخواست میکند بارگیری شود. این تاخیر بارگذاری و مشکلات تاخیری را که کاربرانی که دور از سرورهای میزبانی قرار دارند، گاهی اوقات با آن مواجه میشوند، حذف میکند.
در یک آزمایش، VentureHarbor کاهش در زمان بارگذاری را بین 20 تا 51 درصد گزارش کرد - برای 20 دقیقه کار.
ventureharbor cdn
بهبودهای دقیق بین صفحات متفاوت است، با صفحاتی که تصاویر بزرگ زیادی دارند بیشترین سود را از CDN می برند.
اگر می خواهید از CDN استفاده کنید، بهترین گزینه های شما MaxCDN و Cloudflare هستند.
MaxCDN یک CDN کامل است، به این معنی که فقط خدمات CDN را ارائه می دهد. آنها مراکز داده بیشتری دارند و تنها بر روی بهبود زمان بارگذاری تمرکز می کنند.
از طرف دیگر، Cloudflare سرویس CDN را با ویژگی های امنیتی و بهینه سازی ترکیب می کند.
گزینه ای که انتخاب می کنید بستگی به این دارد که آیا آن ویژگی های اضافی را می خواهید یا فقط می خواهید روی بهبود سرعت تمرکز کنید.
و در هر صورت، راه اندازی یک فرآیند نسبتاً سریع است.
اگر از MaxCDN استفاده می کنید، با ایجاد یک "منطقه کشش" شروع می کنید. در پنل مدیریت روی "مناطق" کلیک کنید.
نظرات
ارسال یک نظر