معرفی سایت GTmetrix و اهمیت بالا بودن سرعت سایت

در این مقاله قرار است ابزار بی‌نظیر جی تی متریکس GTMetrix را معرفی کنیم. بعد از معرفی سایت GTMetrix.com و گفتن یک سری از ویژگی‌های عالی این ابزار آنلاین سرعت سایت، به مبحث اهمیت بهبود سرعت وسئو سایت می‌پردازیم که چرا باید به افزایش سرعت سایتمان اهمیت بدهیم و نقش سایت جی تی متریکس در کجای این ماجرا قرار دارد.

آشنایی با سایت جی تی متریکس

مقدمه – ابزارهای آنلاین

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

معرفی سایت GTmetrix.com

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

بررسی قسمت‌های مختلف سایت GTmetrix

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

قسمت-های-مختلف-سایت-جی تی متریکس

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

تشریح قسمت‌های مختلف سایت GTmetrix

در قسمت Performance Scores آدرس سایت آنالیز شده، تاریخ آنالیز سایت و مکان سرور آنالیزکننده، و همچنین در قسمت Using نوع مرورگری که با آن سایت شما آنالیز شده و رتبه سایت شما درج شده است.

PageSpeed Score

در این قسمت به فاکتورهایی که گوگل برای بهینه سازی لود یک سایت مدنظر دارد را سایت GTmetrix بررسی میکند و سایت سئوراز امتیاز 96 از 100 و درجه A را گرفته است. و همینطور میانگین کلی Pagespeed سایت‌ها 70 درصد است.

YSlow Score

در این قسمت به فاکتورهایی که یاهو برای بهینه سازی لود یک سایت مدنظر دارد را سایت GTmetrix بررسی میکند و سایت سئوراز امتیاز 94 از 100 و درجه A را گرفته است.. YSlow ابزار و استانداردهای یاهو میباشد و میانگین کلی YSlow سایت‌ها 68 درصد است. البته باید خاطر نشان کرد که ممکن است در آینده نزدیک این قسمت از سایت GTmetrix حذف شود چرا که دیگر سیاست‌های یاهو زیر تغییر کرده است.

Fully Loaded Time

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

Total Page Size

حجم یک صفحه یا سایتی که جی تی متریکس مورد بررسی قرار داده و میانگین کلی سایت‌های مورد بررسی قرار گرفته 2.56MB است و سایت سئوراز فقط 629KB حجم دارد و تقریبا 5 برابر کمتر از میانگین کل.

Requests

تعداد درخواست‌هایی که به سرور برای بارگزاری قسمت‌های گوناگون سایت ارسال میشود شامل عکس‌ها فایلهای css و یا js . و میانگین کلی آن 86 درخواست است و سایت سئوراز فقط با 27 درخواست کل صفحه را لود میکند. توجه داشته باشید که هر چه تعداد درخواست‌های رد و بدل شده بین سرور و مرورگر کمتر باشه هم فشار کمتری به سرور وارد می‌شود و هم سرعت سایت بالاتر می‌رود.

PageSpeed

اطلاعات بدست اومده از بررسی سایت با الگوریتم های گوگل را با جزئیات بیشتر به همراه اخطارها نشان می‌دهد.

YSlow

اطلاعات بدست اومده از بررسی سایت با الگوریتم های یاهو را با جزئیات بیشتر به همراه اخطارها نشان می‌دهد.

Waterfall

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

Timings

در این پنل که جدیدا اضافه شده زمان onload را نشان میدهد، توجه داشته باشید که onload به بارگزاری اولیه سایت گفته میشود و Fully load به بارگزاری کامل یک وب سایت گویند. و همچنین مقدار زمان اولین درخواست انجام شده (TTFB) را نشان می‌دهد.

Video

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

History

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

رفع خطای Avoid bad requests

در این جلسه قصد داریم درباره مشکل رایجAvoid bad requests صحبت کنیم و ببینیم چطور میتونیم این مشکل را درساخت سایت پیدا و رفع کنیم و علت اصلی به وجود اومدن آن چیه تا باعث کاهش بهینه سازی سایت ما نشه. با ما همراه باشید.

خلاصه‌ای از خطا

Avoid bad requests چیست؟

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

مرورگر: من به این عکس نیاز دارم
سرور: من چنین عکسی رو ندارم
مرورگر: پس چرا در سند HTML چنین عکسی رو صدا کردن؟
سرور: خب ندارم من خیلی گشتم ولی پیدا نکردم

bad-requests

پیغام خطای 404

همه ما با خطای 404 تا به حال روبه‌رو شده‌ایم و وقتی به این خطا برمیخوریم که فایلی وجود نداشته باشد، حال وقتی bad requests به وجود میاد که کاربر با خطای 404 یا پیدا نشدن صفحه‌ای روبه‌رو بشود، خطای 404 یک پاسخ استاندارد HTTPاست که نشان می‌دهد کاربر توانایی برقراری با سرور را دارد اما سرور نمی‌تواند درخواست گرفته شده از سمت کاربر را پیدا کند.
در این حالت سرور صفحه خطایی با عنوان “404 Not Found” تولید می‌کند وقتی کاربر به دنبال لینک شکسته شده یا لینک مرده است.

 خطای Avoid bad requests چگونه پیدا کنیم؟

بسیاری از اوقات خطاهای bad requests بسیار آشکار هستند مانند زمانی که یک تصویر قرار هست در جایی باشد ولی نیست، و نبودن یک تصویر مثلا در بکگراند (background) بسیار آشکار و معلوم است.
خیلی وقت‌ها هم ممکن است از خطای bad requests هیچ نشانه‌هایی نمایان نشود، پس همیشه سعی داشته باشید از لود شدن و فراخوانی فایل‌هایی که لازم نیست در آن صفحات لود شوند اجتناب کنید، منظورم از فایل‌ها همان عکس‌هایی که مورد استفاده قرار نمی‌گیرند یا فایل‌های CSS و JS که لازم به لود آنها نیست، این امر کمک بسیاری به طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) شما در بالا بردن هر چه سریع‌تر پاسخ از سمت سرور می‌کند و باعث می‌شود با این خطا کمتر روبه‌رو شوید و نتیجه آن افزایش سرعت سایت وردپرس یا هر CMS دیگری و نیز بهبود سئو سایت خواهد بود.
با استفاده از ابزارهای page speed tool همانند سایت جی تی متریکس، سایت pingdom و webpagetest شما می‌توانید صفحات مورد نظر خود را بررسی کنید و بهترین راه و مطمئن‌ترین ابزاری است که میتوان برای پیدا کردن این خطاها استفاده کرد ولی در کل میتوان از ابزار Inspect در مرورگرها هم استفاده کرد به این منظور اول باید صفحه‌ای که قصد دارید خطاهای آن را جویا شوید رفته و سپس کلیک راست کرده و گزینه Inspect  را انتخاب کنید، در قسمت Console شما میتوانید خطاهای موجود را با رنگ قرمز مشاهده نمایید.

چگونه مشکل Avoid bad requests را رفع کنیم؟

گاهی رفع خطاهای bad requests بسیار راحت‌تر از پیدا کردن ‌انهاست. اگر شما با یک یا چند خطای bad requests روبه‌رو شدید کافیست آن خط کدی که در حال فراخوانی یک فایل (فایلی که سمت سرور وجود ندارد) است را حذف کنید یا یک جایگزین مناسب برای آن فایل ایجاد کنید، مثلا اگر صفحه شما یک عکسی را فراخوانی می‌کند یا به اصطلاح آن را صدا می‌زند، اما عکس وجود ندارد، کافیست آدرس “src” که یکی از اتریبیوت‌های img است را تغییر داده و آدرس یک عکس دیگر را بدهید یا کلا کدهای فراخوانی آن عکس را حذف کنید تا مشکل درخواست بد به وجود نیاید.

روش اشتباه برای حل خطا Avoid bad requests

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

رفع خطای Avoid CSS @import

در این جلسه قصد داریم درباره مشکل رایج AvoidCSS @import صحبت کنیم و ببینیم چطور میتونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و و چرا اصلا این موضوع برای افزایش سرعت سایت ما مشکل‌ساز است. با ما همراه باشید.

خلاصه‌ای از خطا

Avoid CSS @import چیست و چگونه کار میکند؟

import-css

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

چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟

دلایل زیادی این موضوع داره که یکی از آن‌ها لود موازی است، در پروژه‌های بزرگ که از فایل‌های استایل‌دهی زیادی استفاده می‌کنند و لازم است که در جاهای مختلف فایل‌های CSS رافراخوانی کنند و اگر از @import برای فراخوانی فایل‌های css استفاده کنیم فایل‌ها به شکل پشت سر هم لود می‌شوند یعنی اگر ما دو بار از این دستور برای فراخوانی فایل‌های استایل‌دهی استفاده کنیم فایل دوم لود نمی‌شود تا زمانی که فایل اول کامل لود شود و این موضوع می‌تواند مشکلاتی را به دلیل طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی، قیمت طراحی سایت) در زمان بارگزاری و کاهش بالا رفتن سرعت سایت به موجود اورد و باعث می‌شود صفحه ما کندتر لود بشود درواقع با این روش لود موازی را از دست می‌دهیم. و از طرف دیگر استفاده از این دستور ذکر شده از نظر بهینه سازیو سئو خطا است و موتورهای جستجو مانند گوگل و سایر موتورهای جستجو نمره منفی به سئو داخلی سایت می‌دهند.

جایگزین مناسب CSS @import

با ابزارهای آنلاین می‌توان به راحتی فایل‌هایی که به شکل @import فراخوانی شده‌اند را پیدا کرد و یکی از بهترین ابزارهای آنلاین سایت GTmetrix است و بعد از زدن آدرس سایت در بخش مربوط به Avoid CSS @import خطاها را پیدا کنید و از جایگزین‌های بهتر همانند دستور زیر استفاده کنید و در بخش head سایت فراخوانی کنید و یا اینکه اگه امکانش بود با فایل‌های CSS دیگر ادغام کنید. در آینده نحوه ادغام صحیح فایل‌های CSS را در دوره GTmetrix اشاره خواهیم کرد.

رفع خطاهای Avoid landing page redirects و Minimize Redirects و Avoid URL redirects

در این مقاله قصد داریم درباره مشکلات رایج Avoid Landing Page Redirects و Minimize Redirects در PageSpeed گوگل و همینطور مشکلAvoid URL redirects در YSlow یاهو صحبت کنیم و ببینیم چطور میتونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه‌سازیسایت ما مشکل‌ساز است.

هر سه خطای ذکر شده به یک موضوع اشاره می‌کند در Minimize Redirects (حداقل رساندن تغییر مسیرها) و Avoid URL redirects (عدم استفاده از آدرس ریدایرکت شده) اشاره به کل صفحات در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) دارد ولی در خطای Avoid Landing Page Redirects (جلوگیری از ریدایرکت صفحات فرود) بیشتر اشاره به صفحات و پست‌هایی دارد که اهمیت بالایی برای ما دارند و جز صفحات فرود یا لندینگ پیج (لندینگ پیج چیست) ما محسوب می‌شوند. ما در ادامه مقاله به بررس خطا Avoid Landing Page Redirects و مشکلاتی که ممکن است به وجود آورد می‌پردازیم و با رعایت نکات گفته شده می‌توانید خطاهای موجود در Minimize Redirects و Avoid URL redirects را هم رفع کنید.

خلاصه‌ای از خطا Avoid Landing Page Redirects

تغییر مسیر یا Redirect چیست؟

تغییر مسیر، ریدایرکت یا به انگلیسی Redirect هر سه یک معنا دارد، تغییر مسیرها دستورالعمل‌ها یا روش‌هایی هستند که به‌صورت خودکار بازدیدکنندگان را از یک فایل به فایل یا مکان دیگری منتقل می‌کنند. یا به‌عبارت‌دیگر از یک آدرس (URL) به آدرس دیگر منتقل می‌شود. ریدایرکت به روش‌های متفاوتی انجام می‌شوند. هر یک از این روش‌ها به‌گونه‌ای به‌سرعت صفحه شما آسیب می‌زنند یعنی باعث کاهش سرعت صفحات شما می‌شوند.
سرعت بارگذاری یک سایت، از مهم‌ترین ویژگی‌های مهم آن سایت می‌باشد. و این عمل علاوه بر آن‌که در حس رضایتمندی یک کاربر تاثیر بالایی دارد، در افزایش رتبه در گوگل و موتورهای جستجو نیز، بسیار تاثیرگذار است.

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

آیا تابه‌حال به‌جایی رفته‌اید که بنا به دلایلی نتوانسته‌اید به آن محل وارد شوید و مجبور به رفتن به محل دیگری بشوید؟

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

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

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

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

ریدایرکت های سمت سرور: سریع، قابل ذخیره‌سازی

ریدایرکت های رایج، 301 و 302 هستند که از HTTP برای توضیح انتقال یک صفحه یا منبع استفاده می‌کنند. از ریدایرکت 301 برای انتقال‌های دائمی و ریدایرکت 302 برای انتقال‌های موقت استفاده می‌شود. هر دو این تغییر مسیرها سمت سرور هستند، به این معنی که از HTTP برای هدایت مرورگر به محل یا فایل دیگری استفاده می‌کنند. مرورگرها به تغییر مسیرهای سمت سرور سریع‌تر از تغییر مسیرهای سمت کاربر رسیدگی می‌کنند و علاوه بر این موقعیت فعلی فایل نیز ذخیره (cache) می‌شود.

ریدایرکت های سمت کاربر: کند، غیرقابل ذخیره‌سازی

تغییر مسیرهایی که از ویژگی http-equiv=refresh یا جاوا اسکریپت استفاده می‌کنند، ممکن است زمان انتظار تغییر مسیر یا مشکلات مربوط به عملکرد را افزایش دهند و از این‌رو نباید مورداستفاده قرار گیرند، و در جهت بهینه سازی سایت استفاده از این ریدایرکت ها توصیه نمی‌شود.

آیا تغییر مسیری اتفاق افتاده است؟

به‌احتمال زیاد تابه‌حال برایتان تغییر مسیر یا ریدایرکت رخ‌داده است. شاید یکی از رایج‌ترین تغییر مسیرها، 301 باشد که باعث انتقال از آدرس بدون www به آدرس با www می‌شود. این نوع از تغییر مسیرها در بهینه سازیسئو سایت همواره پیشنهاد می‌شوند، از این رو بسیاری از افراد از آن‌ها استفاده کرده‌اند.
پس به طور خلاصه توصیه می‌شود که اگر از این نوع تغییر مسیر ها استفاده کنید، و به شکل صحیح در وب سایتتان اجرا کنید زیرا باعث می‌شود گوگل وبسایتتان را بهتر درک کند.

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

می‌توانید با استفاده از ابزارهای آنلاین همانند ابزار GTmetrix و یا PageSpeed Insights استفاده کرد و تغییر مسیر های 301 و 302 در صفحاتتان را بررسی کنید.
فرصت خوبی است تا تغییر مسیر صفحاتتان را بررسی کنید و بخش‌هایی که تغییر مسیر در آن‌ها اتفاق می‌افتد را شناسایی کرده و اگر باعث کاهش سرعت صفحات می‌شوند، برای برطرف نمودن آن‌ها چاره‌اندیشی کنید.

توصیه‌هایی از گوگل در مورد ریدایرکت

گوگل توصیه می‌کند تغییر مسیرهایی که ضروری نیستند را حذف کنید. آن‌ها پیشنهاد می‌کنند تغییر مسیرها را به کمک نکات زیر کاهش دهید:

• هرگز به صفحه‌ای که می‌دانید در آن تغییر مسیر وجود دارد لینک ندهید. (از این جمله برداشت‌های خوبی میشه کرد)
• هیچ‌گاه از بیش از یک تغییر مسیر برای رفتن به منبع جدیدی استفاده نکنید.

حذف تغییر مسیرها

برای حذف تغییر مسیرها کافی است مراحل زیر را طی کنید:

1. تغییر مسیرها را بیابید
2. دریابید که چرا وجود دارند
3. بررسی کنید که چگونه روی سایر تغییر مسیر ها تاثیر می‌گذارند یا از آن‌ها تأثیر می‌گیرند
4. اگر به آن‌ها نیازی نیست حذفشان کنید
5. اگر روی سایر تغییر مسیر ها تأثیر می‌گذارند یا از آن‌ها تأثیر می‌گیرند آن‌ها را به‌روزرسانی کنید
6. اگر سایتتان از امنیت مناسبی برخوردار است، از HSTS برای حذف تغییر مسیرهای SSL استفاده کنید

پاک کردن تغییر مسیرهای پی‌درپی

اغلب مواقع لازم است زنجیره به وجود آمده از تغییر مسیرها را پاک‌ کنید. نمونه‌ای از این مورد، زمانی است که از سایت بدون www به سایت با www تغییر مسیر می‌دهید سپس تمام ترافیکتان را به https منتقل می‌دهید.
به عنوان مثال کاربری را که “seoraz.com” تایپ کرده است به www.seoraz.com هدایت کنید و ناگهان به “https:www.seoraz.com” منتقل شود.
راه‌حل این مشکل این است که مطمئن شوید که با تغییر مسیر، به‌جای رفتن از آدرس بدون www به با www به https://www منتقل شوید. هدف این است که مطمئن شوید سایت شما از تغییر مسیرهای متوالی و پی‌درپی در امان باشد و تغییر مسیرها به‌صورت صحیح و منطقی باشد.

Minimize-Redirects

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

راستی آخرین باری که برای وارد شدن به سایتی www تایپ کردید چه زمانی بوده است؟ آخرین باری که www در موبایلتان تایپ کردید کی بوده است؟ حال فکر می‌کنید برای بهینه سازی یک سایت آدرس با www باشد بهتر است یا بدون www؟ کامنت کنید.

مشکلات سایت histats در ریدایرکت

متاسفانه سایت‌های ایرانی بسیاری از ابزار آمارگیر histats.com استفاده می‌کنند درحالی که این ابزار مشکلات زیادی در جهت بهبود سرعت سایت ایجاد می‌کند، برای درک بهتر این موضوع ما کد مربوط به آمارگیر سایت های‌استیت را تست کرده و قبل و بعد آن را در عکس زیر مشاهده می‌کنید:

gtmetrix-Compare-Reports

قطعا تعجب خواهید کرد که یک سایت آمارگیر چقدر می‌توانید باعث کندی سایت شود. ابزار histats موارد زیر را تحت شعاع خود قرار می‌دهد:

• Leverage browser caching
• Minimize redirects
• Minimize request size
• Add Expires headers
• Avoid URL redirects
• Compress components with gzip
• Make fewer HTTP requests
• Reduce DNS lookups
• Use cookie-free domains

gtmetrix-Compare-Reports-yslowgtmetrix-Compare-Reports-yslow

نمونه ریدایرکت‌هایی که این سایت وجود می‌اورد و با حذف کد آن تمام این ریدایرکت های اضافه که باعث کاهش سرعت سایت شده بودند  حذف خواهد شد.

Minimize-redirects-pagespeed

نتیجه: توصیه می‌شود از ابزارهای آمارگیر معتبر نیز استفاده کنید که باعث کندی سرور سایت شما و افزایش زمان لود سمت کاربر نشود، مثلا ابزار histats باعث افزایش زمان لود و کاهش سرعت سمت سرور می‌شود و یا حاصل استفاده از پلاگین WP Statistics باعث استفاده بی‌رویه از منابع سرور سایت میگردد حتی این پلاگین به گفته سایت معتبر sucuri مشکلات امنیتی و خطر حمله به شکل SQL Injection دارد. بنابراین انتخاب اینکه از چه ابزاری برای آنالیز سایت خود استفاده کنیم بسیار در تجربه کاربری اهمیت دارد (تجربه کاربری یعنی چه)، ابزار analytics گوگل شاید می‌توان گفت بهترین، دقیق‌ترین و بهینه‌ترین ابزار برای آنالیز سایت و دریافت آمار است.

جمع‌بندی ارور Avoid landing page redirects

با رشد روزافزون استفاده از موبایل، افزایش سرعت سایت به‌مراتب از اهمیت بیشتری برخوردار شده است. ازاین‌رو جلوگیری از تغییر مسیرها و ریدایرکت های غیرضروری و کاهش خطاهای همانند Avoid landing page redirects و Minimize Redirects و مدیریت آن‌ها با ابزارهای آنلاین سئو، نسبت به گذشته مهم‌تر شده است و حل مشکل سرعت سایت یکی از مهم‌ترین فاکتورهای موتورهای جستجو است بنابراین می‌توان از راهکارهای ارائه‌شده توسط گوگل یا دیگر منابع استفاده کرد.

رفع خطای Combine images using CSS sprites

در این مقاله قصد داریم درباره مشکل Combine images using CSS sprites صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا css sprites برای بهینه سازی عکس‌های ما لازم و ضروری است؟ چطور css sprite کنیم؟. رفع خطای Combine images using CSS sprites برای خیلی از دوستان سخت هست و کمی نیاز به دانش کدنویسی دارد ولی با ابزارهای آنلاین می‌شود به راحتی خطای مربوطه را بهینه سازی کرد.

خلاصه‌ای از خطا Combine images using CSS sprites

آموزش ویدیویی CSS sprites به شکل رایگان در لینک زیر:

CSS sprites چیست

