سرعت بارگذاری صفحات در گوگل

سرعت بارگذاری صفحات در گوگل یکی از سیگنال های مهم در محاسبات رنکینگ گوگل است. علاوه بر اهمیت سرعت بارگذاری صفحه از نظر موتورهای جستجو، سریع بودن صفحات، تاثیر مثبت در تجربه کاربر از گشت و گذار در سایت (طراحی سایت , سئو سایت , طراحی سایت فروشگاهی )می گذارد و انگیزه کاربر برای بازدید از صفحات دیگر و بازگشت مجدد به سایت را نیز بیشتر می کند. به دلیل تعداد بالاتر کاربران موبایل نسبت به کاربران دسکتاپ و ضعیف تر بودن سخت افزار موبایل نسبت به دسکتاپ و همچنین به دلیل نیاز کاربر موبایل به دسترسی سریع به اطلاعات، سرعت بارگذاری صفحات برای کاربران موبایل از اهمیت ویژه ای برخوردار است. سریع بودن صفحات باعث افزایش تعداد بازدید از صفحات به ازای هر کاربر و در نتیجه کاهش نرخ پرش (bounce rate) می شود.

پارامتر های مهم در سرعت بارگذاری

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

یکی از پارامترهای قابل اندازه گیری توسط ابزارهای گوگل، پارامتر PageSpeed است که با نظر گرفتن برخی موارد مانند بهینه بودن HTML JS ، CSS و تصاویر، استفاده از کش، عدم وجود مواردی که منجر به ایجاد تاخیر در رندر صفحه می شوند، سرعت پاسخگویی سرور و همچنین ترتیب بارگذاری CSS و JSو موارد دیگر، نمره ای بین ۰ تا ۱۰۰ را برای هر صفحه در نظر می گیرد. پارامتر PageSpeed توسط ابزار کاربردی Google PageSpeed Insights به آدرس زیر برای تک تک صفحات سایت(طراحی سایت , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت) قابل اندازه گیری است. (توجه داشته باشید که امکان استفاده از این ابزار با آی پی آدرس ایران وجود ندارد.)

/https://developers.google.com/speed/pagespeed/insights

جهت تست یک صفحه ابتدا همانند تصویر زیر آدرس آن را وارد کرده و روی دکمه ANALYZEکلیک کنید.

گوگل نمره Optimization را با بار گذاری و آنالیز صفحه محاسبه می کند و با استفاده از اطلاعات واقعی که از مرورگر کروم کاربران بدست می آورد. نصر،Speed را به صورت جداگانه برای دسکتاپ و موبایل همانند تصویر زیر اعلام می کند.

نتایج مربوط به موبایل

نتایج مربوط به دسکتاپ

به دلیل اینکه گوگل جهت محاسبه نمره پارامتر Speed از اطلاعات مرورگر کروم کاربران استفاده می کند، این نمره فقط برای صفحات پر ترافیک قابل ارانه است و در صورتیکه صفحه کم ترافیکی را با PageSpeed Insights آنالیز کنید، نتیجه Speed آن هم برای دسکتاب و هم برای موبایل همانند تصویر زیر نمایش داده نخواهد شد.

FCP چیست؟

در صفحه نتیجه آنالیز PageSpeed Insights ممکن است زمان FCP به شما نمایش داده نشود. FCP مخفف عبارت First Contentful Paint است و به معنای مدت زمانی است که طی می شود تا کاربر بتواند اولین تصویر از صفحه را ببیند. هر چه کاربران بتوانند سریع تر صفحه را مشاهده کنند احتمال ماندگاری آنها در سایت افزایش می یابد.

DCL چیست؟

در صفحه نتیجه ممکن است زمان DCL نیز به شما نمایش داده شود. DCL مخفف عبارت DOM Content Loaded است و به معنای مدت زمانی است که طی می شود تا کدهای HTML خوانده شوند. هر چقدر زمان DCL کمتر باشد، صفحه سریع تر بارگذاری می شود و در نتیجه نرخ پرش کاهش می یابد.

