نوشته های محمد صالح فدایی

بهبود کارایی در فرانت‌اند: فشرده‌سازی End-to-end

محمد صالح فدایی — Fri, 21 May 2021 17:59:02 +0430

سلام. بعد از یک هفته وقفه در سری پست‌های بهبود کارایی در فرانت‌اند (که قطعا بخاطر تعطیلات عید فطر بود!) با قسمت دیگری از این سری در خدمت شما هستم. مثل همیشه قبل از اینکه به سراغ مبحث اصلی بریم، به اون دسته از دوستانی که اولین باره این سری از پست‌ها رو میبینن توصیه میکنم که از پست اول شروع کنن. اما اگر همراه پست‌های ما بودید و فقط پست قبلی از این سری رو از دست دادید، می‌تونین از طریق لینک زیر به پست قبلی دسترسی پیدا کنید: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-5-vkpg91jngo8t فشرده سازی End-to-endاز یک متد فشرده سازی مانند Gzip یا Brotli جهت کاهش حجم فایل‌های ارسالی از سمت سرور به مرورگر کاربر استفاده کنید. هر چقدر حجم فایل‌ها کمتر باشد، کاربر آن‌ها را سریع‌تر دریافت کرده و در نتیجه سرعت و کارایی وبسایت شما بهتر می‌شود.پیش از آنکه وارد جزئیات این مبحث شویم بهتر است کمی با این قابلیت بیشتر آشنا شویم:فشرده‌سازی End-to-end به قابلیت فشرده سازی بدنه (body) پیام اشاره دارد که توسط سرور انجام می‌شود و بدون تغییر در طول مسیر به مرورگر کاربر می‌رسد. [منبع]نمای استفاده از فشرده سازی e2e در ازتباط بین سرور و مرورگر کاربرچرا؟در اولین پست از سری پست‌های بهبود کارایی در فرانت‌اند به اهمیت خلاصه‌سازی و کاهش حجم اسناد HTML اشاره کردیم. بر هیچ توسعه دهنده‌ فرانت‌اندی پوشیده نیست که خلاصه‌سازی و کاهش حجم هر نوع داده می‌تواند باعث افزایش سرعت بارگذاری صفحات شود و در نهایت کارایی وبسایت را بهبود ببخشد. اما اگر تصور می‌کنید که صرفا خلاصه سازی منابع متنی و فشرده‌سازی تصاویر تنها گزینه‌های موجود برای فشرده سازی هستند سخت در اشتباهید. فشرده سازی E2E چیز جدیدی نیست. سال‌ها قبل وجود داشته است اما امروزه با الگوریتم‌های پیشرفته‌تر سریع‌تر و موثرتر شده‌اند.اگر به قسمت پایین تصویر بالا دقت کنید، خواهید دید که برای بارگذاری این سایت مرورگر 834کیلوبایت محتوا دریافت کرده است. اما در کمال تعجب در کنار همین بخش مقدار 1.4مگابایت را برای منابع موجود در صفحات ذکر کرده است. این دقیقا همان دلیلی است که ما به دنبال آن برای چرایی استفاده از فشرده سازی E2E می‌گردیم. این وبسایت با استفاده از قابلیت فشرده‌سازی E2E منابع مورد نظر برای راه‌اندازی صفحه را حدود 42 درصد با حجم کمتر به سمت مرورگر ارسال کرده است و این کاهش حجم نیز قطعا باعث افزایش سرعت بارگذاری وبسایت می‌شود چرا که سریع‌تر توسط مرورگر دریافت می‌شود.مقایسه حجم منابع بدون فشرده‌سازی (آبی) در مقابل فشرده سازی از طریق gzip (قرمز)چگونه؟ابتدا از طریق این وبسایت و به صورت آنلاین وبسایت مورد نظر خود را بررسی کنید. اگر وبسایت مورد نظر از gzip پشتیبانی نمی‌کرد توصیه می‌شود که حتما این قابلیت را در وبسایت خود پیاده سازی کنید. در حال حاضر دو متد پرطرفدار فشرده‌سازی gzip و brotli برای پیاده سازی این قابلیت در وب استفاده می‌شود. brotli جدیدتر است و در نتیجه تعدادی از مرورگرها از این متد پشتیبانی نمی‌کنند؛ به همین دلیل از متد gzip به عنوان fallback استفاده می‌شود. شما باید این تنظیمات را از طریق وب سرور خود (apache/nginx) انجام دهید.از ابتدای این سری از پست‌ها تا اینجای کار سعی کردیم با مباحث معمولی و ساده در زمینه بهبود کارایی فرانت‌اند که البته اکثر آن‌ها تنظیمات سروری بوده‌اند در خدمت شما باشیم؛ اما این سری از پست‌ها قرار نیست اینقدر ساده و عمومی باقی بمانند. عوامل زیادی (از سرور، بک‌اند و فرانت‌اند) در بهبود کارایی یک وبسایت تاثیر گذار هستند و بی شک در پست‌های آینده به سراغ موارد پیچیده‌تر و تخصصی‌تر خواهیم رفت. پس به صورت هفتگی منتظر این سری از پست‌های بهبود کارایی در فرانت‌اند باشید!

بهبود کارایی در فرانت‌اند: استفاده از HTTP/2

محمد صالح فدایی — Fri, 07 May 2021 16:02:16 +0430

با عرض سلام به همه دوستان و همراهان گرامی؛ طبق روال هفتگی امروز با قسمت پنجم از سری پست‌های بهبود کارایی در فرانت‌اند در خدمت شما هستم. قبل از ورود به جزئیات این بخش، پیشنهاد می‌کنم اگر تا الان هیچکدوم از پست‌های این سری رو نخوندین از قسمت اول شروع کنین. اگر هم قسمت هفته گذشته رو از دست دادین کافیه که از طریق لینک زیر قسمت قبل رو هم بخونین: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-4-nokahsavfrbs استفاده از HTTP/2با استفاده از این قابلیت، وبسایت شما سریع‌تر بارگزاری خواهد شد. این تکنولوژی در واقع با پشتیبانی از چند ویژگی کلیدی باعث می‌شود تا منابع و فایل‌های موجود بر روی سرور شما به طور موازی و خیلی سریع‌تر از تکنولوژی HTTP/1.1 در سمت کاربر دریافت شود.اگر هنوز نمی‌دانید HTTP/2 چیست:تکنولوژی HTTP/2 (در اصل به نام HTTP/2.0) یک بازنگری عمده بر روی پروتکل شبکه ای HTTP می‌باشد که در وب جهان گستر (world wide web) استفاده می‌گردد. HTTP/2 اولین نسخه جدید HTTP از HTTP 1.1 بود که در سال ۱۹۹۷ در RFC 2068 به صورت یک استاندارد درآمده است. کار گروه، HTTP/2 را در دسامبر ۲۰۱۴ جهت در نظر گرفته شدن به صورت یک استاندارد پیشنهادی به گروه راهبری مهندسی اینترنت ارائه کردند و این نهاد در هفده فوریه ۲۰۱۵ اجازه انتشار آن را به عنوان یک استاندارد پیشنهادی صادر نمود. از پایان سال ۲۰۱۵، اکثر مرورگرهای اصلی پشتیبانی از HTTP/2 را به قابلیت‌هایشان افزوده‌اند. [منبع]چرا؟در دنیای امروز که همه چیز (مخصوصا در حوزه محصولات نرم‌افزاری) به سرعت در حال پیشرفت است، استفاده از یک تکنولوزی مربوط به 7 سال! قبل دیگر یک توصیه نیست و واقعا هیچ دلیلی برای عدم استفاده از آن وجود ندارد. بسیاری از ابزارهای موجود (و مرتبط) منطبق با تکنولوژی HTTP/2 طراحی و یا بروزرسانی شده‌اند. به زبان ساده اگر می‌خواهید وبسایت بهینه داشته باشید، بهتر است این قابلیت را در سرور خود فعال کنید.تکنولوژی HTTP/2 باینری است!برعکس HTTP/1.1 که فرمت آن بر مبنای محتوای متنی بود، HTTP/2.0 داده‌ها را به صورت باینری ارسال و دریافت می‌کند. این امر باعث می‌شود تا پردازش‌های مرتبط با این تکنولوژی نزدیکی بیشتری به زبان ماشین داشته باشد و به همین دلیل نسبت به HTTP/1.1 قدرت انطباق و سرعت بیشتری دارد.پشتیبانی از قابلیت مولتی پلکسینگ (multiplexing)در تکنولوژی HTTP/1 مرورگر فقط قادر بود یک ارتباط فعال با سرور داشته باشد و امکان دریافت فایل و رد و بدل کردن اطلاعات به صورت موازی فراهم نبود. به همین دلیل طراحان وب منابع مورد نیاز صفحه را (مانند فایل های css و js) با هم دیگر ترکیب می‌کردند (و به همین دلیل فایل‌های بسیار بزرگی به وجود می‌آمدند) تا مرورگر بتواند طی یک درخواست فایل مورد نیاز صفحه را دریافت کند. چیزی که در HTTP/2 یک عادت و عملیات بد به حساب می‌آید. این مورد در HTTP/2 به طور کامل رفع شده است و مرورگر به راحتی می‌تواند به طور موازی چندین فایل را دریافت و یا ارسال کند.استفاده از قابلیت فشرده سازی هدر (header compression)تکنولوژی HTTP/2 از قابلیتی استفاده می‌کند که به آن امکان فشرده سازی هدر را می‌دهد و به همین دلیل تعدادی از سربارهایی که مرتبط به استفاده از HTTP/1.1 بود از بین رفت. از طریق این قابلیت HTTP/2، مرورگر خیلی سریع‌تر داده‌های مهم موجود در هدر را دریافت می‌کند.پشتیبانی از قابلیت جدید Server Pushاز طریق این قابلیت شما می‌توانید منابع ضروری مورد استفاده در صفحات خود را از طریق HTTP Header به مرورگر بفرستید. به همین دلیل مرورگر پیش از آنکه شروع به parse محتوای HTML کند از منابع ضروری مورد نیاز مطلع می‌شود و می‌تواند جلوتر این منابع را به طور موازی با محتوای اصلی دریافت کند.استفاده تنها از یک اتصال (connection)در تکنولوژی قدیمی‌تر، مرورگر برای دریافت هر فایل و یا رد و بدل اطلاعات مجبور بود یک اتصال جدید بسازد؛ کاری که به عنوان یک عملیات سنگین و زمان‌بر از آن یاد می‌شود. در حالی که HTTP/2 به راحتی می‌تواند از اتصال موجود (اولین اتصال) برای دریافت‌فایل‌های مختلف استفاده کند و نیازی به ایجاد یک اتصال جدید ندارد!چگونه؟استفاده از تکنولوژی HTTP/2 در سرورهایی که از وب سرور Nginx استفاده می‌کنند بسیار راحت است. برای این‌کار کافی است در فایل کانفیگ مربوط به Nginx قسمت مربوط به تنظیمات پورت را پیدا کرده و http2 را آن اضافه کنید:... listen [::]:443 ssl http2 ipv6only=on; listen 443 ssl http2; ...البته توصیه می‌شود برای پیاده سازی،از دستورالعمل کامل آن استفاده کنید چرا که همیشه اتفاقاتی برای رخ دادن وجود دارد. همچنین برای وب سرورهای Apache می‌توانید از مستندات رسمی آن استفاده کنید.در این قسمت تلاش ما بر این بود که شما را قانع کنیم تا وبسایت خود را روی نسخه HTTP/2.0 اجرا کنید. این کار به راحتی و بدون هیچ دردسری به افزایش سرعت، بهینگی در بارگزاری و کارایی وبسایت شما تاثیر می‌گذارد. البته در لحظه نگارش این مقاله نسخه سوم از این پروتکل منتشر شده است که در حال حاضر پشتیبانی 66 درصدی را در بین مرورگرهای مورد استفاده کاربران دارد.لطفا نظرات و پیشنهادات خودتون رو درباره بهتر شدن محتوای این سری از پست‌ها با من از طریق بخش نظرات در میان بگذارید. اگر علاقه مندید که پست بعدی ما را بخوانید از طریق لینک زیر وارد پست بعدی شوید: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-6-x1zsp1rfu3u4

