آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش اول)

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

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

GTMetrix چیست؟

gtmetrix یا جی تی متریکس یک وبسایت کارآمد برای تست و آنالیز سرعت بارگذاری سایت است که از سرویس های مورد استفاده موتورهای جستجوی مشهور، یاهو و گوگل محسوب می شود. در واقع با استفاده از GTmetrix هم می توانید سرعت لود سایت خود را بالا ببرید و هم سئو سایت خود را بهتر کنید. جی تی متریکس نتیجه بدست آمده را، در دو طبقه بندی page speed که نشان دهنده سرعت بارگذاری صفحات سایت و yslow که نشان دهنده کارایی و عملکرد سایت و سرور است نمایش می دهد.

در این مقاله معیار های gtmetrix را بررسی و راه حل برطرف کردن آن را برای شما عزیزان آماده کرده ایم .

استفاده از GTMetrix رایگان است، شما می‌توانید با مراجعه به سایت https://gtmetrix.com و وارد کردن آدرس سایت مورد نظرتان و کلیک بر روی دکمه Analyzee، سرعت سایت خود را بررسی کنید. پس از مدتی صفحه‌ای باز می‌شود که نتایج بررسی انجام شده را نشان می‌دهد. که در اینجا توضیح مختصری درباره قسمت‌های مختلف آن ارائه می کنیم .

همانطور که در تصویر بالا مشاهده میکنید از دو بخش Performance scores  و Page Detail تشکیل شده است که در زیر به توضیح آن می پردازیم .

بخش Performance scores

در این بخش معیارهایی برای سنجش سرعت نشان داده می‌شود و دارای دو بخش است:
PageSpeed score: نشان دهنده درصد بهینه بودن کدهای سایت می‌باشد. هر چه میزان این درصد بالاتر باشد سایت شما بهینه تر می‌باشد.
Yslow score: در این قسمت هم درصدی نشان می‌دهد که بر اساس ابزار و استانداردهای یاهو برای سرعت بارگذاری سایت می‌باشد. در صورتیکه سایت شما در این قسمت دارای امتیاز مناسبی نیست بهتر است با یک برنامه‌نویس حرفه‌ای مشورت کنید تا بتوانید سرعت سایت را به حداکثر مقدار خود برسانید.

بخش Page Detail

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

در این قسمت از مقاله به معرفی خطا های GTmetrix  و راه حل برطرف کردن آن ها می پردازیم .

خطای Combine images using CSS sprites

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

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

خطای Specify image dimensions

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

اگر روی عنوان این بخش کلیک کنید و اطلاعات داخل اون رو ببینید، تماشا میکنید در هر سطر یک آدرس عکس هست و جلوی آن یه چنین چیزی “(Dimensions: 10 x 10)” نوشته شده است. مقدار اولی همان width و مقدار دومی هم height مربوط به هر تصویر هست.

حتما بخوانید :  استفاده از Cloud Flare جهت بهبود سرعت و امنیت

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

[php]<img src="لینک" alt="توضیح" width="10" height="10" />[/php]

 

خطای Defer parsing of JavaScript

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

سخن مدیر : به شخصه توصیه می‌کنم زیاد پیگیر این بخش نشید، چون آخرش مجبورتون میکنه همه کدهای جاوا اسکریپت رو از سایتتون پاک کنید تا 100 درصد بشه. 😀

در ضمن افزونه هایی برای سایت های وردپرسی وجود دارد که تا حد قابل قبولی این خطا را برطرف میکند، مثل پلاگین WP Deferred JavaScripts .

خطای Optimize images

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

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

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

راه حل سوم (مخصوص سایت های وردپرسی) : از معروف ترین پلاگین های وردپرس می‌توان به افزونه EWWW Image Optimizer و افزونه Smush اشاره کرد.

 

خطای Minify CSS و Minify JavaScript

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

همچنین میتونید از سایت  jscompress برای فشرده سازی فایل های جی کوئری و از سایت csscompressor برای فشرده سازی فایل ها و کد های CSS استفاده کنید.

ادامه خطا ها را در قسمت دوم مقاله منتشر خواهیم کرد. با ما همراه باشید. 😉