عوامل مهم در سرعت بارگذاری صفحات در گوگل(Page Speed)

عوامل مهم در سرعت بارگذاری صفحات در گوگل(Page Speed)

همانطور که گفته شد، از عوامل مهم در سرعت بارگذاری صفحات در گوگل(Page Speed) که برخی از آنها موثرتر از بقیه موارد هستند و برخی نیز با تاثیر گذاری اندک وجود دارند و باعث می شوند صفحه نتیجه آنالیز صفحه توسط ابزار Google PageSpeed Insights شامل دو قسمت Optimization Suggestionsو Optimizations Already Present مواردی که نیاز به بهینه سازی (طراحی سایت , سئو سایت , طراحی سایت فروشگاهی )دارند در Optimization Suggestions و مواردی که از قبل بهینه هستند و نیازی به بهینه سازی ندارند،در قسمت Optimizations Already Present نمایش داده شوند.

ابزار PageSpeed Insights برای هر کدام از موارد، که نیاز به بهینه سازی (طراحی سایت , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )داشته باشند، نمونه هایی را به شما نمایش می دهد که بتوانید موارد بهینه نشده را راحت تر بیایید و آنها را بهینه کنید. در ادامه به توضیح موارد نمایش داده شده در نتیجه آنالیز پرداخته شده است.

موارد نمایش داده شده در نتیجه آنالیز:

1- Eliminate render-blocking JavaScript in above-the-fold content

قسمت above-the-fold یا همان قسمت از بالای صفحه در هنگامی که هنوز اسکرول انجام نشدهاست، از اهمیت ویژه ای برخوردار است. گوگل توصیه می کند که تلاش کنید تعداد فایلهای CSS و js که در رندر above-the-fold تاخیر ایجاد می کنند بسیار کم و در صورت امکان، وجود نداشته باشند. بنابراین هر چه تعداد این نوع فایلهای CSS و JS بیشتر باشد، نمره Optimization صفحه کاهش پیدا می کند.

ضمنا به دلیل اهمیت ویژه این موضوع، با افزایش تعداد منابع موثر در تاخیر رندر قسمت above-the-fold، نمره Optimization به صورت تصاعدی کاهش می یابد راهکارهای متفاوتی برای بهبود این آیتم وجود دارد که پرکاربردترین آنها، merge کردن یا ادغام همه فایلهای CSS و فایلهای JS به صورت جداگانه و داشتن یک فایل CSS و یک فایل JS است. توجه داشته باشید که ادغام کردن فایلها حتما باید با بررسی کامل انجام پذیرد که ایرادی در قسمت های مختلف صفحه با صفحات ایجاد نکند. بنابراین تلاش کنید که تا جایی که امکان پذیر است از تعداد فایلهای CSS و JS بکاهید.

2-Leverage browser caching

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

Avoid landing page redirects -۳

اگر آدرسی که در حال بررسی آن هستید به آدرس دیگری ریدایرکت نشود، می توانید امتیاز این تست را کسب کنید.

4- Enable compression

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

Minify CSS-5

minify کردن css به معنی حذف space ها و enter های اضافه در CSS است که باعث کاهش سایز قایل Css می شود. اگر فقط enter های اضافه در CSS را حذف نمایید می توانید استان این تست را کسب کنید. ولی به هر حال با حذف space های اضافه نیز می توانید سایز فایل css را باز هم کاهش دهید.

6-Minify JavaScript

minify کردن جاوااسکرییت به معنی حذف space ها و enter های اضافه در فایل های وز است که باعث کاهش سایز فایل می شود.

Minify HTML-7

minify کردن HTML نیز همانند  minify کردن CSS و js  به حذف فاصله ها و enter های اضافه در HTML است.

روش Minify کردن فایل های CSS، جاوااسکریپت و HTML

روش Minify کردن فایل های CSS، جاوااسکریپت و HTML

روش Minify کردن فایل های CSS، جاوااسکریپت و HTML با توجه به سیستم مدیریت محتوا و وب سرور های مختلف می تواند با استفاده از افزونه هایی که برای Optimization وجود دارند انجام شود. همچنین می توانید این فایل ها را یا به صورت دستی و یا با استفاده از برخی ابزار های آنلاین مانند آدرس های زیر انجام دهید و سپس فایل های minify شده را با فایلها روی سرور جایگزین کنید.

