گام سوم: پیاده سازی (معروف به خرد کردن)

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

بهینه سازی تصاویر

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

داده هایی که گام اول برای شما فراهم میکنند:

• فرمت ها، اندازه ها و ابعاد تصویر
• اندازه های تصویر

اندازه تصاویر بزرگ را بدون افت کیفیت کاهش دهید یا فشرده کنید.

مراجع داده: گزارش GTmetrix، Google Analytics

سختی: ساده

اگر سایت وردپرسی دارید، استفاده از یک پلاگین فشرده سازی تصویر سبک مانند reSmush.it می تواند مفید باشد.

شما می توانید تصاویر به راحتی و تنها با یک کلیک بدون افت کیفیت بهینه کنید.

اندازه تصاویر بزرگ را بدون افت کیفیت کاهش دهید یا فشرده کنید.

مراجع داده: گزارش GTmetrix، Google Analytics

سختی: متوسط

اندازه عکس های بزرگ را در نرم افزارهای ویرایش گرافیکی مانند Adobe Photoshop یا یک ویرایشگر تصویر منبع باز رایگان مانند GIMP تغییر دهید.

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

با در نظر گرفتن عوامل عملکرد، ظاهر و مقیاس پذیری، شما این فرصت را دارید تا در صورت امکان از فرمت های تصویر جدیدتر استفاده کنید. (یعنی WebP در مقابل PNG)

با به حداکثر رساندن استفاده از کش برای سرعت بخشیدن به بازدیدهای برگشتی و کاهش زمان تا اولین بایت (TTFB) نیاز سرور برای استفاده از منابع بیشتر برای بارگذاری یک صفحه را کاهش دهید

مراجع داده: گزارش GTmetrix، Google Analytics

سختی: متوسط

برای این مورد از کش استفاده کنید.

بسته به نیاز به کاهش زمان بارگذاری، بسیاری از گزینه‌های کش در این منبع Google Developer فهرست شده اند.

ذخیره سازی محلی و زمان بارگذاری سرور را با بارگذاری تصاویر بزرگ بدون به خطر انداختن عملکرد سایت کاهش دهید.

مراجع داده: گزارش GTmetrix، Google Analytics

سختی: پیشرفته

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

می‌توانید رسانه‌ها را در آمازون S3 یا هر سرویس ابری دیگری بارگذاری کنید تا ذخیره‌سازی محلی و زمان بارگذاری را کاهش دهید. همچنین این مورد را در نظر بگیرید که آیا هاستینگ و یا میزبانی وب فعلی شما سرویسی مناسب با نیاز شما هست یا خیر؟

بهینه سازی تصویر – انتخاب فرمت های تصویر

JPEG, JPG این فرمت یک گزینه عالی برای نمایش عکس های پیچیده با رنگ های زیاد است.

به طور کلی، فرمت های تصویر JPEG می توانند بیشترین رنگ ها را نمایش دهند و برای سطوح فشرده سازی بالا مناسب هستند. JPEG ها معمولاً دوستار سئو هستند، اما PNG نیز می تواند جایگزین خوبی باشد. JPEG ها از پس زمینه شفاف پشتیبانی نمی کنند. (فشرده سازی از دست رفته)

PNG این فرمت برای تصاویر با پس زمینه شفاف و اسکرین شات ها یا لوگوها، نمادها و سایر تصاویر با مقدار رنگ کمتر بسیار عالی است.

PNG ها همچنین از رنگ های زیادی پشتیبانی می کنند، اگرچه برای تصاویری که داده های رنگی کمتری دارند مناسب تر هستند. در غیر این صورت، یک عکس با رنگ های پیچیده با استفاده از فرمت PNG سنگین تر از ذخیره همان عکس در فرمت JPEG خواهد بود. (فشرده سازی بدون تلفات)

GIF گیف ها موارد استفاده خاصی دارند و فقط باید یک تصویر متحرک را به نمایش بگذارند و نه ثابت.

از این تصاویر کم تر استفاده کنید، زیرا به دلیل تعداد فریم ها و وزن زیادی که دارند، پس از فشرده سازی چندان عالی به نظر نمی رسند زیرا فقط از ۲۵۶ رنگ پشتیبانی می کنند.

