این مقاله بر اساس سال ها تجربه در خصوص توسعه فرانت اند میباشد که چک لیست کاملی از کارهایی که قبل ار اهمیت بالا آوردن وب سایت باید چک کنید را در اختیارتان میگذارد.
این چک لیست از بخش های زیر تشکیل شده است:
نحوه استفاده:
تمامی موضوعات داخل چک لیست برای اکثر پروژه ها مورد نیاز است.اما بعضی از آنها می توانند حذف شوند یا که ضروری نباشند.برای مثال شاید شما برای یک وب اپلیکیشن نیازی به RSS نداشته باشید. ما از 3 سطح اهمیت استفاده میکنیم:
اهمیت پایین به این معنی که اهمیت پایین دارند، توصیه میشود اما می تواند در بعضی از شرایط حذف گردد.
اهمیت متوسط به این معنی که اهمیت متوسط دارد ولی توصیه میشود و میتواند در موارد خیلی خاصی حذف شود با حذف بعضی عناصر می توانند پیامدهای بدی از نظر عملکرد یا سئو داشته باشد.
اهمیت بالا به این معنی که اهمیت اهمیت بالایی دارد و نمی تواند حذف شود.اولویت اول باید بر روی این عنصر باشد.
Head
- Meta tag متا تگ:Doctype: اهمیت بالا
<!doctype html>Determining the character encoding – HTML5 W3C
Charset: اهمیت بالا باید حتما نوع ان مشخص شود که معمولا UTF-8 میباشد
<meta charset="utf-8" />Viewport: اهمیت بالا باید حتما نوع ان مشخص شود
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Title: اهمیت بالا در همه صفحات استفاده میشود وتیتر هر صفحه را مشخص میکند همچنین در سئو نیز تاثیر‌گذار میباشد.میانگین کارکترهای هر تیتر 55 کارکتر میباشد.
<title>Title text heretitle>Description: اهمیت بالا تگ توضیحات که توضیحی درباره وبسایت میدهد و منحصر به فرد میباشد و نباید بیشتر از 150 کاراکتر باشد.
<meta name="description" content="A description of the page"/>Favicons: اهمیت متوسط اگر شما یک فاو آیکون دارید میتوانید آن را در ریشه سایت خود (روت) قرار دهید و آن را مثل مثال زیر اضافه کنید.سایز هر فاو آیکون 32*32 پیکسل و فرمت آن PNG و ico میباشد.
<link rel="icon" sizes="192x192" content="/path/to/icon.png"/> <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"/> <link rel="mask-icon" href="/path/to/icon.svg"/>Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? – CSS Tricks
Apple Web App Meta: اهمیت پایین
Windows Tiles: اهمیت پایین
Browser configuration schema reference
Canonical: اهمیت متوسط با استفاده از rel=”canonical” از محتوای تکراری جلوگیری میکنیم
<link rel="canonical" href="https://example.com/article/?page=2"/>Use canonical URLs – Search Console Help – Google Support
5 common mistakes with rel=canonical – Google Webmaster Blog
- HTML tagsLanguage attribute: اهمیت بالاخاصیت lang نشان دهنده زبان صفحه می باشد.
Direction attribute: اهمیت متوسطجهت صفحه شما را تعیین میکند که چپ به راست میباشد یا راست به چپ.
Alternate language: اهمیت پایینبرچسب زبان وب سایت شما مشخص شده و مربوط به زبان صفحه فعلی است.
<html lang="en"/> <html dir="rtl" /> <link rel="alternate" href="https://es.example.com/" hreflang="es"/>Conditional comments: اهمیت پایینکامنت های شرطی برای مرورگر IE
About conditional comments (Internet Explorer) – MSDN – Microsoft
RSS خوان: اهمیت پاییناگر پروژه سایت یک بلاگ باشه مورد نیاز میباشد.
الویت‌بندی CSSها: اهمیت بالاهمه فایل های css باید قبل از فایل های جاوا اسکریپت در هدر بارگذاری شوند.
- Social metaFacebook Open Graph OG: اهمیت پایین تمامی آنها مورد نیاز می‌باشند.تصاویر باید حداقل 315*600 پیکسل باشند هر چند 1200*630 پیکسل توصیه می‌گردد.
<meta property="fb:app_id" content="123456789"/> <meta property="og:url" content="https://example.com/page.html"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Content Title"/> <meta property="og:image" content="https://example.com/image.jpg"/> <meta property="og:description" content="Description Here"/> <meta property="og:site_name" content="Site Name"/> <meta property="og:locale" content="en_US"/> <meta property="article:author" content=" "/>Twitter Card: اهمیت پایین
<meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@site_account"/> <meta name="twitter:creator" content="@individual_account"/> <meta name="twitter:url" content="https://example.com/page.html"/> <meta name="twitter:title" content="Content Title"/> <meta name="twitter:description" content="Content description less than 200 characters"/> <meta name="twitter:image" content="https://example.com/image.jpg"/>
HTML
HTML5 Semantic Elements(عناصر اصلی html5 ): اهمیت بالا از عناصر اصلی html5 برای تقسیم صفحه استفاده کنیم مثل هدر و سکشن و فوتر.
Error pages(ارور صفحه ها): اهمیت بالاصفحه ارور 404 و5xx وجود داشته باشد. به یاد داشته باشید ارور 5xx داخل خود css هارو نگه دارد.
Noopener: اهمیت متوسطدر صورت استفاده از لینک های خارجی با “target=”_blank لینک شما باید دارای خاصیت “rel=”noopener باشد. برای جلوگیری کردن تب nabbing .
Clean up comments(پاک کردن کامنت): اهمیت پایینقبل از ارسال و آپلود صفحه کامنت ها و کد های غیر ضروری حذف گردند.
W3C compliant (اعتبار سنجی صفحه): اهمیت بالاتمامی صفحه ها نیاز دارند تا در W3C اعتبار سنجی شوند تا در صورت وجود مشکل آن را برطرف کرد.
HTML Lint: اهمیت بالا من از ابزارهایی برای کمک به تجزیه و تحلیل مسائل مربوط به کد استفاده میکنم.
Link checker (چک کننده لینک ها): اهمیت بالاچک کنیم که لینک شکسته در صفحه نباشد نا با ارور 404 روبرو نشویم.
Ad Blockers test (تست بلاک کننده تبلیغات): اهمیت متوسط
Webfonts
Webfont format (فرمت وب فونت ها): اهمیت بالااز فرمت های WOFF,WOFF2 و TTF در صفحات خود استفاده کنید که همه مرورگر ها آن را ساپورت میکنند.
WOFF – Web Open Font Format – Caniuse.
WOFF 2.0 – Web Open Font Format – Caniuse.
TTF/OTF – TrueType and OpenType font support
Web Font size (سایز وب فونت ها): اهمیت بالا سایز وب فونت ها نباید بالاتر از 2 مگابایت باشد .
Webfont loader(بارگذاری وب فونت ها): اهمیت پایینبارگذاری وب فونت ها را کنترل میکند
CSS
Responsive Web Design ( طراحی واکنش گرا): اهمیت بالاصفحات باید واکنشگرا باشند.
CSS Print: اهمیت متوسطهر صفحه stylesheet به درستی در صفحه های مربوط به خود جا داده شده باشند.
Preprocessors (پیش پردازنده ها): اهمیت پایین پروژه از پیش‌پردازنده‌هایی مثل sass , less استفاده کنند.
Unique ID( ایدی منحصر به فرد): اهمیت بالا اگر از آیدی استفاده میکنید آن منحصر به فرد باشد و در قسمت های مخصوص به کار روند.
Reset CSS(ریست css): از css ریست‌ها استفاده کنید مثل rest , normalize , reboot. اگر هم از فریم ورک مثل بوت استرپ و فاندیشن استفاده میکنید نرمالیزه داخل آن ها میباشد.
JS prefix(پسوند جاوا اسکریپت): اهمیت پایینهمه کلاس ها یا آیدی ها که در جاوا اسکریپت استفاده میکنیم را با js شروع کنیم و از آنها در فایل css استفاده نکنیم.
embedded or inline CSS ( cssهای داخل سند html یا داخل خط کد): اهمیت بالااجتناب کردن از نوشتن استایل در خط کد یا داخل صفحه مگر برای کار های ضروری مثل عکس بکگراند در اسلایدر ها)
Vendor prefixes( پیشوند وندورها): اهمیت بالااستفاده از پیشوند های وندورها برای ساپورت تمام مرورگرها مثل -webkit
Concatenation(تلفیق): اهمیت بالاتمام فایل های css در یک فایل تلفیق شوند.
Minification(فشرده سازی): اهمیت بالاتمام فایل ها فشرده شوند.
Non-blocking: اهمیت متوسط
Unused CSS ( cssهای بلا استفاده): اهمیت پایینهمگی حذف گردند.
Stylelint: اهمیت بالاهمه فایل های css و sass بدون ارور باشند.
Responsive web design (واکنشگرا): اهمیت بالاهمه صفحات در نقطه شکست ها بررسی شوند.برای همه دستگاه ها
Css validator (اعتبار سنج css): اهمیت متوسطفایل css اعتبار سنجی شود و مشکلات برطرف شوند.
Desktop Browsers(مرورگر هی دسکتاپ): اهمیت بالاهمه صفحات در مرو گر های دسکتاپ مثل کروم سافاری و موزیلا و … امتحان شوند.
Mobile browser(مرورگر موبایل): اهمیت بالاهمه صفحات در مرورگر های موبایل مثل کروم و سافاری تست شوند.
OS(سیستم عامل): اهمیت بالادر همه سیستم عامل ها تست شود.
Reading direction( جهت خواندن): اهمیت بالاهمه صفحات در صورت نیاز در حالت های چپ به راست و راست به چپ تست شوند.
Images
برای درک کامل بهینه سازی تصاویر کتاب Essential Image Optimization بخوانید.
Optimization(بهینه سازی): اهمیت بالاهمه عکس ها بهینه شوند برای لود سریع تر مرورگرها.
Picture/Srcset: اهمیت متوسطاز srcset مناسب کاربر در پروژه ها استفاده کنید.
How to Build Responsive Images with srcset
Retina(رتینا): اهمیت پایینبرای صفحه نمایش‌های retina از قالب عکس‌های 2x استفاده کنید.
Sprite: اهمیت متوسط
Width and Height( طول و ارتفاع): اهمیت بالااگر سایز نهایی عکس ها را می‌دونید آنها را با خاصیت width و height نشان دهید.
Alternative text (متن جایگزین): اهمیت بالاتمام عکس ها خصوصیت alternative را دارا باشند.
Lazy load(لیزی لود): اهمیت متوسط عکس ها به صورت لیزی لود بارگذاری شوند.
JavaScript
JavaScript Inline(جاوا اسکریپت داخل خط کد): اهمیت بالاهیچ کد جاوا اسکریپتی به صورت این لاین و داخل کد html نوشته نشده باشد.
Concatenation تلفیق: اهمیت بالاهمه فایل های جاوا اسکریپت تلفیق شوند.
Minification فشرده سازی: اهمیت بالاهمه فایل های جاوا اسکریپت فشرده شوند و با min به اخر اسم فایل آنها را مشخص نمایید.
Minify Resources (HTML, CSS, and JavaScript)
JavaScript security(امنیت جاوا اسکریپت): اهمیت بالا
Guidelines for Developing Secure Applications Utilizing JavaScript
noscript tag (تگ noscript): اهمیت متوسطدر داخل تگ noscript پیغامی می‌نوسیم که در صورت غیر فعال بودن جاوا اسکریپت مرورگر یا ساپورت نکردن آن مرورگر آن پیغام ا نمایش دهد.
Non-blocking (غیر مسدود سازی): اهمیت متوسط فایل های جاوا اسکریپت میتوانند با خاصیت async غیر همسان بارگزاری شوند یا با خاصیت deferred دیرتر بارگزاری شوند.
Remove Render-Blocking JavaScript
Optimized and updated JS libraries(بهینه سازی و اپدیت کتابخانه های جاوا اسکریپت): اهمیت متوسط تمام کتابخانه های مورد استفاده در پروژه به آخرین نسخه بروزرسانی شوند.
Vanilla JavaScript for building powerful web applications
ESLint(تست جاواسکریپت): اهمیت بالاتست با ESLint و نداشتن خطا و ارور
ESLint – The pluggable linting utility for JavaScript and JSX
Performance
(اهداف برای دستیابی) Goals to achieve: اهمیت متوسطصفحات شما باید به این اهداف برسند:
نشان دادن اولین المان زیر یک ثانیه فایل های مهم gzip زیر 170 کیلوبایت باشد.
Minified HTML(فشرده سازی html): اهمیت متوسطفایل اج تی ام ال شما باید کوچک شده باشد.
Lazy loading(لیزی لود): اهمیت متوسطتصاویر، اسکریپتها و CSS باید به صورت لیزی لود باشند تا زمان پاسخ بهتر شود.
Cookie size (سایز کوکی): اهمیت متوسطاگر از کوکی ها استفاده می کنید باید مطمئن شوید که هرکوکی 4096 بایت را بیشتر نمیگیرد و نام دامنه شما بیش از 20 کوکی ندارد.
Cookie specification: RFC 6265
Third party components (کامپوننت های شخص سوم): اهمیت متوسطفریم های شخص سوم یا کامپوننت های وابسته به JS خارجی(مانند دکمه های به اشتراک گذاری) با کامپوننت های استاتیک جایگزین شوند ، این محدودیت ها برای API خارجی باعث حفظ حریم شخصی کاربر شما می شود.
Simple sharing buttons generator
Google PageSpeed (تست صفحه ها با گوگل تست سرعت): اهمیت بالاتمام صفحات سایت چک شوند ( نه فقط صفحه اصلی) و امتیاز صفحات باید بالای 90 از 100 باشد.
Test your mobile speed with Google
WebPagetest – Website Performance and Optimization Test
Accessibility
Progressive enhancement (بالا بردن بهره وری): اهمیت متوسطقابلیت های عمده مانند ناوبری اصلی و جستجو باید بدون جاوا اسکریپت کار کنند.
Enable / Disable JavaScript in Chrome Developer Tools
Color contrast: اهمیت متوسطکنتراست رنگ حداقل باید WCAG را AA پاس کند.(AAA برای موبایل)
Headings (تگ هدینگ): اهمیت بالاهدینگ ها باید به درستی و اهمیت ها باشد.از h1 تا h6
Why headings and landmarks are so important — A11ycasts #18
Specific HTML5 input types are used(از ورودی های خاص html5 استفاده گردد): اهمیت متوسطاین یک موضوع مهم به ویژه برای موبایل ها میباشد که باید صفحه کلید سفارشی و ویجت ها را برای انواع مختلف از آنها نشان دهد.
Form Label (برچسب ها): اهمیت بالایک برچسب با هر عنصر فرم ورودی مرتبط است. در صورتی که یک برچسب نمایش داده نشود، به جای آن از aria-label استفاده کنید.
Using the aria-label attribute – MDN
Accessibility standards testing(تستهای استاندارد دسترسی پذیری): اهمیت بالااز ابزار WAVE برای تست استفاده کنید و اینکه آیا صفحه شما به استانداردهای دسترسی پذیری احترام می گذارد با خیر.
Keyboard navigation: اهمیت بالاوب سایت خود را فقط با صفحه کلید تست کنید و ببینید که آیا همه ی المان ها با صفحه کیبورد به درستی کار می کنند یا خیر.
Screen-reader(صفحه خوان): اهمیت متوسطتمام صفحات در صفحه خوان تست شوند (VoiceOver, ChromeVox, NVDA or Lynx).
Focus style(استایل فوکوس): اهمیت بالا اگر استایل فوکوس را غیر فعال کردید آن را در css فعال کنید.
SEO
Google Analytics(گوگل آنالیک): اهمیت بالاگوگل آنالیز نصب شده باشد و تنظیماتش به درستی وارد شده باشد.
Headings logic(منطق تگ هدینگ): اهمیت متوسطتگ های هدینگ کمک میکند تا بفهمیم چه محتوایی در این صفحه میباشد.
Sitemap.xml: اهمیت بالاباید وجود داشته باشد و به کنسول جستجوی Google ارائه شود.
Robots.txt: اهمیت بالا
Structured Data(ساختار داده ها): اهمیت بالاصفحات با استفاده از داده های ساختاری تست شده و بدون خطا باشند. داده های ساختاری به خزنده موتور جست و جو گر ها کمک می کند محتوای در صفحه فعلی را درک کند.
Introduction to Structured Data – Search – Google Developers
Test your page with the Structured Data Testing Tool
Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy
Pagination link tags(تگ صفحه بندی): اهمیت متوسط rel=prev و rel=next داخل محتوای چند صفحه ای استفاده کنید.