/https://www.cleancss.com/css-minify

/https://www.danstools.com/javascript-minify

اگر از افزونه هایبهینه سازی (طراحی سایت , سئو سایت , طراحی سایت )جهت minify استفاده کنید، دیگر نیازی به جایگزین کردن فایل ها روی سرور نیست و این گونه افزونه ها معمولا به صورتداینامیک فایل های CSS و js را minify کرده و برای مرورگر کاربران ارسال می کنند.

برای minify کردن HTML نیز معمولا از افزونه های بهینه سازی استفاده می کنند. برخی از افزونه ها هستند که می توانند کار minify کردن را برای CSS و js وHTML با هم انجام بدهند.
نکته: قبل از هرگونه جایگزینی فایل های روی سرور با فایل های minify شده، از فایل های روی سرور بکاپ تهیه کنید. برخی مواقع به دلایل گوناگون ممکن است که فایلی در حین minify شدن با برخی ابزار ها، یک یا تعداد بیشتری از کاراکترهایش را از دست بدهد و در عملکرد آن با اختلال مواجه شود.

Optimize images -1

ابزار PageSpeed Insights دو مورد بهینه بودن ابعاد عکس و سایز فایل عکس کلیه تصاویر صفحه را بررسی می کند. در مورد ابعاد عکس در بخش راهنمای گوگل وبمستر در مورد محتوا (بخش اول) (طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )توضیح داده شده است. در مورد سایز فایل عکس دقت کنید که عکس هایی که استفاده می کنید حداقل سایز فایللازم را داشته باشند. به عنوان نمونه می توانید در نرم افزار فوتوشاپ با فشردن دکمه های Ctrl+ Shift + Alt + S که میانبر save for web است، کیفیت عکس را تا حدی کاهش دهید که چشم انسان با رویت آن در صفحه وب متوجه افت کیفیت نشود.

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

2-Prioritize Visible content

هنگامی می توانید امتیاز این بخش را کسب کنید که مرورگر برای رندر کردن قسمت  above-the-fold صفحه احتیاجی به بارگذاری قسمت های اضافه مربوط به below-the-fold نداشته باشد. به عنوان نمونه می توان به بارگذاری CSS قسمت های دیگر صفحه برای رندر above-the-fold اشاره کرد.

3-Reduce server response time

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

اگر مدت زمان پاسخ سرور زیر ۲۰۰ میلی ثانیه باشد می توانید امتیاز سرعت پاسخ سرور را به طور کامل کسب کنید و هر چه زمان پاسخ سرور بیشتر از ۲۰۰ میلی ثانیه باشد، نمره Optimization به صورت تصاعدی کاهش می یابد.

بهینه سازی فایلها توسط PageSpeed Insights

در انتهای صفحه نتیجه بررسی PageSpeed Insights می توانید پیام زیر را مشاهده کنید.

.Download optimized image, JavaScript, and CSS resources for this page

با کلیک بر روی قسمت آبی رنگ image , JavaScript , and CSS resources می توانید فایلهای بهینه شده CSS و جاوااسکریپت و عکس هایی که نیاز بهبهینه سازی داشته اند را دریافت کرده و آنها را به صورت دستی جایگزین فایل های روی سرور نمایید.

بهینه سازی عکس برای موتور های جستجو

برای بهینه سازی عکس برای موتور های جستجو یکی از کارهای مهمی که باید وبمستران انجام دهند بهینه سازی عکس ها است. برای بهینه سازی تصاویرلازم است که با تکنیک های فشرده سازی تصاویر آشنا شوید. هر چقدر عکس ها فشرده تر باشند، سرعت بارگذاری صفحه (طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت) که یکی از سیگنالهای محاسبه رنکینگ است بیشتر خواهد شد.

فرمت عکس