قبل از آنکه نحوه  آموزش CSS sprites را بدانید بهتر است بدانید که CSS sprite چیست . معمولا در هر صفحه از طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی، قیمت طراحی سایت) تعدادی عکس استفاده شده است ، برای دریافت هر عکس مرورگر مجبور است یک درخواست به سمت سرور ارسال کند ، رد و بدل این درخواست‌ها توسط مرورگر و سرور نیاز به زمان زیادی دارد و اگر تعداد عکس‌ها زیاد باشید به مراتب تعداد درخواست‌ها بیشتر و درگیری سرور هم بالا می‌رود، این موضوع شاید در سایت‌های کم بازدید خیلی محسوس نباشد ولی وقتی بازدیدکننده سایت بالا باشد قطعا رفع ارور Combine images using CSS sprites قدم بزرگی در بهینه سازی سئو سایت چه در سمت سرور و چه در سمت کاربر خواهد بود، در روش CSS sprites با ترکیب تمام تصاویر در یک عکس و درج مختصات به آن به کمک CSS از قسمت‌های مختلف عکس در مکان دلخواه استفاده می‌کنیم، در این روش تنها یک درخواست برای یک تصویر به سرور ارسال می‌شود ولی چندین بار از عکس در قسمت‌های مختلف قالب استفاده می‌شود. با انجام این روش سرعت وب سایت بسیار بیشتر می‌شود
سرعت بارگذاری یک سایت،از مهم‌ترین ویژگی‌های مهم آن سایت می‌باشد.و این عمل علاوه بر آن‌که در حس رضایتمندی یک کاربر تاثیر بالایی دارد، درافزایش رتبه در گوگل و موتورهای جستجو نیز، بسیار تاثیرگذار است.

css-sprite-c

روش استفاده از CSS sprites

دو روش کلی برای رفع مشکل Combine images using CSS sprites وجود دارد، می‌توانید از فتوشاپ برای ادغام عکس‌های کوچک استفاده کنید و سپس کدنویسی را انجام دهید، یا به کمک ابزارهای آنلاین تمام امور لازمه را به آنها بسپارید و بعد از خروجی گرفتن عکس ادغام شده و کدها، آنها را در مکان دلخواه و مناسب قرار دهید. در ادامه بیشتر درباره این روش‌ها توضیح خواهیم داد.

روش اول CSS sprites به کمک فتوشاپ (روش سخت)

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

img_navsprites

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

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

در مثال پایین از هر ۳ ایکون استفاده کردیم، به کدهای زیر توجه کنید:

خروجی دستورات بالا را می‌توانید این لینک مشاهده کنید.

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

روش دوم CSS sprites به کمک ابزارهای آنلاین (روش ساده)

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

لیست ابزارهای آنلاین برای css sprites:

• spritepad.wearekiss.com
• spritegen.website-performance.org
• css.spritegen.com
• www.spritecow.com

برای CSS sprites کردن عکس‌های خود بهتر از فرمت عکس‌های کوچک PNG بوده و بکگراند آن نیز شفاف (transparent) باشد.

 

جمع‌بندی درباره مشکل Combine images using CSS sprites

با رشد روزافزون استفاده از موبایل، افزایش سرعت سایت به‌مراتب از اهمیت بیشتری برخوردار شده است. ازاین‌رو جلوگیری از تعداد درخواست‌های غیرضروری و کاهش ریکوئست‌های اضافی جدا از اینکه کمک زیادی به بهینه شدن سرور و بالا رفتن راندمان آن خواهد شد، تجربه کاربری مناسبی را برای بازدیدکنندگان سایت شما به ارمغان خواهد اورد، و به همین علت است که سایت‌های بزرگ داخلی و خارجی از چنین روش‌هایی استفاده می‌کنند، نمونه آن سایت دیجی کالا می‌باشد که از عکس ادغام شده زیر و به روش css sprites نزدیک به میلیون‌ها درخواست در روز را کم کرده است، ما فرض بر آن میگیریم که دیجی کالا هر روز نیم میلیون کاربر واردش می‌شود و اگر به جای روش css sprites بیایید هر عکس و ایکون زیر را در یک فایل جداگانه آپلود و استفاده کند (با فرض اینکه عکس زیر مثلا ۱۰۰ تصویر هست)، روزانه حدود ۵۰ میلیون درخواست فقط از سمت عکس و ایکون‌های زیر را باید سرورهای دیجی کالا پاسخگو باشند، ولی اگر همه ایکون‌ها همانند عکس زیر ادغام و یک واحد شده باشند، ۱۰۰ برابر به بهینه سازی سایت کمک کرده و به نیم میلیون درخواست کاهش پیدا میکند.

slices

این خطا باعث کاهش تعداد درخواست های HTTP هم می‌شود.

رفع خطای Defer parsing of JavaScript و Prefer asynchronous resources

در این جلسه قصد داریم درباره مشکل Defer parsing of JavaScript و همچنین خطای Prefer asynchronous resources صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه سازی سئو سایت ما مشکل‌ساز است.
البته در این مقاله تمرکز برای رفع خطای Defer parsing of JavaScript خواهد بود و در راستای رفع آن ارور Prefer asynchronous resources هم رفع خواهد شد.

شاید رفع مشکل Defer parsing of JavaScript برای خیلی از دوستان سخت باشد و گاهی غیرممکن هست. برای همین توصیه می‌کنیم خیلی پیگیر این بخش از ارور سایت GTMetrix.com نشوید به دلیل اینکه گاهی رفع این خطا باعث حذف تمامی فایل‌های جاوااسکریپت یا همان JS می‌شود که در خیلی از سایت‌ها نشدی است. یعنی برای رفع این مشکل در اخر مجبورخواهید بود همه کدهای جاوا اسکریپت JavaScript را از سایتتان پاک کنید تا خطا به شکل کامل رفع و امتیاز 100 شود، یا اگر تعداد فایل های جاوااسکریپت زیاد باشد مجبور خواهید بود اول آنها را یکی کنید تا کنترل و مدیریت آن راحت‌تر شود که این روش هر چند در بحث تئوری مشکلی ندارد ولی در عمل ممکن است با ادغام باعث ایجاد تداخل و مشکلات متعدد شود که حاصل آن عدم اجرای دستور در مکان تعریف شده میباشد، پس از الان خیلی به این خطا حساس نباشید.

خلاصه‌ی از خطا Defer parsing of JavaScript

جزئیات بیشتر درباره خطا Defer parsing of JavaScript

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

گوگل آزمایشی را در سال ۲۰۱۱ بر روی تلفن‌های همراه هوشمند اجرا گردید و به این نتیجه رسیدن که هر یک کیلوبایت از فایل جاوا اسکریپت حدود 1 میلی‌ثانیه زمان برای خواندن به طول می‌انجامد و این مقدار به زمان کل لود صفحه اضافه‌ می‌گردد، و حال اگر ۲۰۰KB حجم جاوا اسکریپت باشد زمان لود اولیه آن در یک صفحه ۲۰۰ میلی‌ثانیه به زمان لود کل صفحه برای بازدیدکننده اضافه می‌گردد، از آنجایی که جاوا اسکریپت در هر صفحه باید لود شود، این تاخیر در تمام صفحات ایجاد خواهد شد.

نحوه رفع ارور Defer parsing of JavaScript

راه حل اول

همان‌طور که می‌دانید لود کدهای یک صفحه طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) به ترتیب از بالا یعنی قسمت Head صفحه به پایین یعنی تا </body> اجرا می‌شود و اگر تعداد بسیاری فایل در قسمت Head فراخوانی شود باعث کند‌تر شدن و بالا رفتن زمان لود صفحه‌هات سایت می‌گردد، بنابراین برای بالا بردن سرعت سایت و کم کردن زمان لود آن باید فایل‌های جاوا اسکریپت JavaScript را به تعویق انداخت.

مثلا می‌توان فایل‌های جاوا اسکریپت را به انتهای کدها اضافه کرد، به همین منظور کافیست کدهای JS (منظور همان کدهای جاوا اسکریپت است) که با تگ <script> در صفحات HTML فراخوانی می‌شود را در فوتر، قبل از </body>قرار داد تا ابتدا متن‌ها و CSS ها لود شود و سپس فایل‌های جاوا اسکریپت در انتها لود شود. البته این روش بیشتر برای سایت‌های از نوع استاتیک است و سایت‌های از نوع داینامیک نیاز به ویرایش بیشتری دارند.

راه حل دوم

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

چند افزونه مخصوص وردپرس:

WP Deferred JavaScripts

Speed Booster Pack

autoptimize

Async JavaScript

 چند افزونه مخصوص جوملا:

JCH Optimize

Javascript Async and Defer

scriptsdown

راه حل سوم

 استفاده از اتریبیوت های defer و یا async در تگ جاوا اسکریپت هم می‌تواند باعث رفع خطای Defer parsing of JavaScript و هم رفع خطای Prefer asynchronous resources در PageSpeed گوگل شود.

async-vs-defer

وجه مشترک این دو اتریبیوت ها این است که مروگر منتظر لود شدن کامل فایل جاوا اسکریپت نمی‌ماند و همزمان با لود کردن این فایل، ادامه فایل
HTML را هم لود می‌کند، که این کار باعث می‌شود صفحه خیلی زودتر در مرورگر کاربر نمایش داده شود.
اما تفاوت بین اتریبیوت های defer و async این است که، اسکریپت‌هایی که به صورت async تعریف شده باشند، به محض اینکه به طور کامل لود شوند، اجرا خواهند شد. اما اسکریپت‌های از نوع defer حتی اگر به طور کامل هم لود شوند، منتظر مانده تا کل صفحه HTML لود شود و بعد از آن اجرا می‌شوند .
اگر زمان اجرای یک فایل جاوا اسکریپت اهمیتی نداشته باشد، بهتر است از async استفاده شود. ولی اگر لازم باشد بعد از لود شدن کامل عناصر HTML فایل جاواکسریپت اجرا شود باید از defer استفاده کنید. نمونه:

javascript-defer-async

راه حل چهارم

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

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

اجرای روش‌های بالا جدا از اینکه باعث رفع ارور Defer parsing of JavaScript خواهد شد باعث کاهش خطای Prefer asynchronous resources هم می‌شود. همان‌طور که در اول مقاله اشاره کردیم برای کسب امتیاز ۱۰۰ در این فاکتور گوگل خیلی حساسیت به خرج ندهید، هر چند اگر به شکل اصولی فراخوانی ها انجام شود به سئو داخلی کمک فراخوانی می‌کند

رفع خطای Enable gzip compression

در این جلسه قصد داریم درباره مشکل Enable gzip compression در PageSpeed گوگل و همینطور ارور Compress components with gzip در YSlow یاهوصحبت کنیم و اول gzip تعریف خواهیم کرد و اینکه gzip چیست و چه تاثیری در سرعت سایت دارد.

فقط توجه داشته باشید هر دو خطای Enable gzip compression و Compress components with gzip یک منظور را می‌رساند فقط خطای اولی مربوط به گوگل است و دومی مربوط به یاهو می‌باشد، حل یکی از این خطاها باعث حل دیگر خطا هم می‌شود.

خلاصه‌ی از خطا Enable gzip compression

فشرده سازی Gzip در افزایش سرعت سایت

اگر صاحب سایتی باشید قطعا افزایش سرعت لود سایت برای شما اهمیت فراوانی خواهد داشت و اینکه چه مدت زمانی بارگذاری صفحات سایت شما به طول می‌انجامد جز فاکتورهای مهم یک مدیر سایت برای بهبود صفحاتش است. پس حتما اطلاع دارید که بالا بودن سرعت سایت چه میزان در نرخ دفع کاربری (Bounce rate چیست) ، تجربه کاربری (User Experience) و همین‌طور در رتبه دهی موتورهای جستجو که یکی از عوامل مهم است، تاثیر دارد.

Enable-GZIP-Compression (1)

از انجایی که از ملاک‌های اساسی گوگل برای رتبه بندی سرعت لودینگ صفحات می‌باشد بالا بردن سرعت سایت‌ها، از دغدغه‌های اصلی وبستران بوده و هست. همچنین تجربه نشان می‌دهد که کاربران صفحاتی را که بالای ۱۰ ثانیه برای باز شدنشان به طول می‌انجامد را بسته و به سراغ سایت دیگری می‌روند و این یعنی بالا رفتن Bounce rate. حال یکی از اقداماتی که می‌توان در راستای افزایش سرعت سایت تاثیر فراوانی دارد فعال سازی Gzip در سمت سرور می‌باشد و باعث رفع ارور Enable gzip compression و همچنین بهبود TTFB نیز می‌شود.

تمام مرورگرهای مدرن و مرسوم امروزی از تابع gzip پشتیبانی می‌کنند و هم به شکل اتوماتیک درخواست HTTP به سمت سرور برای GZIP compression ارسال می‌کنند. در ادامه به همراه عکس بیشتر به این موضوع تمرکز می‌کنیم. لیست مرورگرهای معروف که از این تابع پشتیبانی می‌کنند:

• Internet Explorer 5.5 در + July 2000 از فشرده سازی gzip پشتیبانی می‌کرد
• Opera 5+ در  June 2000 از فشرده سازی gzip پشتیبانی می‌کرد
• Firefox 0.9.5+ در  October 2001 از فشرده سازی gzip پشتیبانی می‌کرد
• Chrome به محض انتشار در سال ۲۰۰۸ از فشرده سازی gzip پشتیبانی می‌کرد
• Safari به محض انتشار در سال ۲۰۰۳ از فشرده سازی gzip پشتیبانی می‌کرد

Gzip چیست؟

حال به بررسی اینکه gzip چیست میپردازیم، حتما شما در سیستم خود با فایل‌های zip کار کردید و می‌دانید که هدف اصلی این فایل‌ها فشرده سازی اطلاعات موجود درونشان می‌باشد تا جدا از اینکه حجم کمتری در سیستم شما بگیرد انتقال آن هم سریع‌تر و راحت‌تر خواهد بود،حال عمل Gzip همین کار را برای فایل‌هایی که در طراحی سایت(طراحی سایت شرکتی، طراحی سایت فروشگاهی) موجود است انجام می‌دهد.

فایل‌های با حجم کمتر به بازدیدکنندگان شما اجازه می‌دهد تا فایل‌های طراحی سایت را سریع‌تر دریافت کنند و در نتیجه سایت شما را سریع‌تر مشاهده کنند. البته باید اشاره کنیم که تابع Gzip هر فایلی در سمت سرور را فشرده سازی نمی‌کند، فشرده سازی صرفا منوط به فایل‌های HTML ، فایل‌های استایل‌دهی (stylesheets) و جاوااسکریپت (JavaScript) می‌باشد و شامل تصاویر و بقیه فایل‌های موجود دیگر نیست.

Gzip باعث کاهش حجم سایت و افزایش سرعت لود سایت می‌شود، در واقع این تابع می‌تواند حجم فایل‌های ذکر شده را بیش از ۷۰ درصد کاهش بدهد. این تابع دو مولفه اصلی را در سایت GTmetrix کاهش می‌دهد یکی Page Load Time و دیگری Total Page Size می‌باشد.

Ilya Grigorik در گوگل می‌گوید:

نحوه کار فشرده سازی Gzip در عمل

بعد از آنکه متوجه شدید gzip چیست به نحوه کارکرد این تابع میپردازیم،‌وقتی کاربری توسط مرورگر خود قصد دارد وارد یک سایتی شود، مرورگر اول یک درخواست از سمت header یعنی “content-encoding: gzip” ارسال می‌کند تا ببیند آیا جواب این درخواست مثبت است یا منفی. اگر درخواست از سمت سرور شناسایی شد و مثبت بود، سرور فایل‌های فشرده شده را به مرورگر ارسال می‌کند، درغیر این صورت سرور فایل‌های غیر فشرده و سنگین را به مرورگر ارسال می‌کند که در بیشتر وقت‌ها همراه با ارورهای مختلف همراه خواهد بود.

gzip-compression

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

ولی موتورهای جستجو همانند گوگل و مرورگرها همانند کروم و فایرفاکس، نیازی به کدنویسی زیبا و فصای خالی بین کدها ندارند، و به راحتی می‌توانند آنها را تجزیه و همه آنها در یک بلوک یا خط بخوانند، برای همین در بهینه سازی سایت فایل‌ها پیشنهاد می‌شود که آنها را minify و combine کنید. و جدا از رفع خیلی از خطاها باعث برطرف شدن مشکل Enable gzip compression می‌شود.

چگونه GZIP Compression را چک کنیم فعال است؟

جهت تست فشرده سازی gzip می‌توانید از ابزارهای آنلاین زیر استفاده نمایید:

• استفاده از Google PageSpeed Insights گوگل
  می‌توانید سایت خود را در Page Speed گوگل تست کنید و اگر gzip فعال نباشد پیغامی همانند زیر دریافت می‌کنید.

enable-compression-warning-pagespeed-insights

• استفاده از سایت GTmetrix
  می‌توانید در سایت جی تی متریکس نیز تست کنید و اگر با ارور Enable gzip compression مواجه شدید مبنی بر این است که تابع Gzip نیز در سمت سرور شما فعال نیست.

enable-gzip-compression

• استفاده از سایت Check GZIP compression tool
  سایت ذکر شده هم می‌تواند بسیار مفید باشید و دقیقا به شما می‌گوید چه میزان از حجم سایت شما بعد از فعال سازی تابع gzip فشرده شده است.

checkgzipcompression

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

check-for-gzip-response-header

برای مقایسه فایل قبل و بعد از فشرده سازی طبق عکس زیر روی ایکون اشاره شده کلیک کنید و در ستون size میتوانید به مقایسه فایل‌ها بپردازید.

chrome-devtools-compressed-size

نحوه فعال سازی GZIP Compression

ما در اینجا سعی کردیم در تمام وب سرورها و CMS ها روش‌های مختلف فعال سازی gzip را بیان کنیم، فعال سازی به روش‌های مختلف انجام می‌شود و شما سعی کنید مناسب‌ترین روش را برای خود انتخاب کرده و اعمال کنید، و لازم نیست ۲ یا چند روش را بر روی سایت اعمال کنید بعضی از دوستان این تصور را دارند که اگر تابع gzip را چندین بار فعال کنند سایت آنها چندین بار فشرده سازی خواهد شد و برای سئو سایت مناسب خواهد بود، ولی این دیدگاه اشتباه است و ممکن است تداخل به وجود امده باعث از بین رفتن ماهیت تابع gzip شود.

فعال سازی gzip در وردپرس

راحت‌ترین راه برای فشرده سازی فایل‌ها و فعال کردن gzip استفاده از پلاگین‌های کش که از این قابلیت پشتیبانی می‌کنند. پلاگین‌هایی مانند  WP Rocket و  W3 Total Cache  از این قبیل افزونه ها هستند که یک سری کد در فایل .htaccess به شکل اتومایتک بعد از فعال سازی آنها قرار می‌دهند. البته باید توجه داشته باشید که دسترسی لازم برای نوشتن در فایل .htaccess به این افزونه‌ها بدهید.

• فعال سازی gzip در جوملا

  اگر شما از cms جوملا (joomla) برای سایت خود استفاده می‌کنید برای فعال کردن Gzip وارد مدیریت جوملا شوید سپس در منوی سایت – تنظیمات کلی وارد شوید و در تب سرور گزینه فشرده سازی Gzip را روی بلی قرار داده و سیو نمایید.

• فعال کردن فشرده سازی gzip در cPanel

  برای فعال سازی gzip در سی پنل ابتدا وارد cPanel شوید، سپس در بخش Software and Services روی Optimize Website کلیک کنید. پس از ورود همانطور که مشاهده میکنید دو گزینه compress all content و compress the specified MIME types و یک فضای متنی جهت مشخص کردن MIME Type های انتخابی وجود دارد می‌توانید گزینه مد نظر خود را انتخاب نموده و روی گزینه Update Settings کلیک کنید تا فشرده سازی محتویات سایت انجام شود. با انتخاب گزینه compress all content تمامی فایل های شما فشرده می‌شود و با انتخاب compress the specifiedMIME types فایل‌هایی که MIME های آنها را مشخص نموده اید زیپ می‌شود .

• فعال سازی gzip در سرور آپاچی

  ممکن است قصد نداشته باشید در افزونه‌ها برای فعال سازی gzip استفاده کنید یا CMS دیگری دارید راه دوم یا راه دستی برای فعال سازی این تابع وجود دارد استفاده از سرور سایت خودتان است و اگر Apache داشته باشید شما می‌توانید کد زیر را به فایل .htaccess وارد کرده و سیو کنید. فایل .htaccess در پوشه اصلی سایت یا همان public_html موجود دارد، اگر چنین فایلی وجود ندارد ابتدا روی setting سمت راست بالا کلیک کرده و گزینه Show Hidden Files را فعال کنید اگر فایل  .htaccess نمایان شد که هیچ ولی اگر مشاهده نکردید به این معنی است که هنوز فایل  .htaccess ساخته نشده است و خود می‌توانید به شکل دستی این فایل با دقیقا با نام  .htaccess بسازید و کدهای زیر را در آن قرار دهید.

• 
   

• فعال سازی gzip در وب سرور NGINX

  اگر وب سرور شما NGINX یا به عبارتی انجین ایکس باشد می‌توانید از دستورات این مقاله برای فعال سازی تابع gzip استفاده کنید، باید وارد دایرکتوری /etc/nginx/nginx.conf شده و یک سری تغییرات ساده و جزئی را ایجاد نمایید.

