بهینه سازی سایت با کمک GTMetrix

آموزش کار با گوگل آنالیتیکس (Google Analytics)

جولای 24, 2017

3 راهکار برای بهینه سازی کلیدواژه های تبلیغ

سپتامبر 23, 2017

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

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

سایت GTMetrix یکی از بهترین مراجع سنجش سرعت سایت و یافتن مشکلات مربوط به آن و دریافت راهکارهای مناسب است تا بتوان هم در زمینه ی افزایش ترافیک و هم سئو موفق تر عمل نمود. برای دریافت این اطلاعات مفید کافیست وارد سایت GTMetrix شده و بعد از اینکه آدرس سایت مورد نظر را در قسمت “Analyze Performance of” وارد نمودید، روی دکمه “Go” کلیک کرده تا عملیات آنالیز سایت آغاز شود. بعد از چند ثانیه صفحه ای به شکل زیر باز می شود که نتایج بررسی انجام شده را به شما نشان خواهد داد.

حال به بررسی نتایج حاصل از آنالیز و نحوه ی بهینه سازی سایت می پردازیم:

PageSpeed و YSlow هنگام تحلیل URL ها از توصیه ها و استانداردهای مختلفی استفاده می کنند. هر سرویس صفحه ی مورد نظر را با استفاده از مجموعه ای از قوانین که به نظر آنها تاثیر بیشتری در سرعت و عملکرد صفحه دارند، تحلیل می کند. اکثر قوانین همپوشانی دارند یا خیلی مشابه یکدیگرند اما به طور کلی نمرات ارائه شده تفاوت های معناداری نیز با هم دارند.
Page load time: زمان بارگذاری سایت را بر حسب ثانیه نشان می دهد.

Total page size: حجم صفحه ای که آن را مورد بررسی قرار داده اید.
Total number of requests: تعداد درخواست هایی که به سرور برای بارگزاری قسمت های مختلف سایت ارسال می شود.
Timeline : در این بخش با استفاده از نمودار زمان بارگزاری هر بخش را نشان می دهد.
History : در این بخش تاریخچه ای از بررسی هایی انجام شده بر روی آدرس وارد شده را نمایش می دهد تا از تغییر آن در فواصل مختلف اطلاع پیدا نمایید.
Combine images using CSS sprites : در این قسمت لیست تصاویری که ابعاد کوچکی دارند یا حجم آنها خیلی پایین است را به شما نشان می دهد که می توانید با قابلیت sprites که درCSS وجود دارد این تصاویر را ادغام و به عنوان یک تصویر واحد از آن استفاده نمایید و به این ترتیب کمک زیادی به بهینه سازی سایتتان نمایید.
Specify image dimensions : قرار دادن مقدار برای طول و عرض تصاویر. برای تصاویری که در این لیست آمده طول و عرض تعیین نمایید. تعیین طول و عرض از این جهت مفید است که مرورگر قبل از بارگذاری عکس، از فضایی که باید از صفحه برای نمایش آن اختصاص بدهد آگاهی پیدا می کند و هم اینکه تاثیر فوق العاده ای برای ایندکس شدن تصاویر شما در گوگل و موتورهای جستجو دارد.
در همین بخش مشاهده می کنید که در هر سطر یک آدرس عکس موجود است و جلوی آن عبارتی مانند “(Dimensions: 10 x 10)” نوشته شده است. مقدار اولی همان عرض و مقدار دومی هم ارتفاع مربوط به هر تصویر می باشد. برای اینکه این مقادیر را به هر تصویر اختصاص بدهید کافی است ابتدا محل بارگذاری آن عکس را در قالب بدست بیاورید و بعد به آن مقدار دهید.
Defer parsing of JavaScript : برای بارگذاری یک صفحه، مرورگر باید محتویات تمام تگ های <script> را تجزیه و تحلیل کند که بار و زمان اضافی را برای بارگذاری صفحه اضافه می کند. با به حداقل رساندن میزان جاوا اسکریپت مورد نیاز برای رندر صفحه و تعویق تجزیه ی جاوا اسکریپت غیر ضروری تا زمانی که نیاز به اجرا داشته باشد، می توانید زمان بارگذاری اولیه صفحه خود را کاهش دهید.
Optimize images : بهینه سازی حجم تصاویر که تاثیر زیادی در سرعت بارگذاری شما خواهد داشت. در این قسمت خود سایت یک نسخه بهینه شده از عکس را به صورت optimized version در اختیار شما قرار می دهد که می توانید آن را دانلود کرده و با همان عکس در سایت خود جایگزین نمایید تا بهینه سازی انجام شود.