بهبود کارایی در فرانت‌اند: قابلیت HTTP Caching

محمد صالح فدایی — Fri, 30 Apr 2021 19:50:16 +0430

سلام به همراهان عزیز. طبق برنامه هفتگی با قسمت دیگری از سری پست‌های بهبود کارایی در فرانت‌اند خدمت شما هستیم. پیش از اینکه به سراغ مطلب این هفته بریم، مایلم یادآوری کنم که اگر تا اینجای کار هیچکدوم از پست‌های بهبود کارایی فرانت‌اند رو دنبال نکردید، از پست اول شروع کنید. همچنین اگر فقط قسمت قبل این سری از پست‌ها رو از دست دادین، از این لینک برای مشاهده پست مربوطه استفاده کنید.قابلیت HTTP Cachingبا استفاده از قابلیت HTTP Caching، تعداد و زمان ارسال درخواست/دریافت منابع به/از سرور را کاهش دهید. این کار بارگزاری صفحات شما را برای کاربرانی که در آینده دوباره به وبسایتتان باز می‌گردند و یا در حال گشت و گذار هستند، بسیار سریع‌تر می‌کند.پیش از آنکه به سراغ چرایی استفاده از این قابلیت برویم، بهتر از ابتدا با آن آشنا شویم:حافظه نهان وب یا میانگیر وب یک مکانیسم برای ذخیره‌سازی موقت (حافظه نهان) از اسناد وب مانند صفحات HTML و تصاویر، به منظور کاهش استفاده از پهنای باند، کاهش بار سرور و کم شدن تاخیر در بارگذاری است. حافظه نهان وب یک کپی از اسنادی که از آن عبور می‌کنند را در خود ذخیره می‌کند. به این ترتیب درخواست‌های بعدی ممکن است از حافظه نهان پاسخ داده شوند. [منبع]چرا؟مرورگرهای وب از قابلیتی پشتیبانی می‌کنند که به توسعه دهندگان این اجازه را می‌دهد تا برخی از فایل‌های مورد نظر خود را بر روی دستگاه کاربر ذخیره کنند. بدین صورت کاربر در مراجعه بعدی خود منتظر دریافت این منابع از طریق شبکه اینترنت نخواهد بود بلکه مرورگر از منابع موجود روی دستگاه کاربر (که در مراجعه قبلی ذخیره سازی شده‌اند) ا ستفاده خواهد کرد و به همین دلیل صفحه وبسایت سریع‌تر به کاربر نمایش داده می‌شود.سرعت، سرعت، سرعتقطعا مهمترین دلیل استفاده از این قابلیت افزایش سرعت در بارگزاری صفحات می‌باشد. قطعا وبسایت شما حاوی فایل‌هایی است که در سرتاسر وبسایت شما استفاده شده‌اند و مختص به یک صفحه خاص نمی‌باشند؛ مثل فایل‌ سی‌اس‌اس فریم‌ورک بوت استرپ یا فایل‌های جاوا اسکریپت فریم‌ورکت React.js یا Vue.js و یا حتی تصاویر موجود در قالب وبسایت شما که در صفحات مختلف تکرار شده‌اند.مقایسه اولین بازدید (سمت چپ) با بازدید دوباره (سمت راست) بعد از پیاده سازی قابلیت کش. به زمان اتمام بارگزاری صفحه در هر دو حالت توجه کنید. زمان بارگزاری به حدود یک سوم کاهش پیدا کرده است!با استفاده از این قابلیت کاربر با مراجعه به هر صفحه نیازی به دریافت دوباره این فایل‌ها نداشته و در نتیجه نمایش و اجرای محتوای داخل صفحه بسیار سریع‌تر اتفاق می‌افتد.کاهش پهنای باند و منابع سخت‌افزاری مورد استفاده سرور و کاربراگر صفحات وبسایت شما روزانه بازدید بالایی دریافت می‌کنند و یا به گونه‌ای است که کاربران زیادی در مدت زمان محدودی (مثلا هر ماه) بیش از دوبار از صفحات شما بازدید می‌کنند، استفاده از این قابلیت به طور قابل ملاحظه‌ای باعث کاهش پهنای باند و استفاده از منابع سخت افزاری سرور شما می‌شود. همچنین کاربران وفادار شما برای بازدید از صفحات هزینه پهنای باند کمتری را پرداخت می‌کنند.تجربه کاربرییکی از موارد جذاب در خصوص این قابلیت، ایجاد وب اپلیکیشن‌هایی است که حس اپ‌های نیتیو (Native Applications) را به کاربر می‌دهد. شما به راحتی با استفاده از این قابلیت و ترکیب آن با سرویس ورکر می‌توانید فایل‌های مورد نیاز برای اجرای آفلاین وبسایت خود را بر روی دستگاه کاربر ذخیره سازی کرده تا کاربر بتواند مانند اپلیکیشن‌ها به صورت آفلاین از وبسایت شما استفاده کند.چگونه؟شما می‌توانید از راه‌های مختلف این قابلیت را پیاده سازی کنید. ساده‌ترین روش برای استفاده از این قابلیت، تنظیم وب سرور می‌باشد.برای مثال با قرار دادن قطعه کد زیر در فایل htaccess. می‌توانید فایل‌های تصویری موجود در وبسایتتان را به مدت یک ماه بر روی دستگاه کاربر به طور موقت ذخیره کنید. مرورگر بعد از گذشت یک ماه به طور خودکار این تصاویر را از روی دستگاه کاربر پاک می‌کند. Header set Cache-Control "max-age=2592000, public" لطفا در پیاده سازی این قابلیت احتیاط کنیدبا اینکه استفاده از این قابلیت مزایای مخصوص به خود را دارد اما می‌توانید باعث بروز مشکلاتی شود. به صورت کلی از کش برای محتوایی که به طور مکرر در حال تغییر است استفاده نکنید. البته برای پیاده سازی کش در مرورگر، انواع و اقسام استراتژی‌ها وجود دارد که می‌توانید از آن‌ها استفاده کنید. اما یادتان باشد استفاده نادرست از این قابلیت می‌تواند باعث شود تا کاربر با صفحه‌ای خراب از وبسایت شما مواجه شود.یکی از بهترین منابع برای آشنایی بیشتر با قابلیت‌ها و استراتژی‌های مختلف موجود در این حوزه، این صفحه از MDN Web Docs می‌باشد. همچنین در این مطلب می‌توانید چندین نمونه از بهترین و بدترین روش‌های پیاده سازی کش را مشاهده کنید.در این پست تلاش کردیم تا به طور خلاصه و کلی در مورد مزایا و نحوه پیاده سازی ساده سیستم caching در مرورگر صحبت کنیم. این مبحث در وب بسیار گسترده می‌باشد و قابلیت‌ها، استراتژی‌ها، مراحل و امکانات گوناگونی را در بر می‌گیرد. تمام تلاش ما در این سری از پست‌ها نه توضیح و بررسی عمیق موارد موجود بلکه آشنایی و راهنمایی در حوزه کارایی فرانت‌اند است و قطعا شما برای بررسی عمیق و دقیق این موارد نیاز به تحقیق بیشتر (مخصوصا در منابع به روز و به زبان انگلیسی) دارید.در پست بعدی به سراغ HTTP/2 رفتیم که می‌توانید از طریق لینک زیر به آن دسترسی پیدا کنید: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-5-vkpg91jngo8t اگر نظر، پیشنهاد، انتقاد و یا سوالی دارید از بخش نظرات با من در ارتباط باشید.