• فعال سازی gzip در IIS ویندوز سرور

  ممکن است سایت شما در ویندوز سرور های شرکت مایکروسافت میزبانی شود که روند فعال سازی تابع gzip کمی متفاوت خواهد بود، ابتدا باید بدانید که جهت فشرده سازی یا compression داخل ویندوز سرور باید ۴ مرحله را طی کنید، که ۳ مرحله اول همانند هم هستند، باید در ابتدا مطمئن باشید که ادمین سرور در زمان نصب ویندوز سرور در server manager و تب Role Services بخش Web Server رفته و در ادامه وارد Performance شده و گزینه‌های Static Content Compression و Dynamic Content Compression را تیک زده باشد.
  بعد از اینکه مطمئن شدید این گزینه توسط ادمین سرور فعال است (جهت اطمینان می‌توانید تیکت ارسال کنید) باید وارد IIS سرور خود شده در قسمت Compression دوباره ۲ گزینه که در بالا اشاره شده است را فعال کنید.
  بعد از آن سایت خود را در کنترل پنلی که دارید، مثلا همانند SolidCP انتخاب کرده و بسته به کنترل پنل باید دنبال گزینه های Enable Static Content Compression و همینطور Enable Dynamic Content Compression باشد و سپس فعال کنید.
  و سپس کدهای زیر را در Web.Config اضافه کنید:

   

   

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

• اگر به دنبال مقاله‌های مناسب جهت بهینه سازی سرعت سایت خود در windows server هستید مقاله سایت tosinsoهم می‌تواند برای شما مفید باشد و همینطور مستندات شرکت مایکروسافت نظیر HTTP Compression of Dynamic Content و HTTP Compression of Static Content  پیشنهاد می‌شود مطالعه شود.
• اگر شما به دقت این مقاله را مطالعه کرده باشید باید بدانید جی زیپ چیست و چگونه یک فایل را فشرده سازی می‌کند و همینطور با نحوه فعال سازی آن آشنایی کامل پیدا کردید. فعال سازی gzip کمک زیادی به بهینه سازی داخلی خواهد کرد پس سعی کنید به بهترین شکل ممکن این مشکل را حل کنید تا باعث کاهش سرعت سایت شما نشود.

رفع خطای Enable Keep Alive

در این مقاله قصد داریم درباره مشکل Enable Keep-Alive در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.

خلاصه‌ی از خطا Enable Keep-Alive

Keep Alive چیست؟

Keep Alive نحوه درخواست بین سرور و مرورگر کاربر است که می‌گوید: مرورگر می‌تواند بیش از یک فایل را بگیرد یا نگیرد.

Deselect

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

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

طبیعتا مرورگر، برای نشان دادن صحیح صفحات طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی،قیمت طراحی سایت)  ما باید همه فایل‌ها را دریافت نماید. در قدم اول برای باز کردن یک سایت مرورگر فایل HTML را دریافت کرده و آن را می‌خواند. سپس مرورگر موارد دیگری مانند CSS، JavaScript و تصاویر را که فایل HTML به آن‌ها اشاره می‌کند را درخواست می‌کند. اگر Keep Alive فعال نباشد این مفهوم را می‌رساند که مرورگر بیش از یک فایل را در آن واحد نمی‌تواند درخواست کند آن موقع مرورگر برای دریافت همه فایل‌ها هر بار درخواست جداگانه ارسال می‌کند و اگر سرور هر بار جداگانه پاسخ بدهد حاصل آن، زمان زیادی برای دریافت تمام فایل‌ها تلف خواهد شد.صفحات وب معمولا مجموعه‌ای از تعداد زیادی فایل هستند و اگر لازم باشد برای هر یک از این فایل‌ها ارتباط جدیدی ایجاد شود، مدت زمان زیادی برای نمایش صفحات طول خواهد کشید و این فرایند می‌تواند زمان دانلود صفحه و هدر رفتن منابع سرور را افزایش دهد. ولی می‌توان با فعال کردن Keep Alive به این قابلیت رسید که سرور بتواند به مرورگر بگوید که “هر چه فایل نیاز داری را درخواست کن یک جا.”

تعریف آکادمیک Keep Alive HTTP این است: “روشی که اجازه می‌دهد درخواست HTTP در کانکشن tcp به جای باز کردن درخواست جدید، هر چه فایل می‌خواهد دریافت کند.” به زبان ساده‌تر،بستری را فراهم می‌کند تا ارتباطی بین وب سرور و مروگر برقرار شود و اجازه می‌دهد که بیش از یک فایل را در آن واحد مرورگر دریافت کند.گاهی در برخی از مقالات Keep Alive به عنوان persistant connection  هم صدا زده می‌شود.

keep-alive-enabled

آیا Enable Keep Alive به طور پیش‌فرض فعال نیست؟

برخی افراد به طور اشتباه باور دارند که Enable Keep Alive به شکل پیش‌فرض فعال است و لازم نیست در این باره نگران باشند زیرا امروزه keep alive در ارتباطات HTTP فعال است.

اگرچه این گفته درست می‌باشد، اما تعداد زیادی از افراد از هاست‌های اشتراکی استفاده می‌کنند که ممکن است با توجه به سیاست‌های مربوطه ارتباط با کاربر را بسته باشند. و از آنجا که میلیون‌ها صفحه از هاست‌های اشتراکی استفاده می‌کنند، دانستن اینکه ارتباطات شما keep alive هستند امری ضروری است. برای فهمیدن این موضوع می توانید از page speed tool گوگل یا سایت GTmetrix استفاده کنید.

چگونه Keep Alive را فعال کنیم

• Keep Alive با استفاده از HTTP هدر Connection: Keep-Alive فعال می شود.
• اگر Keep Alive فعال نشد، احتمالا HTTP Header های شما وضعیت connection: close را دارند.
• برای فعال شدن Keep Alive وضعیت آن را به connection: Keep-Alive تغییر دهید.
• فعال سازی Keep Alive وابسته به سرور مورد استفاده توسط شما و دسترسی هایی است که دارید. به بیشتر موارد در ادامه خواهیم پرداخت.

1. فعال سازی Keep Alive با استفاده از htaccess

   اگر به فایل config وب سرور خود دسترسی ندارید، می توانید Keep Alive را با استفاده از فایل .htaccess فعال کنید.

    

   افزودن کد بالا به فایل htaccess باعث می‌شود تا در header ها Keep Alive را به درخواست های شما اضافه کند، که البته بیشتر وب سرورها یا محدودیت‌هایی را تعیین کردن تا کد بالا را بازنویسی (override) می‌کند. لطفا توجه داشته باشید که ممکن است بعد از وارد کردن دستور بالا با ارور 500 روبه‌رو شوید و علت این است که سرور شما با دستور بالا سازگاری لازم را ندارد.

2. فعال سازی Keep Alive در Apache

   اگر به فایل پیکربندی Apache دسترسی دارید، می توانید Keep Alive را در آنجا فعال کنید. قسمت های مربوطه در زیر نشان داده شده اند.

    

3. فعال سازی Keep-Alive در NGINX 

4. مشکلات Keep Alive را می‌توان با HTTPCoriodule برطرف کرد. دستور keep-alive-disable وجود دارد که باید مراقب آن باشید، اگر این دستور را مشاهده کردید، مطمئن شوید قبل از حذف آن دلیل غیر فعال بودنش توسط هاستینگ را می‌دانید.

5. فعال سازی Keep-Alive در Litespeed

   Keep Alive به صورت پیشفرض فعال می‌باشد، اما ممکن است سرور شما از چیز دیگری به اسم smart keep-alive استفاده می کند. smart keep-alive یکی از تنظیمات داخل Litespeed است که به طور مشخصی برای وبسایت‌های با حجم بالا مورد استفاده قرار می‌گیرد. هنگامی که این گزینه فعال باشد، در قسمت page speed tools گزینه‌ای ظاهر می‌شود که نشان می‌دهد Keep Alive غیر فعال است.

   smart keep-alive فایل اولیه را با connection close در HTTP header درخواست خواهد می‌کند. سپس فایل‌های دیگر را با فعال کردن Keep Alive درخواست می‌کند. این گزینه باعث می‌شود هنگامی که درخواست‌های زیادی وجود دارند، کاربران بیشتری بتوانند همزمان متصل شوند.

   نکته: بجز در مواقعی که ترافیک سایت بالایی دارید، می‌توانید  smart keep-alive را در config غیر فعال کنید و هنگامی که این کار را انجام دادید تمام ارتباطات شما از Keep Alive استفاده خواهند کرد.

   اگر مطمئن نیستید که آیا برای شما از نوع smart هست و یا یقین دارید که این ویژگی غیرفعال است بهتر است به هاستینگ خود تیکت ارسال نمایید

رفع خطای Inline small CSS and JavaScript

در این پست قصد داریم درباره مشکلات Inline small CSS و Inline small JavaScript در GTmetrix صحبت کنیم و بررسی کنیم که Inline small ها چطورند و چه زمانی مفید هستند و برای افزایش سرعت سایت تاثیر خوبی دارند و چه زمانی باعث کندی سایت می‌شوند.

خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript

مقدمه درباره نحوه فراخوانی فایل‌های CSS و JS

• کدهای CSS
  CSS، نوعی زبان نشانه‌گذاری تحت وب است که به‌منظور توصیف ظاهر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) برای مرورگر همراه با HTMLمورداستفاده قرار می‌گیرد.

Inline-small-CSS

به شکل کلی سه شیوه برای استفاده از کدهای CSS در یک سند Html وجود دارد Inline، Internal و External که هرکدام دارای مزایا و معایب خاص خود در شرایط مختلف را داراست. باید توجه داشته باشید که تگ‌های HTML ابتدا کدهای External را لود می‌کند، پس‌ازآن به سراغ کدهای Internal و درنهایت کدهای نوع Inline را مورداستفاده قرار می‌دهد. درنتیجه کدهای Inline در اولویت قرار می‌گیرند. به‌عنوان‌مثال اگر در یک فایل External رنگ آبی برای یک تگ و در کدهای Internal رنگ زرد و بالاخره در کدهای Inline رنگ بنفش برای همان تگ انتخاب‌شده باشد، در چنین حالتی Html رنگ بنفش را مدنظر قرار خواهد داد.

• کدهای JS
  برای فراخوانی کدهای JS هم همانند CSS از سه روش بالا استفاده می‌شود

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

ولی اگر تعداد زیادی فایل CSS با حجم کم در صفحات شما فراخوانی می‌شوند بهتر است آنها را ادغام کنید

Inline JS

درباره فایل‌های JS هم همانند CSS باید عمل کرد، در این پست سایت GTmetrix بیان میکند:

Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.

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

از مقاله گوگل اشاره شده که اگر محتوای فایل JS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد به شکل مستقیم و Internal درون سند HTML استفاده کنیم تا در جهت بهینه سازی سرعت سایت تعداد درخواست‌های سمت سرور کاهش یابد.

برای مثال به سند HTML زیر توجه کنید:

و فایل small.js با محتوای فرضی زیر:

روش بهینه سازی شده در شرایطی که یک فایل JS با حجم کم دارید به شکل زیر است:

اگر تعداد فایل‌های زیادی از نوع js و css در سند html شما فراخوانی می‌شود می‌توانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.

• w3 total cache
• js- css script optimizer
• wp super minify
• wp minify fix
• combine css
• combine js

Inline Images

Inline Images عکس هایی هستند که به صورت inline و از طریق کار با base64 آن‌ها را می‌سازیم. به این منظور که عکس‌ها را می‌توانند در بین کدهای HTML قرار دهید و بر اساس کدگذاری بر مبنای 64 عکس‌ها بخشی از HTML شوند و بدون بارگذاری شدن نمایش داده می‌شوند، در عوض مرورگر کد بر مبنای 64 را به عکس تبدیل می‌کند. یکی از محاسن مهم این کار، کاهش تعداد درخواست است که این امر نقش موثری در بهینه‌سازی سئو سایت و سرعت آن دارد. ولی توجه داشته باشید که این روش بهتر است فقط برای عکس‌هایی استفاده شود که اندازه و حجم بسیار کمی دارند چرا که وقتی عکس‌ها حجم متوسط به بالایی داشته باشند با روش کدگذاری بر مبنای 64 حجم تصاویر بیشتر از حالت معمول بوده و اگر برای تمام عکس‌ها از این روش استفاده کنیم به جای بهینه سازی و افزایش سرعت سایت نتیجه‌ای عکس را دریافت خواهیم کرد.

گوگل هم در این پست به اهمیت تصاویر به شکل Inline اشاره کرده است و گفته:

When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL

برای مثال به سند HTML زیر توجه کنید:

در سند بالا تصویر کوچک با حجم اندک به شکل معمولی در صفحه بارگذاری می‌شود و حاوی یک درخواست دیگر برای لود شدن در صفحات کاربران است ولی روش زیر که برمبنای base64 است درگیر درخواست اضافی بر روی سرور متحمل نمی‌شود:

در پست جداگانه‌ای در آینده توضیحات بیشتری درباره تصاویر base64 یا Inline Images خواهیم داد. این خطا باعث کاهش تعداد درخواست های HTTP هم نیز می‌شودو شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید. سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در افزایش رتبه سایت در گوگل می‌باشد، کمک شایانی کنیم، در انتهای این آموزش باید توانید فایل css و js خود را با هم ادغام کنید و آن‌ها را یکی کنید.

رفع خطای Leverage browser caching و هر آنچه که باید درباره کش بدانید

در این مقاله قصد داریم درباره مشکل Leverage browser caching و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در طراحی سایت(طراحی سایت شرکتی،طراحی سایت فروشگاهی) پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.

خلاصه‌ی از خطا Leverage browser caching

نام: Leverage browser caching
نوع: مربوط به سرور
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 59%

قطعا شما هم از ابزارهای پیج اسپید، جی تی متریکس یا Pingdom جهت تست سرعت سایت خودتان استفاده کردید و یکی از خطاهای معروف و ایرادهایی که این ابزارهای آنلاین می‌گیرید Leverage browser caching هست، حال با خواندن این پست وقت آن رسیده که مشکل را حل کنید. برای حل مشکل Leverage browser caching در این ابزارها راه‌کارهای ساده‌ای وجود دارد مخصوصا اگر از CMS های اماده و رایگان برای سایتتان استفاده کرده باشید. در این مقاله درباره معنی این اخطار، چه تاثیراتی بر سایت دارد، و گزینه‌های موجود برای رفع این خطا را به شما خواهیم گفت.

Leverage browser caching چیست (کش)

خطای Leverage browser caching که اسکرین‌شات آن را در Pagespeed گوگل مشاهده می‌کنید به کش مرورگر شما اشاره می‌کند درواقع باید گفت کش چیست ؟

هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

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

leverage-browser-caching-pagespeed-insights-assets

اصولا به شکل درخواست Header دو روش یا متد اصلی برای کش کردن داریم. Expires Header و Cache-Control Header . هدر Cache-Control در HTTP/1.1 معرفی شد و اگر در سمت کاربر فعال باشد یک عدد بر حسب ثانیه برای کش کردن فایل در نظر می‌گیرد این عدد همان زمان انقضا فایل است، ولی Expires یک تاریخ را مشخص می‌کند که مثلا تا فعلان تاریخ فایل کش شود. Expires روشی ساده است. پس در هدر Cache-Control مدت زمان انقضا را می‌دهیم و در هدر Expires تاریخ زمان انقضا را می‌دهیم. اگر قصد دارید کنترل بیشتری بر روی کش داشته باشید و به دنبال آپشن بیشتر برای دسترسی به کش مرورگر دارید از دستور Cache-Control برای ذخیره سازی فایل‌ها در مرورگر است، می‌توانید استفاده کنید. استفاده از هر دو هدر  Expires  و  Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد.  Cache-Control  جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی  سایت‌های آنالیز سرعت مثل Gtmetrix هدر Expires را چک می‌کنند.

جزئیات تفاوت هدر Expires و Cache-Control

• Expires Header

  Expires همان‌طور که گفتیم یک تاریخ برای کش کردن فایل‌ها میگیرد مثلا تا فعلان تاریخ یک فایل را کش می‌کند و تا آن تاریخ از کش مرورگر استفاده می‌کند و بعد از آن تاریخ دوباره درخواست برای دریافت آن فایل به سرور ارسال می‌شود. نمونه کد:

   

  و مثلا خروجی که در هدر HTTP مرورگر می‌توان دید:

expires-header

Cache-Control Header

همان‌طور که گفتیم Cache-Control به ما اجازه بیشتری می‌دهد برای کش کردن در مرورگرها پیدا کنیم. اساس هدر Cache-Control مقدار زمان و روشی که باید کش شود را تعریف می‌کند. وقتی به یک فایل به‌وسیله مرورگر دانلود و در لوکال دسترسی پیدا کند، هدر HTTP آن فایل نیز مورد ارزیابی قرار می‌گیرد. وقتی محتویات هدر Cache-Control را مرورگر بخواند،کش آن فایل را اعمال می‌کند.
اگر یک مرورگر بعد از ارزیابی ببیند که یک فایل باید برای یک روز کش شود، آن فایل در کش مرورگر برای یک روز می‌ماند و اگر آن فایل بعد از یک روز دوباره فراخوانی شود مرورگر دوباره آن فایل را از سرور درخواست می‌کند و منتظر پاسخ سرور می‌شود. به‌طور مثال تصویر لوگو سایت شما که اصولا در صفحات مختلف ثابت است و اگر یک بازدیدکننده به یک صفحه از وب‌سایت شما بیاید و تصویر لوگو سایت شما را دانلود کند، هنگامی‌که بازدیدکننده به صفحات دیگر سایت شما برود، تصویر لوگو دوباره دانلود نمی‌شود، و از کش مرورگر فراخوانی می‌شود این روند همینطور ادامه دارد تا وقتی که مدت زمان انقصا تمام شود.

به کد زیر توجه کنید:

کد بالا تنظیمات  Cache-Control  است که به شکل هدر HTTP ارسال می‌شود. و اعمال این کد بستگی به نوع فایل‌هایی که تعریف می‌کنیم، دارد.

حال به بررسی خط به خط دستور بالا می‌پردازیم

1. خط یک هیچ عملی را انجام نمی‌دهد جز اینکه یاداور برای شما است درواقع دستورات را تشریح می‌کند و  .htaccess آن را نادیده می‌گیرد چرا که با # شروع شده است. به شکل خلاصه کامنتی جهت آگاهی و یاداوری برای استفاده کننده از کد بالا است.
2. خط دو که قسمت مهم دستور ما است میگه “اگر فایل‌ها از این نوع بودند ما یک سری عملیات را انجام می‌دهیم” . درواقع عمل کش فقط برای این نوع فایل‌ها صورت می‌گیرد. شما اگر تمایلی ندارید مثلا فایل gif کش شود کافیست آن را از لیست نوع فایل‌ها بردارید و یا اگر تمایل دارید فایل‌های HTML کش شود کافیست آن را به لیست نوع فایل‌ها اضافه کنید تا آن عمل خاص که در اینجا کش کردن است اعمال شود.
3. خط سه همان عملیاتی هست که باید انجام شود، هدر  Cache-Control مقداری را می‌گیرد. Header set Cache-Control نام هدری است که به شکل HTTP در مرورگر فراخوانی می‌شود و  max-age=2592000 بمدت زمان برحسب ثانیه است و اشاره می‌کند که فایل باید چه مدت در کش مرورگر بازدیدکننده ذخیره شود و مقدار 2592000 برابر با یک ماه است یعنی همان زمان انقضا یک فایل.
   مقادیر رایج، موارد زیر هستند:
   یک دقیقه: MAX-AGE=60
   یک ساعت: MAX-AGE=3600
   یک روز: MAX-AGE=86400
   یک هفته: MAX-AGE=604800
   یک ماه: MAX-AGE=2628000

یک سال: MAX-AGE=31536000و یکی از دستورات کش ممکن است Public باشد یعنی کش مورد نظر به شکل عمومی است اگر شما در جهت افزایش سرعت سایت خود قرار هست کش را به هاست اضافه کنیدو اطلاعات موجود خصوصی نیست میتوانید از  Public استفاده نمایید که اصولا اکثر فایل‌ها از این نوع دستور هستند. می‌توان به جای  Public  دستورات دیگر هم درج کرد، به شکل کلی سه دستور دیگر هم در Cache-Control وجود دارد:

1. • PUBLIC
     در بالا توضیح داده شد.
   • PRIVATE
     دستور Private به این معناست که کش شدن برای یک کاربر خاص است. مثلا اگر من به حساب فیسبوک خود بروم قطعا مواردی برای من کش خواهد شد که اگر شما به آن آدرس بروید، برای شما کش نخواهد شد چرا که من وارد اکانت خود شده و دارای حریم اطلاعاتی هستم که فیسبوک تعیین کرده و همین موضوع برای شما هم هست و وقتی شما وارد اکانت خود می‌شوید و به آدرس فیسبوک خود مراجعه می‌کنید مواردی که برای شما کش می‌شود لزوما همه آنها برای من کش نمی‌شود.
   • NO-STORE
     دستور No-Store یک دستور قوی‌تری است که از کش شدن تحت هر شرایطی جلوگیری می‌کند.

خط چهار هم جمله را به پایان می‌رساند و اعلام می‌کند دستورات به پایان خود رسیدند و آماده برای دستورات بعدی می‌شوند (اگر موجود داشته باشد).

کد برای حل مشکل Leverage browser caching در .htaccess

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

کد یک:

کد دو:

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

کد برای حل مشکل Leverage browser caching در Nginx

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

نحوه چک کش اعمال شده

شما می‌توانید بعد از اعمال کدهای بالا در ساخت سایت خود، کش طراحی سایت خود را توسط مرورگرها بررسی کنید که آیا به درسی تنظیم شده‌اند یا خیر، به این منظور بر روی سایت خود کلیک راست کرده و وارد بخش DevTools گوگل کروم شوید و سپس وارد تب Network شده و سایت خود را دوباره رفرش کنید و یکی از فایل‌های سمت چپ را انتخاب کرده و در سربرگ Response Header کش‌های اعمال شده را مشاهده کنید. البته می‌توانید از ابزارهای آنلاین Gtmetrix هم استفاده کنید.

