ترفند های افزایش سرعت وب سایت (قسمت ۲)

فکر می‌کنید سرعت بخشیدن به وب‌سایت شما مهم نیست؟
دوباره فکر کنید…

اما چگونه بهینه سازی سرعت وب سایت بر نرخ تبدیل تأثیر می گذارد؟
سایت های کند ، نرخ تبدیل را از بین می برند .
با بهبود سایت خود ، می‌توانید از توصیه‌ها و معیارهای Google برای تعیین اهداف و اندازه گیری عملکرد خود استفاده کنید.

قسمت اول این مطلب را می‌توانید از اینجا مطالعه کنید

۸- ممیزی فشرده سازی را انجام دهید

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

صفحات با تعداد زیادی تصویر و محتوای دیگر اغلب ممکن است بیش از ۱۰۰ کیلوبایت اندازه باشند. در نتیجه بارگیری آنها حجیم و کند است.
با فشرده سازی زمان بارگیری می توانید سرعت آنها را افزایش دهید.
برای درک اینکه چگونه فشرده سازی می تواند سرعت سایت شما را بهبود دهد ، می توانید از GIDNetwork برای انجام ممیزی فشرده سازی استفاده کنید.

فقط URL خود را وارد کنید و روی “بررسی” کلیک کنید. اگر صفحه ای که وارد می کنید فشرده نشود ، چیزی شبیه به این را می بینید:

این به شما اندازه فشرده نشده صفحه شما را می گوید ، که بعداً می توانید از آن به عنوان معیار اندازه گیری نتایج فشرده سازی استفاده کنید.
در زیر آن ، تحلیلی راجع به میزان بالقوه کاهش اندازه صفحه از نظر اندازه و درصد (با استفاده از ابزاری مانند Gzip  که در مرحله بعدی به آن خواهیم رسید) مشاهده خواهید کرد.
این فشرده سازی شامل HTML ، CSS ، JavaScript ، متن ساده و فایل های XML است.

۹- فشرده سازی را فعال کنید

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

Gzip یک فرمت فایل و یک نرم افزار کاربردی است که اساساً رشته های کد مشابه را در پرونده های متنی شما قرار می دهد ، سپس آنها را به طور موقت جایگزین می کند تا پرونده ها کوچکتر شوند.

این با CSS و HTML به خوبی کار می کند ، زیرا این پرونده ها معمولاً کد و فضای خالی مکرر دارند.

اکثر سرورهای وب می توانند فایل ها را با فرمت Gzip قبل از ارسال برای بارگیری فشرده کنند ، یا با تماس با ماژول شخص ثالث یا استفاده از روال داخلی طبق گفته یاهو ، این می تواند حدود ۷۰ درصد از زمان بارگیری را کاهش دهد .
و از آنجا که ۹۰٪ از ترافیک اینترنت امروز از طریق مرورگرهایی پشتیبانی می شود که از Gzip پشتیبانی می کنند ، گزینه بسیار خوبی برای سرعت بخشیدن به سایت شما است.
اگر مطمئن نیستید که سایت شما Gzip را فعال کرده است ، می توانید  برای دیدن از checkgzipcompression.com استفاده کنید. فقط آدرس سایت خود را وارد کنید و اگر Gzip را فعال کرده باشید ، چیزی شبیه به این را خواهید دید:

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

اگر سایت شما از طریق وردپرس اجرا می شود ، هر دو افزونه WP Rocket و W3 Total Cache قابلیت Gzip را پشتیبانی می کنند.

در W3 Total Cache ، تنها کاری که شما باید انجام دهید این است که کادر کنار “Enable HTTP (gzip) compression” را علامت بزنید.

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

همچنین یک وجود دارد نسخه ای مشابه از کد لازم  برای سرورهای Nginx را.

 

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

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

با رفتن به General Settings> Browser Cache و علامت کادر کنار «Enable» می توانید این گزینه را فعال کنید.

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

این ویژگی همچنین تحت تنظیمات عمومی شما است.

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

هنگامی که تنظیمات خود را پیکربندی کردید ، باید بلافاصله بهبودهایی را در زمان بارگذاری خود مشاهده کنید. W3 Total Cache ادعا می کند که کاربران آن ۱۰ برابر بهبود یافته در نتایج Google PageSpeed ​​و پس از پیکربندی کامل افزونه تا ۸۰ درصد در پهنای باند صرفه جویی کرده اند.

اگر یک سایت HTML ثابت دارید ، می توانید caching را در پرونده .htaccess خود فعال کنید.

می توانید خطوطی از کد را اضافه کنید که به مرورگرها می گوید چه چیزی را برای ذخیره سازی و مدت زمان ذخیره آن ذخیره کنید ، که شبیه به این موارد خواهد بود :

د تنظیم کنید.

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

برای همه منابع قابل cache مانند پرونده های JavaScript و CSS ، پرونده های تصویری ، پرونده های رسانه ای و PDF ، حافظه پنهان را بین حداقل یک هفته تا یک سال تنظیم کنید.

 