بهبود کارایی در فرانت‌اند: بهینه سازی تصاویر

محمد صالح فدایی — Fri, 23 Apr 2021 17:46:57 +0430

سلام به همه همراهان گرامی و دوستان عزیز. این هفته هم مطابق برنامه هفتگیمون قراره درباره یکی دیگه از راهکارهای بهبود کارایی در فرانت‌اند صحبت کنیم. اگر تا الان این سری از پست‌ها رو دنبال نکردین، پیشنهاد میکنم از پست اول این مبحث شروع کنین. اگر هم پست قبلی بهبود کارایی در فرانت‌اند رو از دست دادید می‌تونین از طریق پیوند زیر بهش دسترسی پیدا کنین: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-2-rsk44ekd1bfb بهینه سازی تصاویرتصاویر استفاده شده در رابط کاربری وبسایت، باید بدون تغییر محسوس در محتوا، معنی قابل ارائه به کاربر و کیفیت، بهینه سازی، فشرده و کم حجم شوند. طراح رابط کاربری در هنگام طراحی و توسعه دهنده فرانت‌اند در هنگام کد نویسی رابط کاربری باید به این نکته توجه داشته باشند که تصاویر مورد استفاده باید متناسب با موقعیت و نحوه نمایش بهینه سازی شوند.چرا؟تصاویری که بهینه سازی و فشرده شده‌اند سریع‌تر دانلود شده و به دلیل اینکه حجم کمتری دارند، زمان کمتری را جهت پردازش پردازنده (برای نمایش به کاربر) نیاز دارند.حتما تا به اینجا متوجه شده‌اید که یکی از راه‌های افزایش سرعت در نمایش وبسایت، پایین آوردن حجم منابع مورد استفاده (فایل‌های جاوا اسکریپت، سی اس اس، تصاویر و ...) می‌باشد. این امر از منطق به دور نیست چرا که هر چه حجم هر کدام از منابع کمتر باشد سریع‌تر دانلود می‌شود. وبسایت‌ها مانند اپلیکیشن‌ها نیستند تا کاربر در ابتدای امر منابع مورد استفاده در آن‌ها را دانلود کرده و برای اجرای آن نیاز به اینترنت نداشته باشند. برعکس، وبسایت‌ها بر روی بستر اینترنت قرار دارند و کاربران هم از طریق سیستم عامل‌های مختلف (ویندوز، مک او‌اِس، لینوکس، اندروید و ...)، مرورگرهای مختلف (کروم، سافاری، فایرفاکس و ...)، دستگاه‌های مختلف (که از نظر مشخصات با هم بسیار تفاوت دارند و حتی معماری مشخصی برای پردازنده و ... ندارند) و از سرعت‌هایی پایین تا بالای اینترنت به این وبسایت‌ها دسترسی دارند. به همین دلیل است که حجم فاکتور مهمی برای افزایش سرعت وبسایت است چرا که محتوا سریع‌تر دانلود شده و به در نهایت سریع‌تر به کاربر نمایش داده می‌شوند. اما حجم کمتر همه چیز نیست. برخی کدهای جاوا اسکریپت خیلی کم حجم هستند اما بخاطر محتوایی که دارند ممکن است مدت زمان زیادی از رشته اصلی پردازنده شما اشغال کنند و عملا وبسایت شما را کند کنند. فرض کنید تصویری دارید که اندازه بسیار بالایی دارد (مثلا 8000 پیکسل در 8000 پیکسل) و به طبع آن حجم بالایی را نیز دارد. اما جدا از مبحث حجم، زمانی که این تصویر برای یک کاربر نهایی برروی وبسایتی به نمایش در بیاید، پردازنده و پردازنده گرافیکی برای رسم این تصویر توان بیشتری را مصرف می‌کنند. حال اگر بازدید کننده شما یک کاربر با یک گوشی میان‌رده اندرویدی باشد احتمالا در زمان نمایش این تصویر، برای لحضاتی با صفحه وبسایت فریز شده مواجه می‌شود که این مورد اصلاً و ابداً خوب نیست.پس ما به دو دلیل به سراغ بهینه‌سازی و فشرده سازی تصاویر می‌رویم. حجم کمتر و پردازش راحت‌تر.چگونه؟برخی از تصاویر قابل جایگزینی با یک نمونه بهتر هستند. به موارد زیر توجه کنید:در برخی مواقع تصاویری استفاده‌ شده‌ است که قابل جایگزینی با افکت‌های سی‌اس‌اس هستند. برای مثال شما از تصاویر به عنوان پس زمینه دکمه‌ها استفاده می‌کنید که می‌توانید آن‌ها را با افکت‌های سی‌اس‌اس جایگزین کنید.در برخی مواقع شما از تصویری استفاده کرده‌اید که در واقع تصویر یک آیکون است. استفاده از آیکون‌ها در فرمت فونت یا svg انتخاب بهتری در مقایسه با استفاده از تصاویر است. به علاوه اینکه فونت‌ها و svgها به راحتی به هر اندازه بزرگ و کوچکی قابل نمایش هستند در صورتی که تصاویر با بزرگتر شدن به صورت پیکسلی و بی‌کیفیت به نمایش در می‌آیند.در برخی مواقع نیز شما می‌توانید تصویر خود را با یک فایل تصویری با فرمت svg جایگزین کنید. تصاویری که قابل جایگزینی با نمونه svg معادل خود هستند، معمولا حجم بیشتر و کیفیت کمتری نسبت به این نوع تصاویر دارند.اما اگر هر کدام از کارهای بالا برای شما امکان پذیر نبود، دستور عمل زیر را برای بهینه سازی و فشرده‌سازی تصاویر استفاده کنید.انتخاب مناسب نوع و فرمت تصویرانواع فرمت‌های متخلف برای تصویر وجود دارد. از فرمت PNG که یک فرمت بدون فشرده سازی است تا فرمت‌های JPEG و GIF و WEPP. اینکه شما از کدام یک از فرمت‌ها استفاده کنید کاملا وابسته به نوع و محتوای تصویر است. مثلا تصاویری که شفاف هستند و پس زمینه ندارند یا تصاویری که از رنگ‌های محدود در آن استفاده شده است از فرمت PNG استفاده می‌شود. در مقابل تصاویری که خروجی دوربین عکاسی هستند و رنگ‌های موجود در تصویر بسیار زیاد هستند از فرمت JPEG استفاده کنید. از GIF هم برای تصاویر متحرک استفاده می‌شود. فرمت WEPP نیز یک فرمت جدید است که هم به صورت فرمت فشرده‌ساز و هم فرمت بدون فشرده‌سازی مورد استفاده قرار می‌گیرد.استفاده نادرست از هر فرمت می‌تواند بی دلیل حجم تصویر را بالا ببرد. مسئله فقط فشرده سازی نیست. برخی مواقع خروجی PNG که یک فرمت بدون فشرده سازی است حجم کمتری نسبت به خروجی JPEG با فشرده سازی دارد، البته که در اکثر مواقع عکس این موضوع درست است اما در مجموع یک فرمول خاص و مشخصی ندارد بلکه کاملا وابسته به پارامترهای مختلف آن تصویر است. به عنوان نمونه در تصویر زیر مشاهده می‌کنید که خروجی JPEG یک تصویر حدود 80 درصد حجم کمتری نسبت به خروجی PNG همان تصویر دارد.فرمت PNG با حجم 232 کیلوبایتفرمت JPEG با حجم 42 کیلوبایتهمانطور که مشاهده می‌کنید فرمت JPEG این تصویر بدون تغییر محسوس در کیفیت، 81 درصد حجم کمتری نسبت به نمونه PNG دارد.حذف اطلاعات متای تصاویرداده‌های متا (meta data) در واقع داده‌های مرتبط با تصویر هستند که در داخل تصویر ذخیره می‌شوند. برای مثال تصویری که شما با تلفن همراه خود می‌گیرید حاوی داده‌هایی مانند تاریخ و زمان ثبت تصویر، اطلاعات دوربین ثبت کننده تصویر و ... می‌باشد که وجود آن‌ها برای نمایش تصویر در وبسایت‌ها ضرورتی ندارد و فقط باعث بالاتر رفتن حجم این تصاویر می‌شود. این اطلاعات در حدی هستند که گاهی اوقات حجم آن‌ها به 40 کیلوبایت نیز می‌رسد و شما با حذف این داده‌ها می‌توانید حجم تصویر خود را 40 کیلوبایت کمتر کنید. شما می‌توانید از ابزارهای آنلاین برای نمایش، ویرایش و حذف این داده‌ها استفاده کنید.تغییر اندازه تصاویرتغییر اندازه تصاویر یکی از موثر‌ترین راه‌ها برای کاهش حجم تصاویر است. تصور کنید شما یک تصویر به طول و عرض 2000 پیکسل برای نمایش در یک از قسمت از وبسایتتان دارید. این قسمت از وبسایت یک جعبه به طول 500 پیکسل (در بزرگترین حالت خود) می‌باشد. توجه کنید که هیچ نیازی نیست که تصویری به طول 2000 پیکسلی را در یک جعبه به طول 500 پیکسل به نمایش بگذارید. شما به راحتی می‌توانید سایز این تصویر را مطابق اندازه جعبه خود تغییر دهید و در نهایت از حجم تصویر خود بکاهید. یادتان باشد هیچ نیازی به نمایش یک تصویر بزرگتر در یک جعبه کوچک‌تر وجود ندارد و شما باید مطابق با اندازه محل نمایش تصویر، اندازه تصویر خود را تنظیم کنید.کاهش کیفیت تصویربرخی از فرمت‌ها مانند فرمت JPEG این قابلیت را به شما می‌دهند تا کیفیت تصویر خود را انتخاب کنید و مطابق این کیفیت یک خروجی از تصویر دریافت کنید. شما با استفاده از این خصوصیت به راحتی می‌توانید حجم تصاویر خود را کاهش دهید. هیچ نیازی به خروجی با بالاترین کیفیت (100) نیست بلکه می‌توان تصاویر را با کیفیت پایین‌تر (در محدوده 60 تا 80) نیز خروجی گرفت. البته باید توجه کنید که هر چه این رقم پایین‌تر باشد کیفیت تصویر شما نیز کمتر می‌شود اما شما می‌توانید عددی را برای تصویر خود پیدا کنید که با این تغییر کیفیت به چشم کاربر نهایی محسوس نباشد. در تصاویر زیر 3 نمونه از خروجی با کیفیت‌های مختلف برای شما نشان داده شده است.کیفیت ۱۰۰٪ با حجم ۲۲۷ کیلوبایتکیفیت ۸۰٪ با حجم ۶۰ کیلوبایتکیفیت ۲۵٪ با حجم ۲۰ کیلوبایتهمانطور که مشاهده می‌کنید، با کاهش 20 درصدی کیفیت بدون تغییر محسوس در کیفیت تصویر نمایش داده شده می‌توان حجم تصویر را تا 74 درصد کاهش داد. تصویر با کیفیت 25% حتی حجم کمتری دارد اما در مقابل آن کیفیت پایین تصویر کاملا مشهود است در نتیجه به عنوان یک عکس مناسب برای نمایش کاربردی ندارد!فشرده سازی تصاویرفشرده سازی یکی دیگر از راه‌های کاهش حجم تصویر می‌باشد که معمولا با تغییر اندازه یا تغییر کیفیت تصویر به اشتباه گرفته می‌شود. فشرده سازی در واقع به معنی کاهش حجم تصویر بدون تغییر در اندازه و کیفیت تصویر است. برای مثال شما از طریق این وبسایت می‌توانید حجم تصاویر PNG خود را تا 75 درصد کاهش دهید در صورتی که این فرمت یک فرمت بدون فشرده سازی است و این تغییر حجم هیچ تاثیری در کیفیت تصویر خروجی ندارد.مطابق راهکارهایی که تا اینجا با آن‌ها آشنا شدید، به راحتی می‌توانید حجم تصاویر مورد استفاده در وبسایت مورد نظرتان را کاهش دهید و در نتیجه حس بهتری را در تجربه کاربری به کاربران خود منتقل کنید. یکی از بهترین ابزارهای آنلاین که برای فشرده سازی، بهینه سازی، تغییر در اندازه، کیفیت و فرمت تصاویر استفاده می‌شود squash است که توسط تیم گوگل پیاده سازی شده است. شما با استفاده از این ابزار می‌توانید به راحتی و بین دو فرمت، دو نوع تنظیمات متخلف و یا تصویر اصلی و تصویر فشرده‌سازی شده خود مقایسه ظاهری انجام دهید تا بتوانید بهترین تنظیمات ممکن را از تصویر مورد نظر خود بگیرید. پیشنهاد می‌کنم حتما از این ابزار استفاده کنید.در این پست تلاش کردیم تا شما را با راهکارهای مختلفی برای کاهش حجم تصاویر آشنا کنیم. محتواهای تصویری بین 60 تا 85 درصد از ترافیک اینترنت را تشکیل می‌دهد و حتما کاهش حجم آن‌ها باعث افزایش سرعت وبسایتتان می‌شود. در پست بعدی در مورد HTTP Caching صحبت خواهیم کرد. اگر علاقه‌مندید تا پست بعدی ما را بخوانید، از این لینک استفاده کنید.اگر در مورد این مطلب سوال، نظر یا پیشنهادی دارید لطفا با ما به اشتراک بگذارید. همچنین منتظر پست‌های آتی ما در زمینه بهبود کارایی در فرانت‌اند باشید.