netword-developers-tools

نکات تکمیلی:

اگر در لیست شما html یا عکس‌هایی برای یک دوره زمانی در مرورگر کاربر کش می‌شوند به این معنی است که شما اگر خواستید تغییراتی در صفحه اعمال کنید ممکنه خیلی از این تغییرات برای کاربران قابل مشاهده نباشند. این به این علت که کاربران به جای فایل‌های فعلی، به فایل‌های ذخیره شده نگاه می‌کنند یعنی همان کش محلی. البته با روش‌هایی می‌توان این مشکل را رفع کرد که یکی از رایج‌ترین آنها URL fingerprinting است. مثلا شما فرض کنید یک فایل CSS دارید و قصد تغییرات آن را دارید، این فایل قبلا در کش محلی کاربران با نام main.css ذخیره شده است، حال شما تغییراتی در آن فایل CSS اعمال می‌کنید و نام آن main_1.css می‌شود و اگر دوباره تغییراتی اعمال کنید نام به main_2.css تغییر می‌کند. روش URL fingerprinting برای تغییرات ناگهانی مفید است. که در پست رفع خطای Riove query strings from static resources بیشتر درباره این روش صحبت کرده‌ایم.
نکته یک در بالا می‌تواند به شکل دیگری به کمک درخواست‌های شرطی صورت بپذیرد، درخواست‌های شرطی (Conditional requests) درخواست‌هایی هستند که مرورگر می‌تواند از سرور بپرسد که آیا فایل کپی ذخیره شده در کش مرورگر با فایل موجود در سرور فرق دارد یا خیر؟ ایا فایل موجود در سرور دست‌خوش آپدیت و یا تغییرات بوده است یا نه؟ مرورگر اطلاعاتی را که درباره‌ی فایل کپی ذخیره شده در کش را ارسال می‌کند و سرور تعیین می‌کند که آیا فایل اپدیت شده و فایل جدید باید ارسال گردد یا نه همان فایل کپی ذخیره شده در مرورگر است؟ اگر مورد دوم باشد در این حالت وضعیت 304 (HTTP 304 Not Modified status) بازگشت داده می‌شود. ETag یا یا entity tag یک نوع HTTP Header یکی از این نوع درخواست‌های شرطی است.

Conditional-requests

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

رفع ارور Leverage browser caching برای Google Analytics

یکی از خطاهای رایج و سوال‌های زیادی که از بنده می‌شود نحوه بهینه سازی و کش کردن لینک JS آمارگیر گوگل آنالیتیکس در سایت است. چرا که این فایل فقط ۲ ساعت کش می‌شود و به همین خاطر ابزارهای آنلاین نیز یک نوع خطا حساب می‌کنند زیرا مدت زمان انقضا دو ساعت بسیار کم می‌باشد به مانند اسکرین شات زیر که مشاهده می‌کنید. علت آن این است که گوگل می‌خواهد اگر تغییراتی اعمال کرد این تغییرات سریع برای همه کابران صورت بپذیرد و در این پست گفته از روش انتقال آنالیتیکس به لوکال اجتناب کنید و اشاره می‌کند که:

leverage-browser-caching-pagespeed-insights-analytics

به کمک افزونه Complete Analytics Optimization Suite به سادگی می‌توانید کش آمارگیر گوگل آنالیتیکس را در لوکال دست خوش تغییرات دهید، این افزونه را از مخزن وردپرس دانلود و نصب کنید و سپس اطلاعات لازم برای چنین عملی مثل Google Analytics Tracking ID را به این پلاگین بدهید، Position of traking code را هم توصیه میکنیم Footer را انتخاب نمایید و بعد سیو کنید. تغییرات انجام شد و لذت برید

local-analytics-settings

افزونه کش وردپرس

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

• افزونه Cache Enabler
• افزونه W3 Total Cache
• افزونه WP Super Cache

رفع خطای Minify CSS در gtmetrix

در این جلسه مقاله داریم درباره مشکل Minify CSS و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در کمتر از ۱۰ دقیقه در سایت پیدا و رفع کنیم.

خلاصه‌ی از خطا Minify CSS

نام: Minify CSS
نوع: مربوط به CSS
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 94%

خطای Minify CSS در Gtmetrix چیست؟

عبارت Minify در روند بهینه سازی سئو سایت به معنای طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی، قیمت طراحی سایت)با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها نیز است. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمت کاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

minify-css

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

کمی دقیق‌تر درباره خطای Minify CSS صحبت کنیم، به مثال زیر توجه کنید:

اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرها ندارد. Minify شده یک فایل CSS همانند زیر است:

اگر دقت کرده باشید هر دو کدهای CSS یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد. حال که درک بهتری نسبت به Minify CSS پیدا کردیم باید چگونه متوجه شویم که کدام فایل‌های CSS ما Minify شده است؟

تشخیص خطای Minify CSS

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

GTMetrix-minify-css-result

رفع ارور Minify CSS

روش اول استفاده از سایت Gtmetrix

وقتی سایت Gtmetrix خطای minify CSS را به شما نشان می‌دهد فایل فشرده آن را هم قرار می‌دهد، همانند عکس زیر:

minify-css-gtmetrix

فایل فشرده شده را می‌توانید دانلود کنید و به دایرکتوری فایل غیرفشرده رفته و فایل فشرده را جایگزین فایل غیرفشرده نمایید.

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

csscompressor-css-minify

شما می‌توانید از ابزارهای زیر برای فشرده سازی فایل‌ها استفاده کنید به دین منظور وارد یکی از سایت‌های زیر شوید و تمام کدهای فایل غیرفشرده CSS را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده CSS یا همان Minify CSS را به شما بدهد و سپس در هاست خود آپلود کنید.

• cssminifier.com
• csscompressor.com
• minifier.org

روش سوم استفاده از پلاگین وردپرس

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌های CSS استفاده کنید. سایر افزونه‌های دیگر هم وجود دارند به عنوان مثال یکی از کارهای پلاگین رایگان WP Super Minify که می‌تواند انجام دهد minify کردن فایل‌های سمت کاربر هست این پلاگین تنظیمات اضافه‌تری هم برای بهینه سازی سرعت سایت در اختیار شما قرار می‌دهد. ولی اگر شما فقط مشکل ارور minify CSS را دارید می‌توانید از پلاگین اولی یا روش‌های اول و دوم استفاده نمایید.

روش چهارم استفاده از تنظیمات CDN

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار:

نتیجه کار Minify CSS نیز باید به شکل زیر باشد:

seoblogger-after-minify-css

رفع خطای Minify JavaScript در gtmetrix

در این مقاله قصد داریم درباره مشکل Minify JavaScript و حل آن در GTmetrix صحبت کنیم.

خلاصه‌ی از خطا Minify JavaScript

نام: Minify JavaScript
نوع: مربوط به JavaScript
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 87%

خطای Minify JavaScript در Gtmetrix چیست؟

عبارت Minify در روند بهینه‌سازی‌ سئو سایت به معنای طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی، قیمت طراحی سایت) با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدهااست. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمتکاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

کمی دقیق‌تر درباره خطای Minify Javascript صحبت کنیم، به مثال زیر توجه کنید:

اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرهاندارد. Minify شده یک فایل Javascript همانند زیر است:

اگر دقت کرده باشید هر دو کدهای Javascript یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد. حال که درک بهتری نسبت به Minify Javascript پیدا کردیم باید چگونه متوجه شویم که کدام فایل‌های Javascript ما Minify شده است؟

رفع ارور Minify JavaScript

روش اول Minify JavaScript

پیدا کردن ارور Minify JavaScript نیز به سادگی تمام است، شما کافی است به یکی از ابزارهای تست سرعت سایت همانند Gtmetrix مراجعه کنید و اگر خطای Minify Javascript مشاهده کردید یک فایل برای دانلود خوده سایت Gtmetrix برای شما قرار می‌دهید که آن فایل Minify شده Javascript است و می‌توانید دانلود کنید و در هاست آپلود کنید.

روش دوم Minify JavaScript

minify-javascript

شما می‌توانید از ابزارهای زیر برای فشرده سازی فایل‌ها استفاده کنید به دین منظور وارد یکی از سایت‌های زیر شوید و تمام کدهای فایل غیرفشردهJavaScript را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده JavaScript یا همان Minify JavaScript را به شما بدهد و سپس در هاست خود آپلود کنید.

• javascript-minifier
• refresh-sf
• jscompress
• jsmini

روش سوم Minify JavaScript

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌های JS استفاده کنید. پلاگین‌های جامع دیگر هم هستند که جدا از minify کردن انواع فایل‌ها سمت کاربر، تنظیمات دیگری هم برای بالا بردن سرعت لود سایت در اختیار شما می‌دهند به عنوان مثال پلاگین رایگان WP Super Minifyهم minify کردن فایل‌های سمت کاربر را انجام می‌دهد و هم نیز تنظیمات مختلف دیگر برای افزایش سرعت سایت شما در این پلاگین دیده می‌شود.

روش چهارم Minify JavaScript

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار Minify JavaScript:

نتیجه کار Minify JavaScript را می‌توانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

minify-js-before-after

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

رفع خطای Minify HTML در gtmetrix

در این مقاله قصد داریم درباره خطای Minify HTML و حل آن در GTmetrix صحبت کنیم. البته رفع خطای Minify HTML تاثیر ناچیزی در سرعت سایت خواهد داشت برخلاف دو خطای Minify CSS و Minify JavaScript که تاثیر بالایی در افزایش سرعت سایت دارند، برهرحال خواندن مقاله صرف از هر نتیجه‌ای برای شما مفید خواهد بود.

خلاصه‌ی از خطا Minify HTML

نام: Minify HTML
نوع: مربوط به HTML
اولویت: کم
میزان سختی: ساده
میانگین امتیاز: 98%

خطای Minify HTML در Gtmetrix چیست؟

عبارت Minify در روند بهینه‌سازی‌سایت به معنای طراحی سایت با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها و همچنین کامنت‌های بین کدها است. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمت کاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

رفع ارور Minify HTML

روش اول Minify HTML برای سایت‌های استاتیک

اگر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما استاتیک است یعنی دارای محتوای ثابت و بدون CMS است می‌توانید از سایت‌های زیر برای Minify فایل‌های HTML استفاده نمایید.

• willpeavy.com
• minifycode.com

مزیت وب سایت minifycode در این است که جدا از minify کردن فایل‌های HTML می‌تواند فایل‌های CSS و JavaScript را هم Minify کند.

روش دوم Minify HTML در وردپرس

برای Minify HTML در ساخت سایت‌های وردپرس کافی است یکی از پلاگین‌های زیر را نصب کنید تا عمل Minify صورت بگیرد.

• Minify HTML
• HTML Minify
• WP Super Minify
• Autoptimize

پیشنهاد ما استفاده از افزونه Autoptimize یا WP Rocket است و می‌توانید جدا از minify کردن فایل‌های HTML سایر فایل‌های مهم همانند CSS و JavaScript را فشرده سازی کنید.

روش سوم Minify HTML در جوملا

اگر از  CMS جوملا استفاده می‌نمایید می‌توانید از پلاگین‌های زیر بهره ببرید.

• JCH Optimize
• EXT HTML Compressor

روش چهارم Minify HTML در Cloudflare

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر طراحی سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار Minify HTML:

نتیجه کار Minify HTML را می‌توانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

minify-html-result

رفع خطای Minimize request size در gtmetrix

در این مقاله قصد داریم درباره خطای Minimize request size و حل آن در GTmetrix صحبت کنیم. رفع ارور Minimize request size برای افزایش سرعت سایت و بهینه سازی لود شما بسیار حائز اهمیت خواهد بود و از طرفی رفع این مشکل باعث رفع مشکلات دیگری هم خواهد شد که در ادامه به بررسی و تشریح آن می‌پردازیم.

خلاصه‌ی از خطا Minimize request size

نام: Minimize request size
نوع: محتواها
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 98%

خطای Minimize request size در PageSpeed چیست؟

معمولا در هر صفحه از طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) تعدادی فایل (عکس‌ها، استایل‌ها، فایل‌های جاوا اسکریپت و …) استفاده شده است ، برای دریافت هر کدام از این فایل‌ها مرورگر مجبور است یک درخواست به سمت سرور ارسال کند ، رد و بدل این درخواست‌ها توسط مرورگر و سرور نیاز به زمان زیادی دارد و اگر تعداد فایل‌ها زیاد باشید به مراتب تعداد درخواست‌ها بیشتر می‌شود و طبیعتا درگیری سرور هم بالا می‌رود، این موضوع شاید در سایت‌های کم بازدید خیلی محسوس نباشد ولی وقتی بازدیدکننده سایت بالا باشد قطعا رفع ارور Minimize request size قدم بزرگی در بهینه سازی سایت چه در سمت سرور و چه در سمت کاربر خواهد کرد.

حال اگر با ارور Minimize request size در GTMetrix برخورد کردید نشان از این است که تعداد درخواست‌ها برای بارگذاری عکس‌ها، فایل‌های CSS یا جاوا اسکریپت و… به سرور ارسال می‌گردد، باید کاهش پیدا کند. چنین خطاهایی مخصوصا در CMS های رایگان بسیار رایج است چرا که سازنده قالب برای بالا بردن انعطاف‌پذیری قالب خود ناگزیر است استایل‌ها و فایل‌های جداگانه‌ای تعریف کند مثلا برای راست‌چین کردن قالب، کدهای آن را در rtl.css قرار می‌دهد درحالی که در اکثر سایت‌هایی که طراحی سایت آن به شکل اختصاصی صورت می‌گیرد و دارای CMS اختصاصی هستند چنین مواردی کمتر دیده می‌شود البته این موضوع به معنی ضعف CMSهای رایگان نیست و با کمی مدیریت و بهینه سازی قالب می‌توان این مشکل را به راحتی رفع نمود.

combine-external-javascript-and-css

رفع خطای Minimize request size

روش‌های مختلفی را می‌توان برای فایل‌ها اجرا کرد تا ارور Minimize request size رفع شود، ادغام فایل‌ها، ایجاد لود تنبل فایل‌ها و یا حذف فایل‌های اضافی از مهم‌ترین روش‌ها برای رفع این خطا است.

• بهینه سازی عکس برای خطای Minimize request size

  یکپارچه سازی تصاویر و ادغام آنها یکی از مهم‌ترین فاکتورها در بهبود خطای Minimize request size است. یکی از بهترین روش‌ها برای ادغام تصاویر ٰcss sprites است و ما در مقاله رفع خطای Combine images using CSS sprites به تشریح درباره این خطا صبحت کردیم و پیشنهاد می‌شود برای رفع ارور Minimize request size مقاله اشاره شده را حتما بخوانید.
  همچنین شما می‌توانید از لود تنبل برای عکس‌ها (Images Lazy Loading) نیز استفاده کنید تا تعداد درخواست‌های همزمان نیز به شدت کاهش یابد، روش Lazy Load اگر برای عکس‌ها فعال شوید به این شکل است که کاربرها صرفا عکس‌هایی را لود می‌کنند که در صفحه مانیتور آنها قابل مشاهده است و مثلا عکس‌های موجود در پایین سایت را در مرورگر خود لود نمی‌کنند مگر با اسکرول به سمت پایین صفحه بروند و آن زمان درخواست برای بارگذاری عکس به سمت سرور ارسال می‌شود، روش لود تنبل باعث کاهش چشمگیری از درخواست‌های اولیه برای لود یک صفحه می‌شود. برای فعال‌سازی این قابلیت در سایت خود کافی است بسته به نوع کدنویسی و CMS خود در گوگل جستجو کنید. مثلا lazy load Plugin WordPress یا lazy load Plugin Joomla یا اگر CMS اختصاصی دارید براساس نوع زبان نوشته شده سایت خود جستجو را انجام دهید مثلا lazy load PHP Example یا lazy load ASP.NET MVC

• بهینه سازی فایل‌های استایل و جاوااسکریپت برای خطای Minimize request size

  روش‌هایی مشابه همانند عکس برای فایل‌های CSS و JS نیز وجود دارد اگر از CMS اختصاصی استفاده می‌کنید بهترین است به طراح سایت خود این موضوع را به اشتراک بگذارید و از او بخواهید برای رفع این خطا اقدام کند ولی اگر از CMSهای رایگان استفاده می‌کنید افزونه های مختلفی برای یکپارچه سازی و ادغام فایل های سایت شما وجود دارد. افزونه وردپرس Autoptimize جدا از رفع ارور Minify CSS ، رفع ارور Minify JavaScript و همچنین رفع ارور Minify HTML، خطای Minimize request size را هم می‌تواند برطرف کند، این افزونه با ادغام کردن فایل‌های CSS با هم و همینطور ادغام کردن فایل‌های JS با هم باعث کاهش تعداد این فایل‌ها شده و در نتیجه باعث کاهش تعداد درخواست‌ها هم نیز می‌شود. البته باید توجه داشته باشید که بعد از فعال‌سازی این امکان سایت شما ظاهر خود را نگه‌داشته باشد چرا که گاهی ممکن است ادغام فایل‌ها باعث تداخل و بهم‌ریختی سایت شود.افزونه وردپرس WP Rocket نیز تمام امکانات افزونه Autoptimize را نیز دارد بعلاوه می‌تواند حالت لود تنبل را برای عکس‌ها نیز محیا کند. یکی دیگر از روش‌های کاهش درخواست و برای رفع مشکل Minimize request size استفاده از اتریبیوت‌های  defer و یا async است.

• حذف فایل های اضافه برای رفع خطای Minimize request size

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

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

  اگر توجه کرده باشید طبق عکس زیر می‌توانید به جای ایجاد فایل جاوااسکریپت خارجی، به روش inline از آنها استفاده نمایید که باعث کاهش تعداد درخواست یا همان Minimize request size می‌شود، البته توجه داشته باشید که باید یک سری شرایط را رعایت نمایید، برای اینکه این روش را به شکل اصولی برای فایل‌های CSS و JS و حتی عکس‌ها انجام دهید.

inline-CSS-JS

رفع خطای Optimize images – بهینه سازی عکس

در این جلسه قصد داریم درباره مشکل Optimize images و حل آن در GTmetrix صحبت کنیم و بررسی کنیم که چگونه عکس و تصاویر سایت خود را در جهت افزایش سرعت سایت، بهینه سازی کنیم و روش‌های رایج بهینه سازی عکس چیست و چه تاثیری بر روی سئو و تجربه کاربری دارد و اگر عکس ها بهینه سازی نشوند چه اتفاقی سمت کاربر و سئو تصاویر رخ می‌دهد.

خلاصه‌ای از خطا Optimize images

نام: Optimize images
نوع: عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 69%

بهینه سازی عکس یعنی چه؟

وقتی از عبارت بهینه سازی عکس استفاده می‌کنیم دو روش کلی برای بهینه سازی تصاویر مد نظر است، روش اول بهینه سازی، سایز عکس ها (Serve scaled images) و کاهش حجم عکس ها (Optimize images) هست که باعث افزایش سرعت سایت می‌شود روش اول به شکل غیرمستقیم بر روی بهبود سئو سایت تاثیر می‌گذارد. روش دوم بهینه سازی عکس، استفاده از اتریبیوت های همانند title و alt در عکس ها هست که به شکل مستقیم بر روی سئو تاثیرگذار است. در PageSpeed و ابزار تست سرعت gtmetrix اشاره به بهینه نبودن سایز و حجم عکس‌ها دارد به عبارتی خطای Optimize images و خطای Serve scaled images روش اول را متذکر می‌شود و ما در این مقاله حجم عکس ها را کامل بررسی میکنیم.

علت خطای Optimize images در PageSpeed چیست؟

GTmetrix_Optimize_Images

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

رفع ارور Optimize images

روش اول – بهینه سازی تصویر در فتوشاپ

بهترین روش برای رفع ارور Optimize images قبل از آپلود عکس در سایت می‌باشد شما می توانید با استفاده از ابزارهای همانند فتوشاپ سایز و حجم آنها را بدون کاهش کیفیت، خروجی بگیرید. به این منظور عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را انتخاب کنید.

روش دوم – بهینه سازی تصویر در ابزارهای آنلاین

روش دوم برای رفع ارور Optimize images استفاده از ابزارهای آنلاین فشرده سازی می‌باشد. سایت‌های معروف و قوی همانند optimizilla.com، سایت tinypng.com و compressor.io ابزارهای آنلاین مناسبی برای کاهش انواع فایل‌های تصویری هستند.

روش سوم – بهینه سازی تصویر در وردپرس و جوملا

روش اول و دوم قبل از آپلود عکس در سایت کاربرد دارد بر خلاف روش سوم که بعد از اپلود تصاویر نیز مورد استفاده قرار می‌گیرد. روش سوم برای رفع مشکل Optimize images استفاده از پلاگین های وردپرس و جوملا است. گاهی ممکن است شما تعداد تصاویر بسیاری را در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) خود با حجم بالا قرار داده‌اید و زمان لازم برای بهینه سازی حجم زیادی از عکس ها را ندارید در این صورت پلاگین هایی که اشاره خواهیم کرد می‌توانند به شما اندکی در کاهش حجم تصاویر کمک کنند.
از معروف ترین پلاگین های وردپرس می‌توان به افزونه EWWW Image Optimizer و افزونه Smush اشاره کرد و پلاگین‌های ImageRecycle image optimizer و Imgen برای مدیریت محتوای جوملا مناسب هستند، البته جوملا پلاگین دیگری به نام JCH Optimize نیز دارد که پک کامل در زمینه بهینه سازی سایت است و یکی از ویژگی‌های این پلاگین فشرده سازی تصاویر است.

روش پیشنهادی و کلام اخر:

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