مطلب مرتبط آموزش سئو وردپرس و نحوه تنظیم ساختار سایت وردپرسی (قسمت ۲)

Prefer asynchronous resources : ناهماهنگی در فراخوانی فایلهای جاوا اسکریپت. سایت در این قسمت فایلهای جاوا اسکریپتی که باعث ایجاد ناهماهنگی بین فایلهای جاوا اسکریپت می شود را مشخص می نماید. برای حل این مشکل کافی است لود آن ها را به تعویق بندازید .
Minify HTML : در این بخش از شما خواسته شده است با حذف بخش های اضافی مثل توضیحات و یا فاصله ها حجم کدهای HTML قالب را بهینه نمایید.
Minify CSS و Minify JavaScript : کاهش حجم کدهای JavaScript و CSS . این مورد هم مثل مورد بالا با حذف بخش توضیحات و همچنین فاصله های اضافی می توان قالب را بهینه کرد. همچنین میتوانید از ابزارهای رایگانی که جهت فشرده کردن فایل های CSS در دسترس هستند استفاده کرد که از آن جمله میتوان به https://csscompressor.com اشاره نمود.
خود سایت در بخش optimized version مقابل هر آدرس, آدرسی برای دریافت کدهای بهینه شده را هم به شما نشان می دهد , که بهتر است از فایل های خود یک بک آپ گرفته و بعد آن نسخه های بهینه شده را جایگزین آنها نمایید.
Optimize the order of styles and scripts : چینش صحیح فایل های استایل و جاوا اسکریپت کنار یکدیگر، به جهت بهینه سازی سایت بهتر است ابتدا فایل های مربوط به استایل یا همون CSS و سپس کدهای جاوا اسکریپت سایت قرار گیرند.

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

Inline small JavaScript : فراخوانی فایل های جاوا اسکریپت کوچک از داخل سایت، این گزینه هم همانند گزینه ی بالایی می باشد با این تفاوت که نظر شما را به فایل های جاوا اسکریپت کوچک خارجی جلب می کند.
Enable Keep-Alive : زنده نگاه داشتن فایل بین سرور و مرورگر. در این مورد باید مواردی که مشخص شده اند به صورت زنده بین سرور و مرورگر خود قرار دهید. برای این کار کد زیر را به فایل .htaccess موجود در شاخه اصلی سایت اضافه نمایید.

Header set Connection keep-alive

</ifModule>

Leverage browser caching : ذخیره سازی بخش های ثابت در cache مرورگر کاربر. در این بخش لیستی از فایلهایی که بهتر است در مرورگر کاربر ذخیره شود را نشان می دهد. اگر بخواهیم کاری کنیم فایلی در مرورگر کاربر کش بشود کافی است کد زیر را در فایل htaccess قرار بدهید.

## EXPIRES CACHING ##

ExpiresActive On

you file “access plus 1 year”

ExpiresDefault “access 1 month”

</IfModule>

## EXPIRES CACHING ##

Avoid bad requests : در این بخش می توانید فایل ها یا تصاویری که در سایت استفاده کرده اید ولی در حقیقت وجود خارجی ندارند را ببینید و آنها را درست نمایید.
Avoid a character set in the meta tag : تعیین نوع کاراکترها کمک می کند تا مرورگرها اطلاعات از جریان بایتی را به کاراکترهای قابل خواندن تبدیل کنند. هر کاراکتر با یک مقدار نشان داده می شود و به معنای واقعی کلمه صدها مجموعه کاراکترهای خاص وجود دارد که مورد استفاده قرار می گیرند. در اینجا لیستی از چند رمزگذاری در وب بر اساس محبوبیت مرتب شده اند:

UTF-8 (Unicode) Covers: Worldwide
ISO-8859-1 (Latin alphabet part 1) Covers: North America, Western Europe, Latin America, the Caribbean, Canada, Africa
WINDOWS-1252 (Latin I)
ISO-8859-15 (Latin alphabet part 9) Covers: Similar to ISO 8859-1 but replaces some less common symbols with the euro sign and some other missing characters
WINDOWS-1251 (Cyrillic)
ISO-8859-2 (Latin alphabet part 2) Covers: Eastern Europe
GB2312 (Chinese Simplified)
WINDOWS-1253 (Greek)
WINDOWS-1250 (Central Europe)
US-ASCII (basic English)

