آموزش افزایش سرعت لود سایت با GTmetrix

آموزش افزایش سرعت لود سایت با GTmetrix

می پسندم
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
7,836 بار
0 نظر
محمد رحمتی
۷ دی ۱۳۹۳

gtmetrix education - آموزش افزایش سرعت لود سایت با GTmetrix

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

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

ابتدا وارد سایت جی تی متریکس شوید و سایت خود را آنالیز کنید!

gtmetrix.com

آموزش صفحه Page Speed :

  • Optimize images :

این قسمت تصاویر موجود در سایت شما نیاز به بهینه سازی دارند را نمایش می دهد . برای حل این مشکل شما باید دکمه Optimized Version در زیر هر یک از تصاویر که در قسمت Optimize Images به شما نمایش داده است را بزنید و عکس را با عکس درون سایت خود جایگزین نمایید.

نکته : اگر از سیستم مدیریت محتوا وردپرس استفاده می کنید می توانید از افزونه هایی مانند smush.it یا EWWW Image Optimizer استفاده کنید.

  • Remove query strings from static resources :

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

  • Specify image dimensions :

گزینه فوق یعنی این که برای تصاویر  وب خود طول و عرض تعیین کنید. باید در فایل های قالب خود جستجو کنید و به صورت html یا به صورت css برای عکس های خود طول و عرض تعیین کنید.

  • Specify a cache validator :

در گزینه فوق شما باید فایل های ذکر شده دارای کش کنید ، یا به صورت کد در htaccess یا به کمک افزونه هایی مانند WP Super Cache ، W3 Total Cache و Autoptimize می تونید این گزینه را اعمال کنید.

  • Minify HTML :

گزینه فوق نیز اعلام می کند که کد های html خود را بهینه کنید و برای این کار فضاهای خالی بین کدهای html خود را به صورت دستی یا با استفاده از سایت های آنلاین که در این زمینه فعالیت می کنند حذف کنید. همچنین می توانید از افزونه Autoptimize برای این کار استفاده نمایید.

  • Minify JavaScript :

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

  • Avoid bad requests :

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

  • Avoid a character set in the meta tag :

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • Avoid landing page redirects :

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

  • Defer parsing of JavaScript :

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

  • Enable gzip compression :

این گزینه یعنی این که Gzip را در سایت خود فعال کنید. برای این کار در وردپرس با افزونه W3 Total Cache انجام دهید و اگر از وردپرس استفاده نمیک نید میتونید از کد زیر در فایل htaccess استفاده کنید.

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#End Gzip
  •  Enable Keep-Alive :

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

  • Inline small CSS :

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

  • Leverage browser caching :

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

  • Minify CSS :

این گزینه هم همانند کدهای html و جاوا اسکریپت باید فضاهای خالی بین کدهای درون فایل های css را حذف کنید. در این مورد باید حتما از ابزار های آنلاین استفاده کنید. اگر از وردپرس استفاده می کنید از افزونه Autoptimize استفاده کنید.

  • Minimize redirects :

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

  • Minimize request size :

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

  • Optimize the order of styles and scripts :

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

  • Put CSS in the document head :

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

  • Serve resources from a consistent URL :

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

  • Serve scaled images :

این مشکل برای تغییر اندازه توسط کد ها ایجاد میشود. یعنی مثلا اگر عکس شما ۴۰۰ در ۴۰۰ است در قالب شما با کدی مثل css یا html تغییر سایز پیدا کرده است. پس باید عکس های خود را به همان اندازه ای که تعریف شده است در آورید.

  • Specify a Vary :
  • Accept-Encoding header :
  • Specify a character set early :

این گزینه ها به این معنی است که شما برای فایل های خود نوع کاراکتر تعیین نکرده اید. شما میتونید utf8 را انتخاب کنید. این کار با برنامه ای مانند notepad ++ امکان پذیر است.

  • Avoid CSS @import :

این گزینه به معنای اجتناب از بگارگیری دستور CSS@Import است. شما باید در جایی که فایل css را فرا می خوانید از این دستور برای افزایش تاخیر در بارگذاری فایل css استفاده کنید.

  • Combine images using CSS sprites :

این گزینه به معنای دادن ابعاد و اندازه به تصویر و همچنین استفاده از تکنیک css sprites است. با تعیین اندازه به تصاویر سرعت بارگذاری تصوسیر توسط مرورگر را تا حد زیادی بالا ببرید. برای این کار میتوانید از دستور css یا html استفاده کنید. CSS sprites به معنای یکی کردن چندین عکس به منظور کاهش درخواست از سرور است  شما میتونید با استفاده از فتوشاپ عکس های خود را کنار هم بگذارید و برای هر کدی که عکس شما در آن عکس است ، آدرس عکس مرجع رو بدید و مختصات آن تکه عکس را مشخص کنید. ( مثل سایت فامو :d )

  • Prefer asynchronous resources :

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

آموزش صفحه Yslow :

  • Use a Content Delivery Network (CDN) :

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

  • Avoid empty src or href :

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

  • Add Expires headers :

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

  • Make fewer HTTP requests :

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

  • Compress components with gzip :

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

  • Minify JavaScript and CSS :

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

  • Avoid URL redirects :

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

  • Make AJAX cacheable :

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

  • Put CSS at the top :

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

  • Put JavaScript at bottom :

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

  • Remove duplicate JavaScript and CSS :

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

  • Avoid AlphaImageLoader filter :

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

  • Avoid HTTP 404 (Not Found) error :

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

  • Reduce the number of DOM elements :

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

  • Do not scale images in HTML :

این گزینه به این اشاره می کند تصاویر در قالب شما توسط HTML نمیتواند بزرگتر یا کوچکتر شود. قالب خود را برای این مشکل خطایابی و بررسی دقیق کنید.

  • Use cookie-free domains :

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

  • Use GET for AJAX requests :

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

  • Avoid CSS expressions :

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

  • Reduce DNS lookups :

کاهش تعداد درخواست های DNS lookups سبب افزایش سرعت سایت شما و همچنین کاهش حجم ، فشار و درخواست به سرور میشود. زیرا DNS lookups باعث ایجاد کمی کندی و تاخیر در درخواست به سرور می شود.

  • Reduce cookie size :

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

  • Make favicon small and cacheable :

این گزینه به شما اعلام میکند که برای صفحات خود آیکن درست کنید. فاو آیکون میتوانید نماد کوچکی از سایت شما در ابعاد ۱۶ در ۱۶ باشد.

  • Configure entity tags (ETags) :

شما باید از ETags برای افزایش سرعت اینترنت استفاده کنید. انجام این کار به صورت دستی بسیار مشکل است که اگر از وردپرس استفاده کنید با افزونه W3 Total Cache کار شما آسان می گردد.

  • Make JavaScript and CSS external :

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

موفق و پیروز باشید!

دیدگاه کاربران

هنوز هیچ دیدگاهی وجود ندارد

مقالات مرتبط

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