مخصوص اعضای ویژه 
چرا سرعت بارگذاری صفحه وب مهم است.
کاربران انتظار یک وبسایت سریع را دارند؛ اما چرا؟
این با یک مفهوم اساسی در UX همراه است: کنترل.
به عنوان انسان، ما دوست نداریم هر نوع کنترلی را در محیط خود از دست بدهیم.
سرعت بالای بارگذاری صفحه به کاربران چشماندازی را میدهد که کنترل بیشتری بر وبسایت داشته باشند. بنابراین بارگذاری سریع سایت به معنای داشتن کاربران شادتر است.
علاوهبراین، بر رتبهبندی موتور جستجو تاثیر میگذارد. گوگل از سال 2010 گفته است سرعت لود صفحه یک سیگنال بزرگ در الگوریتم رتبهبندی است.
به عنوان طراح ما گاهی اوقات به دلیل تمایل به زیبایی، بارگذاری سریع صفحات را قربانی زیبایی میکنیم. اما وقتی 80% زمان صفحه وب صرف دانلود مواردی مثل تصاویر، استایلها و اسکریپتها (که همه اینها ابزاری برای طراحی ما هستند) میشود، مسئولیت بهبود زمان بارگیری صفحه و تجربه کاربری از بین میرود، درست است؟
در حال حاضر طراحان تمایل به رویکرد جامعتری دارند.
اینها فقط مواردی نیستند که ما باید برای بهبود سرعت وبسایت بر آنها تمرکز کنیم، این کل فرآیند طراحی است. در اینجا نکاتی در مورد چگونگی سرعت بخشیدن آسان به وبسایت را بیان میکنیم:
1. با تفکر در مورد هدف وبسایت شروع کنید
هدف صفحه شما چیست؟
آیا میخواهید بازدیدکنندگان وبسایتتان یک امتحان رایگان بدهند و یا برای ارسال آدرس ایمیل است؟
با شروع در مورد نتیجهای که میخواهید در آن صفحه به دست آورید، میتوانید در بهترین مکان تغییرات را ایجاد کنید.
حتی قبل از اینکه شروع به دستکاری تصاویر، فشردهسازی تصاویر، برداشتن HTML، یا نوشتن اسکریپت کنید، مهم است زمان کافی برای درک اهداف ذینفعان و کاربران نهایی صرف کنید.
قبل از اینکه تنظیمات را انجام دهید، زمانی را صرف برنامهریزی کنید تا مطمئن شوید نتیجه نهایی به بهترین حالت ممکن تولید خواهد شد.
به سوالاتی مانند سوالات زیر فکر کنید:
به انجام کدام اقدامات نیاز دارم؟ (امتحان گرفتن، خرید، خواندن پستهای بلاگ)
عناصر ضروری که باید با آنها کار کنم کدام هستند؟ (تصاویر با کیفیت بالا و غیره)
همچنین توصیه میکنیم وقت خود را صرف بررسی صفحات مشابه در سایتهای رقیب خود کنید. به ویژه به سرعت بارگیری آنها با استفاده از ابزار سرعت توجه کنید. توجه داشته باشید عناصر مورد استفاده آنان برای جذب بازدیدکنندگان جهت انجام اقدامات چیست. چگونه صفحات خود را برای مشغول نگه داشتن کاربران ایجاد کردهاند؟
احتمالا آنها مخاطبان خود را به خوبی میشناسند، پس نگران نباشید.
طراحی هر صفحه با اهداف نهایی باعث میشود هر عنصر در هر صفحه سایت، هدف و عملکرد خاصی را دنبال کند.
عناصر اضافی برای سایت شما مضر هستند، پس هر چیز بیاهمیتی که در اختیار مخاطبان قرار میدهید را بردارید.
2. محتوا مساله کلیدی است، اما ساختار را نیز در نظر بگیرید!
معماری اطلاعات (IA) بر سازماندهی، ساختار، و برچسبگذاری محتوا در شیوهای موثر و پایدار تمرکز دارد.
تصاویر و سایر رسانهها میتوانند زمان زیادی را برای بارگذاری، نسبت به متن صرف کنند. گاهی اوقات بهبود سرعت بارگذاری صفحه وب میتواند با کاهش رسانهها بر روی وبسایتتان حل شود.
در ابتدا فکر کنید، آیا به این تصویر در این متن نیاز دارم؟ ارزشی که رسانه ارائه میدهد چیست؟
جوانب مثبت و منفی برای حذف و نگهداری رسانهها بر روی وبسایت وجود دارد که ما وارد آن نمیشویم.
با این حال در نظر بگیرید "هدف صفحه چیست" و مطمئن شوید که برای انتخاب رسانه این موضوع را در نظر گرفتهاید.
IA خوب خبر از استراتژی محتوا، طراحی رابط کاربری، طراحی تعامل و توسعه front-end میدهد.
زمان صرفشده بر روی معماری اطلاعات در نهایت به معنای محتوا، طراحی و کدی با ساختار بهتر است که به طور موثر به سرعت بخشیدن وبسایت شما کمک میکند.
این امر حتی بر سئوی شما نیز تاثیرگذار است. گوگل IA عالی شما را به منظور نگهداری تودهای از مقادیر باارزش خواهد دید و برای رتبه بالاتر در SERPs مزیت محسوب میشود.
3. استفاده از CSS به جای تصاویر
این مورد در رابطه با زمانی است که تصاویر بزگ و باکیفیت باعث قربانی کردن سرعت بارگیری صفحات میشوند. سایتهای تجارت الکترونیکی و عکاسی دو مثال عمده برای این مورد هستند. مشتریان اغلب تصاویر بزرگ و زیبا را همراه با سایتهای ریسپانسیو و سریع میخواهند.
اگر شما کاربرانی در این فضا دارید، این مساله مهم و با ارزش است که CSS را بررسی کنید، بنابراین بخشهای بصری با کیفیت میتوانند بدون نیاز به تصاویر ایجاد شوند.
صفحه شما سریعتر و با عملکردی بهتر بارگذاری خواهد شد.
نکته: مهم است که سایز style sheetهای خود را حداقل نگه دارید. از این رو بارگذاری کوتاهتر خواهد شد.
با این حال، اگر از تصاویر استفاده میکنید، مطمئن شوید که فرمت درستی را برای این کار انتخاب کردهاید.
4. بهینهسازی تصاویر برای بهبود سرعت بارگذاری صفحه
در هنگام بهینهسازی تصاویر، چند مورد وجود دارد:
هر چه تصویر بزرگتر باشد سرعت بارگیری صفحه کندتر میشود. اگر منطقهای که تصویر در آن قرار میگیرد حداکثر px300 باشد، تصویر باید با عرض 300 پیکسل بریده شود و در DPI72 ذخیره شود.
تصویر خود را در فرمت مناسب ذخیره کنید. رایجترین آنها عبارتند از: GIFS، JPEG، PNG، SVG.
بسته به ماهیت تصویر و نحوه استفاده آن، مشخص میشود که کدام فرمت مناسبتر است. برای سرعت بخشیدن به وبسایت خود، بهترین گزینه برای این کار را از لیست زیر انتخاب کنید:
GIFها تمام رنگهای یک تصویر را به یک پالت 256 رنگی متصل میکنند تا اندازه تصویر را کاهش دهند. این مورد برای تصاویری که بیش از حد پیچیده نیستند و دارای طیف رنگی محدود و ساده هستند عالی است. Gif همچنین از شفافیت پشتیبانی میکند، اما معمولا تلاش میکند تا اطراف لبهها را صاف کند.
JPEG فشردهسازی loosy را به تصاویر اعمال میکند، که میتواند باعث کاهش قابل توجهی از حجم فایل شود، با این حال ممکن است کاهش کیفیت بصری هزینهبر باشد. فرمت JPEG انتخاب رایجی برای فشردهسازی تصاویر است.
PNG یک فرمت قدرتمند قابل انعطاف است و از فشردهسازی lossless دادهها پشتیبانی میکند. ذخیرهسازی به عنوان فرمت PNG-8 به شما اجازه میدهد تصویر باکیفیتی را با یک اندازه فایل کوچک ذخیره کنید. PNG-24 و PNG-32 شفافسازی توسط محو کردن لبهها را پشتیبانی میکنند و باعث میشوند تصویر به صورت مجعد روی پسزمینه شفاف نمایان شود. با این حال، این فرمت معمولا به اندازه فایل بزرگتر منجر میشود.
SVG فرمت تصویر بردار بر مبنای XML است. یک طراح معمولا گرافیک برداری مانند یک آیکون یا تصویر را طراحی میکند و آن را با SVG ذخیره میکند، تمام اطلاعات بردار آن نگه داشته میشود. اندازه تصویر معمولا کوچک است، تصویر بدون از دست رفتن شفافیت ساخته میشود و از تعامل و انیمیشن پشتیبانی میکند.
با انتخاب بهترین تنظیمات برای هر فرمت، کیفیت، اندازه پالت و غیره را امتحان کنید و شما بهترین فرمت تصویر را پیدا خواهید کرد تا سرعت بارگذاری صفحه را به حداقل رسانید و درنهایت وبسایت خود را سریعتر کنید.
5. بهینهسازی طراحی برای کاربران موبایل
کاربران موبایل نسبت به کاربران دسکتاپ دارای اهداف متفاوتی هستند و معمولا اطلاعات را به صورت سریع و قابل هضم میخواهند. با اینکه بسیاری از کاربران موبایل مشکلاتی را در هنگام بارگیری وبسایت تجربه میکنند، رعایت کردن این امر یک روش آسان برای به دست آوردن مزیت رقابتی است.
در اینجا لیستی از اصلاحات سریع برای ایجاد سایت موبایل که بیشتر کاربرپسند باشد وجود دارد:
حذف تصاویر غیرضروری
استفاده از CSS3 برای شبیهسازی اثرات گرافیکی
استفاده از تصاویر تطبیقی برای دستگاههای کوچکتر
استفاده از پرسوجوهای رسانهای برای کنترل طرحبندی و گنجاندن عناصر صفحه
طراحی به وپژه برای تجربه موبایل؛ نه برای تجدیدنظر
6. کد خود را با کوچک کردن CSS، HTML و Javascript کمحجم سازید تا سرعت وبسایتتان بالا رود
برای بهینهسازی زمان بارگذاری وبسایت، فضاهای اضافی، خطوط شکسته و تورفتگیهای کد را حذف کنید تا صفحات شما تا حد ممکن کوچک و سبک شود.
این کار را میتوان با فشردهسازی فایل با استفاده از ابزاهای کمحجم کننده مثل YUI Compressor، Google Closure Compiler و cssminifier به دست آورد.
اما همیشه مطمئن شوید که اصل کد را برای تغییرات در آینده نگه داشتهاید.
7. پلاگینهای Jquery را حذف کنید! در عوض به CSS توجه کنید
آیا تا به حال پیش آمده است که در وبسایت از پلاگینهای زیادی استفاده کرده باشید که نمیدانید هر کدام چه هستند؟
قابلیت اضافه شده پلاگین بسیار عالی است، اما بسیاری از آنها میتوانند دلیل اصلی کندی سایت باشند.
راهحل چیست؟ دوباره استفاده از CSS را در نظر بگیرید. شما همان تاثیر یا عملکردی که پلاگین ارائه میدهد را به دست میآورید اما بدون دردسر از کار افتادن و ریسکهای امنیتی.
هر گونه پلاگین اضافهای که نیاز ندارید را حذف کنید که نه تنها سرعت بارگیری صفحه افزایش مییابد، بلکه هزینههای عملیاتی را نیز به میزان قابل توجهی کاهش میدهید.
8. قبل از اینکه سایت خود را آنلاین کنید، برخی از تستهای عملکردی را اجرا کنید
برخی ابزارهای رایگان خوبی وجود دارند که قبل از اینکه سایت خود را پابلیش کنید، سرعت سایتتان را تست میکنند:
Google PageSpeed Insights
Web Page Test Tools
Google Mobile-Friendly Test برای سنجش صفحات وب تا بررسی کند چقدر برای دستگاههای موبایل بهینه شده است.
Which loads faster، سایت شما یا رقیب شما سریعتر است؟ هدف پیدا کردن سریعترین مورد است.
طول میکشد تا سرعت کلی وبسایت شما را ارزیابی کند. تشخیص صفحات منحصربهفرد و تمرکز بر اصلاحات کوچک به شما کمک میکند سرعت وبسایت خود را بالا برید.
9. فریمورک خود را عاقلانه انتخاب کنید
قطعا برخی فریمورکهای ریسپانسیو عالی وجود دارد که استفاده از آنها بسیار آسان است.
شما تعداد زیادی پلاگین، تعداد زیادی CSS، SASS، Javascript و قالبهای آماده را میبینید.
با این حال این دارایی از تکنولوژیهای خوب بر عملکرد صفحات وب تاثیر میگذارند.
ایده خوب این است که از فریمورکهای ماژولار و موبایل پسند مثل Foundation از Zurb استفاده کنید.
این یک راه آسان برای انتخاب اجزا است. به جای دانلود کل فریمورک میتوانید به سادگی دانلود سفارشی را ایجاد کرده و فقط آنچه را که نیاز دارید انتخاب کنید. این کار اطمینان حاصل میکند که صفحات شما مجبور نیستند تا یک سری فایل CSS و جاوااسکریپت که شاید هیچ وقت به کار شما نیاید را بارگذاری کنند.
10. ایجاد CSS و JavaScript خارجی برای افزایش سرعت بارگذاری صفحه
به طور کلی استفاده از فایلهای خارجی بارگذاری صفحات را سریعتر میسازند، زیرا فایلهای جاوااسکریپت و CSS توسط مرورگر ذخیره میشوند (cache).
متناوبا، اگر از CSS در یک صفحه وب استفاده میکنید، CSS را در عنصر HEAD قرار دهید. این امر باعث میشود که صفحه سریعتر لود شده و نشان داده شود و میتواند این کار را به سرعت انجام دهد.
برای جاوااسکریپت، به سادگی اسکریپتها را به پایین صفحه انتقال دهید.
جمعبندی
گاهی اوقات میتوانیم با ایجاد گرافیک جذاب و طراحی پیچیده، سرعت بارگذاری صفحه را قربانی کنیم، پس عنصر تجربه کاربری را فراموش نکنید.
همه چیز در مورد کنترل است. هر چه کاربر احساس کنترل بیشتری داشته باشد، خوشحالتر و رضایتمندتر خواهد بود!
وقتی شما نیاز به وبسایت عملکردی دارید که علاوه بر بارگذاری سریع، ظاهر خوبی هم داشته باشد، پیادهسازی این نکات حتی سختپسندترین کاربران را نیز تحت تاثیر قرار میدهد.
نظرات کاربران در رابطه با این دوره