رفع خطای Serve scaled images – بهینه سازی عکس

در این مقاله قصد داریم درباره مشکل Serve scaled images و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چگونه عکس و تصاویر سایت خود را در جهت افزایش سرعت سایت، بهینه سازی کنیم و روش‌های رایج بهینه سازی عکس چیست و چه تاثیری بر روی سئو و تجربه کاربری دارد و اگر عکس ها بهینه سازی نشوند چه اتفاقی سمت کاربر و سئو تصاویر رخ می‌دهد.

خلاصه‌ای از خطا Serve scaled images

نام: Serve scaled images
نوع: عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 70%

وقتی از عبارت بهینه سازی عکس استفاده می‌کنیم دو روش کلی برای بهینه سازی تصاویر مد نظر است، روش اول بهینه سازی، سایز عکس ها (Serve scaled images) و کاهش حجم عکس ها (Optimize images) هست که باعث افزایش سرعت سایت می‌شود روش اول به شکل غیرمستقیم بر روی بهبود سئو سایت تاثیر می‌گذارد. روش دوم بهینه سازی عکس، استفاده از اتریبیوت های همانند title و alt در عکس ها هست که به شکل مستقیم بر روی سئو تاثیرگذار است. در PageSpeed و ابزار تست سرعت gtmetrix اشاره به بهینه نبودن سایز و حجم عکس‌ها دارد به عبارتی خطای Optimize images و خطای Serve scaled images روش اول را متذکر می‌شود و ما در این مقاله ابعاد عکس ها را کامل بررسی میکنیم.

علت خطای Serve scaled images در PageSpeed چیست؟

unoptimized-image

به عکس سمت راست بالا توجه کنید، مرورگر درخواستی به سمت سرور می‌دهد برای دانلود عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت درحالی که توسط CSS عکس scale شده و به یک تصویر بند انگشتی (thumbnail) تبدیل شده است. طراحی سایت  (طراحی سایت شرکتی، طراحی سایت فروشگاهی) ما در استفاده از عکس‌ها اینجا مناسب نیست و داریم کاربر را به اجبار دانلود به حجم بالایی از داده‌ها میکنیم درحالی که نیازی ندارد. مثلا در عکس بالا برای نمایش تصاویر محصولات به عکسی با ابعاد ۵۰۰ * ۲۸۱ و حجم ۱۰۰ کیلوبایت نیاز داریم ولی عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت لود می‌شود. شما اگر روزی هزار بازدید کننده باشته باشید و عدد ۱۰۰۰ را در ۲.۵ ضرب کنیم تقریبا 2.5 گیگابایت از پهنای باند روزانه مصرف صرفا این عکس غیربهینه می‌شود و در ماه ۷۳ گیگابایت باید پنهای باند خرج یک عکس کنیم، خب ما در این مثال ساده صرفا یک عکس را حساب کردیم اگر ۱۰۰ یا ۱۰۰۰ عکس غیربهینه داشته باشیم یا کلا توجه به عکس‌ها نکنیم چه مشکلاتی پیش می‌اید؟

image-optimization-dimensions

رفع ارور Serve scaled images

روش اول – بهینه سازی تصویر در فتوشاپ

بهترین روش برای رفع ارور Serve scaled images قبل از آپلود عکس در سایت می‌باشد شما می‌توانید با استفاده از ابزارهای همانند فتوشاپ سایز و حجم آنها را بدون کاهش کیفیت، خروجی بگیرید. به این منظور عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را وارد یا انتخاب کنید.

روش دوم – بهینه سازی تصویر در ابزارهای آنلاین

روش دوم برای رفع ارور Serve scaled images استفاده از ابزارهای آنلاین تغییر سایز می‌باشد. سایت‌های همانند PicResize.com، سایت imageresize.org و resizeimage.net ابزارهای آنلاین مناسبی برای تغییر سایز و ابعاد فایل‌های تصویری هستند.

روش سوم – بهینه سازی تصویر در وردپرس و جوملا

روش اول و دوم قبل از آپلود عکس در سایت کاربرد دارد بر خلاف روش سوم که بعد از اپلود تصاویر نیز مورد استفاده قرار می‌گیرد. روش سوم برای رفع مشکل Serve scaled images استفاده از پلاگین های وردپرس و جوملا است. گاهی ممکن است شما تعداد تصاویر بسیاری را در سایت خود با حجم بالا قرار داده‌اید و زمان لازم برای بهینه سازی، تغییر سایز و ابعاد عکس ها را نداشته باشید در این صورت پلاگین‌هایی که اشاره خواهیم کرد می‌توانند به شما در تغییر سایز و همچنین در کاهش حجم تصاویر کمک کنند.
از افزونه های وردپرس می‌توان به پلاگین Imsanity اشاره کرد، برای CMS جوملا هم پلاگین ImageResizer موجود است، توجه داشته باشید قبل از نصب و اعمال تنظیمات این پلاگین‌ها، بک آپ از هاست و دیتابیس خود بگیرید.

آپدیت (Feb 6 2018): یکی از مشکلاتی که خیلی از دوستان درباره این خطا دارند این هست که عکس موجود در صفحه محصولات، همان عکسی است که در صفحه اصلی سایت فراخوانی می‌شود با این تفاوت که در صفحه اصلی عکس به کمک CSS تغییر سایز داده شده و کوچیک تر شده است، درواقع عکسی که باید فقط در صفحه محصولات باکیفیت و تقریبا بزرگ باشد ولی در صفحه اصلی هم لود می‌شود که این موضوع جدا از بروز خطای Serve scaled images در GTmeteix باعث بالاتر رفتن حجم صفحه اول سایت و دیر لود شدن آن برای کاربران و ربات های نظیر گوگل بات‌ها می‌گردد. در ادامه به چند راه‌کار اشاره می‌شود، هر چند ممکن است برخی از آنها زمان‌بر و یا قابل انجام نباشد ولی ما تمام روش‌های ممکنه برای رفع این خطا را اشاره میکنیم و انتخاب یکی از آن‌ها به عهده شما می‌باشد.

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

روش پیشنهادی و کلام اخر:

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

رفع خطای Optimize the order of styles and scripts در gtmetrix

در این مقاله قصد داریم درباره مشکل Optimize the order of styles and scripts و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور اینخطا در جهت افزایش سرعت سایت به ما کمک میکند.

خلاصه‌ای از خطا Optimize the order of styles and scripts

نام: Optimize the order of styles and scripts
نوع: JS/CSS
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 95%

Styles-Optimizer-order

خطای Optimize the order of styles and scripts چیست؟

خطا Optimize the order of styles and scripts که به فارسی می‌توان گفت چیدمان صحیح فایل‌های CSS و JavaScript ترجمه کرد، زمانی اتفاق می‌افتد که فایل‌های CSS و JS طراحی سایت شما به ترتیب اصول لود نشده باشند. بنابراین سایت جی تی متریکس با برخورد به این ارور به شما می‌گوید که در جهتبهینه سازی سایت خود و همچنین نحوه صحیح قرارگیری المان‌ها، باید ابتدا فایل‌های CSS (فایل‌های استایل‌ دهی) را قبل از فایل‌های JS (فایل‌های جاوا اسکریپت) فراخوانی کنید.

گاهی ممکن است توسط کدهای JS بخواهید تغییراتی در کدهای CSS ایجاد کنید و به این ترتیب باید اول کدهای CSS لود شوند، و اصولا کدهای CSS سبک‌تر هستند و حتی از نظر تجربه کاربری اولیت بیشتری برای سریع لود شدن نسبت به JS دارند، چرا که ظاهر اصلی طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) و چیدمان یک صفحه برعهده کدهای CSS است. کدهای CSS از این جهت هم مهم‌تر هستند تا کاربران را سریع از دست ندهیم و بعد از درگیر شدن کاربر با سایت، می‌توان فایل‌های نسبتا سنگین‌تر JS را لود کرد.

به زبان ساده در یک صفحه از سایت تگ‌های مربوط به استایل (CSS) باید بالاتر از تگ‌های مربوط به جاوااسکریپت (JS) قرار گیرد.

توضیحات گوگل در این باره:

Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.

رفع خطای Put CSS in the document head در gtmetrix

در این مقاله قصد داریم درباره مشکل Put CSS in the document head و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا در جهت افزایش سرعت سایت به ما کمک میکند.

ساخت سایت

بهینه سازی سایت

خلاصه‌ای از خطا Put CSS in the document head

ام: Put CSS in the document head
نوع: CSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 99%

خطای Put CSS in the document head

ارور Put CSS in the document head زمانی در سایت جی تی متریکس رخ می‌دهد که شما فایل CSS یا همان فایل استایل خود را در خارج از تگ Headفراخوانی کنید مثلا در تگ body استایل را قرار دهید. برای حل این مشکل کافی است آن فایل را در داخل تگ Head قرار دهید تا خطای Put CSS in the document head سبز شود.

طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی)

رفع خطای Make AJAX cacheable در YSlow جی تی متریکس

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

بهینه سازی سایت

طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)

خلاصه‌ای از خطا Make AJAX cacheable

نام: Make AJAX cacheable
نوع: JS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: 100%

بهبود سرعت سایت با Make AJAX cacheable

به کمک AJAX می‌توانیم درخواست‌های کاربران را بدون بارگذاری صفحات در پیش‌زمینه از سرور درخواست کنیم، البته استفاده از AJAX به معنای این نیست که کاربران منتظر پاسخ درخواست خود نمی‌باشند ولی اگر به درستی کدنویسی شود روند پاسخ بهینه سازی می‌شود، با این روش می‌توانید پاسخ کاربران را کش کرده و سرعت پاسخگویی را دوچندان کنید، برای توضیحات بیشتر می‌توانید به این لینک مراجعه کنید در لینک اشاره شده به کمک JQuery یک نمونه از AJAX cacheable را نمایش می‌دهد، شما می‌توانید به کمک جی کوئری یک درخواست ساده به شکل Ajax ارسال کنید. بعید است شما با خطای Make AJAX cacheable روبه‌رو شوید و بیشتر بخش YSlow که مربوط به یاهو است قصد دارد این نکته را یاداوری کند که استفاده از این تکنولوژی می‌تواند بهبود سرعت سایت شود.

سئو سایت

توضیحات بیشتر از زبان یاهو:

One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.

رفع خطای Avoid CSS expressions در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Avoid AlphaImageLoader filter صبحت کنیم و بررسی کنیم که این خطا چگونه باعث کاهش سرعت سایت ما می‌شود.

بهینه سازی سایت

سئو سایت

خلاصه‌ای از خطا Avoid CSS expressions

نام: Avoid CSS expressions
نوع: CSS
اولویت: متوسط
میزان سختی: در حد وسط
میانگین امتیاز: 98%

Avoid CSS expressions چیست؟

CSS expressions یک دستور قوی و البته خطرناک (از نظر امنیت) برای داینامیک کردن ویژگی‌های CSS است. این دستور فقط در IE ورژن ۵ به بعد پشتیبانی می‌شود، برای مثال که چگونه از CSS expressions استفاده می‌شود:

با استفاده از CSS expressions هر ساعت رنگ پیش‌زمینه نیز می‌تواند تغییر کند:

با CSS expressions می‌توان در یک سری متدهای جاوااسکریپت در CSS استفاده کرد که فقط مرورگر IE آن را پشتیبانی می‌کند. بنابرمشکلاتی که این دستور ایجاد می‌کند بهتر است استفاده از آن پرهیز کنید و از عبارات مشابه دیگر برای اعمال تغییرات لازم در صفحات وب استفاده کنید.

قیمت طراحی سایت

طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی)

توضیحات سایت گوگل درباره CSS expressions

Unfortunately, the performance penalty imposed by CSS expressions is considerable, as the browser reevaluates each expression whenever any event is triggered, such as a window resize, a mouse movement and so on. The poor performance of CSS expressions is one of the reasons they are now deprecated in IE 8. If you have used CSS expressions in your pages, you should make every effort to remove them and use other methods to achieve the same functionality

رفع خطای Avoid AlphaImageLoader filter در YSlow جی تی متریکس

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

خلاصه‌ای از خطا Avoid AlphaImageLoader filter

نام: Avoid AlphaImageLoader filter
نوع: CSS
اولویت: متوسط
میزان سختی: در حد وسط
میانگین امتیاز: 98%

Avoid AlphaImageLoader filter چیست و رفع آن

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

بهینه سازی سایت

هر چند IE مشکلات فراوانی برای طراحی سایت  بود ولی این مشکل در IE ورژن ۷ به قبل موجود بوده است و در حال حاضر دیگر چنین مشکلی در ورژن‌های بالای ۷ ندارد. بنابراین اگر طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی)‌ شما هم چنین مشکلی را دارد سعی کنید این فیلتر را حذف کنید چرا که درصد بسیار کمی از کاربران از IE ورژن ۷ به پایین استفاده می‌کنند. توضیحات بیشتر در یاهو

رفع خطای Add Expires headers در YSlow جی تی متریکس

در ادامه مقاله درباره خطای Add Expire headers صحبت خواهیم کرد و بررسی می‌کنیم که چگونه رفع این مشکل کمک به بالا بردن سرعت سایت ما می‌کند.

خلاصه‌ای از خطا Add Expires headers

نام: Add Expires headers
نوع: سرور
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 25%

Expires headers چیست؟

هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

طراحی سایت 

این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. حال نکته اینجا است که چه مدت باید اطلاعات در کش مرورگر بماند؟ باید تاریخ انقضایی برای فایل‌ها مشخص شود و اگر تاریخانقضا برای اطلاعات درج نشود هر بار کاربر باید فایل‌های مشترک بین صفحات را دانلود کند و آن موقع خطای Expires headers رخ می‌دهد. تاریخ انقضا به مرورگرها خاطرنشان می‌کند که کدام فایل را از سرور درخواست کند و کدام فایل را از کش مرورگر درخواست کند.

رفع خطای Expires headers چگونه است؟

در ابتدا شما باید بازه تغییرات هر کدام از فایل‌های خود را بدانید به این معنا که این نوع فایل‌ها در طراحی سایت(طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما هر از چندگاهی به‌روز رسانی می‌شود و کدام یک از نوع فایل‌ها تغییراتی پیدا نمی‌کنند. در پایین لیستی از انواع فایل‌ها درج شده:

• images: jpg, gif, png
• favicon/ico
• javascript
• css

معمولا favicon ها در ساخت سایت تغییر نمی‌کنند و فایل‌های عکس هم به ندرت تغییر می‌کنند و از طرفی گاهی فایل‌های جاوااسکریپت تغییر می‌کنند ولی ممکن است فایل‌های CSS تغییرات بیشتری داشته باشند و بر اساس همین موضوع ما تاریخ انقضای این فایل‌ها را مشخص می‌کنیم تا باعث برطرف شدن مشکل Expires headers شود.

به کد زیر توجه کنید:

تاریخ انقصا با دستور ExpiresActive On نیزفعال می‌شود همان‌طور که در خط ۱ توضیح داده شده است.

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

به ادامه کد توجه کنید:

دستور خط ۲ برای favicon است که به مدت یک سال می‌تواند در کش مرورگر ذخیره شود چرا که حتی بعد از سال‌ها ممکن است favicon یک سایت تغییر نکند.

دستورات خط ۴ تا ۷ مربوط به کش انواع عکس‌ها می‌باشد که هر کدام از عکس‌ها از هر نوعی به مدت ۱ ماه می‌توانند در کش کاربر ذحیره شوند.

دستور خط ۹ و ۱۱ به ترتیب برای فایل‌های CSS و JS است و به مدت یک ماه در مرورگر کاربر ذخیره می‌شود.

دستورنهایی Expires headers:

دستور بالا باید در فایل htaccess قرار گیرد و برای پیدا کردن این فایل اصولا باید به مسیر public_html هاست خود رجوع کنید، اگر چنین فایلی را نداشتید ممکن است مخفی باشد و برای همین در تظیمات کنترل پنل خود فایل‌های مخفی را show کنید و اگر باز چنین فایلی نبود کافی است New file را بزنید و نام .htaccess را درج نمایید تا ساخته شود، سپس دستور بالا را درج نمایید تا تغییرات لازم در کش صورت بگیرد.

توجه داشته باشید که برای رفع خطای Add Expires headers به شکل کامل، باید تمام فایل‌های فراخوانی شده در هاست شما باشد، مثلا اگر عکسی یا فایلی را از سایت دیگر لود می‌کنید شما نمی‌توانید برای آن فایل Expires headers تعریف کنید.

رفع خطای Specify image dimensions در gtmetrix

در این مقاله قصد داریم درباره مشکل Specify image dimensions و حل آن در جی تی متریکس صحبت کنیم.

بهینه سازی سایت

قیمت طراحی سایت

خلاصه‌ای از خطا Specify image dimensions

نام: Specify image dimensions
نوع: عکس
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: 97%

dimensions

حل ارور Specify image dimensions

علت خطا و راه حل رفع آن

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

مثالی از یک عکس بدون مشخص بودن ابعاد:

مثالی از یک عکس با مشخص بودن ابعاد:

Specify-image-dimensions-sample

تاثیر این ارور بر سرعت سایت

رفع خطای Specify image dimensions باعث می‌شود تا تصاویر موجود در سند HTML شما سریع‌تر رندر شوند و نیازهای غیرضروری برای اجرای بازنگری عکس‌ها رفع می‌شود، وقتی مرورگر صفحه‌ای از سایت را رندر می‌کند تا به کاربر نشان دهد فایل‌های مختلفی را دانلود می‌کند که عکس هم شامل موارد دانلود شده می‌باشد، حال اگر ابعاد عکس مشخص نباشد و یا ابعاد مشخص شده با اندازه واقعی آن فرق داشته باشد مرورگر در اینجا برای نشان دادن صحیح المان‌های HTML مجبور است بازنگری لازمه را بر روی عکس انجام دهد، درحالی که اگر ابعاد به شکل صحیح مشخص شده باشند نیازی به این بازنگری نیست، شاید چنین خطایی در زمان قابل تشخص برای ما نباشد ولی هر چه تعداد عکس‌ها بیشتر باشد و ابعاد مشخص نشده باشند زمان نسبتا بیشتری طول می‌شد صفحات رندر شود تا در حالی که ابعاد مشخص است و مرورگر قبل از رندر کردن توسط اتریبیوت های CSS از ابعاد عکس‌ها به خوبی آگاهی پیدا می‌کند.

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

• رفع خطای Serve scaled images
• رفع خطای Optimize images

رفع خطای Specify a cache validator و Configure entity tags

در این مقاله داریم درباره مشکل رایج Specify a cache validator و حل آن در جی تی متریکس صحبت کنیم.

خلاصه‌ای از خطا Specify a cache validator

نام: Specify a cache validator
نوع: سرور
اولویت: زیاد
میزان سختی: راحت
میانگین امتیاز: 92%

specify-a-cache-validator

درباره خطای Specify a cache validator در جی تی متریکس

زمانی که با ارور Specify a cache validator روبه رو می‌شوید نمایان‌گر این موضوع است که تنظیمات کش سرور شما به خوبی تنظیم نشده، حال منظور از اینکه کش وب سرور به خوبی تنظیم نشده است را در ادامه خواهیم گفت.

هر سروری که به خوبی تنظیم شده باشد یک سری محتوای هدر HTTP برای کش کردن فایل‌ها سمت کاربران در جهت بهینه سازی سایت ارسال می‌کند این هدرهای کش اصولا دو عمل اصلی را انجام می‌دهند، یکی Cache Validate یعنی معتبرسازی فایل‌های کش و دیگری Cache Length به معنای طول کش یا مقدار زمان کش است. و هر کدام از این موارد نباشند مشکلاتی برای طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) ایجاد می‌کنند. در ادامه این عبارات را تشریح می‌کنیم.

specify-a-cache-validator-warning

این دو هدر تعیین می‌کنند که چه مدت یک فایل باید نگه داشته شود و اگر این دو هدر تنظیم نشده باشند خطای Leverage browser caching رخ می‌دهد و اگر چنین خطایی را دارید می‌توانید به کمک این پست رفع کنید. ولی اگر چنین مشکلی ندارید به شکل خلاصه بدانید که در هدر Cache-Control مدت زمان انقضا مشخص می‌شود به این منظور که یک عدد بر حسب ثانیه برای کش کردن فایل در نظر می‌گیرد ولی در هدر Expires تاریخ زمان انقضا درج می‌شود و یک تاریخ مشخص می‌شود که مثلا تا فعلان تاریخ فایل کش شود. استفاده از هر دو هدر Expires و Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد. Cache-Control جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی سایت‌های آنالیز سرعت مثل Gtmetrix هدر Expires را چک می‌کنند.

Cache Validate

دو هدر HTTP داریم که Cache Validate را تعیین می‌کند Last-Modified و Etag

این دو هدر تعیین می‌کنند که فایل کش شده برای چه تاریخی و ورژنی است و اگر به خوبی تنظیم نشده باشد خطای Specify a cache validator رخ می‌دهد. به این نکته توجه داشته باشید که شما فقط فایل‌هایی را می‌توانید رفع خطا کنید که در سرور شما باشد پس اگر فایلی در طراحی سایت شما از طریق یک سرور دیگری لود می‌شود به علت دسترسی نداشتن به آن سرور و فایل، نمی‌توان کاری انجام داد.

ما قرار هست در این پست درباره هدرهایی که Cache Validate را تعیین می‌کنند صحبت کنیم و همان‌طور که گفتیم این هدرها نشان می‌دهد که فایل کش شده چه ورژنی دارد و اخرین ورژن کش شده برای چه تاریخی است، هر دو هدر Last-Modified و Etag چنین عملی را انجام می‌دهند، به این دو هدر درخواستی اسم دیگری هم دارند و به آن‌ها Conditional requests یا درخواست‌های شرطی هم گفته می‌شود، در ادامه بیشتر در این باره صحبت خواهیم کرد.