بهبود کارایی در فرانت‌اند: پیش واکشی پیوند (link prefetching)

محمد صالح فدایی — Fri, 16 Apr 2021 16:51:09 +0430

سلام به همه دوستان. طبق برنامه هفتگی که برای موضوع بهبود کارایی در فرانت‌اند در نظر گرفتم، این هفته به قابلیت پیش واکشی پیوند (link prefetching) خواهیم پرداخت. البته اگر پست اول از سری پست‌های بهبود کارایی در فرانت‌اند رو ندیدید بهتون پیشنهاد میکنم اون مطلب رو از دست ندید و اول از اونجا شروع کنین تا بتونید طبق یک مسیر مشخص پیش برید. https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-1-rqvcmqh0pwnk پیش واکشی لینکاگر بعد از بارگذاری صفحه و برای انجام یک عملیات خاص نیاز به منابع و فایل‌های خاصی دارید، از تکنیک پیش واکشی پیوند (link prefetching) استفاده کنید!پیش از آنکه وارد جزئیات مسئله شویم لازم است تا با قابلیت prefetch بیشتر آشنایی پیدا کنیم:پیش واکشی پیوند (به انگلیسی: link prefetching) به مرورگرها اجازه می‌دهد تا منابع مشخصی را پیش از اجرا بارگذاری کنند. این عمل باعث افزایش سرعت و رندر صفحه وبسایت شما (در مقایسه با استراتژی‌های عادی) می‌شود.چرا؟پیش واکشی پیوند به مرورگر این اجازه را می‌دهد تا مخفیانه منابع ضروری را که در آینده (بعد از اتمام بارگذاری صفحه) مورد نیاز است را دریافت کند. مرورگر قادر است این منابع را در حافظه نهان (cache) خود ذخیره کند و هر زمان که به این منابع نیاز بود، سریع محتوای ذخیره شده را استفاده کند. زمانی که بارگذاری صفحه جاری به پایان رسید و پردازنده بیکار (idle) شد، مرورگر شروع به دانلود این منابع می‌کند؛ و در زمان پاسخ به یک عملیات خاص (در حالی که منابع مورد نیاز برای این عملیات از قبل توسط مرورگر دریافت شده است)، عملیات سریعا اجرا خواهد شد.داستان چیست؟شاید بهتر است برای آن دسته از دوستانی که ممکن است با این مکانیزم آشنایی نداشته باشند کمی این موضوع را شرح دهیم.تصور کنید که وبسایت شما یک اسلایدر در میانه صفحه دارد. این اسلایدر از یک کتابخانه نسبتا سنگین مانند swiper استفاده می‌کند. مطابق معمول شما منابع مربوط به این کتابخانه را (در بدترین حالت) در بخش head وبسایت خود قرار می‌دهید. البته اگر بخواهید وبسایتتان کمی سریع‌تر به نمایش در بیاید ترجیح می‌دهید که منابع این کتابخانه را (در حالت معمول) در انتهای بخش body خود قرار دهید تا منابع مربوط به این اسلایدر بعد از نمایش صفحه بارگذاری و پردازش شوند. در هر دو این حالت‌ها منابع مربوط به اسلایدر توسط مرورگر کاربر دانلود خواهد شد. اما این تمام ماجرا نیست. چرا که مرورگر پس از دانلود ، مدت زمانی را صرف تجزیه (parse)، کامپایل (compile) و اجرای (execute) این منابع (برای مثال اگر جاوا اسکریپت باشد) می‌کند. در نتیجه حتی اگر کاربر به میانه صفحه برای مشاهده این اسلایدر نرسد، هزینه‌های مربوط به دانلود و مصرف رم و پردازنده برای پردازش این کتابخانه را همین الان هم پرداخت کرده است. به زبان ساده‌تر شما بیهوده منابع کاربر را برای چیزی که به آن نیازی ندارد مصرف کرده‌اید.حال تصور کنید قابلیت این را داشتید تا هر زمان که کاربر به میانه صفحه و درست پیش از مشاهده اسلایدر رسید، کدهای مربوط به اجرای این اسلایدر را فراخوانی شوند. در این صورت هر زمان که کاربر به قسمتی از صفحه رسید که اسلایدر در آن قرار دارد تمام عملیات مورد نیاز برای نمایش و اجرای این اسلایدر انجام می‌شد و کاربری که گذر آن نیز به این اسلایدر نمی‌افتاد نیازی به عملیات نداشت.حال اگر این قابلیت را پیاده سازی کنید، متوجه خواهید شد این نوع بارگذاری ممکن است عملیات مربوط به اسلایدر را مختل کند. چرا که این اسلایدر اصطلاحا به صورت تنبل بارگذاری شده است (lazy loading) و زمانی که کاربر روی دکمه‌های اسلایدر کلیک می‌کند اتفاقی نمی‌افتد. دلیل هم واضح است؛ مرورگر در حال دانلود و بارگذاری منابع مربوط به این اسلایدر است و در واقع اسلایدر هنوز راه‌اندازی نشده است تا بخواهد عملیاتی انجام دهد. در نهایت این استراتژی که باعث افزایش سرعت و کارایی وبسایت شما می‌شود در کاهش تجربه کاربری (UX) شما تاثیر می‌گذارد.اینجا دقیقا جایی است که پیش واکشی پیوند (link prefetching) وارد عمل می‌شود. شما منابع مربوط به اسلایدر را از طریق این قابلیت به مرورگر معرفی می‌کنید. مرورگر نیز هر زمان که بارگذاری منابع مهم و ضروری وبسایتتان را تکمیل کرد و اصطلاحا به حالت بیکار درآمد، این منابع را پیش از آنکه کاربر به محدوده مورد نظر برسد دانلود می‌کند. زمانی که کاربر به محدوده نمایش اسلایدر رسید، چون منابع مورد نیاز از قبل دریافت شده و در حافظه نهان مرورگر موجود است در نتیجه فقط مسائل مربوط به راه اندازی و اجرای کدهای اسلایدر باقی می‌ماند و می‌توان گفت اجرای این عملیات آنقدر سریع است که در اکثر مواقع کاربر هیچ تفاوتی را با حالت اول احساس نخواهد کرد. در صورتی که شما به واسطه این قابلیت کارایی وبسایت خود را افزایش داده‌اید و با بارگذاری تنبل منابع غیر ضروری، محتوای اولیه وبسایت خود را سریع‌تر به کار نشان داده‌اید.افزایش سرعت بارگذاری اولیه وبسایتمعمولا برای نمایش محتوای اولیه وبسایت نیاز به اسکریپت‌های زیادی نیست. در این حالت فقط لازم است تا منابعی را که برای نمایش و عملکرد صحیح محتوای اولیه صفحه (قسمت بالایی صفحه که کاربر در زمان بارگذاری می‌بیند) نیاز است را بارگذاری کنید و بارگذاری باقی منابع را به بعد از اتمام عملکرد اصلی مرورگر موکول کنید. یعنی عملا منابع مورد نیاز شما به دو بخش تقسیم می‌شوند:منابع ضروری: که برای بارگذاری و نمایش محتوای اولیه صفحه ضروری هستند و مرورگر بدون بارگذاری آن‌ها قادر به نمایش هیچ محتوایی به کاربر نیست. برای مثلا اگر وبسایت شما یک اپلیکشن تک صفحه‌ای (SPA) است برای بارگذاری اولیه به یکی از فریم‌ورک‌های جاوا اسکریپت نیاز است تا محتوا را برای کاربر رندر کند.منابع غیر ضروری: که برای باگذاری بخش‌های دیگر وبسایت (که در زمان بارگذاری از دید کاربر پنهان هستند) استفاده می‌شود. مثلا منابع مورد نیاز برای نمایش ویدئویی که در میانه صفحه قرار دارد در این دسته قرار می‌گیرد چرا که کاربر بلافاصله بعد از بارگذاری به سراغ پخش این محتوا نخواهد رفت.مطابق این دسته بندی، می‌توان بخش عمده‌ای (و نه همه) از منابع غیر ضروری را از طریق قابلیت پیش واکشی پیوند بارگذاری کرد. یعنی زمانی که مرورگر بعد از پردازش‌های مهم، ضروری و اصلی به حالت بی‌کار در آمده است. به همین دلیل صفحه مورد نظر (که شامل تعداد محدودی منابع ضروری برای نمایش است) سریع‌تر بارگذاری می‌شود.کاهش زمان مسدود شدن رشته اصلی پردازندهمتاسفانه موضوع کارایی فقط به دانلود و سرعت و حجم کم و موضوعات این چنینی خلاصه نمی‌شود. به علاوه این مسائل، مسئله مهم دیگر تجزیه، کامپایل و اجرای کدهای جاوا اسکریپت است که شما در صفحه خود استفاده می‌کنید. هر چقدر حجم کدهای مورد استفاده بیشتر باشد، علاوه بر اینکه نمایش صفحه مدت زمان بیشتری طول می‌کشد، زمان بیشتری برای تجزیه، کامپایل و اجرای کد‌ها نیز مورد نیاز است. اگر شما بخواهید همه کدهای جاوا اسکرپیت مورد استفاده خود را در ابتدای بارگذاری صفحه اجرا کنید باعث مسدود شدن رشته اصلی پردازنده می‌شوید. در این مدت زمان صفحه شما هیچ واکنشی به کنش کاربر نشان نمی‌دهد و هر عمل توسط کاربر با تاخیر در اجرا مواجه می‌شود. پس اگر شما بتوانید دریافت، پردازش و اجرای منابع غیر ضروری صفحه را به بعد از زمان بیکار شدن مرورگر موکول کنید، رشته اصلی پردازنده شما مدت زمان کمتری مسدود شده و واکنش به کنش کاربر سریع‌تر اتفاق می‌افتد.چگونه؟قبل از اینکه به نحوه پیاده سازی این قابلیت بپردازیم، بهتر است بدانید که میزان پشتیبانی مرورگرها از این ویژگی چقدر است؟ در حال حاضر 95 درصد ایرانیان از مرورگرهای استفاده می‌کنند که از این قابلیت به خوبی پشتیبانی می‌کنند. متاسفانه از بین مرورگرهای پر استفاده فقط مرورگرهای سافاری اپل از این قابلیت (حتی در آخرین نسخه!!!) پشتیبانی نمی‌کنند.مرورگرهایی که از قابلیت پیش واکشی پشتیبانی می‌کنندبرای استفاده از این قابلیت کافی است منابع مورد نیاز خود را با استفاده از تگ لینک (link) و به صورت زیر تعریف کنید و آن را در بخش head کدهای HTML صفحه وبسایت خود قرار دهید. برای استفاده از این قابلیت نیازی به تعیین نوع فایل ندارید:همچنین شما می‌توانید در HTTP Header پاسخ صفحه HTML مورد نظر نیز این‌کار را انجام دهید:Link: ; rel=prefetchهمچنین پلاگین‌هایی وجود دارند که به در خودکار سازی این فرایند در ابزارهای ساخت کمک می‌کنند. برخی از ابزارهای ساخت مانند Webpack نیز به صورت ذاتی و بدون نیاز به پلاگین (با استفاده از قابلیت کامنت جادویی) این قابلیت را در اختیار شما قرار می‌دهند.در این پست تلاش کردیم تا به زبان ساده با استفاده از قابلیت پیش واکشی پیوند (link prefetching)، به شما در بالا بردن کارایی و سرعت بارگذاری صفحه وبسایتتان کمک کرده باشیم. استفاده از این قابلیت می‌تواند تا حد زیادی به بهبود کارایی وبسایت شما کمک کرده و کلید افزایش سرعت و کارایی وبسایتتان باشد.در پست بعدی به یکی دیگر از روش‌های بهبود کارایی در فرانت‌اند می‌پردازیم. اگر علاقه‌مند به این سری از پست‌ها هستید لطفا پست بعدی ما را نیز بخوانید.اگر در مورد این مطلب سوال، نظر یا پیشنهادی دارید لطفا با ما به اشتراک بگذارید. همچنین منتظر پست‌های آتی ما در زمینه بهبود کارایی در فرانت‌اند باشید.