Avoid landing page redirects : ریدایرکت نامناسب. اصولا این مورد در سایت هایی دیده می شود که وبسایت هم با www و هم بدون www دیده میشود و هیچ کدام بر روی دیگری ریدایرکت نشده اند.
Avoid CSS @import : مدیریت فراخوانی فایلهای CSS خارجی. خیلی مواقع دیده می شود که وبمسترها اگر چند فایل استایل خارجی داشته باشند فایل اصلی را در سمت HTML سایت فراخوانی می کنند و بقیه را با دستور “(“import url(“your file adress.css@” از داخل آن فایل استایل اصلی بارگزاری می کنند. اینکار یکی از اشتباهاتی است که گوگل آن را یکی از خطاهای اصلی می داند. برای رفع این مشکل کافی است به آدرسی که سایت داده بروید و آن بخش مربوط به @import را حذف کنید و فایل را ذخیره نمایید. بعد به بخش Head سایت رفته و با دستور زیر آن ها را جداگانه فراخوانی کنید و یا اینکه آنها را با هم ادغام کنید.

Put CSS in the document head : فراخوانی فایل CSS خارج از بخش head سایت. GTMetrix زمانی با این گزینه به شما اخطار می دهد که فایل استایل خودتان را در بخش خارج از head سایتتان فراخوانی کرده باشید مثلا در بخش body. برای حل این مشکل کافی است بخشی را که مشخص شده به قسمت head سایت منتقل کنید.
Enable gzip compression : قابلیت gzip باعث می شود فایلهایی که از سمت سرور به مرورگر ارسال می شود به صورت کمپرس شده و فشرده سازی شده به مرورگر ارسال بشود و در حقیقت میزان حجمی که در مرورگر کاربر باید لود شود کمتر می شود و سایت سریعتر لود می شود. برای رفع این گزینه کافی است کد زیر را به فایل.htaccess اضافه کنید.

# BEGIN Compress text files

SetOutputFilter DEFLATE

</filesMatch>

</ifModule>

# END Compress text files

Specify a cache validator : تعیین زمان برای فایلهای کش شده. در این بخش سایت از شما می خواهد برای فایلهایی که روی مرورگر کاربر کش کرده اید اعتبار تعیین کنید. برای رفع این خطا کافی است با توجه به نیاز خودتان کدی شبیه کد زیر را به فایل .htaccess سایتتان اضافه کنید.

Header set Cache-Control “max-age=2592000, public”

</filesMatch>

Header set Cache-Control “max-age=2592000, public”

</filesMatch>

Header set Cache-Control “max-age=2592000, private”

</filesMatch>

Header set Cache-Control “max-age=600, private, must-revalidate”

</filesMatch>

</ifModule>

# END Cache-Control Headers

Specify a Vary: Accept-Encoding header : سایت زمانی این خطا را به شما نشان می دهد که یا نوع کاراکتر فایل نشان داده شده ، درج نشده باشد و یا اینکه از چند نوع متفاوت به صورت یکجا در سایت استفاده کرده باشید.

Specify a character set early : این هم مانند گزینه بالایی می باشد و می گوید که شما نوع کاراکتر را تعیین نکرده اید. مثلا برای سایت های فارسی همان کد بالا را به فایل هایی که نشان می دهد اضافه نمایید.

Remove query strings from static resources : این گزینه از سایت به شما نشان می دهد که در پایان فایل های استاتیک شما علامت “؟” وجود دارد. یعنی در انتهای آدرس آن فایل علامت سوال موجود است. این علامت در آدرس باعث می شود که آن فایل در کش مرورگر قرار نگیرد و در هر بار مراجعه، دوباره از سرور فراخوانی گردد. برای حل این مشکل می توانید بصورت دستی یا با کمک افزونه ها علامت سوال را از انتهای نام فایل حذف کنید.

Minimize redirects : کم کردن ریدایرکت های سایت. این گزینه به شما می گوید که باید ریدایرکت هایی که در سایتتان انجام داده اید را به حداقل یا اگه ممکن است به صفر برسانید.

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

Serve resources from a consistent URL : این بخش فایل هایی را به شما نشان می دهد که محتوای یکسانی دارند ولی آدرس های متعددی به آنها داده شده است. برای رفع این مورد کافی است یکی از لینک ها را استفاده و بقیه آنها را حذف نمایید.

Serve scaled images : اگر تصاویری در سایت داشته باشید که اندازه اصلی آن با اندازه ای که از طریق CSS به آن نسبت داده باشید فرق داشته باشد توسط این گزینه به شما نشان داده می شوند. برای حل این موضوع یا باید اندازه تعیین شده را حذف کنید و یا اینکه عکس را در همان اندازه ای که استفاده کرده اید ذخیره کنید.

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

به زودی با آپدیت این مطلب به بررسی موارد چک شده در این الگو خواهیم پرداخت…