درخواست شرطی Last-Modified

last-modified-header

مقدار Last-Modified یک تاریخ خاصی را نشان می‌دهد، Last-Modified تاریخ آخرین ورژن فایل یا تاریخ اخرین ویرایش یک عکس یا صفحه است، همانند کد زیر:

زمانی که فایلی یا صفحه‌ای را تغییر و ویرایش دهید، باید این تغییرات نیز سمت کاربر هم اعمال شود تا به درستی سایت کار کند، بنابراین وقتی کاربر دوباره وارد سایت شما می‌شود یک درخواست شرطی توسط هدری مجزا با عنوان If-Modified-Since ارسال می‌کند، مقدار این هدر مجرا از Last-Modified گرفته شده است، هدر If-Modified-Since زمانی که سمت سرور ارسال می‌شود بررسی می‌کند تا ببیند آیا تاریخ سمت سرور به روز شده است یا خیر، و منتظر پاسخ وب سرور می‌شود، اگر پاسخ با کد 200 ارسال شود به معنای جواب مثبت است و تاریخ تغییر کرده است و ولی اگر وب سرور کد 304 یا همان 304 Not Modified را ارسال کند به این معنا است که فایل مورد نظر به روز نشده است و از فایل موجود در کش مرورگر کاربر استفاده شود.

اگر توضیحات قسمت Cache Length را مطالعه کرده باشید اشاره کردیم که  هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد و اگر فرض بگیریم وب سرور در پاسخ به درخواست If-Modified-Since کد 200 را ارسال کند سر انجام تاریخ Last-Modified تغییر خواهد کرد و سر انجام باعث می‌شود مقادیر دو هدر Cache-Control و Expires تغییر کند و فایل جدید با اخرین ویرایش موجود در کش کاربر ذخیره شود.

درخواست شرطی Etag

etag-header

هدر ETag با اسم کامل Entity Tag به معنای “برچسب هویتی” همانند هدر Last-Modified تغییرات صفحه یا فایل را به مرورگر کاربر اطلاع می‌دهد، با این تفاوت که به جای تاریخ و زمان آخرین ویرایش صفحه یا فایل از محتوای متنی منحصر به فردی برای هر صفحه یا فایل (مثل یک MD5 Hash) برای شناسایی آن صفحه توسط سرور استفاده می‌شود

و از طرفی مرورگر کاربر به جای درخواست هدر قبلی If-Modified-Since که در حالت Last-Modified ارسال می‌کرد این بار هدر مجزایی با عنوان If-None-Match که مقدار آن از هدر ETag گرفته شده است به سمت وب سرور ارسال می‌کند و دوباره همانند قبل وب سرور با ارسال کد 200 یا 304 تعیین می‌کند که آیا فایل یا صفحه نیاز به آپدیت شدن در سمت کش کاربر را دارد یا خیر.

نکته: در بخش YSlow سایت GTMetrix خطای (Configure entity tags (ETags موجود است که اشاره به نبودن هدر ETags می‌کند که با رفع خطای Specify a cache validator آن هم رفع می‌شود.

نحوه رفع خطای Specify a cache validator

برای رفع این ارور باید هدرهای Last-Modified یا Etag یا هر دو با هم از سمت وب سرور ارسال شود، هدر درخواست Last-Modified به شکل کلی از سمت وب سرورها فعال است و نیازی به تنظیمات دستی آن نیست، هدر Etag در وب سرورهای Apache ورژن 2.4 به بالاتر به شکل اتوماتیک فعال است و سمت کاربران این هدر ارسال می‌شود و در وب سرور NGINX از 2016 به بعد به شکل پیش فرض هدر Etag در آن فعال است.

پس شمایی که این خطا را دارید چه کاری باید انجام دهید؟

اول توجه داشته باشید با هاست مناسب از شرکت‌های معتبر، بعید است با مشکل Specify a cache validator روبه‌رو شوید به هر حال با برخورد این خطا به پشتیبانی هاست خود تیکت زده و درخواست دو هدر یا حداقل یک هدر را ارسال کنید، و راه بعدی برای این مشکل رفع خطای Leverage browser caching است، گاهی تنظیمات وب سرور به شکلی است که با رفع ارور Leverage browser caching مشکل موجود در Specify a cache validator هم رفع می‌شود، و اگر دقت کرده باشید اکثر سایت‌های ایرانی برای رفع خطای Specify a cache validator کد مربوط به Leverage browser caching را قرار می‌دهند.

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

رفع خطای Specify a Vary: Accept-Encoding header در gtmetrix

در این مقاله قصد داریم درباره مشکل رایج رفع خطای Specify a character set early و حل آن در جی تی متریکس صحبت کنیم.

سئو سایت

خلاصه‌ای از خطا Specify a Vary: Accept-Encoding header

نام: Specify a Vary: Accept-Encoding header
نوع: محتوا
اولویت: زیاد
میزان سختی: راحت
میانگین امتیاز: 88%

علت خطای Specify a Vary: Accept-Encoding header در جی تی متریکس چیست؟

یکی دیگر از درخواست‌های HTTP مهم که تاثیر مناسبی در بهینه سازی سرعت سایت نیز دارد Vary: Accept-Encoding است. متاسفانه سایت‌های ایرانی دوباره همانند بسیاری از خطاهای دیگر به اشتباه این ارور را تفسیر کرده‌اند و بسیار تعجب آور است که برای رفع خطا Vary: Accept-Encoding متاتگ <meta charset=”utf-8″> را پیشنهاد می‌دهند :/

طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)

برای رفع این خطا باید شما یک درخواست هدر HTTP از نوع Vary: Accept-Encoding را ارسال کنید و ربطی به متاتگ اشاره شده ندارد.

vary-accept-encoding-header-kinsta

طبق توضیحات سایت معتبر kinsta وقتی شما هدر Vary: Accept-Encoding را در هاست خود فعال ندارید وب سرور یا CDN شما به جای ارسال فایل‌های فشرده شده (همان GZIP بودن فایل‌ها) فایل‌های فشرده نشده را به اشتباه به مرورگرها ارسال می‌کند و این آسیب به بهینه سازی سایت شما خواهد زد ولی اگر هدر Vary: Accept-Encoding فعال باشد وب سرور یا CDN نسخه صحیح فایل‌ها را به کاربران ارسال می‌کند. پس توجه داشته باشید که فعال بودن آن بسیار اهمیت دارد، هر چند در اکثر سرورها به شکل پیش‌فرض فعال است.

specify-vary-accept-encoding-header-pagespeed

نحوه فعال سازی Vary: Accept-Encoding

رفع خطای Specify a Vary: Accept-Encoding header در وب سرویس آپاچی

اگر وب سرویس سایت شما Apache است کافی است فایل .htaccess موجود در ریشه هاست خود را edit کرده و دستور زیر را وارد نمایید.

رفع ارور Specify a Vary: Accept-Encoding header در وب سرویس NGINX

اگر وب سرویس سایت شما NGINX است کافی است فایل موجود در ریشه /etc/nginx/nginx.conf. خود را edit کرده و دستور زیر را وارد نمایید.

رفع خطای Specify a character set early در GTmetrix

در این پست قصد داریم به شکل خلاصه درباره خطای Specify a character set early صحبت کنیم.

بهینه سازی سایت

قیمت طراحی سایت

خلاصه‌ای از خطای Specify a character set early

نام: Specify a character set early
نوع: محتوا
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۹%

خطا Specify a character set early

طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی)

برای رفع ارور Specify a character set early کافی است متاتگ character set را به شکل یک درخواست HTTP ارسال نماییم.

رفع خطای Serve resources from a consistent URL در gtmetrix

در این مقاله قصد داریم درباره مشکل رایج Serve resources from a consistent URL و حل آن در جی تی متریکس صحبت کنیم. توجه داشته باشید که حل خطای اشاره شده باعث رفع خطای Remove duplicate JavaScript and CSS در YSlow هم می‌شود.

خلاصه‌ای از خطا Serve resources from a consistent URL

نام: Serve resources from a consistent URL
نوع: محتوا
اولویت: زیاد
میزان سختی: راحت
میانگین امتیاز: 88%

علت خطای Serve resources from a consistent URL در جی تی متریکس چیست؟

این خطا وقتی رخ می‌دهد اگر شما دو عکس یکسان را با دو آدرس متفاوت در صفحه‌ای از طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) خود بارگذاری نمایید، این عمل باعث می‌شود که تعداد درخواست‌های سمت سرور بالا رود و وقتی درخواستهای HTTP افزایش یابد، سرور بیشتر درگیر پاسخ می‌شود و اگر تعداد چنین فایل‌هایی زیاد باشد به مراتب تعداد درخواست‌ها بیشتر می‌شود و طبیعتا درگیری سرور هم بالا می‌رود، این موضوع شاید در سایت‌های کم بازدید خیلی محسوس نباشد ولی وقتی بازدیدکننده سایت بالا باشد قطعا رفع مشکل Serve resources from a consistent URL قدم بزرگی در بهینه سازی سایت چه در سمت سرور و چه در سمت کاربر خواهد کرد.

serve-resources-from-a-consistent-URL

در جلسات گذشته آموزش جی تی متریکس درباره نحوه کاهش تعداد درخواست‌ها بسیار صحبت کردیم، خطاهای مختلف زیادی مربوط به کاهش درخواست های HTTP اشاره می‌کردند که خطای Serve resources from a consistent URL هم جر این دسته‌ها است، تمام مقالات زیر به شکل مستقیم یا غیرمستقیم باعث کاهش درخواستهای HTTP می‌شود و خواندن آن به شما دوستان در جهت ارتقا بهینه سازی داخلی سایت توصیه می‌شود.

• رفع خطای Combine images using CSS sprites
• رفع خطای Inline small CSS and JavaScript
• رفع خطای Defer parsing of JavaScript
• رفع خطای Leverage browser caching
• رفع خطای Minimize request size
• رفع خطای Enable Keep Alive

نحوه رفع خطای Serve resources from a consistent URL

نحوه رفع چنین خطاهایی گاهی راحت و گاهی دشوار و نیاز به برنامه‌نویسی دارد، در یکی از پروژه‌های افزایش سرعت سایت که تیم میزفا داشت با چنین خطایی روبه‌رو شدیم و سایت مشتری دارای فایل‌های تکراری همانند زیر بود:

برخی از این خطاها که در سیستم‌های مدیریت محتوا مثلا وردپرس و جوملا بیشتر به چشم میخورد به علت فعال بودن پلاگین‌های غیراستاندارد است و گاهی اشتباهات دستی که باعث می‌شود یک فایل که دارای محتوای یکسان هست با آدرس های مختلف بالا بیاید، و یا ممکن است ۲ افزونه به یک محتوا عمومی نیاز داشته باشند (محتوای عمومی منظور مثلا Font Awesome می‌تواند باشد یا یک سری فایل‌های جاوااسکریپت معروف) و هر کدام از این افزونه ها برای لود کردن محتوای عمومی می‌آیند از آدرس‌های خود فراخوانی می‌کنند که در این صورت خطای فایل تکراری در دو url را شما می‌توانید مشاهده کنید، که در این صورت باید تک تک افزونه ها را غیرفعال کنید و ببینید کدام افزونه چنین عملی را پیاده می‌کند و اگر پیدا کردید به جای آن افزونه از یک افزونه دیگر استفاده کنید. همین موضوع می‌توانید بین قالب و یک افزونه یا چند افزونه هم پیش بیایید که باید همین سیاست را در پیش بگیرید.

توجه داشته باشید که آدرس‌های زیر شاید همه به یک محتوا اشاره کنند ولی هر کدام یک درخواست محسوب می‌شوند:

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

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

رفع خطای Remove query strings from static resources در gtmetrix

در این مقاله قصد داریم درباره مشکل رایج Remove query strings from static resources و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا یا همان حذف علامت سؤال از انتهای آدرس منابع در جهت افزایش سرعت سایت به ما کمک می‌کند و آیا بودن query strings ها برای ساخت سایت ما مفید است یا خیر.

خلاصه‌ای از خطا Serve resources from a consistent URL

نام: Remove query strings from static resources
نوع: محتوا
اولویت: کم
میزان سختی: راحت
میانگین امتیاز: 89%

علت خطای Remove query strings from static resources در جی تی متریکس چیست؟

جنبه منفی query strings: وجود query strings در منابع سایت ما باعث می‌شود که آن منابع در سمت کاربر کش نشود و اگر منابع همانند CSS یا JS در سمت کاربر کش نشود خطاهایی نظیر Leverage browser caching هم رخ خواهد داد و مشکلات بسیار دیگری را فراهم می‌کند، استفاده از query strings باعث می‌شود فایل‌های استایل (CSS) و جاوا اسکریپت در بسیاری از مرورگرها و همین‌طور CDN ها کش نشود.

remove-query-string

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

remove-query-strings-static-resources

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

نحوه رفع خطای Remove query strings from static resources

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

در وردپرس

• برای رفع این خطا اگر تمایل به استفاده از کدها را ندارید و سایت وردپرسی دارید، می‌توانید پلاگین Remove Query Strings را نصب کنید این پلاگین بدون هیچ‌گونه تنظیمات اضافه باعث رفع مشکل Remove query strings from static resources در مدیریت محتوای وردپرس می‌شود.
• پلاگین WP Rocket در نسخه ۲.۹ به بعد خود قابلیت رفع خطای Remove query strings from static resources را قرار داده هست و اگر از این پلاگین استفاده می‌کنید می‌توانید همانند عکس زیر تیک آن را بزنید.

remove-query

• پلاگین W3 total cashe هم گزینه‌ای دارد که با برداشتن آن باعث رفع این خطا می‌شود، اگر این افزونه را در سایت وردپرس خود نصب‌کرده‌اید با فعال بودن گزینه Prevent caching of objects after settings change در قسمت Brower Cahse باعث ایجاد خطای query strings می‌شوید، پس تیک آن را بردارید.

W3-Total-Cache-Browser-Cache

• با استفاده از فایل Function.php می‌توانید به شکل دستی خطای query strings را رفع کنید کافی است کد زیر را در انتهای فایل Function.php قرار دهید.

در دروپال

برای حذف query strings ها درفایل های CSS دروپال می‌توانید کد زیر را در template.php قرار دهید، فقط توجه داشته باشید که به جای MYTHEME نام قالب مورد نظر خود را وارد کنید.

در جوملا

به کمک افزونه joomsef شما می‌توانید این مشکل را رفع کنید، البته در تنظیمات کلی جوملا یعنی Global Configuration و قسمت SEO Settings گزینه‌ای وجود دارد با عنوان search engine friendly (SEF) URLs که اگر فعال باشد آدرس‌های شما را هم برای کاربران و هم برای موتورهای جستجو بهینه تر می‌کند، مثلا آدرس http://example.com/index.php?page=name تبدیل به http://example.com/name می‌شود. اگر شما گزینه SEF URLs را در جوملا فعال کرده باشید ممکن است آدرس‌های non-SEF URLs به شکلی در سایت ایندکس شوند و باعث ایجاد محتوای تکراری شود که تاثیر بد برای سئو سایت دارد و همچنین یکی از عوامل پنالتی شدن سایت در گوگل نیز می‌باشد، بنابراین برای جلوگیری از این امر می‌توانید از دستور زیر در فایل robots.txt استفاده نمایید تا آدرس‌هایی که دارای علامت ? هستند را ربات ایندکس نکند.

در PHP

اگر ساختار سایت شما بر اساس زبان برنامه نویسی PHP است و از CMS های رایگان استفاده نمی‌کنید می‌توانید از دستور زیر برای رفع خطای query strings استفاده کنید، کد نوشته شده توسط سایت Addedbytes است و تشکر به خاطر این دستور نوشته شده، شما برای حذف مقادیر موجود در url می‌توانید از متغییر $key استفاده نمایید.

رفع خطای Make favicon small and cacheable در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Make favicon small and cacheable صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا رفتن سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Make favicon small and cacheable

نام: Make favicon small and cacheable
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%

امروز قصد داریم درباره فاوآیکن (favicon) سایت شما صحبت کنیم و بررسی کنیم که چطور می‌توانیم یک favicon کوچک، فابل کش و با سرعت در سایت قرار دهیم. قطعا این مورد در بهینه سازی سایت ممکن است اولویت کمتری داشته باشد ولی هرچیزی که در سمت کاربران بارگذاری می‌شود می‌تواند بر کند شدن سرعت سایت تاثیر بگذارد، توجه داشته باشید که اگر مثلا ۲۰ مورد کوچک همانند favicon را بهینه سازی کنید آنگاه ممکن است در نتیجه تاثیر ثانیه‌ای در بهبود سرعت سایت خود مشاهده کنید، بنابراین نباید چنین خطاهایی را نادیده بگیرید. هر چند در CMSهای آماده همانند وردپرس و جوملا به لطف قالب‌های آماده بهینه شده، وجود چنین خطاهایی کمتر مشاهده می‌شود.

favicon چیست؟

favicon یا favicon.ico هست یک آیکون از تصویر کوچیک که همراه سایر فایل‌های سایت شما برای کاربران بارگذاری می‌شود. وقتی مرورگر یک کاربر با سایت شما برخورد می‌کند در پیش‌زمینه به دنبال یک favicon.ico است. favicon در جاهای مختلف نمایش داده می‌شود مثلا در تب مرورگر و یا وقتی یک سایت را در مرورگر خود بوک‌مارک (Bookmark) می‌کنید.

favicon

دیگر فقط مثل گذشته favicon را نباید برای مرورگرهای دسکتاپ تنظیم کرد، ما در حال حاضر دستگاه‌های iOS، دستگاه‌های اندروید و … را در ابعادهای مختلف که هر کدام یک نوع از فرمت favicon را پشتیبانی می‌کنند را داریم.قطعا هر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) حرفه ای نیاز به favicon دارد و در گذشته مرورگرها به شکل پیش‌فرض همیشه درخواست favicon در برخورد با یک سایت انجام می‌دادند و اگر سرور favicon را نیز نداشت خطای 404 رخ می‌داد (البته این موضوع در آپدیت های بعدی مرورگرها بهبود یافت).

404-error-favicon-not-found

چگونه یک favicon بسازیم؟

خطای موجود در YSlow یاهو هم چنین چیزی میخواهد Make favicon small and cacheable ، بسازید یک favicon کوچک و قابل کش شده. فرمت یک favicon درواقع می‌تواند هم PNG ، GIF و یا ICO باشد، برهرحال فرمت ICO به طور معمول استفاده می‌شود و از طرفی بیشتر از فرمت‌های دیگر کوچک‌تر است و همین‌طور این فرمت را مرورگرهای بیشتری پشتیبانی می‌کنند. در این مقاله می‌توانید ابعاد صحیح و مختلف favicon را مشاهده کنید. در ادامه تمرکز بر نحوه ساخت favicon خواهد بود.

قدم یک

یک favicon به شکل کلی باید دارای ابعادی 16×16 پیکسل یا 32×32 باشد. و همچنین پیشنهاد می شود حجم آن زیر 1KB باشد. شما می‌توانید favicon خود را در برنامه‌های مختلفی که تمایل دارید بسازید، همانند فتوشاپ، ایلستریتور، Paint و غیره. و بعد این آنکه با چنین نرم افزارهایی عکس خود را ساختید به راحتی می‌توانید فایل را ذخیره کنید و فرمت آن را دستی تغییر دهید و یک اسم همانند favicon.ico به وجود بیاورید. شما همچنین می توانید برای ساختن favicon از ابزارهای آنلاین همانند real favicon generator استفاده کنید،در این ابزارهای آنلاین می‌توانید با فرمت‌های مختلفی همانند PNG، JPG و یا SVG (البته از نوع وکتور باشد بهتر است) اپلود کنید و سپس توسط این نرم افزار فرمت ICO تولید می‌شود.

قدم دو

بعد از ساخت favicon شما نیاز دارید آن را در طراحی سایت خود آپلود نمایید به دین منظور می‌توانید از FTP و سپس وصل شدن به root سرور خود این کار را انجام دهید، favicon باید در تگ بین <head> قرار بگیرد و در کدی همانند زیر می‌توانید آن را در سایت خود فراخونی کنید.

<link rel=”shortcut icon” href=”/images/favicon.ico” type=”image/x-icon” />

فاوایکون در وردپرس

اگر وب سایت شما دارای CMS وردپرس است می‌توانید به راحتی به کمک افزونه اشاره شده favicon خود را بسازید. افزونه Favicon by RealFaviconGenerator چینن قابلی را به شکل رایگان برای شما فراهم می‌کند. همچنین می توانید به codex وردپرس مراجعه کنید.

فاوایکون در جوملا

اگر وب سایت شما دارای CMS جوملا  است می‌توانید favicon خود را در مسیر قالب خود یعنی /joomla/templates/<your template> قرار دهید. همچنین می‌توانید توضیحات رسمی سایت جوملا را مطالعه کنید

فاوایکون در دروپال

و اگر ساخت سایت CMS شما دروپال است می‌توانید توضیحات رسمی این CMS را در اینجا مطالعه کنید.

بهینه سازی Favicon

یک favicon بهینه سازی شده باید قابلیت کش شدن را داشته باشد تا وقتی مرورگر کاربر درخواست سمت سرور ارسال می‌کند سرور آن فایل را در لوکال کاربر ذخیره کنید تا در دفعات بعد دوباره آن فایل را درخواست نکند. این عمل می‌تواند leverage browser caching را تقویت کند به معنای قدرت کش کردن مرورگر. توسط هدرهایی نظیر expire headers و cache-control می‌توان انجام داد.