۱۱- اندازه های تصویر را کاهش دهید
تصاویر می توانند نقش اصلی در بهبود سرعت سایت شما داشته باشند. آنها اغلب پرونده های بسیار بزرگی هستند که می توانند زمان بارگذاری صفحه را کند کنند.

اما حذف کامل آنها یک گزینه نیست.

این را در نظر بگیرید: میانگین تبدیل وب سایت تجارت الکترونیکی حدود ۱-۳٪ است.
اما این تعداد می تواند برای برخی از سایت ها تا ۵ درصد افزایش یابد ، مانند NatoMounts  – که میانگین نرخ تبدیل را حدود ۵ درصد می داند ، با تقریبا ۸۵ درصد از آن تبدیل ها در تلفن همراه.

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

این بدان معناست که اگر می خواهید یک سایت تجارت الکترونیکی موفق اجرا کنید ، تصاویر کاملاً ضروری هستند.

این همچنین به معنی فشرده سازی تصویر بسیار مهم است  – و این مهم است که سایت شما شامل فروشگاه تجارت الکترونیک است یا نه.
با ابزاری مانند   Pingdomمی توانید ببینید که تصاویر تأثیرگذاری در هر یک از صفحات شما چقدر بزرگ است . تست سرعت صفحه را انجام دهید ، سپس به “درخواست ها براساس نوع محتوا” نگاه کنید.

در این مثال می بینید که تصاویر بیش از ۴۰٪ محتوای صفحه را تشکیل می دهند .

 

در حقیقت ، در یک مطالعه ، تغییر اندازه ۲۲ مگابایت تصاویر به ۳۰۰ کیلوبایت منجر به کاهش ۷۰ درصدی زمان تعامل یا مدت زمانی شد که کاربر باید قبل از تعامل با یک سایت منتظر بماند.

یکی از ساده ترین راه ها برای کاهش اندازه پرونده های تصویر ، برش تصاویر در اندازه مناسب است. به عنوان مثال ، اگر می خواهید تصویری به عرض ۵۷۰ پیکسل ظاهر شود ، اندازه تصویر را به همان عرض تغییر دهید.

فقط تصویری با عرض ۲۰۰۰px بارگذاری نکنید و پارامتر width را به اندازه دلخواه تنظیم کنید. این کار به صفحه شما نیاز دارد تا تصویر کامل را بارگیری کند ، سپس آن را در اندازه مناسب تنظیم کرده و باعث کند شدن صفحه شود.
اگر از پارامتر width برای کوچکتر نشان دادن تصاویر در سایت خود استفاده می کنید ، تغییر اندازه آن باید در اولویت باشد. این یک روش آسان برای کاهش اندازه کل هر صفحه است و می تواند تأثیر زیادی در سرعت سایت شما داشته باشد.

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

کادر کنار «به صورت خودکار تصاویر من در هنگام بارگذاری خرد شوند» را علامت بزنید تا تمام تصاویر جدید شما بدون یک ثانیه اضافی فشرده شوند.

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

اگر از وردپرس استفاده نمی کنید ، می توانید از یک ابزار غیر وردپرس مانند Compressor.io استفاده کنید.

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

 

(اگر مطمئن نیستید کدام یک از بهترین هاست ، به خواندن ادامه دهید – فقط در عرض یک دقیقه به آن خواهیم رسید.)

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

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

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

شما چند گزینه مختلف دارید و متداول ترین آنها JPG ، PNG و GIF است .

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

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

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

از طرف دیگر ، PNG ها از فشرده سازی بدون ضرر استفاده می کنند. این به این معنی است که وقتی تصویری را به عنوان PNG ذخیره می کنید ، هیچ داده ای را از دست نمی دهید و اندازه پرونده بدست آمده از JPG بزرگتر است.
اگر شما نیاز به داشتن خطوط روشن و جزئیات واضح دارید ، PNG راهی است که باید دنبال کنید. این بهترین گزینه برای آرم ها ، تصاویر صفحه ، تصاویر هنری و سایر گرافیک های دقیق است.
سرانجام ، از GIF باید فقط برای گرافیک های کوچک یا ساده کمتر از ۱۰ × ۱۰ پیکسل ، یک پالت رنگی با ۳ رنگ یا رنگ کمتر و برای تصاویر متحرک استفاده شود.
هنگامی که اندازه ها و فرمت های تصویر خود را درست کردید ، می توانید از درست بودن کدی که برای پیاده سازی آنها استفاده می کنید نیز اطمینان حاصل کنید. به خصوص ، اطمینان حاصل کنید که از کدهای خالی src تصویر خودداری کنید.
در HTML ، کد یک تصویر شامل این موارد است:

<img src = “”>

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

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

۱۲- از CDN استفاده کنید
فراتر از سرور میزبان سایت شما ، می توانید از شبکه های دیگر سرورها برای کاهش زمان بارگذاری بازدیدکنندگان خود استفاده کنید.

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

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

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

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