فرمت های مختلفی برای عکسها وجود دارند که معروف ترین آنها عبارتند از png ، jpg و gif دوفرمت Webp و SVG نیز در چند سال اخیر مورد استفاده قرار گرفته اند که در دنیای بهینه سازی سایت برای موتور جستجو (طراحی سایت , سئو سایت , طراحی سایت ) از اهمیت ویژه ای برخوردار هستند، در ادامه در مورد این دو فرمت توضیح داده شده است.

فرمت Webp

گوگل در سال ۲۰۱۰ فرمت Webp را برای عکس ها به صورت متن باز معرفی کرد. فایل های با فرمت Webp از فرمت های jpg و png فشرده تر هستند و از انیمیشن و transparency نیز پشتیبانی می کنند و بنابراین جایگزین  مناسبی برای فایل های GIF نیز هستند.

انواع فایل Webp

فرمت Webp با دو نوع Lossless یا بدون افت کیفیت و Lossy یا با افت کیفیت قابل ارائه هستند. طبق اعلام گوگل، فایل های Webp از نوع Lossless به میزان ۲۶ درصد و از نوع Lossy به میزان ۳۴-۲۵ درصد فشرده تر از فایل های JPEG فشرده شده با تکنیک های دیگر هستند. همچنین تبدیل فایل PNG بهWebp سایز فایل را به صورت میانگین به میزان ۴۵ درصد کاهش می دهد.

مرورگر های گوگل کرومو اپرا  از ابتدا از فرمت Webp پشتیبانی می کردند ولی مایکروسافت ایترنت اکسپلورر از ورژن ۶ به بعد از Webp پشتیبانی می کند.

فرمت SVG

SVG مخفف Scale Vector Graphic است و در سال ۲۰۰۱ توسط کمپانی W3C معرفی گردید. فایل های SVG به صورت وکتور هستند. اگر یک فایل SVG را با یک ادیتور متنی مانند notepad ناهید دید که یک فایل SVG کاملا به صورت کد نوشته می شود و به عنوان مثال می توانید کد رنگ قسمت های مختلف عکس را در ادیتور متنی تغییر دهید. یکی از مزیت های عکس های با فرمت SVG این است که می توان به راحتی از آنها به صورت inline در HTML استفاده نمود.

تبدیل فرمت عکس

جهت تبدیل فرمت های مختلف عکس به یکدیگر با هدف SEO روشهای مختلفی مانند استفاده از افزونه های مختلف، استفاده از سرویس های آنلاین با استفاده از API و تبدیل فرمت ها به صورت دستی وجود دارد.

نکته ای که باید به آن دقت کرد این است که از هر فرمتی که استفاده می شود، باید حداقل سایز فایل لازم را داشته باشد. همانطور که در فصل PageSpeed Insights گفته شد، به عنوان نمونه می توانید در نرم افزار فوتوشاپ با استفاده از save for web و تنظیم کیفیت روی عدد ۶۵-60، سایز فایل عکس را تا حدی کاهش دهید که چشم انسان متوجه افت کیفیت آن نشود.

inline کردن عکس

در راستای بهینه سازی سایت روش های زیادی برای بهینه سازی عکس و کاهش تعداد درخواست سرور وجود دارد که یکی از آنها کم کردن تعداد درخواست یا request به سرور جهت و عکس ها است. یکی از راههای کاهش تعداد درخواست به سرور استفاده از تکنیک inline کردن عکس است.

استفاده از base64 برای inline کردن عکس

از base64 برای encode کردن باینری به متن استفاده می شود. با استفاده از این تکنیک این امکان وجود دارد که هر عکسی را به صورت داده های متنی ذخیره کرد. خوشبختانه مرورگرهای مختلف می توانند base64 را decode کنند، به عبارت دیگر اگر شما یک عکس را به صورت base64 به صورت inline در فایل HTML در <img> بنویسید، مرورگرها می توانند آن عکس را در صفحه HTML رندر کرده و به کاربر نمایش دهند.