همان‌طور که اشاره کردیم بهتر است favicon زیر 1KB باشد و اگر در CDN آن را قرار دهید دیگر نهایت بهینه سازی را انجام داده‌اید.

small-favicon

رفع خطای Make fewer HTTP requests در YSlow جی تی متریکس

نحوه کاهش تعداد درخواست HTTP یکی از مهم‌ترین چالش ها در زمینه سرعت سایت است. ما در این مقاله آموزش چگونگی پایین آوردن HTTP requests را فراخواهیم گرفت و به این واسطه ارور Make fewer HTTP requests در YSlow جی تی متریکس هم نیز رفع می‌شود.

مقدمه ارور Make fewer HTTP requests در YSlow

در این مقاله قصد داریم درباره ارور Make fewer HTTP requests صبحت کنیم و بررسی کنیم منظور از خطا HTTP request چیست و اینکه رفع آن چگونه باعث بهینه سازی سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Make fewer HTTP requests

نام: Make fewer HTTP requests
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%

درخواست اچ تی تی پی HTTP requests چیست؟

http-request

اگر دقت کرده باشید در سایت GTmetrix.com مشکل درخواست‌ها در Yslow را با خطای Make fewer HTTP requests نشان می‌دهد که کلمه fewer به معنای کمتر است کلمه request هم به معنای درخواست است.
خطای Make fewer HTTP requests اشاره می‌کند که درخواست HTTP کمتر بسازید، توجه داشته باشید هر سه عبارت زیر به یک معنا است و یک هدف دارند:

• Make fewer HTTP requests – درخواست HTTP کمتر بسازید
• Reduce HTTP requests – کاهش درخواست HTTP
• Minimize HTTP requests – به حداقل رساندن درخواست HTTP

وقتی کاربری می‌خواهد توسط مرورگر خود مثلا وارد سایت سئوراز شود باید آدرس سایت mizfa.com را وارد نمایید، وقتی آدرس را وارد می‌کند مرورگر یک درخواستی ارسال می‌کند برای پیدا کردن ای پی سایت سئوراز به کمک ISP های منطقه و جهانی، بعد از دریافت پاسخ و باز بودن پورت‌های لازمه، مرورگر در اینجا تعدادی درخواست HTTP ارسال می‌کند تا بعد از پاسخ سرور بتواند سایت را برای کاربر نشان دهد، به اولین بایت از پاسخی که سرور به مرورگر ارسال می‌کند Time to First Byte یا به اختصار TTFB گویند.

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

درخواست های http شامل :

• عکس‌ها
• فایل‌های استایل سی اس اس (CSS)
• فایل‌های جاوااسکریپت (JS)

و … می‌تواند باشد.

speed-up-your-site-request-process

شاید باید گفت که مهم‌ترین روش برای بهبود کلی تعداد درخواست‌ها و کاهش آن‌ها ادغام اصولی فایل‌ها می‌باشد که مستقیم بر روی تعداد درخواست های HTTP اثرگذار است.

minimizerequests

ارور Make fewer HTTP requests در کمتر سایتی سبز رنگ است چرا که برای رفع این خطا باید خطاهای بسیاری را رفع کنید و برای همین ما خطاهایی که به شکل مستقیم یا غیرمستقیم بر روی بهبود درخواست‌های HTTP تاثیر گذار هستند را به ترتیب اولویت قرار داده‌ایم.

خطاهای مربوط به درخواست HTTP

• رفع خطای Minimize request size : ارور Minimize request size دقیقا همانند ارور Make fewer HTTP requests هست صرفا نام آنها فرق دارد و آنکه اولی مربوط به گوگل می‌باشد و خطای fewer HTTP مربوط به یاهو است. درحالی که هر دو خطا به یک هدف اشاره می‌کنند ولی در اکثر موارد Minimize request size سبز رنگ است و fewer HTTP قرمز رنگ. به هرحال با رعایت و رفع فاکتورهای Minimize request size می‌توان تا حد زیادی باعث بهبود خطای fewer HTTP شد.
• رفع خطای Inline small CSS and JavaScript : این خطا می‌گوید اگر فایل‌های CSS و یا فایل‌های JS که دارای حجم کوتاه هستند را در یک خط قرار دهید، در اینجا inline به معنای قرار دادن فایل‌های CSS کوچک در یک خط است به عبارت دیگر منظور این خطا این است که فایل‌های CSS و JS کوتاه را ادغام کنید.
• رفع خطای Combine images using CSS sprites : اگر تعداد عکس‌های کوچک در طراحی سایت(طراحی سایت شرکتی، طراحی سایت فروشگاهی) خود زیاد باشد به مراتب تعداد درخواست‌ها هم بیشتر و درگیری سرور هم بالا می‌رود، در روش CSS sprites با ترکیب تمام تصاویر در یک عکس و درج مختصات به آن به کمک CSS از قسمت‌های مختلف عکس در مکان دلخواه استفاده می‌کنیم، در این روش تنها یک درخواست برای یک تصویر به سرور ارسال می‌شود ولی چندین بار از عکس در قسمت‌های مختلف قالب استفاده می‌شود. با انجام این روش سرعت وب سایت بسیار بیشتر می‌شود.
• رفع خطای Defer parsing of JavaScript : هنگام بارگذاری صفحه‌ی از سایت، مرورگر کاربر بایستی محتوای همه فایل‌های جاوا اسکریپت را خوانده و اجرا کند، که این کار مسلماً زمان بر خواهد بود. برای همین پیشنهاد می‌شود تا فایل‌های جاوا اسکریپت را در پایین صفحه فراخوانی کنید تا زمان بارگذاری اولیه صفحه وبسایت‌تان را کاهش دهید، و اگر چنین نباشد تعداد درخواست‌های اولیه HTTP بالا رفته و سایت نیز به شکل سریع برای کاربر لود نمی‌شود.
• رفع خطای Serve resources from a consistent URL : این خطا وقتی رخ می‌دهد اگر شما دو عکس یکسان را با دو آدرس متفاوت در صفحه‌ای از طراحی سایت (قیمت طراحی سایت) خود بارگذاری نمایید، این عمل باعث می‌شود که تعداد درخواست‌های سمت سرور بالا رود و وقتی درخواستهای HTTP افزایش یابد، سرور بیشتر درگیر پاسخ می‌شود.
• رفع خطای Enable Keep Alive : اگر Keep Alive فعال نباشد این مفهوم را می‌رساند که مرورگر بیش از یک فایل را در آن واحد نمی‌تواند درخواست کند آن موقع مرورگر برای دریافت همه فایل‌ها هر بار درخواست جداگانه ارسال می‌کند و اگر سرور هر بار جداگانه پاسخ بدهد حاصل آن، زمان زیادی برای دریافت تمام فایل‌ها تلف خواهد شد. درواقع رفع این خطا باعث بهبود درخواست های HTTP می‌شود و اجازه می‌دهد در یک واحد از زمانی در قالب یک درخواست، چند درخواست دیگر هم بفرستد.
• رفع خطای Leverage browser caching : فعال سازی کش هم بسیار می‌تواند در کاهش تعداد درخواست‌ها موثر باشد ولی نه برای کاربرانی که اولین بار از سایت شما بازدید می‌کنند، قطعا شما عکس‌ها و فایل‌هایی مشترک در بین صفحات خود دارید و اگر کاربر قصد داشته باشد در وب سایت شما وبگردی بکند باید طوری تنظیم کنید که این فایل‌های مشترک در بین صفحات هر بار نخواهد درخواست سمت سرور ارسال کنید و از آن بخواهد، با کش کردن چنین فایل‌هایی بازدیدهای دوباره درخواست‌های کمتری دارند و مرورگر قبل از درخواست HTTP به کش لوکال یا محلی خود نگاه می‌کند و اگر در آنجا کش شده باشد دیگر درخواستی ارسال نمی‌کند.
• سایز موارد در کاهش درخواست های HTTP
  استفاده از CDN
  استفاده از حالت تنبل فایل‌ها
  غیرفعال کردن یا حذف کردن پلاگین‌ها، اسکریپت‌ها و کدهایی که لازم نیست و در سایت غیرضروری هستند.
  تغییر پلاگین‌ها، اسکریپت‌ها و کدهایی که به شکل فله‌ای درخواست‌های HTTP نیز ارسال می‌کنند.

افزونه مفید وردپرس جهت کاهش HTTP requests

برخی از پلاگین‌های مفید مخصوص وردپرس برای رفع بعضی از این خطاها :

• JCH Optimize
• دانلود نسخه اورجینال WP Rocket
• Autoptimize
• WP Fastest Cache
• W3 Total Cache
• WP Super Minify
• Page Speed Optimization for SEO
• Speed Booster Packطراحی سایت

رفع خطای Minify JavaScript and CSS در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Minify JavaScript and CSS صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردنسرعت سایت ما می‌شود.

minify-css

خلاصه‌ای از خطا Minify JavaScript and CSS

نام: Minify JavaScript and CSS
نوع: CSS/JS
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 72%

بهینه سازی سایت

سئو سایت

Minify JavaScript and CSS چیست؟

این خطا به فضاهای خالی، کامنت‌ها و کدهای غیرلازم در فایل‌های CSS و JS اشاره می‌کند، خطای Minify JavaScript and CSS مربوط به YSlow می‌باشد درحالی که در Pagespeed گوگل ما چنین خطاهایی را داشتیم و فرقی با خطای YSLow نمیکند.

آموزش بهینه سازی سرعت صفحات سایت با GTmetrix – رفع خطاهای YSlow

در این مقاله قصد داریم درباره ارور Reduce cookie size صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Reduce cookie size

نام: Reduce cookie size
نوع: کوکی
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 99%

بهینه سازی سایت

قیمت طراحی سایت

Reduce cookie size چیست؟

Reduce به معنای کاهش است و ترجمه Reduce cookie size می‌شود اندازه سایز کوکی‌ها را کاهش دهید، چیزی که ما از این ارور برداشتیم می‌کنیم این است که باید تا حد امکان اندازه کوکی‌ها و همینطور تعداد کل کوکی‌ها را پایین نگه داریم که این امر باعث بهبود خطای Make fewer HTTP requests می‌گردد چرا که درخواست‌های هدر HTTP بهینه می‌شود و این هدرهای HTTP هستند که کوکی‌ها را از سرور به مرورگر کاربران هدایت می‌کنند. درخواست های HTTP در نوع کوکی که نام‌های مختلفی دارد همانند HTTP cookie ، web cookie و یا browser cookie گفته می‌شود و تمام این نام‌ها یکی هستند، کوکی برای مواردی مختلف همانند احرازهویت یا شخصی سایتی استفاده می‌شود، کوکی ها همچنین می‌توانند اطلاعات کارت بانکی، پسوردها و لاگین‌هایی که صورت می‌گیرد را ذخیره کنند (البته پیشنهاد نمی‌شود). اکثر وب سایت‌ها برای ذخیره سازی اطلاعات لاگین شما سوالی می‌پرسند که آیا ذخیره شود یا خیر، و اگر جواب منفی باشد عمل کوکی برای ذخیره سازی اطلاعات لاگین شما اتفاق نمی‌افتد، در طراحی سایت‌(طراحی سایت فروشگاهی، طراحی سایت شرکتی) های بانکی در زمان پرداخت و درج اطلاعات کوکی فعال نیست و اطلاعات به شکل کش شده در مرورگر ذخیره نمی‌شود و این عمل خطر امنیت را کاهش می‌دهد.

Reduce cookie size

کوکی‌ها یک سری اطلاعاتی را در HTTP headers بین وب سرور و مرورگر مبادله می‌کند و این مورد بسیار اهمیت دارد که ما بتوانیم سایز کوکی‌ها را به حداقل برسانیم و همینطور تعداد کوکیها را کاهش دهیم تا زمان درخواست پاسخ به کاربران بهینه شود. خطای Use cookie free domains هم به این مورد اشاره دارد و می‌گوید از کوکی کردن فایل‌های استاتیک خود اجتناب کنید.

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Reduce DNS lookups و یا ارور Minimize DNS lookups که هر دو به یک مفهوم اشاره دارد، صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Reduce DNS lookups

نام: Reduce DNS lookups
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 70%

خطا Reduce DNS lookups

DNS lookups چیست ؟

Hostname یا آدرس یک سایت همانند seoraz.com گفته می‌شود، تمام Hostname ها استعاره از یک IP هستند که به این استعاره alias هم گفته می‌شود و اگر توجه کرده باشید در تنظیمات DNSها یک نوع رکوردی وجود دارد به نام A، در این نوع رکوردها نام یک سایت (Hostname) را می‌دهیم تا به یک IP وصل شود.

زمانی که شما یک Hostname را در نوار آدرس مرورگر خود تایپ می‌کنید مانند seoraz.com سیستم شما به دنبال IP آن می‌گردد و اگر در خودش نباشد به‌وسیله مودم به دنیای بیرون وصل می‌شود و یک action به نام DNS lookups(جستجوی DNS) ایجاد می‌کند، ابتدا به سراغ DNS Serverهای ISP محلی (سرویس‌دهندگان اینترنت) می‌رود و به دنبال IP یک Hostname که شما تایپ کردید می‌گردد و اگر درون ISP محلی نباشد به یک DSN Server سطح بالاتر مراجعه می‌کند همانند ISP های جهانی و حتی اگر پاسخ را در آن‌ها پیدا نکند (که بسیار بعید است) درنهایت به بالاترین مرجع یعنی InterNIC خواهد رسید.

InterNIC پایگاه داده‌ ثبت‌نام دامنه (Domain Registration Database) وبرترین و بزرگ‌ترین DNS Server است . شما می‌توانید با مراجعه به آدرس www.internic.net و انتخاب گزینه Whois و سپس واردکردن آدرس یک سایت به جستجو درباره سایت مربوطه و webserver آن بپردازید.

پس به شکل خلاصه DNS lookups یعنی عمل جستجوی IP یک سایت در بین DNS Serverها می‌باشد. فرآیند DNS lookup تا زمانی که تمام نشود مرورگر نمی‌تواند فایل‌های لازمه برای نمایش سایت را دانلود کند و اصولا این فرآیند زمانی بین 20 تا 120 میلی‌ثانیه به طول می‌انجامد تا IP یک سایت را پیدا کند.

مثال از DNS Lookup

در این مثال می‌خواهیم به شما نشان دهیم که چطور یک DNS lookup می‌تواند بر روی بهینه سازی سرعت سایت تاثیر بگذارد، به همین منظور از یک ابزار آنلاین تست سرعت سایت استفاده می‌کنیم و ما در اینجا به کمک ابزار webpagetest.org سایت seoraz.com را تست می‌کنیم. به آدرس ذکر شده رفته و در سربرگ Details به بررسی این موضوع می‌پردازیم.

DNS Lookup

طبق عکس، سایت سئوراز درکل از ۳۰ درخواست ساخته شده است که ۳ نوع آن DNS lookup است، نتیجه‌ای که از این تست می‌توان گرفت این است که زمان لازم برای پیدا کردن DNSهای موجود در سایت سئوراز حدود 100 میلی‌ثانیه می‌باشد که این زمان بسیار فوق العاده می‌باشد و نشان از بهینه سازی سئو سایت صحیح آن است، ولی گاهی ما در پروژه‌های افزایش سرعت سایت برخوردیم که زمان کل DNS lookup به 2980 رسیده و این یعنی 2.98 ثانیه به زمان کل بارگذاری سایت اضافه می‌شود. و اگر سعی کنیم می‌توانیم این زمان را بهبود دهیم، پس می‌توان نتیجه گرفت که DNS lookup می‌تواند بر سرعت سایت تاثیر مناسبی داشته باشد و بهبود آن باعث بهینه سازی سایت می‌شود. در پروژه‌ای که اشاره کردیم ما در انتها توانستیم زمان 2980 را به 1201 برسانیم و این نکته بسیار مهم است چرا که در بهبود سازی فقط یک فاکتور دو ثانیه از زمان لود کل وب سایت کاسته شد.

هدف Reduce DNS Lookups هم همین است، میگوید Reduce کنید یعنی کاهش دهید. ترجمه کامل آن می‌شود زمان جستجوی DNS را کاهش دهید، به عبارت دیگر تعداد دفعات DNS Lookup را کاهش دهید.

نحوه رفع مشکل Reduce DNS lookups

کاهش تعداد DNS lookup ساده به نظر می‌رسد و میتوان با داشتن سیاست های مناسب به این خواسته رسید.

به سادگی شما می‌توانید تعداد دامنه‌های مجزایی که در سند سایت خود آن‌ها را فراخوانی کرده‌اید را کاهش دهید. مثلا به عکس بالا توجه کنید، ۳ بار درخواست از نوع DNS lookup بوده است چرا که سه دامنه متفاوت در سند سایت میزفا فراخوانی شده است، که اولی طبیعتا خوده سایت یعنی دامنه seoraz.com است، دومی مربوط به سایت cloudflare است و سومی برای گوگل آنالیتیکس می‌باشد. در ساخت سایت‌ های ایرانی مخصوصا سایت‌های با CMS های اماده همانند وردپرس و جوملا ممکن است به خاطر نصب افزونه‌های مختلف از شرکت‌های متفاوت، چنین خطاهایی بسیار باشد، چرا که هر افزونه ممکن است از سایت‌های لازمه برای به اجرا در آمدن در سایت شما فایل هایی را در سند HTML سایتتان لود نماید و این یعنی افزایش DNS lookup در طراحی سایت شما. نمونه سایت‌های مشهوری که در بسیاری از سایت‌های ایرانی وجود دارد توجه نمایید:

• دامنه fonts.googleapis.com : مربوط به فونت‌های گوگل می‌باشد.
• دامنه google-analytics.com : مربوط به ابزار آمارگیر گوگل یعنی گوگل آنالیتیکس
• دامنه maps.googleapis.com : مربوط به مپ گوگل
• دامنه cdnjs.cloudflare.com : مربوط به CDN کلودفلیر
• دامنه amarfa.ir : مربوط به طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)‌ ایرانی برای گرفتن آمار
• دامنه webgozar.com : مربوط به سایت داغون امار گیر
• دامنه logo.samandehi.ir : لوگوی مجوز اخذ شده از ساماندهی محتوای فضای مجازی
• دامنه trustseal.enamad.ir : لوگوی مجوز اخذ شده از سایت ای نماد
• دامنه cdn.onesignal.com : مربوط به سایت onesignal برای ایجاد نوتیفیکیشن در مرورگر کاربران
• و تمام زیردامنه‌های سایت شما و هر فایلی که از دیگر دامنه‌ها در سند شما بارگذاری شود باعث افزایش DNS lookup می‌شود.

بنابراین روش اول که اشاره شد جذف چنین سایت‌هایی برای Reduce DNS lookups می‌باشد، روش دوم دانلود فایل‌هایی است که از یک سایت خارجی در سند ما لود می‌شود و قرار دادن آن فایل در هاست خود یا CDN سایت ما، که این روش باعث بهبود DNS lookups می‌شود، همان‌طور که می‌دانید برای دیدن سایت میزفا حداقل یک DNS lookups یعنی seoraz.com به ناچار به وجود می‌اید بنابراین وقتی چنین DNS lookups قطعا وجود دارد می‌توان فایل‌هایی که از دیگر سایت‌ها در سایت ما لود می‌شود را درون هاست خود قرار دهیم و یا اگر CDN داریم در آنجا قرار دهیم. البته ذخیره چنین فایل‌های خارجی از دامنه‌های دیگر در CDN راه بهتری است چرا که باعث کاهش فشار به سرور اصلی سایت شما می‌شود.
رکورد Canonical Name به اختصار CNAME نام برده می‌شود و یکی از رکوردهای نسبتا پرکاربرد DNS است، این نوع رکورد DNS که از یک نام دامنه مستعار (alias) استفاده می‌کند تا به دامنه‌ای دیگر وصل شود، سعی کنید در فراخوانی آدرس‌ها از CNAME در سایت خود استفاده نکنید. چرا که یک رکورد CNAME اشاره می‌کند به رکورد A و تازه رکورد A به دنبال DNS می‌گردد تا ای پی سایت را پیدا کند. پس به حداقل رساندن رکوردهای CNAME در بهبود لود سایت کمک می‌کند.

Reduce DNS lookups

در سایت ITPOR به نکات خوبی اشاره شده و خلاصه نکات در ۶ جمله کوتاه اورده شده است:

1. یک CName به یک اسم Domain یا A Record دیگر اشاره می‌کند
2. یک A Record به یک آدرس IP اشاره می‌کند
3. پیدا کردن یک CName یعنی آغاز یک جستجو (شروع DNS lookups)
4. پیدا کردن یک A Record یعنی پایان یک جستجو (پایان DNS lookups)
5. تداخل CName های زیاد می تواند باعث ایجاد شدن Loop شود (یعنی افزایش DNS lookups)
6. وجود A Record های زیاد هرگز ایجاد Loop در نتایج DNS نمی کند

Defer parsing of JavaScript باعث می‌شود لود اولیه سایت بهبود یابد و برخی از DNS lookupsها را به تاخیر اندازد.
فعال بودن keep-alive باعث کاهش DNS lookups می‌شود، زمانی که keep-alive فعال نباشد برای دریافت هر فایل درخواست‌ها به شکل جداگانه ارسال می‌شود و هر بار برای یک درخواست DNS lookup رخ می‌دهد، ولی با فعال بودن keep-alive باعث می‌شود که فقط درخواست DNS lookups برای هر دامنه یک بار رخ دهد و مجموعه درخواست‌ها برای هر دامنه در قالب یک درخواست ارسال می‌گردد.
تمام موارد مربوط به Make fewer HTTP requests می‌تواند به رفع خطای Reduce DNS lookups کمک نماید.