CDN یا شبکه تحویل محتوا می تواند به شما در رفع این مشکلات کمک کند.

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

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

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

در یک آزمایش ، VentureHarbor کاهش زمان بارگیری را از ۲۰-۵۱  – – برای ۲۰ دقیقه کار گزارش کرد.

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

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

از طرف دیگر ، Cloudflare خدمات CDN را با ویژگی های امنیتی و بهینه سازی ترکیب می کند.

موردی که انتخاب می کنید بستگی به این دارد که آن ویژگی های اضافی را می خواهید یا فقط می خواهید روی بهبود سرعت تمرکز کنید.

و به هر صورت ، راه اندازی  یک روند بسیار سریع است.

اگر با MaxCDN کار کنید ، با ایجاد یک “منطقه کشش” شروع می کنید. روی “مناطق” در پنل مدیریت کلیک کنید.

سپس ، روی “ایجاد منطقه کشش” یا “Create Pull zone” کلیک کنید.

در اینجا ، شما باید URL اصلی سرور خود را وارد کنید ، و همچنین یک نام و برچسب برای منطقه کشش خود وارد کنید.

بعد از کلیک روی ایجاد ، یک URL برای CDN خود خواهید دید ، مانند cdn.yourdomain.netdna-cdn.com. این را در دفترچه یادداشت یا جایی دیگر کپی کنید که به راحتی در دسترس باشد.  (چند دقیقه دیگر به آن نیاز خواهید داشت)

در مرحله بعدی ، باید با کلیک روی دکمه “مدیریت” در کنار منطقه کشش خود ، “منطقه محتوا” ایجاد کنید. روی «تنظیمات» کلیک کنید و چندین زیر دامنه را در قسمتهای «دامنه های سفارشی» وارد کنید.

اینها معمولاً باید cdn.yourdomain.com، cdn1.yourdomain.com، cdn1.yourdomain.com، cdn3.yourdomain.com و غیره باشد.

 

(این قالب نام گذاری یک روش استاندارد است و به یاد آوردن ساده ترین روش آن است که اگر مشکلی پیش آمد یا نیاز به مشورت با توسعه دهنده داشتید)

می توانید حداکثر هفت دامنه سفارشی اضافه کنید ، سپس روی «به روزرسانی» کلیک کنید.

سپس ، باید CDN جدید خود را از طریق ویرایشگر DNS ارائه دهنده میزبانی خود به سایت خود اضافه کنید. مکان دقیق براساس ارائه دهنده متفاوت است ، اما در بیشتر موارد ، می توانید ویرایشگر DNS را در زیر فهرست “دامنه ها” خود پیدا کنید.

در Bluehost به این منو “Zone Editor” گفته می شود. اگر از Bluehost استفاده می کنید ، قسمت های مورد نیاز شما به این شکل خواهد بود.

URL را که MaxCDN ارائه داده است وارد کنید، نوع را روی “CNAME” و یکی از دامنه های سفارشی CDN که ایجاد کرده اید تنظیم کنید.

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

و اگر می خواهید از Cloudflare استفاده کنید ، روند کار را حتی ساده تر هم میتوانید انجام دهید.

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

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

برنامه مورد نظر خود را انتخاب کنید ، سپس روی “پردازش و ادامه” کلیک کنید.

سپس ، سرورهای نام Cloudflare را برای دامنه خود مشاهده خواهید کرد. در مرحله بعدی ، باید سرورهای نام دامنه خود را به روز کنید.
شما باید این کار را از طریق ثبت کننده دامنه خود انجام دهید. وارد ثبت کننده شوید و به سوابق سرور نام خود بروید.
این برای هر ثبت کننده متفاوت است. به عنوان مثال ، با Bluehost می توانید با رفتن به “Domain Manager” ، سپس کلیک کردن روی برگه “Name Server” آن را پیدا کنید.

سپس ، تنظیمات برگزیده خود را به “استفاده از سرورهای نام سفارشی” تغییر دهید و سرور نامی که Cloudflare ارائه کرده را کپی و پیست کنید.
تغییرات خود را ذخیره کنید ، سپس به داشبورد Cloudflare برگردید تا تأیید کنید CDN خود را به درستی نصب کرده اید. روی برگه “نمای کلی” کلیک کنید ، و اگر CDN شما در حال اجرا است ، کد وضعیت “فعال” را مشاهده خواهید کرد.

در این صورت ، CDN  شما فعال است

آخرین مرحله ای که می خواهید بردارید تأیید بودن سوابق SSL شما است. برای بررسی صحت وجود سوابق SSL ، روی برگه “Crypto” کلیک کنید. شما باید یکی برای دامنه ریشه خود ، و یک رکورد ساب دامنه wildcard مشاهده کنید.
اگر هنوز این سوابق و تغییرات را نمی بینید ، ممکن است تا ۲۴ ساعت طول بکشد تا ظاهر شوند.
اما پس از انجام این کار، CDN شما در حال ارائه نسخه ایمن سایت شماست – دقیقاً مثل سرور اصلی!