SVG این تصاویر برای ایجاد نمودارها، آرم ها و آیکون ها برای وب به خوبی کار می کند.

SVG ها یک فرمت تصویر برداری مبتنی بر XML برای گرافیک های دو بعدی هستند. برای حفظ امنیت و فعال کردن مجوزها برای آپلود این نوع تصویر در وب سایت شما، WP Engine یک راهنمای جامع SVG برای ارجاع در اینجا دارد.

وب پی یا وپی (به انگلیسی: WebP) فرمت تصویری جدیدی است که با هدف کاهش حجم عکس‌ها، بدون کاهش محسوس کیفیت آنها و در نتیجه افزایش سرعت بارگذاری صفحات اینترنت، توسط شرکت گوگل ارائه شده است. گوگل این فرمت جدید تصویری را که گفته شده است حجم تصاویر را تا ۴۵ درصد، بدون افت محسوس کیفیت کاهش می‌دهد، جایگزین مناسبی برای فرمت‌های قدیمی JPEG و PNG می‌داند. فرمت وب‌پی از هر دو تکنیک فشرده‌سازی بی اتلاف و فشرده‌سازی با اتلاف برای کاهش حجم داده استفاده می‌کند.

بهینه سازی عملکرد (سرعت صفحه)

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

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

بهینه سازی تصویر با بهبود عملکرد وب سایت همراه است. در مرحله بعد، به بهینه سازی های اضافی می پردازیم تا فراتر از تغییر اندازه تصاویر یا تغییر فرمت های تصویر قدم برداریم.

داده هایی گه گام اول در اختیار شما قرار میدهند:

• زمان بارگذاری (از جمله CSS، JS)
• معیارهایی مانند نرخ پرش، نرخ تعامل، نرخ خروج و همچنین نرخ تبدیل بهینه سازی
• خطاهای احتمالی، مانند ناتوانی در ارسال فرم تماس یا کلیک بر روی اقدام به عمل
• ریدایرکت ها و حلقه های ریدایرکت

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

مراجع داده: گزارش GTmetrix، Google

سختی: ساده

میزبانی وب سایت خود را بررسی کنید: میزبانی وب سایت شما می تواند بر سرعت سایت شما تأثیر بگذارد.

یکی از بدترین اشتباهاتی که می توانید مرتکب شوید، انتخاب هاستینگ ضعیف برای کاهش هزینه های سایتتان هست.

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

پلاگین های وردپرس استفاده نشده، غیر ضروری یا قدیمی/پشتیبانی نشده را پاک کنید تا داده هایی که سایت را کند می کند را کاهش دهید.

مراجع داده: وردپرس

سختی: ساده

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

به عنوان مثال، اگر افزونه ای برای درج اسکریپت ها در سربرگ یا پاورقی وب سایت خود دارید، به جای آن از Google Tag Manager (GTM) استفاده کنید.

به این ترتیب شما فقط به دو قطعه کد کوچک نیاز دارید که به تم فعال خود اضافه کنید، یا با قرار دادن آنها مستقیماً در قالب header.php یا با اضافه کردن آنها با استفاده از هوک های وردپرس در فایل functions.php پوسته. در این مورد، ابتدا باید GTM را آماده کنید. افزونه هدر فوتر را غیرفعال کنید و کد GTM را به فایل functions خود هوک/تزریق کنید.

اگر از یک پوسته سفارشی استفاده نمی کنید، حتماً آن را به Child theme اضافه کنید.

کد های GTM را به درستی تأیید کنید و افزونه را حذف کنید.

کاهش تعداد افزونه ها نه تنها عملکرد سایت را بهبود می بخشد بلکه امنیت را نیز افزایش می دهد. هر افزونه استفاده شده می تواند تعداد تهدیدات امنیتی و مشکلات سازگاری را افزایش دهد.

برای کاهش تعداد درخواست‌های اضافی، تغییر مسیرها، حلقه‌های تغییر مسیر و خطا های ۴۰۴ را برطرف کنید.

مراجع داده: گزارش GTmetrix، SEMRush، WordPress، Google Search Console

سختی: ساده

ممکن است قبلاً یک راه حل تغییر مسیر در وب سایت خود داشته باشید. با این حال، ما یک ابزار جامع را توصیه می کنیم که مزایای بیشتری نسبت به تغییر مسیر ساده و مدیریت ۴۰۴ دارد، مانند RankMath.