بهبود کارایی در فرانت‌اند: خلاصه سازی HTML

محمد صالح فدایی — Fri, 09 Apr 2021 20:15:54 +0430

سلام به همه دوستان. بعد از سال‌ها دوری از محیط ویرگول، تصمیم گرفتم از این رسانه جهت انتشار سری جدیدی از مطالبم استفاده کنم. من محمد صالح فدائی، توسعه دهنده فرانت‌اند هستم که البته تجربه کار با پلتفرم‌ها، زبان‌های مختلف برنامه نویسی و انواع و اقسام ابزارهای تخصصی (به خصوص در حوزه طراحی رابط کاربری) رو دارم؛ اما در نهایت فرانت‌اند رو به عنوان تخصص نهایی خودم از بین تجربیات متفاوتم انتخاب کردم. در این سری از مطالب در نظر دارم به مباحث کارایی (Performance) در فرانت‌اند بپردازم. اگر این مباحث براتون جذابه مطالب من رو دنبال کنید و هر هفته منتظر یک پست جدید در این زمینه باشید.مدت زمان زیادی نیست که مسائل مربوط به کارایی در فرانت‌اند به شدت نُقل محافل شده است. دلیل این امر هم واضح است: افزایش پیچیدگی در این حوزه بر روی تجربه کاربری (UX) کاربران تاثیر گذاشته بود و وبسایت‌های پیشرفته هر روز کندتر و سنگین‌تر از دیروز ظاهر می‌شدند. خلاصه داستان هم این شد که گوگل به عنوان پیشرو در این زمینه با صرف بودجه‌های هنگفت به طرق مختلف (ساخت ابزار، ایجاد محدودیت‌ها، حمایت‌های مالی و...) به توسعه‌دهندگان یادآوری کرد که محصولاتشان از طریق اینترنت به دست کاربر نهایی می‌رسد و کاربران تقریبا از طریق هر پلتفرم و سیستم عاملی توانایی دسترسی به این محصولات را دارند پس بیشتر باید مراقب مباحث مربوط به کارایی و اجرا شدن بهینه، سریع و درست محصول خود باشند.در این سری از مطالب بهبود کارایی در فرانت‌اند قرار است مسائل مختلف (و البته مرتبط) به مباحث کارایی را به صورت ریز (و شاید طولانی) بررسی کنیم و راه حل‌هایی را برای حل این مسائل ارائه دهیم. در این سری از پست‌ها بعد از شرح کوتاهی از مسئله، دو عنوان چرا و چگونه؟ داریم که در آن‌ها به چرایی اهمیت این مسئله و چونگی حل آن می‌پردازیم. پس با این سری از مطالب همراه ما باشید.خلاصه سازی HTMLتمامی کدهای HTML موجود در خروجی نهایی (Production) باید خلاصه سازی شده و کامنت‌ها، فضاهای خالی و خطوط اضافی حذف شوند.قبل از آنکه به جزئیات بیشتری بپردازیم لازم است تا توضیحی کوتاه برای آن دسته از افرادی (که احیانا) نمی‌دانند خلاصه سازی چیست ارائه دهیم:خلاصه‌سازی کد منبع (به انگلیسی: Minification یا Minify) در زبان‌های برنامه‌نویسی اشاره به رفع بایت‌های غیرضروری مانند فضاهای خالی و فاصله‌ها از کدهای منابع دارد. خلاصه سازی کد منبع مخصوصاً برای زبان‌های تفسیرشده مانند جاوا اسکریپت بسیار کاربردی است، زیرا باعث کاهش حجم فایل‌ها و افزایش سرعت تحویل داده به کاربران در اینترنت می‌شود. [منبع]چرا؟در خلاصه‌سازی هر چیز اضافی (مانند کامنت‌ها، فضاهای خالی اضافه یا extra spaces و...) در خروجی نهایی حذف شده و در مجموع کدها خلاصه‌تر به دست کاربر نهایی می‌رسند. این عملیات باعث بالا رفتن کارایی در زمان بازدید کاربر از وبسایت مورد نظر می‌شود. اگر مایلید که جزئیات بیشتری بدانید که چرا این عملیات کارایی را بالا می‌برد با ما همراه باشید.کد منبع (مرتب)کد خلاصه سازی شدهکدهای منبع و خروجی نهاییدر بسیاری از زبان‌های برنامه نویسی کدهای منبع با خروجی نهایی متفاوت هستند. خروجی نهایی در طی عملیات Compile از روی کدهای منبع ایجاد می‌شود. اما در جاوا اسکریپت این عملیات وجود ندارد و شما به راحتی می‌توانید کدها را به همان صورتی که نوشتید در مرورگر به اجرا درآورید. در واقع عملیات Compile توسط مرورگر کاربر و بعد از دانلود کدها انجام می‌شود و برنامه نویس فرانت‌اند نیازی به تولید کدهای Compile شده ندارد.حال تصور کنید که می‌خواهید کدهای HTML را خلاصه سازی کنید. طی این فرایند کدهای HTML شما در بیشترین حالت ممکن خلاصه سازی شده و خروجی نهایی برای توسعه دهنده (و هر کاربر دیگر) خوانایی بسیار پایینی خواهد داشت و به همین واسطه قابلیت توسعه ندارند. اگر هم بخواهید بعد از هر ویرایش کدها را یک دور خلاصه سازی کنید و سپس آن‌ها را بر روی سرور قرار دهید و دوباره از روی کدهای خلاصه سازی شده (و با مرتب کردن آن‌ها با ابزارهای مرتب سازی) توسعه و ویرایش بعدی را انجام دهید که قطعا دارید وقت خود را تلف می‌کنید. به همین دلیل است که نیاز دارید در جاوا اسکریپت نیز کدهای منبع خود را از خروجی نهایی جدا کنید تا بتوانید به راحتی کدهای خود را (از طریق کدهای منبع) توسعه دهید و در نهایت خروجی نهایی را نیز در بهترین حالت ممکن به دست کاربر برسانید. اما حواستان باشد که خروجی نهایی در اینجا به معنی compile نیست و خروجی نهایی شما فقط با اعمال یکسری بهینه سازی‌ها همان کدهای معمول HTML، CCS و JS هستند.خلاصه سازی باعث کاهش حجم می‌شودشما توسعه دهنده کدهایی هستید که از طریق اینترنت به دست کاربر می‌رسد. در نتیجه حجم کدها اولین (و البته ساده ترین) متغیری است که باید در مباحث کارایی در نظر بگیرید. کاربران اینترنت با دستگاه‌های مختلفی (از ارزان‌ترین و کندترین تا گران‌ترین و سریع‌ترین) به این شبکه متصل می‌شوند و اکثرا سرعت اینترنت محدودی دارند. خلاصه سازی باعث می‌شود که مرورگر کاربر حجم کمتری را دانلود کرده و در نتیجه صفحه وبسایت مورد نظر را سریع‌تر ببیند. اینجا دقیقا همان نقطه‌ای است که کارایی (Performance) نمایان می‌شود. هر چقدر حجم کدهایی که به دست کاربر می‌رسد کمتر باشد کارایی وبسایت شما افزایش می‌یابد.تاثیر خلاصه سازی در زمان بارگذاری صفحهبا تعاریف بالا، ممکن است هنوز قانع نشده باشید که واقعا چرا باید کدهای HTML را خلاصه‌سازی کنید و یا این خلاصه‌سازی در نهایت چه تاثیری بر روی تجربه نهایی کاربر دارد.به همین دلیل قرار است به شما نشان دهیم که در دنیای واقعی تفاوت حجم کدهای HTML خلاصه سازی شده و مرتب (مناسب برای زمان توسعه) چقدر است؟ برای نشان دادن این تفاوت ما از کدهای HTML سایت‌های دیجی کالا، دیوار، ویرگول، آچاره و آپارات استفاده می‌کنیم:همانطور که می‌بینید، کدهای HTML خلاصه سازی شده از نظر حجمی به طور متوسط 42% کوچک‌تر از کدهای مرتب هستند و این یعنی در نسخه خلاصه سازی شده، کدهای HTML حدود 42% سریع‌تر توسط مرورگر کاربر دانلود می‌شوند. پس حتما در خروجی نهایی، کدهای HTML را خلاصه کنید.اولین محتوایی که توسط مرورگر دانلود می‌شودزمانی که مرورگر به سرور برای بارگذاری یک صفحه (یا بهتر است بگوییم یک مسیر) درخواست می‌دهد، کدهای HTML اولین محتوایی است که به عنوان پاسخ دریافت می‌شود. البته مدت زمانی که کاربر برای بارگذاری یک صفحه درخواست می‌دهد تا مشاهده آن صفحه، به پارامترهای مختلفی وابسته است و حجم کدهای HTML و مدت زمانی که طول می‌کشد این کدها دانلود شوند یکی از این پارامترهاست. در نتیجه هر چه این کدها حجم کمتری داشته باشند نمایش اولیه وبسایت سریع‌تر اتفاق می‌افتد و این یعنی FCP پایین تر.چگونه؟ابزارهای زیادی برای خلاصه‌سازی کدهای HTML وجود دارند. اگر می‌خواهید به طور دستی و ابزارهای آنلاین (که توصیه نمی‌شود اما شاید گاهی مجبور به انجام باشید)، سایت‌های Minify Code و Refresh-SF استفاده کنید. اگر قصد دارید در VSCode و از طریق پلاگین‌ها این عملیات را انجام دهید، می‌توانید به سراغ پلاگین Minify بروید.برای آن دسته از توسعه‌دهندگانی که از ابزارهای ساخت مانند Webpack و Rollup و... استفاده می‌کنند نیز ده‌ها پلاگین و پکیج برای انجام این عملیات وجود دارد که می‌توانند از آن‌ها در ابزارهای ساخت مورد نظر خود بهره بگیرند. برای نمونه این پلاگین برای انجام فراینده خلاصه سازی کدهای HTML در Webpack توسعه داده شده است.در این پست سعی کردیم به صورت جزئی به مسئله‌ای ساده اما کاربردی در بحث کارایی بپردازیم. در پست‌های آتی نیز به سراغ مباحث مشابه خواهیم رفت که رفته رفته پیشرفته‌تر می‌شوند اما تمام سعی من بر این است که این مباحث را ساده و قابل درک بیان کنم. اگر دوست دارید پست بعدی از سری پست‌های موضوع بهبود کارایی در فرانت‌اند را بخوانید، بر روی لینک زیر کلیک کنید: https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-2-rsk44ekd1bfb لطفا اگر نکته نظر یا پیشنهادی دارید از طریق نظرات با من در ارتباط باشید.

