رفتن به مطلب

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


laruz

پست های پیشنهاد شده

 

gtmetrix-title.jpg

 

 

همه وب مستر های عزیز با سایت جی تی متریکس آشنایی دارند و خیلی از این سایت کمک میگیرند در واقع این سایت تمام استاندارد های خود را از خود گوگل الگو برداری میکند اما این آدرس برای ما ایرانیان قابل دسترس نمی باشد مگر با قند و شیرینی! و از آنجایی که اینترنت در ایران یعنی "گوگل" پس بهترین گزینه برای بهینه سازی سایت،جی تی متریکس می باشد

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

در اینترنت آموزش های فراوانی در این رابطه موجود می باشد و خیلی از سایت های فارسی زبان در این رابطه صحبت کرده اند تا جایی که شما کافیست در گوگل جستجو نمایید "سرعت سایت" با نهایت تعجب متوجه میشود که همین سایت جی تی متریکس اولین نتیجه میباشد در صورتی که حتی کوچکترین کلمه فارسی در این سایت موجود نمیباشد و کلیه سایت های فارسی زبان نام این سایت را آورده اند و لینک منبع را ذکر نکرده اند که این الگوریتم جدید گوگل میباشد که از بحث ما خارج میباشد

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ولین گزینه مورد بحث من:

Enable keep alive

 

 

به طور کلی یعنی زنده نگه داشتن یک فایل بین سرور و مرورگر این گزینه بیشتر از طرف سرور شما میباشد اما اگر دسترسی به سرور ندارید شما نیز میتوانید کارهایی بکنید

 

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

 

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

 

اگر سرور شما آپاچی میباشد از این کد استفاده نمایید و از مدیر سرور بخواهید تنظمیات keepalive را روی حداکثر قرار دهد

 

## KeepAlive: Whether or not to allow persistent connections (more than# one request per connection). Set to "Off" to deactivate.#KeepAlive On## MaxKeepAliveRequests: The maximum number of requests to allow# during a persistent connection. Set to 0 to allow an unlimited amount.# We recommend you leave this number high, for maximum performance.#MaxKeepAliveRequests 100## KeepAliveTimeout: Number of seconds to wait for the next request from the# same client on the same connection.#KeepAliveTimeout 100

 

اگر سرور شما لایت اسپید میباشد به مدیر سرور بفرمایید گزینه smart keep-alive را فعال نماید و keepalive را روی حداکثر قرار دهد(لایت اسپید خیلی از تنظیمات خود را از آپاچی فراخوانی میکند اگر آپاچی را خوب کانفیگ کنید روی لایت اسپید هم تاثیر خیلی زیادی خواهید گزاشت)

 

اگر سرور شما nginx میباشد به مدیر سرور بفرمایید از این ماژول استفاده نمایید.

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

Avoid bad requests

 

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

راه حل: آدرس فراخوانی شده را حذف نمایید یا آدرس هایی که شکسته میباشند را با همان آدرس و نام،آن فایل را ایجاد نمایید که کار آسانی میباشد

مثلا تغیر یر آدرس تصائیر سایت با .htaccess

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

Defer parsing of JavaScript

 

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

 

راه حل1:

 

<script type="text/javascript">function downloadJSAtOnload() {var element = document.createElement("script");element.src = "defer.js";document.body.appendChild(element);}  if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;</script>

 

1.کد بالا را کپی نمایید

2.کد بالا در در تگ head قالب خود past نمایید

3.فایل "defer.js" که فایل نمونه میباشد را با فایل مورد علاقه خود جایگزین کنید

کد دمو:

<html> <head> <script type="text/javascript">  // Add a script element as a child of the body  function downloadJSAtOnload() {  var element = document.createElement("script");  element.src = "defer.js";  document.body.appendChild(element);  }   // Check for browser support of event handling capability  if (window.addEventListener)  window.addEventListener("load", downloadJSAtOnload, false);  else if (window.attachEvent)  window.attachEvent("onload", downloadJSAtOnload);  else window.onload = downloadJSAtOnload;  </script> </head> <body>  <h1>I wait 2 seconds then ...</h1> <p id="inner"></p>  </body> </html>

 

راه حل 2:

 

 

تگ های script خود را پیدا کنید و مانند کد زیر ویرایش نمایید

 

 

 

 

الف:

 

<script src="/your adress file/sample.js" ansync:true async></script>

 

 

 

 

ب:

 

یا مانند کد زیر ویرایش کنید

 

<script src="/your adress file/sample.js" type="text/javascript" defer></script>

 

 

 

پ:

یا مانند کد زیر ویرایش کنید

$document->addScript('/your adress file/sample.js','text/javascript', true);

 

 

 

 

 

*معمولا خیلی وقتا به این تگ نیازی ندارید

<script src="/media/system/js/mootools-core.js"></script>

 

اینم میتونید تو قالبتون پیدا و حذف کنید اگه به هم ریخت بازم اضافش کنید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

زینه بعدی:

How to Inline Small CSS

 

 

این گزینه به شما میگوید که فایل های css که کوچک هستد را از خود قالب فراخوانی کنید برای این کار کافیست:

1.آدرس این فایل css خود را از آنجایی که فراخوانی شده است پیدا و حذف نمایید

2.بین این کد،فایل css کوچک خود را در تگ head قالب خود قرار دهید

 

<style/>کد شما<style>

 

تصویر برای توصیف بهتر:

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

Inline small javascript files

 

این گزینه نیز مانند گزینه بالا در مورد فراخوانی کردن فایل های کوچک جاوا از خود قالب در تگ head صحبت می نماید

 

1.آدرس این فایل java خود را از آنجایی که فراخوانی شده است پیدا و حذف نمایید

2.بین این کد،فایل java کوچک خود را در تگ head قالب خود قرار دهید

 

<script/>کد شما<script>

 

تصویر برای توصیف بهتر:

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه های بعدی:

Minify CSS & Minify JavaScript

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی

How to specify image dimensions

 

از شما میخواهد برای تصاویر طول و عرض تعیین نمایید

کد زیر را طبق تصویر مورد نظر خود، ویرایش نمایید و از الگو زیر پیرروی نمایید

 

<img src="image.jpg" width="200px" height="200px" />

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

How to Leverage Browser Caching

 

 

به معنی ذخیره سازی صفحات برای مرورگر شما میباشد

راحل حل:

فایل .htacess خود را ویرایش نمایید و کد زیر را به آن اضافه نمایید

 

## EXPIRES CACHING ##<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpg "access 1 year"ExpiresByType image/jpeg "access 1 year"ExpiresByType image/gif "access 1 year"ExpiresByType image/png "access 1 year"ExpiresByType text/css "access 1 month"ExpiresByType text/html "access 1 month"ExpiresByType application/pdf "access 1 month"ExpiresByType text/x-javascript "access 1 month"ExpiresByType application/x-shockwave-flash "access 1 month"ExpiresByType image/x-icon "access 1 year"ExpiresDefault "access 1 month"</IfModule>## EXPIRES CACHING ##

 

و یا:

بعد از RewriteEngine On در فایل htaccess این کد را وارد نمایید:

 

    # Turn off ETags   FileETag None   Header unset ETag   # Set Expires headers   ExpiresActive On   ExpiresDefault "access plus 1 year"   ExpiresByType text/html "access plus 1 second"   ExpiresByType image/gif "access plus 2592000 seconds"   ExpiresByType image/jpeg "access plus 2592000 seconds"   ExpiresByType image/png "access plus 2592000 seconds"   ExpiresByType image/x-icon "access plus 2592000 seconds"   ExpiresByType text/css "access plus 604800 seconds"   ExpiresByType text/javascript "access plus 604800 seconds"   ExpiresByType application/x-javascript "access plus 604800 seconds"   # Remove Last-Modified header   Header unset Last-Modified

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی

How to Avoid CSS @ Imports

 

 

این هم یکی از گزینه هایی هست که تقریبا هیچ توضیحی در این مورد این گزینه در سایت های فارسی زبان موجود نمیباشد

گوگل میخواد که از @import در فایل های css خود استفاده نکنید به جای جای آن از الگوی زیر استفاده کنید

راه حل:

1.ابتدا تگ @import که جی تی متریکس به شما گفته است را در فایل css پیدا و حذف نمایید به جای آن از دستور زیر استفاده و تغییرات لازم را انجام دهید

کد @importشما مانند کد زیر میباشد

 

("import url("your file adress.css@

که آن را طبق الگو زیر تغییر دهید

 

<link rel="stylesheet" href="https://1go.ir/your file adress.css" />

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی

Serving scaled images

 

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

برای رفع این گزینه کافیست تصاویر خود را واقعی وارد نمایید

برای مثال اندازه مد نظر شما برای تصویر و قرارگیری در قالب 100*100 میباشد ولی تصویر شما خیلی بزرگ تر از این سایز هست پس شما باید با فوتوشاپ و یا ابزار های مشابه دقیقا همین اندازه 100*100 را برای تصویر خود انتخاب کنید . فایل را آپلود و آدرس دهی کنید و به صورت دستی در ادیتور تصویر را کوچک و بزرگ نکنید!!

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی

Combine images using CSS sprites

css-sprites چیست؟

ترفندی برای کاهش حجم ، و زمان بارگذاری صفحه و این کار به سئو سایتتون خیلی میتونه کمک کنه!

مرورگر برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های CSS و جاوا اسکریپت و…) یک درخواست (Request) به سرور ارسال می کند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر Request و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.

هرچه تعداد Request ها کمتر باشد ، زمان بارگذاری صفحه کمتر می شود. به جای چند فایل CSS بهتره از یک فایل استفاده کنیم. به جای چند فایل JS میتونیم از یک فایل استفاده کنیم ؛ میتونیم تصاویری که به عنوان بکگراند المنت ها در صفحه استفاده میکنیم را در یک تصویر قرار بدیم.

در حالت عادی ، با استفاده از تگ <img> یا در بکگراند المنت ها این تصاویر رو در صفحه قرار میدهیم.

