کار با Page Speed Insights یک راه عالی برای بدست آوردن یک مرور سریع از پتانسیل بهینه سازی سایت شما و افزایش سرعت سایت است. امروز من به شما نحوه استفاده از این پتانسیل و افزایش نمره Page Speed را نشان می دهم. اما نباید همیشه به نتایج گوگل اعتماد کنید. زیرا پیام های خطای Page Speed insights همیشه مفید نیستند.
در این مقاله، نحوه تفسیر مهمترین پیام های خطا از Google PageSpeed Insights و بهینه سازی سایت را مطرح خواهم کرد.
پیام های خطای Google Page Speed همیشه صحیح و مهم نیستند
هرگز نباید فقط به نتایج یا پیام های خطای Google Page Speed Insights اعتماد کنید. زیرا ابزار Google مهم ترین پارامتر سایت شما را اندازه گیری نمی کند: “زمان بارگذاری صفحه”. برای اندازه گیری صحیح این امر، بهتر است از Webpagetest.org استفاده کنید.
تنها در صورتی که هنگام بهینه سازی سایت خود از ابتدا، زمان بارگذاری صفحه را در نظر داشته باشید، می توانید اظهارات معنی داری در مورد موفقیت بهینه سازی ارائه دهید. زیرا هدف از هر بهینه سازی باید همیشه بهبود تجربه کاربر باشد.
یادآوری: همیشه قبل از بهینه سازی عملکرد سایت خود ابتدا زمان بارگذاری صفحه را اندازه گیری کنید. این تنها راه برآورد میزان موفقیت بهینه سازی است.
از نظر کاربر زمان بارگذاری سریع تر صفحه و اندازه صفحات کوچک تر همیشه مفید است. صبر و توجه کاربران معمولی روز به روز کاهش می یابد. این امر به ویژه در زمینه تجارت الکترونیک بسیار مهم است و بازدیدکنندگان بیشتری از طریق دستگاه های تلفن همراه را به ارمغان می آورد.
با این حال Google Page Speed insights فقط به پتانسیل های بهینه سازی سایت شما اشاره می کند و تنها چند نتیجه گیری در مورد تجربه کاربری و خطای موجود در سایت به شما می دهد. پیام های خطای Page Speed insights اهمیت قابل توجهی ندارند به این دلیل که نمی توان آن را برای بخش مشخصی از سایت تنظیم کرد و مشکلات کلی دیگری را نیز در دارد، اما به عنوان ابزاری که مشکلات صفحات شما را نمایان می کند، بسیار مفید است.
به عنوان مثال هنگامی که حالت browser caching شما فعال نباشد، ابزار Page Speed insights خطایی را به شما نشان می دهد و این خطا ممکن است اصلا به تجربه کاربری وب سایت شما مرتبط نباشد اما با منطق خود ابزار تولید می شود. در بدترین حالت ، پیام به گونه ای تفسیر می شود که browser caching فعال نیست. بنابراین در درجه اول بر رتبه بندی گوگل تمرکز نکنید، بلکه بر زمان بارگذاری سایت خود تمرکز کنید. این تنها پارامتر مهم است.
خطای شماره 1: Compress CSS
طبق تجربیات ما این یکی از عجیب ترین پیام های خطای Google Page Speed Insights است.
معنی: این پیام خطا نشان می دهد که فایل های CSS سایت شما هنوز هم می توانند فشرده شوند (یا در تصویر بالا، این کار قبلاً با موفقیت انجام شده است). چنین کاری تعداد کاراکتر ها را در اسناد کاهش می دهد. به این ترتیب حجم فایل کوچک می شود. به عنوان مثال کامنت ها، فاصله ها و قالب بندی حذف می شوند.
رفع خطا: حتی اگر این خطا برای شما دلهره آور به نظر برسد، رفع آن ساده است. در اصل دو راه حل ممکن برای این خطا وجود دارد: اگر خودتان در CSS مهارت لازم را دارید، می توانید تعداد فایل های CSS را به صورت دستی کاهش دهید و هنگام ایجاد آن ها از یک عبارت مختصر (shorthand) استفاده کنید. همچنین می توانید فایل های CSS را با استفاده از ابزار های آنلاین مانند CSS Compressor یا CSS Minifier کاهش دهید.
البته راه حل راحت تری با استفاده از افزونه های CSS minification در وردپرس نیز وجود دارد. برخی از افزونه ها کارایی همه جانبه ای دارند و می توانند نه تنها CSS، بلکه جاوا اسکریپت و HTML را نیز فشرده و بهینه کنند.
خطای شماره 2: Remove resources that block rendering
معنی: یک صفحه وب به ترتیب خاصی ساخته می شود. این ترتیب بارگیری را می توان بهینه کرد. ابزار Page Speed تقریباً همیشه شکایت دارد که فایل های CSS این ترتیب بارگذاری بهینه را مسدود می کنند. با این وجود این تذکر می تواند برای بهینه سازی زمان بارگذاری بسیار ارزشمند باشد. اساساً این تذکر به شما می گوید که جاوا اسکریپت یا کد CSS که در زمان بارگیری یک عنصر مهم است، به عنوان مثال رنگ پس زمینه، هنوز در زمان بارگیری عنصر در دسترس نیست. در نتیجه تا زمانی که دستور CSS آن المان بارگیری نشود، نمایش داده نمی شود. این باعث افزایش زمان بارگذاری سایت شما می شود اما عمدتا بر تجربه کاربری تأثیر می گذارد زیرا احساس می شود که بارگیری سایت بیشتر طول می کشد.
رفع خطا: راه حل رایج آن، پیاده سازی یک قانون کلی است: CSS در هدر. این بدان معناست که شما کد CSS را از قسمت اصلی سند HTML به ابتدای سند منتقل می کنید.
مطالعه بیشتر
این مثال نشان می دهد که منظور ما چیست. قطعه کدی را در نظر بگیرید که رنگ پس زمینه خاص ما را برای وبلاگ مشخص می کند. عنصر <style> در ابتدای سند HTML بارگذاری می شود. بنابراین رنگ پس زمینه مورد نظر ما در انتهای سند بارگیری نمی شود و یک پرش رنگی ناخوشایند را به ما نمی دهد.
مجدداً شما می توانید این معیار بهینه سازی را به دو طریق پیاده سازی کنید: می توانید کد را خودتان اصلاح کرده و کد های CSS را به هدر منتقل کنید یا می توانید به یک افزونه اجازه دهید این کار را انجام دهد. افزونه هایی مانند Better WordPress Minify در اینجا به شما کمک می کند.
MinifyPlugin در گزینه ها نشان می دهد به عنوان مثال کدام فایل های CSS قبلاً به هدر منتقل شده اند. همچنین می توانید منابع CSS بیشتری را در اینجا به صورت دستی اضافه کنید. از طرف دیگر افزونه به صورت خودکار بهینه سازی می شود: در این افزونه شما گزینه هایی را برای همه فایل های CSS انتخاب می کنید که از روند حذف نشده اند. اینگونه به احتمال زیاد خطای page speed insights مربوط به این بخش رفع می شود.
خطای شماره 3: Efficiently encode images
این بخش دیگری است که خطای Page Speed Insights اغلب در مورد آن شکایت می کند. با این حال این مورد تقریباً همیشه سریع و آسان اجرا می شود و معمولاً مزایای کاهش ملموس زمان بارگیری را به همراه دارد.
اهمیت: بسیاری از کاربران نقش “اندازه تصویر” را برای زمان بارگذاری سایت خود دست کم می گیرند. تصاویر اغلب یکی از بزرگ ترین ترمز های زمان بارگذاری هستند. حتی اگر مقدار کمی از داده ها برای تصاویر جداگانه ذخیره شود، کل حجم ذخیره شده می تواند حجم قابل توجهی از داده ها را اضافه کند.
زیرا یک تصویر مشکلات زیادی را می تواند ایجاد کند. وردپرس به طور خودکار چندین تصویر کوچک از یک تصویر را در هنگام بارگذاری ایجاد می کند. بنابراین اگر از نسخه اصلی تصاویر در صفحه اصلی خود استفاده نمی کنید و از نسخه های کوچک تر آن ها، به عنوان مثال تصاویر کوچک یا تصاویر برجسته استفاده می کنید، این موارد نیز باید بهینه شوند. یک تصویر به سرعت به چندین فایل تبدیل می شود که بار های متعددی را نیز با خود به همراه می آورد.
رفع خطا: در اصل شما دو گزینه برای بهینه سازی تصاویر خود دارید. یا تصاویر را قبل از بارگذاری یا پس از آن یا در حین بارگذاری بهینه کنید. اولی را می توانید از طریق ابزار های آنلاین یا آفلاین انجام دهید، دومی را می توانید از طریق افزونه های مربوط بهینه سازی تصویر وردپرس انجام دهید.
اگر می توانید فشرده سازی را در گردش کار خود قرار دهید، منطقی است که تصاویر خود را قبل از بارگذاری بهینه کنید. ابزار های آنلاین برای این کار وجود دارد مانند Kraken.io. همچنین می توانید کیفیت و در نتیجه حجم فایل تصاویر خود را به صورت آفلاین کاهش دهید به عنوان مثال مستقیماً در ابزار فتوشاپ. این باعث می شود افزونه اضافی بر روی سایت شما بارگذاری نشود و سایت شما سبک تر بماند.
راه حل راحت تر البته در اینجا نیز نصب یک افزونه است. افزونه هایی مانند Optimus یا Smush نه تنها تصویر اصلی، بلکه همه تغییرات آن را نیز بهینه می کنند. Smush همچنین می تواند پس از آن تمام تصاویر موجود شما را بهینه کند.
خطای شماره 4: Enable text compression
این پیام خطای Google Page Speed insights بسیار سریع برطرف می شود و می تواند زمان بارگذاری سایت شما را به میزان قابل توجهی کاهش دهد.
معنی: شما قبلاً تصاویر و CSS سایت خود را تا حد ممکن کاهش داده اید. اما این همه ماجرا نیست. اکنون می توانید از مکانیزم فشرده سازی دیگری استفاده کنید. احتمالاً این فرآیند را از بارگیری بسته های داده بزرگ می دانید: شما معمولاً آن ها را به صورت فشرده ، یعنی زیپ شده دارید. این باعث می شود داده ها کوچک تر شده و سریع تر بارگیری شوند.
با این حال بسته های داده پس از بارگیری هنوز باید unpack شوند. این دقیقاً همان چیزی است که در هنگام بارگیری صفحه اتفاق می افتد: وب سرور بسته های داده را به صورت فشرده ارائه می دهد، وب سرور آن ها را باز می کند. این باعث می شود انتقال داده ها سریع تر انجام شود و زمان بارگذاری صفحه کاهش یابد.
رفع خطا: یا فشرده سازی داده ها از قبل روی سرور تنظیم شده است، یا باید خودتان آن را فعال کنید. با وارد کردن کد زیر در فایل .htaccess خود نیز می توانید به اصطلاح فشرده سازی GZIP را به صورت دستی فعال کنید، البته به شرط داشتن وب سرور آپاچی.
<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>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>خطای شماره 5: Delivering Static Content with an Efficient Cache Policy
به نظر من خطای browser caching در Google Page Speed Insights بسیار آزاردهنده است. این خطا به این دلیل است که شما فقط می توانید ذخیره مرورگر را برای منابع خود تنظیم کنید. ذخیره مرورگر برای منابع خارجی امکان پذیر نیست.
معنی: کش کردن مرورگر به این معناست که مرورگر نسخه ایستای سایت شما را ذخیره می کند و هنگام بازدید مجدد مجبور نیست آن را از وب سرور درخواست کند، اما سایت قبلاً بارگیری شده است.
رفع خطا: یا میزبان شما قبلاً کش مرورگر را در سمت سرور فعال کرده است، یا می توانید آن را با دستکاری فایل .htaccess تنظیم کنید (به یاد داشته باشید: این تنظیم فقط در وب سرور های Apache کار می کند). به عنوان مثال کد مثال زیر حافظه کش مرورگر را به مدت یک ماه تنظیم می کند، به این معنی که نسخه ثابت سایت شما به مدت یک ماه در مرورگر بازدیدکنندگان ذخیره می شود.
ExpiresActive On
ExpiresDefault "access 60 seconds
ExpiresByType image/jpg "access plus 1 month
ExpiresByType image/jpeg "access plus 1 month
ExpiresByType image/gif "access plus 1 month
ExpiresByType image/png "access plus 1 month
ExpiresByType image/ico "access plus 1 month
ExpiresByType text/css "access 1 month
ExpiresByType text/javascript "access 1 month
ExpiresByType application/javascript "access 1 month
ExpiresByType application/x-shockwave-flash "access 1 month"نتیجه گیری: افزونه های خود را فقط به چند مورد محدود کنید
شما هنگام خواندن این مقاله حتما توجه کرده اید: برای بهینه سازی CSS، تصاویر و بهینه سازی ترتیب بارگذاری، افزونه هایی وجود دارد که کار های زیادی را برای شما انجام می دهد. اما قادر به انجام همه کار ها نیستند. افزونه ها به سرعت جلوه قابل توجهی را ارائه می دهند، اما گاهی اوقات بسیار گسترده هستند و گزینه های پیکربندی بسیاری و عملکرد های تا حدی اضافی را ارائه می دهند.
اطمینان حاصل کنید که افزونه هایی را که استفاده می کنید دقیق تر ببینید. فقط اگر بدانید که هنگام استفاده از توابع خاص چه اتفاقی می افتد، می توانید معقولانه بهینه سازی کنید. بارگذاری بیش از حد سایت با افزونه های بهینه سازی سود کمی به دنبال دارد.
هنگام بهینه سازی باید مطمئن شوید که موفقیت های خود را به درستی اندازه گیری کرده اید. مهم نیست که دستی بهینه سازی کرده اید یا از طریق افزونه. از Page Speed Insights به عنوان اولین نقطه مرجع برای شناسایی نقاط ضعف و خطای کلی سایت خود استفاده کنید. سپس قبل از بهینه سازی، زمان بارگذاری سایت خود را اندازه گیری کنید. پس از ثبت این وضعیت اولیه، منطقی است که گام به گام سایت خود را بهینه کنید. زیرا تنها در صورتی که زمان بارگذاری را قبل از بهینه سازی و پس از هر مرحله بهینه سازی بدانید، می توانید تعیین کنید که اقدامات بهینه سازی فردی چه چیزی را به ارمغان آورده است.
منبع: raidboxes
دیدگاهی بنویسید