اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
آموزش رفع خطای Avoid a character set in the meta tag
در مقاله قبل بخشی از این آموزش را با هم بررسی کردیم و در این مقاله این موضوع را ادامه می‌دهیم! هنگامی سایت خود را با جی تی متریکس تست می‌کنید در بیشتر موارد این مورد سبز رنگ است و مشکلی در آن وجود ندارد! اما اگر با این گزینه به مشکل برخوردید، برای حل مشکل کاری که باید انجام دهید این است که متاتگ character set را به شکل درخواست HTTP برای کاربر ارسال کنید. یعنی باید بیاییم و با استفاده از زبان سرور و نوع سرور این درخواست رو به صورت header HTTP مشخص کنیم. در این حالت بسته به زبان مورد استفاده و سروری که ازش استفاده می‌کنید می‌توانید از راهکارهای زیر استفاده کنید:
در زبان php:
در صورتی که از زبان php در سایت خود استفاده می‌کنید و با خطای Avoid a character set in the meta tag مواجه شدید، می‌توانید با استفاده از دستور زیر این درخواست رو در header ایجاد کنید.
header("Content-Type: text/html; charset=utf-8");
سرور Nginx:
اگر زبان مورد استفاده در سایت شما چیزی غیر از php (مثل asp یا پایتون)است، باید قبل از هر کاری ببینید که نوع وب سرور استفاده شده کدام است! اگر وب سرور از نوع Nginx استفاده می‌کنید، با استفاده از کد زیر در بخش config سرور میتونید این درخواست را ایجاد کنید.
more_set_headers -t 'text/html' 'Content-Type: text/html; charset=utf-8';
وب‌سرور آپاچی:
اما اگه از وب سرور Apache استفاده می‌کنید باید کد زیر رو در فایل htaccess. وارد کنید:
AddType 'text/html; charset=UTF-8' html
بعد از آن که بسته به زبان برنامه نویسی و نوع سرور درخواست را در هدر به صورت http ایجاد کردید، مجددا سایت را بررسی کنید! خواهید دید که خطا برطرف شده و گزینه Avoid a character set in the meta tag در جی تی متریکس با رنگ سبز نمایش داده خواهد شد.
رفع خطای Specify image dimensions در gtmetrix
یکی دیگر از خطاهای رایجی که موقع تست سرعت سایت با GTmetrix ممکن است با آن روبرو شوید و بیشتر در سایت‌هایی که از سیستم مدیریت محتوای اختصاصی استفاده می‌کنند دیده می‌شود، خطای Specify image dimensions است که مربوط به اندازه تصاویر استفاده شده در صفحات یک سایت محسوب می‌شود. این خطا زمانی به وجود می‌آید که اندازه تصاویر با استفاده از کدهای HTML که با استفاده از دو دستور width برای پهنا و height برای ارتفاع مشخص می‌شود، وجود ندارند و صرفا آدرس تصویر برای نمایش دادن مشخص شده است! این موضوع باعث می‌شود موقعی که سایت در حال بارگذاری است، به مشکل برخورد کند.
حتما برای شما هم پیش آمده است که وقتی وارد سایتی که چندین تصویر در یک صفحه دارد می‌شوید، بین این تصاویر متن نوشته قرار دارند و چون برای لود تصاویر درخواستی به سرور ارسال می‌شود، تا بارگذاری عکس مدتی طول می‌کشد! ممکن است با دو نوع از سایت‌ها به صورت زیر مواجه شده باشید.
- افزونه‌های نمایش تصاویر به صورت Lazy load در وردپرس
- دسته اول: این نوع از سایت‌ها اندازه تصاویر رو مشخص نکرده‌اند! بنابراین وقتی ظاهر سایت شروع به نمایش دادن می‌کند، تا زمانی که تکمیل نشده باشد می‌بینید که اسکرول صفحه با لود شدن تصاویر یک بار کوچک می‌شود و از بین خطوط تصاویر شروع به لود شدن می‌کنند.
- دسته دوم: این نوع از سایت‌ها اندازه تصاویر را مشخص کرده‌اند! بنابراین وقتی وارد صفحه می‌شوید، مرورگر اطلاعات همه تصاویر استفاده شده در صفحه را دارد و موقع خروجی گرفتن می‌داند که در این مکان یک تصویر با اندازه نامشخص قراره نشان داده شود. برای همین فضای خالی عکس را از همان ابتدا در نظر می‌گیرید و به صورت مرتب شده همه چیز را نمایش می‌دهد که در نهایت بعد از لود شدن عکس، در جاهای خالی که اندازه آن‌ها مشخص شده، نمایش داده می‌شوند.
چه از نظر رابط کاربری و چه از نظر ساختار بهینه بودن سایت، دسته اول خیلی خوب نیستند. از یک طرف بازدیدکننده یکباره با کلی عکس که در حال بارگذاری هستند، مواجه می‌شود و از طرف دیگر هم مرورگر چون اندازه تصاویر برایش تعریف نشده مجبور است موقع لود صفحه به صورت همزمان تصاویر را هم آنالیز کند و در جای خود نمایش دهد که این کار می‌تواند روی سرعت سایت تاثیر منفی بگذارد. در چنین سایت‌هایی که اندازه تصاویر مشخص نشدند، اگر سورس کد را بررسی کنید، فقط آدرس تصاویر قرار دارد و اثری از اینکه تصویر با چه اندازه‌ای است، وجود ندارد! مثال:
<img src="image.jpg" />
اما در دسته دوم که به صورت بهینه شده تصاویر را استفاده کردند و مقدار width و height رو برای ارتفاع و پهنای عکس در نظر گرفته‌اند، اگر سورس صفحه را بررسی کنید به شکل زیر خواهند بود:
<img src="image.jpg" width="800" height="350" />
رفع ارور Specify image dimensions
با توضیحاتی که تا به اینجا داده شد حتماً متوجه شدید که برای برطرف کردن این خطا کافی است اندازه تصاویر را وارد کنید. در سیستم‌های مدیریت محتوا مثل وردپرس این کار به صورت خودکار انجام می‌گیرد! چرا که وردپرس از این قابلیت پشتیبانی می‌کند و نیازی نیست به صورت دستی اندازه تصاویر را مشخص کنید. وردپرس به کمک قابلیت برش تصاویر بر اساس اندازه تصویر (بند انگشتی، میانه، بزرگ، کامل و…) اندازه هر تصویر را موقع آپلود کردن شناسایی می‌کند و بعد از قرار دادن در صفحه، خاصیت width و height را برایشان اعمال می‌کند. اما در سایر سیستم‌ها ممکن است مجبور باشید این کار را به صورت دستی وارد کنید که البته زیاد هم سخت نیست.
در مقالات بعدی به بررسی بیشتر این موضوع می‌پردازیم.