مرورگر برای بارگذاری ۱۰ فایل، ۱۰ Request ارسال میکند. اگر این ۱۰تصویر در یک تصویر قرار بگیرند، مرورگر برای بارگذاری صفحه، ۹ درخواست کمتر ارسال می کند و تمام تصاویر با بارگذاری یک فایل در قسمت های مختلف صفحه قرار می گیرند و با این کار هم حجم عکس ها کمتر میشه، و همین طور تعداد Request ها.

 

 

امروز قصد معرفی ابزار آنلاین spriteme.org رو دارم که خیلی خیلی راحت با محیط کاملا گرافیکی سایت تمام تصاویر شما رو به صورت sprites در میاره میدونم که خیلی ها این مشکل رو داشتن سعی میکنم آموزشم ساده و روان برای همه باشه و بعد از انجام دادن متوجه تغییر سرعت وبسایت و کم کردن درخواست ها خواهید شد!حتما تست کنید!

 

تمامی کار هارو روی همین انجمن انجام میدم

 

ابتدا شما باید این کار هارو بکیند

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

 

برای این کار ابتدا به آدرس لینک ها تنها برای اعضای سایت قابل نمایش است. برید و یه لینک هستش به نام sprite me ;که کنارش نوشته drog this link روی sprite me کلیک راست کنید و bookmark کنید

 

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

 

مانند من که روی انجمن جوملا فروم روی اون بوک مارک کلیک کردم و کادر جاوا به طور اتوماتیک سمت راست قالب اضافه شد!

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

2.حالا طبق عکس زیر بر روی make all کلیک کنید

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

3.بعد از کلیک شما میبینید که به شما عکس هایی که در سایتتون امکان مخلوط کردن اون وجود داره در یک فایل png بهتون تحویل میده و اونارو روی هاستتون آپلود کنید

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

4.سپس روی گزینه export css مانند تصویر زیر کلیک کنید

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

5.بعد از کلیک بر روی این گزینه مطابق تصویر زیر به این آدرس منتقل میشید که دیگه کار تمومه بهتون میگه کدوم خط هارو باید با کد جدیدی که تولید کرده جایگزین کنید و حتی آدرس css که باید تغییر بدید هم بهتون میگه که دیگه خیلی خیلی کار راحت میشه!

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

تذکر:لطفا قبل از هر کاری از فایل های css خود بکاپ بگیرید

 

 

نکته:میتونید از افزونه firebug در فایر فاکس برای دیدن تغییرات هم استفاده کنید و تمامی کد هارو تو یه فایل php ذخیره کنید اون فایل رو بدید gtmetrix و بعد متوجه سرعت فوق العادتون میشید

 

فقط به یاد داشته باشید که هر جا که عکس ها رو آپلود کردید به همون جا آدرس بدید و اشتباهی آدرس ندید

 

امیدوارم این مقاله مفید واقع شده باشه!

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی

Enable Gzip Compression

 

برای رفع این گزینه:

1.در مدیریت جوملا خود به این آدرس برورید

سایت/تنظیمات کلی/سرور/فشرده سازی gzip

گزینه "بلی" را انتخاب و ذخیره نمایید

 

2.فایل .htacess خود را ویرایش و کد زیر را اضافه نمایید

 

<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

Combine External CSS

 

do.php?imgf=joomlaforum.ir_13760667321.png

هر فایل css به سرعت لود شما می افزاید

پس بهتر است تا جایی که امکان دارد و قالب شما را خراب نمیکند فایل های css را مخلوط کنید در یک فایل

به طور مثال شما فابلی دارید به نام "main.css" و فایل دیگری دارید به نام "sidebar.css" شما ابتدا

1.تمامی محتویات داخلی فایل "sidebar.css" را copy و سپس در فایل "main.css" ،ء past نمایید

2.آدرس فایل فراخوانی شده "sidebar.css" را از قالب خود حذف نمایید

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه بعدی:

Optimize the order of styles and scripts

 

 

do.php?imgf=joomlaforum.ir_13760707601.png

 

این گزینه به شما میگوید که تگ های Style و تگ های calls to stylesheets باید

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

خواهد شد.برای نمونه به کد زیر دقت کنید و نحوه قرار گیری و ترتیب قرار گیری را مشاهده نمایید و الگو برداری کنید

 

<head><meta name=description content="description"/><title>title</title><style>css اینجا قرار میگیرند</style><script type="text/javascript">فایل های جاوا اینجا قرار میگیرند</script></head>

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه:

Remove query strings from static resources

Removing-Query-string-URL-from-WordPress.png?be042f

 

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

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

گزینه:

How to Avoid document write

لینک ها تنها برای اعضای سایت قابل نمایش است.

در جاوا اسکریپت شما میتوانید با "document.write" یک webpage یا call an external resource استفاده نمایید که با استفاده از این دستور مرورگر گام های بی فایده ای را طی میکند سپس پس از خواندن منابع،باید فایل نوشته شود و آن را به منبع دیگر انتقال بدهد و این کار دوباره تکرار می شود که باعث کندی سرعت سایت شما خواهد شد.

 

برای رفع این مشکل document.write را پیدا کنید و مانند کد زیر آن را ویرایش نمایید

 

 

document.write('<script src="another.js"></script>');

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 8 ماه پیش ...

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...