فونت در وب، زیبایی و تجربه کاربری : قسمت چهارم

محمد صالح فدایی — Mon, 18 Jun 2018 14:13:19 +0430

رسیدیم به قسمت آخر از نوشته‌های وب فونت...تا اینجا حدودا با سازوکار وب فونت‌ها آشنا شدیم(که البته هیچ وقت جای تجربه رو نمیگیره اما برای شروع کافیه). تو این قسمت می خوام در مورد بکارگیری وب فونت‌ها در سی‌اس‌اس (CSS) صحبت کنم.تعریف وب فونت در فایل‌های CSSدر نظر بگیرید که با توجه به نوشته‌های پیشین، وب فونت مناسبی پیدا کردید. کافیه اون رو به فایل‌های CSS اضافه کنید و از اون تو وبسایت مورد نظرتون استفاده کنید.درسته این بخش از این نوشته رو میتونید در سایت‌های دیگه هم پیدا کنید اما نکاتی هست که لازم دیدم روشون فوکوس کنم.برای اضافه کردن یه فونت به CSS لازمه که از تگ زیر استفاده کنید. @font-face { font-family: FontName; font-weight: normal|bold|100|200|...|900; font-style: normal|italic; src: ...; }کد بالا شامل خصوصیاتی هست که باید در کدتون قرار بدید تا بهترین نتیجه رو دریافت کنید.اولین مورد font-family هست. سعی کنید برای این خصوصیت مقداری به صورت پیوسته در نظر بگیرید. مثلا شما میتونید فونت ایران سنس رو به دو صورت IRAN Sans و IRANSans بنویسید. توصیه من اینه که حالت دوم رو انتخاب کنید تا خیالتون از این بابت راحت باشه.(چون داخل تعدادی از مقاله‌های منتشر شده در این مورد توصیه شده که برای نام هایی که کاراکتر فاصله دارند نیاز هست که اسم فونت بین کوتیشن قرار بگیره!!)مورد دوم font-weight هست که میتونید مقابل اون مقادیر 100 تا 900 و با گام‌های 100 تایی قرار بدید (100و200و300و...). همچنین آزادید که از دو کلمه (bold= 700) و (normal = 400) استفاده کنید. موردی که هست اینه که در برخی مرورگر‌های منسوخ شده (یا حتی وب‌ویو‌های پیشفرض در اپ‌های اندرویدی) از مقدار عددی وزن فونت پشتیبانی نمیشه و فقط دو کلمه normal و bold رو برای این خصوصیت قبول میکنن. پس برای پشتیبانی از همه حالات، برای دو وزن 400 و 700 دو font-face جدا که مقادیر کلمه ای اون ها رو هم شامل میشه اضافه کنید.مثلا اگر فونتی دارید که 4 وزن 300 و 400 و 500 و 700 داشت 4 فونت فیس برای این 4 مقدار و دو فونت فیس هم برای حالت normal = 400 و bold = 700 ایجاد کنید که در مجموع میشه 6 عدد فونت فیس.مورد سوم هم استایل فونت هست که برای فونت های فارسی مقدارش normal ذکر میشه(از مقدار "italic" یا حالت اوریب برای فونت هایی که این خاصیت رو دارند استفاده کنید).نکته مهم: دو خصوصیتی که ذکر شد مربوط به ساختار فونت هست نه تعیین استایل فونت در وب. یعنی وقتی شما یک فونتی دارید که وزن و استایل مشخصی داره تو این قسمت از فونت فیس اون رو ذکر کنید.و اما در مورد خصوصیت src باید از روش زیر استفاده کنید:src: url('/fonts/fontname.eot'); src: local('font name'), local('font-name'), url('/fonts/fontname.eot?#iefix') format('embedded-opentype'), url('/fonts/fontname.woff2') format('woff2'), url('/fonts/fontname.woff') format('woff'), url('/fonts/fontname.ttf') format('truetype');همون طور که مشخصه از src دوبار استفاده شده. خط اول استفاده از فونت eot هست که در ورژن‌های پایین تر از IE9 استفاده میشه. خط بعدی هم برای ورژن های جدیدتر مرورگر‌ها استفاده میشه. نکته‌ای که هست اینه که در حال حاضر شما باید این 4 فرمت رو استفاده کنید. اگر استفاده نکنید هیچ تضمینی نیست که در مرورگرهای قدیمی یا در انواع مرورگرها چه در ویندوز و چه در اندروید و ios و ... فونت مورد نظرتون نمایش داده بشه.بهترین فرمت‌های وب فونت woff و woff2 هست که سبک تر از فرمت های دیگه هست(woff2 با فشرده سازی جدید 30 درصد از فرمت woff سبک تر شده)؛ و بهتره بدونید که مرورگرتون بر اساس بهترین فرمت موجود، فونت رو دانلود می‌کنه و نه همه فونت هارو! این یعنی اگر مرورگر از فرمت woff2 پشتیبانی کنه فقط فایل woff2 رو دانلود می‌کنه و این یعنی سرعت بارگذاری بیشتر و حجم مصرفی کمتر در صفحه وب. نکته مهم: بهتره از دستور local هم استفاده کنید تا اگر کاربری این فونت رو روی سیستمش داشت نیاز به دانلود نداشته باشه(بارگزاری سریع صفحه وب). فقط کافیه اسم سیستمی فونت رو داخل کوتیشن در دستور local قرار بدید.البته اگر فونت مورد نظرتون چندین نسخه داره و شما میخواید کاربر با آخرین نسخه وبسایتتون رو نگاه کنه(و هر نسخه ای غیر از نسخه آخر رو سیستم کاربر نصب باشه) بهتره که دستور local رو حذف کنید تا کاربر با نسخه‌ای که شما بارگزاری کردید سایت رو ببینه.ممنون از اینکه این نوشته رو دنبال کردید/پایان