به روز رسانی تغییر مسیرها، حلقه های تغییر مسیر و ۴۰۴ ها با ارائه URL درخواستی صحیح، عملکرد کند کاربر را بهبود می بخشد.

نکته حرفه ای: با گذشت زمان، ممکن است دیگر نیازی به تغییر مسیر به یک صفحه خاص نداشته باشید. به عنوان مثال، شما یک URL وبلاگ را دو سال پیش به‌روزرسانی کرده‌اید – و گوگل دیگر آن URL را در کش ذخیره نمی‌کند، و هر بک لینک به آن URL اکنون به‌روزرسانی می‌شود.

از شبکه تحویل محتوا (CDN) برای افزایش سرعت و عملکرد کلی استفاده کنید.

منابع داده: گزارش GTmetrix، Google Analytics، SEM Rush

سختی: متوسط / پیشرفته

این یک فرصت عالی است تا از سرویس میزبانی خود بپرسید که آیا سرویس CDN ارائه می دهد یا خیر، و آیا به شما امکان می دهد آن را مستقیماً از داشبورد میزبانی خود فعال کنید؟

روش دیگر، یک گزینه کمی پیشرفته تر، پیکربندی CDN از طریق Cloudflare است.

یک CDN محتوا را از نزدیک ترین شبکه سرور به مرورگر بازدید کننده توزیع می کند و سرعت و عملکرد کلی سایت را افزایش می دهد.

از کش برای به حداقل رساندن کار مورد نیاز برای ارسال/پردازش یک صفحه وب استفاده کنید.

مراجع داده: گزارش GTmetrix

سختی: متوسط / پیشرفته

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

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

به عنوان مثال، کوچک کردن و یا الحاق فایل‌های CSS یا JS می‌تواند نتایج نامطلوبی را در صورت عدم انجام صحیح آن ایجاد کند، و این واقعاً به تنظیمات وب‌سایت شما و تنظیمات افزونه‌ای که استفاده می‌کنید بستگی دارد.

فراموش نکنید که از قبل بک آپ بگیرید.

کش صفحه کپی هایی از فایل های وب سایت را ذخیره می کند و کار سرور برای تولید/ارائه صفحه به مرورگر را کاهش می دهد.

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

بارگیری فایل‌های CSS و جاوا اسکریپت را به‌طور ناهمزمان به تعویق بیندازید تا همزمان چندین فایل بارگیری شوند.

مراجع داده: گزارش GTmetrix، SEM Rush

سختی: پیشرفته

برای وب سایت های وردپرسی، پیشنهاد می کنیم از افزونه ای مانند Autoptimize استفاده کنید. تنظیمات اشتباه می تواند نتایج ناخواسته ای ایجاد کند، اما زمانی که تنظیمات به درستی برای وب سایت شما پیکربندی شود – واقعاً می تواند عملکرد را تا حد زیادی بهبود بخشد. با احتیاط ادامه دهید و فقط در صورتی این کار را انجام دهید که واقعا کاربر با تجربه ای باشید.

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

اگر استفاده از افزونه Autoptimize را انتخاب کرده‌اید، می‌توانید تنظیمات را برای کوچک کردن CSS، جاوا اسکریپت، و HTML و جمع‌آوری (الحاق) و کوچک‌سازی خودکار اسکریپت‌ها و سبک‌ها پیکربندی کنید.

بهینه سازی متادیتا و سایر موارد

اکنون که تصاویر و عملکرد سایت را بهینه کرده اید، می‌توانیم جزئیات بیشتری را در مورد نحوه ارائه و نمایش محتوای وبسایت شما ارائه کنیم. موتورهای جستجو و سایت‌های رسانه‌های اجتماعی مخاطبان هدف شما را قادر می‌سازد تا محتوای شما را بهتر درک کنند و همچنین اطلاعات غنی ای، همچون محتوای موجود در صفحات نتایج موتور جستجو (SERP) و رسانه‌های اجتماعی مشاهده کنند.

داده هایی گه گام اول در اختیار شما قرار میدهند:

• تگ های عنوان، تگ های توضیحات و ویژگی های ALT نادرست، تکراری، مفقود یا کوتاه(از نظر تعداد کاراکتر)
• لینک های نا مناسب
• اسکیما نادرست یا مفقود
• محتوای تکراری
• نسبت HTML به متن نامناسب

به روز رسانی تگ های عنوان و توضیحات متا تکراری، نامناسب و یا غیر مرتبط یافتن و پیمایش وب سایت شما را آسان تر می کند.

مراجع داده ها:

گزارش GTmetrix، کنسول جستجوی گوگل، SEMRush

سختی: ساده

ما یک ابزار جامع SEO مانند RankMath را توصیه می کنیم. با استفاده از این ابزار می توانید به راحتی همه چیز را به روشی بسیار کارآمد به روز کنید.

با استفاده از این ابزار، نیاز زیادی به دانستن تمام مشخصات مربوط به ایجاد متا یا اکسیما وجود ندارد. RankMath شما را با استفاده از چندین نکته حیاتی مانند طول، ارتباط با محتوای صفحه و استفاده از کلمه کلیدی راهنمایی می کند.

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

ویژگی‌های ALT(Alternative text) خوب دسترسی به وب را برای کاربران کم بینا بهبود می‌بخشد، زمینه واضحی را برای خزنده‌ها فراهم می‌کند و در مواردی که ممکن است تصاویر به درستی نمایش داده نشود (مانند صندوق ورودی ایمیل) آن ها را مرتبط نمایش میدهد.

مراجع داده ها:

گزارش GTmetrix، کنسول جستجوی گوگل، SEMRush، وردپرس

سختی: ساده

می‌توانید این بروزرسانی‌ها را با استفاده از ابزاری مانند RankMath یا با بروزرسانی مستقیم متن و توضیحات جایگزین تصویر از طریق ناحیه رسانه داشبورد وردپرس خود انجام دهید.

نکته: نباید با «ALT tags» اشتباه گرفته شود، استفاده از متن جایگزین مناسب به طور قابل توجهی تجربه کاربر، نمایه‌سازی تصویر و دسترسی کلی را بهبود می‌بخشد.

حذف محتوای تکراری خطر کاهش رتبه را کاهش می دهد و همچنین تجربه کلی را بهبود می بخشد.

مراجع داده ها:

گزارش GTmetrix، کنسول جستجوی گوگل

سختی: ساده

اگر محتوای تکراری را نادیده بگیرید، آن می تواند به رتبه‌بندی شما آسیب برساند و اگر آن را اصلاح کنید، برای رتبه بندی شما مفید خواهد بود.

به روز رسانی URL های طولانی و گیج کننده (با نام مستعار پیوندهای دائمی در CMS مانند وردپرس) به وب سایت شما کمک می کند رتبه بهتری در نتایج جستجو کسب کند.

مراجع داده ها:

گزارش GTmetrix، کنسول جستجوی گوگل، SEMRush، وردپرس

سختی: ساده/متوسط

نحوه برخورد شما با این موضوع بستگی به راه اندازی وب سایت شما دارد. اگر از یک سیستم مدیریت محتوا (CMS) مانند وردپرس استفاده می کنید، می توانید از پلاگین RankMath برای مدیریت هر گونه به روز رسانی لینک های نا مناسب استفاده کنید. با یک تنظیم کوچک، این افزونه به طور خودکار یک تغییر مسیر در زمانی URL Slug تغییر میکند را برای شما اضافه می کند.

اصلاح نسبت های نامناسب HTML به متن باعث بهبود عملکرد کلی وب سایت می شود.

مراجع داده ها:

گزارش GTmetrix، SEMRush،

سختی: متوسط / پیشرفته

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

نکته حرفه ای: به طور معمول، شما همیشه نسبت متن به کد بالاتر (متن بیشتر) می خواهید. این بدان معناست که سایت برای افراد در موتورهای جستجو طراحی شده است.

بیایید مراحل را دوباره مرور کنیم:

1. شناسایی و اولویت بندی مسائل
2. برنامه ریزی
3. پیاده سازی بهبودهای بهینه سازی تصویر، عملکرد سایت و متا تگ ها

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

برای مشاهده گام های قبلی به وبلاگ پارس بابا مراجعه کنید.