بر کسی پوشیده نیست که گوگل، وب سایت‌های فنی عالی را دوست دارد. اگر می‌خواهید طراحی سایت شما تا حد ممکن بهتر به نظر برسد، هیچ جایگزینی برای کسب اطمینان از این که شما اصول اولیه را انجام داید، و هر کار فراتری برای بهتر شدن آن انجام داده اید، وجود ندارد. در حالی که برخی از جنبه‌های برتر تکنیکی همیشه مهم بوده‌اند، در این مقاله من می‌خواهم بر روی هفت دلیل تمرکز کنم، که احتمالا شما تا به حال برای بهبود طراحی سایت خود، از آن ها استفاده نکرده اید. اگر بتوانید این مسائل را حل کنید، سایت شما در بهترین موقعیت ممکن برای امسال و آینده قابل‌پیش‌بینی خواهد بود.
بهبود طراحی سایت با بهینه سازی موبایل
بازدید وب سایت ها از طریق موبایل، در حال حاضر بیش از ۵۲ درصد از ترافیک وب را در سراسر جهان به خود مشغول کرده است. در کشورهایی مانند ایالات‌متحده و بریتانیا این عدد تقریبا به ۶۰ درصد نزدیک‌تر است. حتی قبل از سال ۲۰۱۸، داشتن یک سایت منطبق با اندازه موبایل ضروری بود، اگر می‌خواهید کسب‌وکار شما برای حفظ شود، و همچنین کاربرا زیادی در آن وجود داشته باشند، نیاز دارید با ویژگی های موبایل منطبق باشید.
حالا، نوبت می رسد به اعلام اولین شاخص گوگل درباره تلفن همراه، به این معنی که نسخه تلفن همراه یک سایت به عنوان پایه، برای این که چگونه یک سایت باید رتبه بندی شود، به جای نسخه دسکتاپ عمل می کند. سایت های تلفن همراه را برای دید موتورهای جستجو و همچنین تبدیل ضروری می باشد. اگر می خواهید کاری کنید سایت شما در تلفن همراه به خوبی عمل کند، یا می خواهید سایت خود در تلفن همراه را به روز رسانی کنید، مهم است که این کار را به روش درست انجام دهید. سه راه‌حل رایج برای سایت‌های موبایل وجود دارد:
- راه‌حل اصلی، شامل ایجاد یک سایت جداگانه در یک ساب دامین جداگانه، و تغییر مسیر کاربران به آن جا است.
- طراحی داینامیک، طراحی سایت های جداگانه برای هر دستگاه ایجاد می‌شود، و سرور بسته به این که چه دستگاهی مورد استفاده کاربر قرار می گیرد، یکی از سایت ها را بارگذاری می کند.
- طراحی واکنش گرا – تنها یک مجموعه از کد های HTML ایجاد و نگهداری می‌شود، اما براساس اندازه صفحه، نمایش داده می‌شود.
در حالی که هر سه راه‌حل قابل دوام هستند، گوگل به صراحت طراحی سایت واکنش گرا را، به عنوان روش برتر خود نام گذاری کرده‌است. طراحی واکنش گرا مزایای متعددی دارد، از دیدگاه گوگل بهتر است چون هیچ تغییر مسیری در آن وجود ندارد.
مطلب مرتبط: طراحی واکنش گرا و طراحی سازگار
از دیدگاه توسعه دهندگان و مدیران وب، شما تنها باید با یک مجموعه از HTML سروکار داشته باشید، که ایجاد، حفظ و پیگیری آن را آسان‌تر می‌سازد. اگر شما با چندین سایت، و خدمات فعال سر و کار داشته باشید، نظارت بر سفر مشتری بسیار سخت‌تر می‌شود، و ما می‌دانیم که بسیاری از تبدیل ها شامل بازدید از دستگاه‌های مختلف می‌شوند.
در نظر گرفتن AMP برای محتوا و تبلیغات
این مورد احتمالا بحث‌برانگیزترین نکته در این پست می باشد، بسیاری از بازاریابان دیجیتال در گذشته، پرچم های هشدار دهنده ای نسبت به AMP (افزایش سرعت ارائه مطالب) را مطرح کرده اند، تشویق مدیران وب و بازاریابان دیگر برای ارزیابی ارزش AMP، می تواند به کسب و کار آن ها قبل از اجرای آن کمک کند. AMP به اندازه کافی مهم است که ارزش بیان شدن در این مقاله را داشته باشد، و من معتقدم که این موضوع در آینده افزایش خواهد یافت. به طور خاص ناشران اخبار منظم و صاحبان فروشگاه‌های تجارت الکترونیک باید توجه ویژه‌ای به این موضوع داشته باشند.
به عنوان یک مرور سریع , AMP روشی برای ارائه محتوا، در سرعت صاعقه به جستجوگران موبایل است. گوگل یک نسخه AMP از یک صفحه را ذخیره می کند ( جدا از صفحه اصلی ) که می‌تواند بدون نیاز به منتظر ماندن برای سرور، برای خدمت به یک صفحه کامل باشد( سرورهای حافظه نهان گوگل بسیار سریع‌تر از سرویس شما هستند.) صفحات شتاب دار موبایل(AMP) معمولا در اخبار و مقاله های جدید گوگل، دیده می شود. از آنجا که AMP نیاز به ایجاد و مدیریت نسخه‌های جدید محتوای شما دارد، مهم است که در نظر بگیرید آیا اجرای آن به نفع سایت شما خواهد بود یا خیر؟! اگر وجود AMP نتواند برای شما مفید باشد، سرعت سایت عمومی می‌تواند یک تمرکز مفیدتر برای شما باشد، زیرا تمام هدف AMP، این است که بتواند سرعت مرورگر در موبایل را افزایش دهد. علاوه بر انتشار های خبری، صفحات AMP واجد شرایط جایگزین کردن نسخه استاندارد آدرس های اینترنتی، در نتایج جستجوی موبایل هستند.
سرعت سایت و نقش آن در بهبود طراحی سایت
در حالی که سرعت محتوای AMP توسط گوگل کنترل می‌شود، هیچ دلیلی وجود ندارد که شما نتوانید از طریق اقدامات خود به یک وب سایت واقعا سریع برسید. عواملی مثل معماری سرور شما، طراحی سایت، و ذخیره سازی می‌تواند به گونه‌ای تنظیم شود که، سایت شما به سرعت روی همه دستگاه‌ها بارگذاری شود. اگر سایت شما کند است، شما از دیده شدن و تبدیلات سازمانی، شدیدا محروم خواهید ماند. سرعت یک عامل رتبه‌بندی به نوبه خود می باشد، اما سایت‌های آهسته نیز برای حفظ کاربران در سراسر جهان تلاش می‌کنند. روش‌های مختلفی وجود دارند که می‌توانید بهینه سازی سرعت سایت را، به کمک آن ها انجام دهید. ما می‌توانیم با تقسیم این موارد به ۴ بخش کلی به آن ها نگاه کنیم:
- درخواست، جایی که داده‌های وب سایت از سرور درخواست می‌شود.
- پاسخ، زمانی که سرور فایل‌های مورد نیاز برای ایجاد صفحه وب را جمع می‌کند.
- ساخت، زمانی که مرورگر داده‌ها را، از سرور به یک صفحه HTML و CSS ارجاع می‌دهد.
- ارائه دادن، زمانی که مرورگر منابع دیگری استفاده می کند، مانند یک برگه استایل یا فایل جاوا اسکریپت!
راه‌هایی برای بهینه‌سازی سرعت هر مرحله وجود دارد، زمانی که تمام مراحل بهینه شوند، سایت شما به میزان قابل‌توجهی سریع‌تر از آن چه که در حال حاضر است، خواهد شد.
درخواست – استفاده از یک فایل CDN و فایل‌های کم‌تر
CDN ها بین سرور و مرورگر قرار می‌گیرند، تا دارایی‌هایی نظیر تصاویر، CSS و جاوا اسکریپت را به کاربر نزدیک‌تر کنند. در برخی موارد، شما حتی می‌توانید یک سایت را به طور کامل، در یک CDN قرار دهید. تیم مورد علاقه من در شبکه تحویل محتوا Amazon Cloudfront است؛ یک راه حل مانند این زمان درخواست کاربر را از هر مکان مشخصی کاهش می دهد. علاوه بر این، من توصیه می‌کنم که یک حسابرسی از فایل‌های درخواستی برای هر صفحه سایت شما انجام شود. بسیاری از تم‌ها و اسکریپت ها به دنبال بارگذاری فایل‌های بزرگ در پس‌زمینه هر صفحه سایت شما خواهند بود، حتی اگر این پرونده‌ها برای آن صفحه لازم نباشد. کاهش این درخواست‌های غیرضروری، زمان بارگذاری شما را نیز کاهش می‌دهد.
پاسخ – رمزگذاری و HTTP/2
اکثر وب سایت‌های مدیریت محتوا و پویا از محتویات درون یک پایگاه‌داده، الگوهای سبک و نوعی بسته نرم‌افزاری تشکیل شده‌اند، که می‌تواند همه آن‌ها را کنار هم داشته باشد. برای جلوگیری از نیاز سرور به قرار دادن محتویات یک سایت برای هر کاربر، ما می‌توانیم آن را، به عنوان یک نسخه آماده از سایت، آماده کنیم. ذخیره سازی را می‌توان در یک سایت CMS انجام داد، اما ذخیره‌سازی سمت سرور نیز می‌تواند، برای ذخیره پیکربندی قدرتمندتر در سطح سرور مورد استفاده قرار گیرد. ذخیره سازی و CDN ها( Content Delivery Network) نیز به خوبی با هم ترکیب می‌شوند، چون شما می‌توانید کل صفحات را روی یک CDN ذخیره کنید، تا درخواست را قبل از این که به سرور برسد، تنظیم کنید. 
همچنین می‌توانید از آخرین تکنولوژی سرور مثل HTTP /۲ استفاده کنید، تا فرآیند را تسریع کنید. HTTP/۲ اجازه می‌دهد که داده‌ها جریان داشته باشند؛ این موضوع به این معنی می باشد که، سرور در یک زمان چندین درخواست از مرورگر را انجام می‌دهد، به جای آن که با آن‌ها یکی پس از دیگری معامله کند.
ایجاد و ارائه – بهینه‌سازی مسیر بحرانی و بارگذاری پرونده‌ها
اگر برخی از تکنیک‌های ذکر شده در دو بخش قبلی را بکار ببرید، فرآیند ساخت به سرعت پیش می‌رود، اما کارهای بیشتری می‌توانید برای کاهش زمان ارائه صفحه مرورگر به کاربران انجام دهید. کلید در این مرحله نهایی، بهینه‌سازی مسیر ارائه بحرانی می باشد، که به معنای کاهش تعداد منابعی است که می‌تواند، بخش اول صفحه را مسدود کند که کاربر از ارائه آن مطلع خواهد شد. شما می‌توانید جلوی مسدود کردن ارائه را بگیرید، در نتیجه با بارگذاری فایل‌های غیر همزمان و یا اولویت بندی برخی از آن‌ها به طوری که بارگذاری آن ها همزمان رخ دهد، کل فرآیند ارائه را تسریع کنید. اکثر سیستم‌های مدیریت محتوا در واقع از جعبه با برخی بهینه‌سازی ها برای مسدود کردن ارائه بیرون می‌آیند، اما اگر شما به مشاهده عملکرد ضعیف در مرورگر ادامه دهید، باید دقت بیشتری در این مساله داشته باشید. اگر به دنبال راه‌هایی برای تسریع روند خود باشید، لازم است مطمئن شوید که بارگذاری فایل‌های بزرگ جاوا اسکریپت و css در سر سند بسما نیازی نیست. در صورت امکان، تمام جاوا اسکریپت ها باید به فوتر اولویت داده شوند، CSS باید فقط در صورت لزوم بارگذاری شود، و در صورت امکان، منابع خارجی باید به طور غیرهمزمان بارگذاری شوند.
درک خزنده های گوگل با جاوا اسکریپت
قالب‌های جاوا اسکریپت به یک ابزار محبوب در توسعه وب پیشرفته تبدیل شده‌اند، اما گوگل در طول تاریخ تلاش می‌کند تا صفحاتی را که به این شکل ساخته شده‌اند، بررسی کند. اکنون خزنده های در ارائه و جستجوی گوگل بهتر از آن چیزی هستند، که تا به حال بوده اند، اما این همه ماجرا نیست. قالب‌های جاوا اسکریپت به طور ساده به صفحات اجازه می‌دهند که، از فایل JS به جای بارگذاری مقدار زیادی HTML از یک سرور ارایه شوند. سایت‌هایی که از این روش استفاده می کنند، تنها نیاز به درخواست سرور برای داده‌های مربوط به محصول، و یا صفحه اطلاعات خاص دارند؛ همه چیز به صورت پویا ساخته شده‌است. در حال حاضر ده‌ها الگوی محبوب جاوا وجود دارد : vue ، React ، و Angular، و سایر موارد. همه این ها به روشی مشابه محتوا را ارایه می‌کنند. طرفداران این روش توسعه استدلال می‌کنند که، این روش به یک تجربه کاربری بهتری منجر می‌شود، و ممکن است درست باشد.
یک صفحه بدون جاوا اسکریپت برای گوگل شبیه یک صفحه از برچسب HTML خالی به نظر می‌رسد، این موضوع به این معنی است که، گوگل نمی‌تواند هیچ یک از محتویاتی که به آن نیاز دارد، را ببیند تا موضوع و کیفیت صفحه از جمله متن و تصویر را مشخص کند. این موضوع مدت‌ها است برای صفحاتی که در آن متن، گرافیک و پیوندها در پشت جاوا اسکریپت پنهان شده اند،وجود دارد. اما اکنون می‌تواند یک مساله برای تمام سایت‌ها باشد اگر آن‌ها بر ارائه جاوا اسکریپت تکیه داشته باشند.
آماده سازی صحیح سایت های بین المللی
همواره در دوره های مختلف، هم نمونه‌های خوب و هم بد بین‌المللی سازی را مشاهده خواهیم کرد. شرکت ها و برند های مختلف برای مدتی بدون در نظر گرفتن بهینه‌سازی موتور های جستجو، وب سایت‌هایی را برای مناطق مختلف ایجاد کرده‌اند. اکنون تقریبا همه کسب و کارها آنلاین می‌شوند، و حتی برخی از کوچک‌ترین آن‌ها به گزینه‌های بین‌المللی سازی نگاه می‌کنند. نیاز به داشتن مجموعه مناسب مهم‌تر از همیشه حس می شود، و اگر این کار را اشتباه انجام دهید، در یک بازار جهانی که به شدت رقابتی است امتیاز خود را از دست خواهید داد. هر چه بیشتر بتوانید سایت خود را در میان مناطق و زبان‌های مختلف، به درستی طراحی کنید، بیشتر در رقابت قرار خواهید گرفت. اجرای صحیح بین‌المللی سازی زمانی اتفاق می افتد، که یک کاربر بر روی سایتی که به زبان او نوشته شده و یا در کشور آن‌ها قرار دارد ، فرود می‌آید. گوگل در فراهم کردن محتوای صحیح برای کاربران، به نسبت کشور خودشان بسیار بهتر است، اما هنوز چیزهای زیادی وجود دارد که مدیران سایت ها باید انجام دهند، تا اطمینان حاصل شود که تجارب کاربران آن‌ها تا حد ممکن خوب است.
قرار دادن محتوا در انبار
قرار دادن محتویات در انبارها، به معنای ایجاد یک معماری سایت است، که در آن صفحات اطلاعاتی کلیدی، به عنوان سرویس اصلی شما، و یا صفحات دسته‌بندی شما در همان پوشه‌ها قرار دارند. در حال حاضر ما در مرحله ای هستیم، که این استراتژی به بلوغ رسیده، و انبار های کاربر بیشتر و موثرتر از قبل شده اند. گوگل همیشه به دنبال رتبه‌بندی وب سایت‌هایی با سطح خوبی از اطلاعات، در مورد موضوعات مورد نظر خود است، حتی اگر این اطلاعات در یک صفحه وجود نداشته باشد. علاوه بر این، تعداد بیشتری از لینک‌های داخلی از طریق لینک‌های داخلی، صفحات را جهت یافتن گوگل و تمرکز شاخص راحت‌تر می‌کند، و رابطه موضوعی گروهی از صفحات را تقویت می‌کند. 
همچنین تجربه کاربری می‌تواند به عنوان نتیجه‌ای از انبار های ساخته‌شده بهبود یابد. اگر تمام محتوای اطلاعاتی شما در یک وبلاگ یا بخش راهنما مخفی شده باشد، برای کاربران بسیار مشکل است که آن را استخراج کنند، به خصوص اگر یک ویژگی جستجوی محلی موثر در سایت خود نداشته باشید. بسیاری از سیستم‌های مدیریت محتوا به شما این امکان را می‌دهند که انبار اطلاعات را بالافاصله راه اندازی کنید، اما برخی ممکن است نیاز به نصب متصل شونده‌ها داشته باشند . هنگام برنامه‌ریزی ساختار باید اطمینان حاصل کنید که نشانی‌های اینترنتی تمیز باقی می‌مانند و برای کاربران آسان هستند، وغیر این صورت ممکن است برخی از مزایایی که در بالا صحبت کردم را تضعیف کنید.
نوشته نکاتی درباره بهبود طراحی سایت شما اولین بار در طراحی سایت | طراحی وب سایت حرفه ای در تهران با پیام آوا پردازش پدیدار شد.