فونت در وب، زیبایی و تجربه کاربری : قسمت سوم

محمد صالح فدایی — Sun, 17 Jun 2018 10:25:56 +0430

رسیدیم به قسمت سوم این سری از مطالب در مورد وب فونت‌ها. تو این قسمت میخوام یکم تو بحث حرفه ای تر بشم تا بتونیم بازهم فونت مناسب رو برای وبسایت انتخاب کنیم.پس با من همراه باشید!وزن فونت در وبهمونطور که در قسمت پیشین توضیح دادم، برای انتخاب فونت مناسب برای وبسایت و اپلیکیشن موبایل شما باید حداقل یک فونت 3 وزنی در نظر بگیرید. اما موضوع به همینجا ختم نمیشه چرا که در وب شما قادرید 9 وزن رو برای یک فونت در نظر بگیرید.تعداد وزن‌های بیشتر این انعطاف رو به طراح میده که علاوه بر عدم استفاده از فونت دیگر، متن های مختلف یک وبسایت رو بر اساس اهمیت و جلوه ظاهری، با وزن های مختلفی از یک فونت ترکیب کنه. مثلا تصور کنید در قسمت سلایدر از فونت اکسترا بولد و یا حتی سیاه استفاده بشه یا در مواردی مثل تاریخ پست از وزن لایت و خیلی لایت!در کل استفاده از وزن های مختلف رو میشه در گروه بندی زیر خلاصه کرد:دسته اول: وزن‌های نازک و خیلی لایت و لایتدسته دوم: وزن‌های معمولی و مدیوم دسته سوم: وزن‌های تقریبا بولد و بولددسته چهارم: وزن‌های خیلی بولد و سیاهو در کل استفاده از اون ها رو میشه تو قسمت زیر خلاصه کرد:دسته اول -> متن‌های دارای اهمیت پایین از لحاظ بصری مثل توضیحات اضافی، پی نوشت ها، تاریخ پست‌ها و...دسته دوم -> متن‌های معمولی وبسایت و اپلیکیشن و مخصوصا متن‌هایی که تعداد کاراکتر های بالایی دارند و مخصوص مطالعه هستند (مثل متن پست ها، خبرها و ...)دسته سوم -> مناسب برای تیتر و عنوان (H1..H6) و قسمت‌های پر اهمیت در یک متندسته چهارم -> مناسب برای جملات حداکثر 3 تا 4 کلمه ای برای استفاده در اسلایدر، جدا کردن بخش های وبسایت و ... (استفاده خیلی کم)به همین دلیل بود که من استفاده از حداقل 3 وزن رو توصیه کردم تا حداقل در هر دسته، یک نماینده از وزن فونت رو داشته باشید.شخصیت فونتیکی از موارد دیگه ای که باید بهش توجه کنید شخصیت فونته. فونت‌ها هم دقیقا شخصیت خاص خودشون رو دارن. فونت های جدی، نرم، دوستانه و ... از جمله شخصیت هایی هست که میشه برای فونت‌ها ذکر کرد. اما این موضوع واقعا جای بحث داره. مثلا برای زبان انگلیسی فونت ها رو به دسته بندی هایی مثل سریف، سان سریف، دست نوشته و فانتزی تقسیم میکنند اما از نظر من وب فونت های ایرانی رو باید به این گونه دسته بندی کرد: تیز، نیمه گرد، گرد، دست خط و فانتزی. اینکه شخصیت وبسایت و برند شما به کدوم دسته بندی نزدیک تره رو باید خودتون تصمیم بگیرید. اما در کل میشه این خصوصیات رو به دسته بندی بالا مرتبط کرد:تیز: سنتی، خشک، محترم و با ثباتنیمه گرد: محترم و با ثبات اما امروزیگرد: ساده، صریح و دوستانهدست خط: شخصی و کودکانهفانتزی: با مزه و منحصر به فردهمینطور میشه برای دسته بندی بالا رو برای کاربردهای زیر به کاربرد:تیز: چاپ مطبوعات،مجلات، انتشار اخبار رسمی و ...نیمه گرد: شرکت‌های بزرگ، استارت آپ‌ها، محیط‌های جدی اما امروزی و ...گرد: شبکه‌های اجتماعی، محیط‌های تعاملی، اپلیکیشن‌های استفاده شخصی، وبسایت‌های شخصی و ...دست خط: محیط‌های کودکانه و دارای صمیمیت، وبسایت‌های شخصی و...فانتزی: عموما برای القای حس شوخ طبعی و صمیمیتمجوز در فونت هابحث مجوز‌ها(لایسنس) در حوزه فونت ها برای طراحان وب بحث تقریبا جدیدی هست. در ایران در حال حاضر سه نوع مجوز برای وب فونت ها و فونت های قابل استفاده در اپلیکیشن موبایل داریم:فونت های آزادفونت های تجاری/عمومیفونت های تجاری/اختصاصیدر بحث فونت‌های آزاد شما نیاز به خرید فونت ندارید و سورس فونت در اختیارتون هست و میتونید به رایگان استفاده کنید و حتی در اون دست ببرید و تغییر بدید. در ایران فعلا آقای صابر راستی کردار عزیز در این حوزه مشغول به کاره و تا به امروز برای همه فونت‌های خودش آپدیت منتشر میکنه.فونت‌های این سازنده جدا از اینکه رایگان هستند، خیلی زیبا و اصولی ساخته شدند.(نام فونت استفاده شده در ویرگول وزیر هست که ساخته آقای صابر راستی کردار عزیزه)در بحث فونت‌های تجاری اما شما قادر به تغییر فونت نیستید چرا که این فونت ها تحت اجازه نامه هستند و برای استفاده از فونت باید اون رو بخرید. فونت های تجاری/عمومی هزینه خرید بسیار پایینی دارند اما به صورت عمومی منتشر میشن و همه میتونن اون فونت رو بخرن.آقای مسلم ابراهیمی عزیز در این حوزه و از طریق وبسایت فونت ایران اقدام به فروش فونت‌های سطح بالای خودش به صورت عمومی کرده. در بحث فونت‌های تجاری/خصوصی هم افرادی مثل امید امامیان، رضا بختیاری فرد و... کار می‌کنند که البته برای شرکت و سازمان‌های خاص یک نوع فونت خاص طراحی میکنند و به صورت اختصاصی در ازای مبالغی در اختیار اون سازمان قرار میدن.ادامه دارد...