به عبارت دیگر با استفاده از این تکنیک، دیگر درخواست جداگانه برای بارگذاری عکس به سرور ارسال نمی شود و عکس به صورت قسمتی از متن صفحهHTML در مرورگر بارگذاری شده و در نهایت رندر و به کاربر نمایش داده می شود.

اضافه کردن عکس به صورت base64 در HTML به روش زیر است:

<“=img src=”data:image/jpeg;base64,/9j/4AAQSkZIKACgD/9k>

ابزارهایی آنلاین بسیاری مانند آدرس زیر برای تبدیل عکس به base64 وجود دارند که می توانید توسط آنها به راحتی هر عکسی را به base64 تبدیل کنید.

https://www.base64-image.de

اینلاین کردن عکس در CSS با base64

این امکان وجود دارد که از تکنیک base64 برای حذف درخواست به سرور جهت بارگذاری عکس در CSS استفاده نمایید. بدین جهت می توانید عکسbackground را به صورت base64 در CSS هم بنویسید.

در نمونه زیر یک عکس به صورت base64 در CSS به عنوان پس زمینه قرار داده شده است.

inline.

{background:url(data:image/gif;base64,ROIGODlhEAAQAMQAAORHHOVS}

KuhPGolfo0o/XBs/fNwfjZ0fKCrKUE1lBavAViFIDITImbKC5Gm2hB0SIBCBM

{;QiBOUjIQA7) no-repeat right center

اینلاین کردن عکس SVG

عکسهای با فرمت SVG را می توانید با هر ادیتور متنی مانند notepad در ویندوز باز کرده و کدهای درون آن را مشاهده کنید. اگر عکس SVG را با ادیتور متنی باز کنید، دو تگ <svg> و <svg/> را می توانید در ابتدا و انتهای کدها ببینید. برای inline کردن عکس SVG دقیقا به همین تگ باز و بسته شدن svg و هر آنچه در بین آنها است نیاز دارید.

برای اضافه کردن یک عکس با فرمت SVG از روش زیر عمل کنید:

<“svg width=”100” height=”100>

<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow>

<svg/>

ایراد inline کردن عکس

از جمله مواردی که می توان در ایراد inline کردن عکس عنوان کرد این وقتی عکس به صورت فایل در یک صفحه وجود داشته باشد، مرورگر می تواند آن عکس را کش کرده و برای دفعات بعد برای بارگذاری عکس به سرور درخواستی ارسال نکند و عکس را از کش لوکال بارگذاری کند. در نتیجه همه کاربران جدیدی که وارد صفحه مورد نظر می شوند برای بارگذاری عکس به سرور request ارسال می کنند ولی کاربران تکراری برای لود عکس از حافظه کش مرورگر خودشان استفاده می کنند.

ولی وقتی از تکنیک inline کردن عکس استفاده می کنید، مرورگر آن عکس را کش نمی کند، و هر بار برای لود عکس باید کاراکترهای base64 درون HTML را بخواند. در نتیجه برای عکس هاىی که در  صفحات گوناگون استفاده می شوند، استفاده از تکنیک اینلاین کردن عکس ها در HTML کار منطق به نظر نمی رسد. توجه داشته باشید که اگر عکسی به صورت base64 به عنوان بکگراند در CSS آمده باشد، به دلیل کش شدن فایلهای CSS توسط مرورگرها، آن عکس نیز کش خواهد شد.

یک سئو کار مجرب برای سئوی حرفه ای سایت(سئو سایت , طراحی سایت , طراحی سایت فروشگاهی , طراحی سایت شرکتی) باید با دقت در مورد استفاده از تکنیک inline کردن عکس ها تصمیم گیری کند و به صورت مطلق نمی توان در مورد اینکه کدام عکسها اینلاین باشند صحبت کرد و جهت تصمیم گیری در این ارتباط نیاز به بررسی سایت توسط سئو کار با دیدگاه بهینه سازی (طراحی سایت , ساخت سایت , قیمت طراحی سایت )ارسال درخواست ها به سرور می باشد.

مرورگرهای +4 IE 8+، Edge، Opera 9+، Firefox 2+، Safari 3.1+، Chrome از base64 encoding پشتیبانی می کنند.