درباره DNS caching

تشکر از DNS caching موجود در کامپیوترها که کمک خوبی به افزایش سرعت سایت می‌کند، چرا که مرورگر دوباره لازم نیست برای پیدا کردن ای پی به DNS Server ها دستوری ارسال کند و از کش لوکال برای پیدا کردن ای پی یک سایت استفاده می‌کند، البته ذکر این نکته لازم است که وقتی سرور یا هاست یک سایت تغییر کند IP آن سایت هم عوض می‌شود بنابراین مرورگر شما در حافظه‌ی پنهان یا همان کش DNS خود، از IP قدیمی استفاده می‌کند و شما نمی‌توانید مثل همیشه به سایت مورد نظر متصل شوید.

اگر از مرورگر کروم استفاده می کنید دستور chrome://net-internals/#dns را وارد نمایید تا تمام DNSهایی که در حافظه پنهان خود ذخیره کرده است را مشاهده کنید. برای پاک کردن کش DNS در ویندوز می‌توانید با اجرا کردن CMD در حالت Run as administrator دستور ipconfig /flushdns تایپ و اجرا نمایید.

DNS caching

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use GET for AJAX requests بحث کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا رفتن سرعت و سئو سایت و همینطور سئو ما می‌شود، پس ما میزفا همراه باشید.

خلاصه‌ای از خطا Use GET for AJAX requests
نام: Use GET for AJAX requests
نوع: JS
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 100%

اهمیت استفاده از AJAX

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

شی xmlhttprequest در Ajax

درواقع Object (شئ) xmlhttprequest در Ajax است همه این مشکلات سرعت را رفع نمود و باعث شد تا محتوای به‌روز شده در یک صفحه بدون احتیاج به بارگذاری دوباره کل صفحه تغییر کند. درواقع این شئ سبب گردید تا داده واردشده توسط کاربر به سمت سرور ارسال شود و سرور پردازش‌های لازم را انجام دهد و سپس داده پردازش‌شده یعنی اطلاعات را به مرورگر بدهد بدون آنکه صفحه لود شود، تمام این رفت‌وبرگشت‌ها در پشت صفحه و بدون اطلاع کاربر انجام می‌شود. می‌توان گفت شئ XMLHttpRequest مهم‌ترین شئ در Ajax است که تقریبا انجام تمام عملیات لازم بر روی دوش آن هست. حال برای ارسال و تبادل اطلاعات توسط شئ XMLHttpRequest دو نوع متد وجود دارد متد GET و متد POST که هر دو یک درخواست HTTP برای تبادل اطلاعات استفاده می‌کنند که هر کدام مزایا و معایت خوب را دارند.

بیشتر بدانید: XML و یا JSON یک نوع ساختار برای ذخیره‌سازی اطلاعات است، ساختارهایی که بدون توجه به تکنولوژی و پلتفرم آن دستگاه قابل استفاده هستند از طرفی Ajax یک تکنولوژی است که در آن یک شئ XMLHttpRequest وجود دارد این شئ همان‌طور که نامش پیداست اطلاعاتی که دارای ساختار XML است را به شکل Http Request (درخواست HTTP) ردوبدل می‌کند، این توضیح کوتاه داده شد تا با فلسفه نام XMLHttpRequest آشنا شوید.

درباره Use GET for AJAX requests

بعید است طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما با خطای Use GET for AJAX requests روبه‌رو شود ولی اگر شد بدانید که در این پست منظور Gtmetrix این است که اگر از تکنولوژی Ajax در صفحات استفاده می‌کنید به جای استفاده از متد ارسال POST از GET استفاده نمایید، چرا که سرعت متد GET بیشتر است.

تفاوت متد POST و GET از نگاه بهبود سرعت سایت این است که در متد POST در دو مرحله عملیات تبادل داده بین سرور و مرورگر را انجام می‌دهد، در مرحله اول ارسال درخواست headers است و در مرحله بعدی داده‌ها را ارسال می‌کند درحالی که متد GET هر دو مرحله را با هم ارسال می‌کند. ولی تفاوت این دو متد به اینجا ختم نمی‌شود و فرق‌های بسیار هم دارند که باید بررسی کرد از کدام بهتر است برای تبادل اطلاعات استفاده شود چرا که همیشه متد GET بهتر نیست و در شرایطی استفاده از متد POST حیاتی می‌باشد.

دیگر تفاوت‌های متد POST و GET

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use cookie-free domains بحث کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بهبود سرعت و سئو سایت ما می‌شود.

خلاصه‌ای از خطا Use cookie-free domains
نام: Use cookie-free domains
نوع: کوکی
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 48%

فرق کوکی و کش چیست

قبل از رفع خطای Use cookie-free domains شاید بهتر باشد فرق کوکی و کش را بدانیم تا بهتر بتوانیم خطای موجود را درک کنیم.

کوکی چیست (Cookies)

Cookies یا کوکی تیکه اطلاعات کوچکی هستند که کاربر با هر بار بازدید کردن از یک سایت، در کامپیوتر او ذخیره می‌شوند. هر بار که کاربر آن سایت را لود می‌کند، مرورگرش آن کوکی‌ها را دوباره به سرور ارسال می‌کند تا سرور را از فعالیت‌های قبلی کاربر اطلاع دهد. کوکی‌ها طول عمر خاصی دارند که توسط کدهای آن سایت مشخص می‌شود، مثلاً در طراحی سایت‌ (طراحی سایت شرکتی، طراحی سایت فروشگاهی) های وردپرس توسط زبان PHP در قالب‌ها و پلاگین‌های مختلف کوکی‌های مختلفی بر روی مرورگر کاربر ذخیره می‌شود. در آخر یک کوکی منقضی خواهد شد و تاریخ مشخصی برای ماندن در مرورگر کاربر دارد، بنابراین کوکی‌ها معمولاً برای ذخیره‌سازی اطلاعات کوچک در یک دوره زمانی کوتاه مورداستفاده قرار می‌گیرد.

کوکی‌ها در کجا استفاده می‌شود:

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

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

کش چیست؟ (Cache)

یک کش وب (HTTP cache) فنّاوری است که از طریق درخواست‌های HTTP یک سری اسناد وب را به شکل موقت در مرورگر کاربر ذخیره می‌کند، همانند عکس‌ها و فایل‌های CSS و JS که تغییرات زیادی روی آن‌ها صورت نمی‌گیرد. هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل‌مشاهده باشد، حال برخی فایل‌ها مانند، CSS، JS، HTML و عکس‌ها که ممکن است در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره شوند. در این صورت وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به‌این‌ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

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

تفاوت بین کوکی و کش (difference between Cache and Cookie)

هرچند کوکی و کش هر دو راهی برای ذخیره‌سازی اطلاعات در مرورگر کاربر هستند اما آن‌ها تفاوت‌هایی را باهم دارند چراکه دارای اهدافی متفاوت هستند.
کوکی برای ذخیره‌سازی یک سری اطلاعات در جهت ردیابی فعالیت‌های کاربر استفاده می‌شود درحالی‌که کش برای بهبود سرعت سایت مورداستفاده قرار می‌گیرد.
کوکی اطلاعات مربوط به کاربران نظیر تنظیمات کاربری، پسورد، یوزرنیم و … است درحالی‌که کش برای نگه‌داری منابع استاتیک (فایل‌های ثابت) نظیر عکس، استایل‌های CSS یا جاواسکریپت است.
کوکی محدودیت ذخیره‌سازی دارد و تا 4KB می‌تواند حجم داشته باشد درحالی‌که کش چنین محدودیت‌هایی ندارد.
کوکی و هم کش توسط کاربر می‌تواند پاک شود ولی معمولاً کوکی‌ها عمر کوتاه‌تری دارند و زمان انقضاهای آن‌ها سریع‌تر می‌رسد درحالی‌که کش‌ها به این شکل نیستند و در مرورگر کاربران وجود دارند مگر دستی توسط کاربر پاک شود.

رفع خطای Use cookie-free domains

وجه مشترک کوکی و کش

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

افزایش سرعت سایت با Use cookie-free domains

تمام موارد بالا گفته شد تا به این قسمت برسیم که خطای Use cookie-free domains چه چیزی را به ما می گوید، و منظور از این خطا چیست؟ چه زمانی کوکی باعث ایجاد این خطا در Gtmetrix می‌شود؟

کوکی چه مشکلاتی را ایجاد می کند؟

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

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

راه حل برای رفع ارور Use cookie free domains

فرض کنید دامنه شما mizfa.com باشد هر عکس یا فایلی استاتیک در داخل دایرکتوری این دامنه باشد بالاخره کوکی به آن فایل‌ها در هنگام ارسال درخواست‌های HTTP به کاربر اضافه خواهد شد مگر فایل‌ها و عکس‌های ثابت و استاتیک خود را به یک زیردامنه یا دامنه‌ای دیگر انتقال دهید. بسیاری از سایت‌های معروف از این روش برای بالا بردن سرعت سایت خود استفاده کرده‌اند مثلا سایت یاهو از دامنه‌ای مستقل به آدرس yimg.com برای لود فایل‌های خود استفاده می‌کند، سایت آمازون از زیردامنه images-amazon.com برای عکس‌های استاتیک خود استفاده می‌کند، سایت دیجی کالا هم که قبلا به آن اشاره کردیم و دیگر سایت‌های مختلف که اهمیت بسیاری به تجربه کاربری می‌دهند.

ساخت زیر دامنه در وردپرس برای حل مشکل Use cookie free domains

فرق کنیم قصد داریم زیر دامنه static.yourwebsite.com را برای فایل‌های استاتیک خود ایجاد کنیم، به این منظور در کنترل پنل خود (سی پنل، دایرکت ادمین و …) فیلدها را به شکل زیر پر می‌کنیم.

رفع خطای Use cookie-free domains

در قسمت Document Root دقت داشته باشید که آدرس دقیقا همانند تصویر بالا باشد. سپس فایل wp-config.php باز کرده و دستور زیر را قرار می‌دهیم.

;(“define(“WP_CONTENT_URL”, “http://static.yourwebsite.com
;(“define(“COOKIE_DOMAIN”, “www.yourwebsite.com

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

چند نکته:

یک: شما روش‌های متعدد دیگری هم برای رفع مشکل Use cookie-free domains دارید، مثلا به زیردامنه static.yourwebsite.com یک IP سرور متفاوت تنظیم کنید و در هاست دیگر آن را لود کنید یا می‌توانید زیردامنه خود را در یکی از CDNها پیاده سازی کنید، جهت اطلاعات بیشتر درباره CDNها به مقاله CDN چیست مراجعه کنید (پیشنهاد می‌شود برای پیاده‌سازی چنین عملی در سایت خود از یک کارشناس باتجربه استفاده نمایید)

دو: خطای Reduce cookie size زیر مربوط به کوکی است و خواندن ان به شما توصیه می‌شود چرا که در این خطا درباره نحوه کاهش کوکی‌ها و علت آن صحبت شده است.

سه: هر سه ارور روبه‌رو مربوط به کش هستند و مطالعه آن قطعا برای شما مفید خواهد بود: ارور Leverage browser caching ، ارور Specify a cache validator و ارور Add Expires headers

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use a Content Delivery Network صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود. توجه داشته باشید که ما در ادامه هم از عبارت CDN (شبکه توزیع محتوا) استفاده خواهیم کرد و هم از عبارت CDN Public (شبکه توزیع محتوا عمومی) که این دو عبارت برای اهدافی متفاوت ایجاد شده اند، بنابراین این دو عبارات را یکی ندانید.

خلاصه‌ای از خطا( Use a Content Delivery Network (CDN

نام: (Use a Content Delivery Network (CDN
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

CDN چیست؟

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

CDN چیست

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

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

مزایای استفاده از CDN

افزایش سرعت سایت : طبق توضیحات بالا استفاده از شبکه توزیع محتوا باعث بهبود سرعت سایت و سریع‌تر لود شدن صفحات برای کاربران می‌شود.
کاهش مصرف پهنای باند سرور اصلی : زمانی که شما از CDN استفاده می‌کنید سرورهای CDN یک نسخه کپی از محتویاتی که تقریبا ثابت هستند (فایل‌های CSS ، جاوااسکریپت، عکس‌ها، فونت‌ها و …) در سرور خود ذخیره می‌کنند و زمانی که کاربر درخواستی را برای باز شدن صفحات سایت شما ارسال می‌کند به جای ارسال درخواست به سرور اصلی به سرورهای CDN ارسال می‌شود که باعث کاهش مصرف پنهای باند سرور اصلی می‌شود.
کاهش مصرف منابع سرور اصلی: استفاده از شبکه توزیع محتوا باعث کاهش تعداد درخواست‌های HTTP از سمت کاربران می‌شود و این عمل بار بسیاری را از دوش سرور اصلی کم می‌کند که نتیجه آن کاهش مصرف منابه سرور اصلی می‌باشد.
افزایش رتبه سایت در گوگل : یکی از موارد بهبود سئو سایت بالا بردن سرعت سایت است و گوگل اعلام کرده است که سرعت سایت یکی از فاکتورهای مهم در رتبه‌بندی نتایج خواهد بود.
بهبود تجربه کاربری : سرعت سایت و بارگذاری سریع صفحات سایت ارتباط مستقیمی با تجربه کاربری (UX) خواهد داشت، چرا که کاربران زمان کمتری را برای لود شدن فایل‌های لازمه یک صفحه صرف خواهند کرد و تاخیر در بارگذاری تا حد بسیار زیادی کاهش پیدا می‌کند، همین موضوع می‌تواند باعث کاهش نرخ دفع کاربری هم شود.
۱۰۰ درصد بالا بودن سرور : زمان که شما از شبکه توزیع محتوا یا CDN استفاده می‌کنید حتی زمانی که سرور اصلی قطع شود نسخه کپی موجود در سرورهای CDN به کاربران نمایش داده می‌شود تا با قطعی سرور کاربران شما برخورد نکنند.
افزایش امنیت سایت : استفاده از CDN باعث افزایش امنیت سایت و جلوی حملاتی نظیر DDoS را میگیرد چرا که شبکه توزیع محتوا به راحتی می‌تواند با استفاده از پهنای باند نامحدود خود بار حملات DDoS خنثی کند.

معایب استفاده از CDN

هزینه CDN : یکی از معایب استفاده از شبکه توزیع محتوا هزینه نسبتا بالای برخی از ارائه دهنده‌گان CDN است، هر چند برخی از ارائه دهنده‌گان دارای پنل رایگان هستند همانند سایت cloudflare ولی استفاده از پنل رایگان با توجه به محدودیت های فراوانی که دارند، برای سرورهای داخل ایران توصیه نمی‌شود که در ادامه علت آن را خواهیم گفت، از بین سایت های ارائه دهنده شبکه توزیع محتوا خارجی می‌توان سایت MaxCDN را اشاره کرد که دارای پنل‌هایی با قیمت مناسب است. در ادامه انواع سایت‌های ارائه دهنده CDN را نام خواهیم برد.
مسدود شدن برخی کاربران : گاهی پیش آمده دسترسی برخی کاربران به سایت مسدود شده چرا که برخی سازمان‌ها و یا حتی کشورها دسترسی‌ها را به برخی کاربران محدود می‌کنند و درنتیجه بسیاری از دامنه ها در این سازمان ها و کشورها غیر قابل دسترسی می گردد. یا برخی CDNها حساسیت بالایی به تعداد درخواست‌های HTTP دارند و اگر حتی یک کاربری صفحات زیادی از یک سایت را باز کند ممکن است CDN واکنش نشان دهند و تصور کند که سایت مورد حمله است و ای پی آن شخص را مسدود کند (این موضوع برای خوده بنده بسیار پیش آمده)

معرفی برخی از CDNهای معروف

برخی از CDNهای معروف عبارت اند از:

• Amazon Cloudfront
• MaxCDN
• Cloudflare
• Arvancloud

چند نکته:

• سرور Cloudflare پنل رایگانی دارد که اکثر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) های ایرانی برای استفاده از CDN از این سایت استفاده می‌کنند ولی اگر سرور اصلی سایت شما در ایران است توصیه نمی‌شود از این پنل رایگان استفاده کنید چرا که در بیشتر موارد مشاهده شده به جای بهبود سرعت سایت باعث کاهش سرعت سایت برای کاربران ایرانی می‌شود.
• سایت Arvancloud توسط یک شرکت ایرانی تاسیس شده است و خدمات مناسبی را ارائه می‌دهد، پیشنهاد ما استفاده از این CDN است هر چند استفاده از این شبکه توزیع محتوا باعث رفع خطای Use a Content Delivery Network در جی تی متریکس نمی‌شود که نشانه ضعف این ابزار آنلاین است.
• سایت MaxCDN نسبت به CDNهای خارجی دیگر پنلی ارزان‌تر دارد و اگر قصد خرید سی دی ان خارجی با هزینه مناسب هستید می‌تواند گزینه مناسبی باشد.
• اگر از سیستم مدیریت محتوا وردپرس استفاده می‌کنید می‌توانید از افزونه رایگان Jetpack استفاده کنید که امکان استفاده از شبکه توزیع محتوا یا CDN اختصاصی را به شما می‌دهد.

شبکه توزیع محتوا عمومی چیست؟

استفاده از سرویس رایگان شبکه توزیع محتوای عمومی (Free Public CDN Services) باعث افزایش سرعت سایت، ذخیره پهنای باند سرور اصلی، بهبود تجربه کاربری می‌شود، در سرویس‌های رایگان توزیع محتوای عمومی کتابخانه‌های معروف جاوااسکریپت و CSS قرار دارند تا برنامه‌نویس ها به جای اپلود کردن این کتابخانه های مهم و معروف در سرور اصلی سایت، از سرورهای رایگان توزیع محتوای عمومی استفاده کنند، این عمل باعث کاهش تعداد درخواست‌های HTTP به سمت سرور شما هم می‌شود، مثلا به جای اینکه فایل jquery.min.js را مثل آدرس زیر در طراحی سایت خود لود کنیم.

<script src=”https://mizfa/com/file/js/jquery.min.js”></script>

از jquery.min.js موجود در Google CDN که یکی از شبکه‌های توزیع مجتوای عمومی است استفاده کنیم:

       <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

Google CDN

لینک: https://developers.google.com/speed/libraries

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

Microsoft CDN

لینک: http://www.asp.net/ajax/cdn

یکی از محبوب‌ترین کتابخانه‌های CDN به شکل رایگان را برای کاربران فراهم کرده است. شبکه توزیع محتوا عمومی مایکروسافت از محبوبترین کتابخانه Ajax در انواع نسخه‌ها را پشتیبانی می‌کند.

jsDelivr CDN

لینک: http://www.jsdelivr.com

jsDelivr خود از ۵ سی دی ان قدرتمند دیگر برای ارائه خدمات هر چه بهتر به کاربران استفاده می‌کند که معروف‌ترین آنها Cloudflare و MaxCDN هستند. شاید این لینک برای شما جالب باشد که نحوه توزیع محتوا عمومی در jsDelivr به چه شکل است، انواع کتابخانه‌های معروف این CDN عمومی درون خود دارد و کافیست برای استفاده از یک فایل نام آن را در صفحه اول تایپ کنید.

cdnjs CDN

لینک: https://cdnjs.com

cdnjs توسط CloudFlare حمایت می‌شود و فایل‌های مربوط به jQuery ، Modernizr و Bootstrap در خودش دارد، استفاده بسیاری از این سی دی ان عمومی و محبوب می‌شود.

jQuery CDN

لینک: https://code.jquery.com

jQuery قدرت گرفته از MaxCDN است. و اخرین نسخه‌های کتابخانه JavaScript را همیشه در دسترس قرار می‌دهد.

نحوه رفع خطای Use a Content Delivery Network

برای رفع این خطا در Yslow پیشنهاد میکنیم از CDNهایی که معرفی کردیم استفاده نمایید، اگر بنا به شرایط خود نمی‌توانید استفاده کنید بهتر است حداقل برای لود کردن برخی از فایل‌های معروف در سایت خود همانند کتابخانه‌های JavaScript از CDN Public استفاده کنید.

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Reduce the number of DOM elements صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

طراحی سایت فروشگاهی

طراحی سایت شرکتی

خلاصه‌ای از خطا Reduce the number of DOM elements

نام: Reduce the number of DOM elements
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

طراحی سایت

مدل DOM چیست ؟

مدل DOM مخفف عبارت Document Object Model است که برای دسترسی به اشیا و عناصر موجود در یک سند HTML یا صفحه HTML است، این مدل از یک سری درخت سلسله مراتبی برای این دسترسی استفاده می‌کند. این درخت از شی Window به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه پیدا می‌کند، تا به پایین‌ترین رده عناصر یعنی متن و نوشته برسد . شکل زیر یک نمای کلی از درخت سلسله مراتب در مدل DOM است:

مدل DOM چیست

قیمت طراحی سایت

بهینه سازی سایت

تاثیر خطای Reduce the number of DOM elements در سرعت سایت

ولی استفاده بیشتر این عناصر DOM باعث کند شدن سایت می‌شود، و همان‌طور که نوشته شده Reduce the number of DOM elements یعنی کاهش دهید تعداد المان‌های DOM را، و برای این کاهش باید زبان جاواکسریپت و DOM آشنایی داشته باشید. مشکل سرعت وردپرس خیلی از دوستان که از قالب‌های اماده استفاده می‌کنند می‌تواند این خطا هم باشد هر چند اگر بقیه موارد بهینه سازی شده باشند خطای Reduce the number of DOM elements را بهتر است نادیده بگیرید.