فونت در وب، زیبایی و تجربه کاربری : قسمت دوم

محمد صالح فدایی — Sat, 16 Jun 2018 22:17:16 +0430

در ادامه مطلب قبل که مروری بر گذشته وب فونت های فارسی بود، تو این قسمت میخوام در مورد ملاک‌های تعیین فونت مناسب برای وبسایت و اپلیکیشن موبایل صحبت کنم.ملاک اول: رسم الخط فارسیاولین موضوعی که تو انتخاب یک فونت مناسب برای اپلیکیشن موبایل و وبسایت‌های فارسی زبان باید توجه کنید این موضوع هست که فونت مورد نظرتون حتما از نوع رسم الخط فارسی باشه...قطعا وقتی پای فونت‌های عربی وسط میاد تعداد انتخاب بیشتری خواهید داشت اما باید بدونید که شما یک سرویس دهنده فارسی هستید و کاربران شما فارسی زبان هستند. مزیت رسم الخط فارسی نسبت به عربی اینه که کاربر شما هویت فارسی وبسایت و اپلیکیشن موبایلتون رو ناخودآگاه درک میکنه و خیلی راحت با نوشته ها و متن های موجود ارتباط برقرار می کنه.از طرفی باید این نکته رو بدونید که اعداد فارسی و عربی متفاوت هستند و استفاده از اعداد عربی جلوه و هویت سرویس شمارو مخدوش می کنه.مقایسه فونت عربی (بالا) با فونت فارسی (پایین)ملاک دوم: فرمت‌های متفاوت از فونتخب حالا که از میان فونت های فارسی یک فونت رو انتخاب کردید وقتشه که بررسی کنید که آیا این فونت نسخه‌های وب رو داره یا نه؟ بهترین و کامل ترین فرمت برای وب فونت وجود یک مجموعه چهار فرمتی از woff2, woff, ttf, eot هستش که پشتیبانی از فونتتون رو در نسخه های مختلف از مرورگر های مختلف تضمین می کنه. البته سرویس هایی هستند که فونت شمارو به فرمت‌های مختلف تبدیل کنند اما قطعا بهترین راه حل استفاده از فونت‌هایی هست که سازنده این فرمت ها رو در اختیارتون بزاره چون هم حجم کمتری دارند و هم از ایجاد مشکلات احتمالی جلوگیری میکنند.(توضیحات بیشتر در قسمت بعدی)جدول پشتیبانی از فرمت های مختلف وب فونت در نسخه های مختلف مرورگرهاملاک سوم: وزن‌های متنوعاز نظر مبانی تجربه کاربری برای ساخت وبسایت و اپلیکیشن موبایل بهتره که حداکثر دو نوع فونت (و حتی یک نوع) متفاوت (و البته نزدیک به هم) استفاده بشه. اما برای اینکه بتونید با این تعداد کم فونت وبسایت و اپلیکیشن موبایلتون رو طراحی کنید لازمه که فونت شما وزن های مختلفی رو داشته باشه. به نظر من باید حداقل وزن‌های bold, regular, light برای فونت مورد نظرتون موجود باشه.به هرحال هر وبسایت و اپلیکشین موبایلی بخش هایی مثل عنوان، زیر عنوان، لیست، متن و توضیحات داره که باید با وزن های مختلف (برای زیبایی بیشتر در بخش طراحی و الویت بندی اهمیت متن ها در بخش تجربه کاربری) نوشته بشن.پس برای انتخاب فونت مناسب حداقل 3 وزن بالا لازمه (هر چی بیشتر باشه دستتون باز تره)فونت ایران سنس (6 وزن)ملاک چهارم: هویت وبسایت و اپلیکیشن موبایلاستفاده از سه ملاک ذکر شده باعث میشه که شما بسیاری از انتخاب‌هایی که داشتید رو کنار بزارید. اما خبر خوب اینه که فونت‌هایی که باقی موندن برای کار شما مناسب هستن. اما حالا باید از بین فونت‌های موجود مناسب ترین فونت خودتون رو انتخاب کنید. تو این مرحله باید دقت کافی به خرج بدین چرا که قراره هویت بصری وبسایت و اپلیکیشن موبایلتون شکل بگیره. شما باید توجه کنید که در کدام موضوعات از فونت‌های تیز استفاده کنید یا اینکه در کدوم کارتون از فونت های گرد و به اصطلاح نرم. برای مثال برای یک سایت خبری که موضوعات رسمی رو پوشش میده بهترین انتخاب یک فونت نیمه گرد یا نیمه تیز (مثلا قلم ایران) توصیه میشه و یا برای وبلاگ ها و شبکه های اجتماعی که کاربران باهم تعامل دارند و حس تعامل و صمیمیت باید القا بشه، فونت‌های ایران سنس و وزیر توصیه میشه.(توضیحات بیشتر در قسمت های بعد)انتخاب فونت مناسب با توجه به موضوع وبسایتادامه دارد...

فونت در وب، زیبایی و تجربه کاربری : قسمت اول

محمد صالح فدایی — Sat, 16 Jun 2018 16:02:15 +0430

این روزها کمتر طراح رابط کاربری رو میبینیم که به موضوع انتخاب فونت در وبسایت‌ها و اپلیکیشن‌های موبایل توجه می کنه؛ اما اگر میخواید تجربه کاربری (UX) حرفه‌ای رو در وبسایت و اپلیکیشن موبایل پیاده سازی کنید باید یکبار برای همیشه با این موضوع کنار بیاید که انتخاب فونت مناسب باعث میشه کارتون یک پله نسبت به هر کار دیگه‌ای حرفه‌ای تر به نظر بیاد.در این پست میخوایم یه نگاه گذرا به تاریخچه فونت فارسی در وبسایت‌های فارسی در گذشته‌های نه چندان دور بندازیم.پرده اول: تاهوماتا همین دو الی سه سال پیش (و قبل تر) اگر به وبسایتی مراجعه می‌کردید شاهد یک نوع فونت خاص برای اکثر محتوای متنی در وبسایت ها بودید که در اکثر سیستم‌های کاربران یافت می‌شد. فونتی به نام Tahoma که شاه کلید طراحان وب (و پر استفاده‌ترین فونت) در اون زمان‌ها بود. البته این فونت به صورت پیش فرض در سیستم کاربران یافت میشد و همین مسئله کافی بود تا طراحان وب از اون به عنوان فونت پیشفرض در طراحی هاشون استفاده کنن. با اینکه این فونت برای نوشتار وب طراحی نشده بود و همچنین از رسم الخط فارسی به دور بود ولی به دلایلی که ذکر شد تنها انتخاب موجود برای طراحان وب بود.پرده دوم: فونت فیس هااما با گذشت زمان و با همه‌گیر شدن فونت‌فیس‌‌ها در کدهای CSS باعث شد تا دست همه طراحان وب در انتخاب فونت به نوعی باز بشه و بتونن فونت مورد نظر خودشون رو در فایل های CSS به اصطلاح جاساز کنن. اما برای طراحان ایرانی همه چیز به همینجا ختم نمیشد چرا که با وجود این قابلیت، فونت های فارسی که مخصوص استفاده در وب باشند تولید هنوز تولید نشده بودند.پرده سوم: استفاده از فونت های موجودتنها گزینه موجود در اون سال ها، تبدیل فونت های موجود به فونت های قابل استفاده در وب (در فرمت های مختلف) بود. همینجا نقطه عطفی برای ورود فونت هایی مثل فونت B Yekan به عرصه وب بود که البته از نظر فنی خیلی هم موفق نبود. دلیلش هم اینکه این فونت ها برای کارهای گرافیکی و موتور های رندر گیری متن در نرم افزار های گرافیکی بهینه سازی شده بودند و نمایش خیلی خوبی در محیط وب نداشتند. به علاوه اینکه اصولا تک وزن بودند و این یعنی انعطاف پذیری این فونت ها در محیط وب بسیار پایین بود. همچنین برخی از این فونت ها توسط افراد مختلف برای وب بهینه سازی شدند که باعث به وجود اومدن چندین نسخه ناپایدار از این نوع فونت ها شده بود.جمع بندیگرچه هر کدوم از پرده های ذکر شده یک انتخاب بود اما انتخابی از نوع محدود بود. یعنی طراحان وب محدود به همین موارد بودند و انتخاب دیگری نداشتند.اما در این روزها حداقل چندین انتخاب از وب فونت های فارسی داریم. همین دلیل کافیه که برای انتخاب فونت مناسب دست به کار بشیم. فونت هایی مثل ایران، ایران سنس، ایران یکان و ایران شارپ (از آقای مسلم ابراهیمی) و همچنین فونت هایی مثل وزیر، صمیم، شبنم و.. (از آقای صابر راستی کردار) حداقل انتخاب های پیش رو هستند که طراحان وب و اپلیکیشن موبایل باید به وجود اون ها و نوع کاربری خاص هر کدوم توجه کنند.ادامه دارد...