۱. اولین قدم تنظیم سایز فایلی است که می خواهید در آن کار کنید. بهتر است برای طراحی یک اینفوگرافیک اندازه فایل را کاغذ A3 با DPI 300 درنظر بگیرید. دلیل این انتخاب قابلیت چاپ بر پوسترهای A2 می‌باشد بدون اینکه کیفیت آن کاهش یافته باشد و درعین حال فضای قابل توجهی را در حافظه سیستم ذخیره می‌نماید.

۲. گام بعدی تنظیم رنگ پس زمینه است و در اینجا از بازه رنگی خاکستری کم رنگ تا سفید استفاده شده است. برای ناحیه خاکستری کد c4c4c4 و برای قسمت سفید کد fcfcfc درنظر گرفته شده است. این اقدامات باید در کادر تنظیمات Layer Style انجام شوند که این کادر با دوبار کلیک کردن بر گزینه Layer در Layers panel فعال می‌شود. برای این طراحی در قسمت داخلی رنگ سفید انتخاب شده است.

۳. برای ترسیم دایره باید از Ellipse tool استفاده نموده و یک دایره بزرگ در مرکز فایل بکشید. بهتر است Opacity را به ۰% و Storke Size را به ۳ تغییر دهید. بدین ترتیب می‌توان رنگ پس‌زمینه را از میان دایره مشاهده کرد.

۴. در یک لایه جدید بهتر است اشکال مدنظر خود را ترسیم کنید که این کار با استفاده از Pen tool میسر است. اشکال رسم شده در تصویر نشان داده شده‌اند.

۵. در Paths tab می توانید آخرین path کشیده شده را ببینید. دستور Ctrl+right-click را بر آن اجرا کرده، Fill Path را انتخاب نموده و بعد از رنگ پیش‌زمینه استفاده نمایید. در اقدام بعدی، path را deselect کرده و به قسمت Layers tab بازگردید. برای اینکه بهتر کار کنید می‌توانید لایه دایره را  مخفی (Hide) نمایید. از گرادیانت انعکاسی۱۴۱ درجه استفاده نموده و کد رنگ‌های f9f9f9 و ededed را بکار بگیرید.

۶. در این مرحله باید یک لایه جدید دیگر بسازید ولی دقت نمایید که موقعیت آن قبل از لایه پیشین باشد درنتیجه می‌توانید جلوه ۳D را با Pen tool ایجاد نمایید. حال، مانند قبل از گزینه Fill استفاده نمایید ولی این بار گرادیانت خطی ۹۰ درجه را با کدهای رنگی a7a6a6 و ffffff بکار گیرید.

۷. باز هم لایه جدیدی ایجاد کنید و آن را بالاتر از سایر لایه‌ها قرار دهید. برای انجام بهتر ادامه مرحله بهتر است شکل دایره اصلی را مجدد ظاهر نمایید و مانند تصویر اجزای سبزی را زیر قسمت سفید ایجاد کنید. برای ایجاد رنگ می‌توانید از گرادیانت انعکاسی ۱۳۳ درجه با کد رنگ‌های ۹ad429 و ddf470 استفاده کنید.

۸. همانطور که برای قسمت سفید انجام دادید، لایه جدیدی زیر لایه سبز ایجاد نمایید، با استفاده از Pen tool سایه زیرین تصویر را شکل دهید و برای آن گرادیانت خطی ۹۰- درجه با کدهای رنگی ۸۷bc0f و ۷۹aa08 را بکار گیرید. به یاد داشته باشید که تمامی رنگ‌ها و درجات فقط بعنوان راهنما برای شما درنظر گرفته شده‌اند.

۹. باز هم به قسمت سبز برگردید. یک لایه جدید زیر لایه سبز اصلی ایجاد نمایید و قسمت بالایی شکل سبز را طراحی کنید. بهتر است طراحی بگونه ای باشد که یک سطح صاف مانند چمن را نشان دهد. برای انتخاب رنگ در این مرحله، از گرادیانت خطی ۹۰ درجه با کدهای رنگی ۹ddb16 و d7ff46 استفاده کنید. این قسمت از طراحی بهتر است از سایر المان ها روشن تر باشد.

۱۰. حال، می‌خواهیم اشکالی را ترسیم کنیم که نشانگر صخره هستند. پس بعد از اینکه شکل موردنظر خود را رسم کردید، از گرادیانت خطی ۷۰- درجه با کدهای رنگی ۸d6b50 و d1bc98 استفاده نمایید.

۱۱. در این مرحله، می‌خواهیم عنصر آب را اضافه کنیم. با استفاده از دایره اصلی، شکلی برای قسمت آبی رنگ ترسیم نمایید. اگر برای انتخاب رنگ آبی با مشکل مواجه شدید به شما پیشنهاد می کنیم که از گرادیانت انعکاسی ۳۶- با کدهای رنگی ۳۳abbb و ۳۶e6ed استفاده کنید.

۱۲. بعنوان قسمت پایانی طراحی شکل دیگری به رنگ سفید رسم نمایید. می‌توانید از گرادیانت رنگی مشابه قسمت سفید در بالا استفاده نمایید فقط بهتر است رنگ آبی را نیز به آن اضافه نمایید چراکه در انتها می خواهیم جلوه‌هایی از قطرات آب را به نشانه ذوب شدن یخ داشته باشیم.

۱۳. در این مرحله می‌خواهیم جلوه‌هایی از قطرات آب را اضافه کنیم. این کار را براحتی می‌توان با Pen tool انجام داد. از دستور رنگی آبی مشابه بالا استفاده کنید با این تفاوت که قسمت انتهایی قطرات را تیره‌تر کنید.

۱۴. در قسمت انتهایی می‌خواهیم شکلی نمایانگر کویر را به طراحی اضافه کنیم. مراحل طراحی قبلاً ذکر شده است فقط تنها تفاوت در اینجا تغییر رنگ‌هاست که می‌توان از کدهای رنگی dbc146 و ecf774 استفاده کرد. در این مرحله، طراحی کره زمین به پایان رسید. تنها چیزی که باقی می‌ماند، قسمت نوشته‌های اینفوگرافیک است.

منبع: www.webdesignermag.co.uk

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

انتخاب و ترکیب مناسب

اولین گام در این مرحله انتخاب درست و بجای تصاویر است. بعنوان مثال برای وب‌سایت Adventure.com که مرتبط با سفرهای ماجراجویانه است بهتر است تصاویر متشکل از رنگ‌های روشن و موضوعات جالب باشند. علاوه‌براین، باید به اندازه تصاویر دقت لازم را داشته باشیم و المان‌های UI در برگیرنده عکس‌ها را درنظر بگیریم. درنتیجه باید تصاویر را متناسب با محتوای متنی مدنظر Crop کنیم.

ترکیب سبک‌های تصاویر در فوتوشاپ

در مرحله بعد تنظیمات سبک عکاسی است که باید متناسب با چیدمان سایت و سایر عکس‌های مورد استفاده باشد. در فوتوشاپ، می‌توان با هم‌پوشانی رنگ‌ها، تنظیمات جالبی روی تصاویر انجام داد. در قسمت Layer Styles هر تصویر می‌توان از Colour Overlay استفاده کرد. در این تصویر دیده می‌شود که رنگ عکس روشن‌تر می‌شود. بعد می‌توان Blend Mode را از Normal به Exclusion تغییر داد و سپس Opacity را به ۳۰% یا کمتر کاهش داد.

استفاده از تکنیک Polish در فوتوشاپ

بر اساس کنتراست عکس و المان‌های UI دربرگیرنده هر تصویر، می‌توان Opacity را در Colour Overlay کم یا زیاد کرد. حتی در فوتوشاپ با تغییر کلی رنگ‌ها نیز می‌توان جلوه‌های جالبی در تصاویر ایجاد کرد. می‌توان با تنظیم رنگ‌های گرم و سرد ظاهری زیبا به عکس‌ها داد.

منبع: www.webdesignermag.co.uk

۱. اولین مرحله از تبدیل تم‌های فتوشاپ به صفحات HTML ایجاد یک فولدر جدید به نام webdites است که داخل آن نیز می‌بایست دو فولدر دیگر تحت عناوین images و css نیز ایجاد کنید. در این دو فولدر تمامی فایل‌های مربوط به تبدیل تم‌های فتوشاپ به صفحات HTML ذخیره می‌شوند.

۲. مرحله دوم  با باز کردن فایل فتوشاپ تم شروع می‌شود. در اینجا آموزش روی یک لوگو نمایش داده می‌شود. در نرم‌افزار فتوشاپ تمامی لایه‌های مرئی غیر از لایه Logo را نامرئی کنید. در قسمت Image گزینه Trim را انتخاب نموده و Transparent Pixels را تیک بزنید. در نهایت می‌توانید تصویر خود را در فولدر images به نام logo.png ذخیره نمایید.

۳. در این مرحله تغییراتی در تصویر پس‌زمینه داده می‌شود پس می‌بایست تمامی لایه‌ها به استثنای لایه background غیرفعال باشند. بعد می‌توان با گزینه Crop اندازه تصویر را کوچک کرد. پس از انجام تغییرات فایل را با فرمت png. ذخیره نمایید.

۴. اکنون وقت آن است که به سراغ xhtml رفته و تنظیمات قسمت عنوان را انجام داد. اینجا بهتر است از ویرایشگر متن Dreamweaver استفاده نموده و کدی که در ادامه آمده است کپی نمایید. این اولین ایندکس ایجاد شده در html است که می‌توان آن را در فولدر websites ذخیره نمود.

۶. برای مرحله ششم، تمامی کارهای مرحله پنجم را تکرار می‌کنیم با این تفاوت که حرکت برش باید از پایین به بالا انجام شود. در نهایت می‌توان تصویر را تحت عنوان welcomebg-bottom.png ذخیره کرد.

۷. تا اینجا تنظیمات عکس‌ها انجام شده و تنها کاری که باید انجام داد این است اضافه کردن استایل، رنگ و تعیین موقعیت المان‌هاست. پس در  Dreamweaver یک فایل css.  ایجاد کرده و کد زیر را در آن کپی نمایید. این فایل را در فولدر css و به نام style.css ذخیره نمایید.

۸. در این مرحله بهتر است فایل ایندکس را گسترده تر نماییم که لزوماً المان‌های متفاوت را در صفحا سایت در موقعیت اصلی خود قرار می‌دهند. کد html مربوط به این قسمت در زیر آورده شده است.

۹. در مرحله بعد برای گذاشتن تصاویر thumbnail تنها کاری که باید کرد این است که به فتوشاپ مراجعه کرده و با استفاده از ابزار Crop تک تک تصاویر را برش می‌زنیم. بهتر است برای هر تصویر به اندازه ۵ پیکسل فاصله بگذاریم.

۱۰. با داشتن تصاویر متعدد باید موقعیت آن‌ها را در صفحه بدرستی انتخاب کرد که این مشکل را تنها می‌توان به کمک CSS حل نمود. کدهای مربوطه در ادامه آورده شده‌اند.

۱۱. مرحله بعد در فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML مربوط به قرار دادن markup ها در فایل html است که همراه با تگ های تصویری می باشند. دقت داشته باشید که دستور div به تنهایی در markup ها استفاده می شود و این امر برای قرار گرفتن div ها در موقعیت اصلی خود ضروری است. کدها زیر، شما را در این قضیه راهنمایی می نمایند.

۱۲. برای تنها کادر پس‌زمینه از تکنیک بکار رفته برای welcome box استفاده می‌کنیم. به فتوشاپ مراجعه نموده، لایه About me box را فعال کزده و عمل برش را با استفاده از ابزار crop انجام دهید. همانطور که در مراحل ۵ و ۶ آورده شده است یک بار crop کرد از بالا یه پایین و بار دیگر از پایین به بالا خواهد بود.

۱۳. برای داشتن button باید دو تصویر ایجاد شود پس در فتوشاپ لایه بالای لایه button که دربرگیرنده متن می باشد را نامرئی نمایید. سپس یک بار از بالا و یک بار از پایین عمل crop را انجام دهید.

۱۴. در این قسمت از فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML باید مجدداً  از ابزار crop استفاده کرده و عنوان تصویر بلاگ را برش بزنیم.

۱۵. در پایان هم نوبت به علائم شبکه‌های اجتماعی می‌رسد. پس در فتوشاپ تصاویر مربوط به هر کدام را crop کرده و تصاویر را در فولدر images ذخیره نمایید.

منبع: www.webdesignermag.co.uk

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

• فایل GIF را در فوتوشاپ باز کنید.
• در قسمت window، گزینه Timeline یا Animation را باز کنید.
• همچنین، باز در قسمت window گزینه Layers را انتخاب نموده و اطمینان حاصل نمایید که پنجره Layers باز است.

در ادامه به سه روش اختصاصی سازی تصاویر GIF را آموزش می‌بینید.

روش اول تغییر تصاویر GIF در فوتوشاپ – تنظیم لایه‌ها

در پنجره Layers بالاترین لایه را انتخاب کنید و گزینه ‘Create new adjustment layer’ را برای ایجاد لایه تنظیمات جدید کلیک نمایید. برای ایجاد هر نوع تغییری می‌توانید تنظیمات مربوط به آن را انتخاب کنید. هرگونه تغییری جلوه‌های جدیدی به تمامی لایه‌های زیرین می‌دهد. در این قسمت می توانید رنگ ها و کنتراست را تغییر دهید. زمانی که تمام تغییرات مدنظر اعمال شد برای ذخیره کردن فایل بهتر است از گزینه ‘Save for Web and Devices’ استفاده کنید. در این زمان بهتر است میزان Transparency، Matte و سایر گزینه های انیمیشن را چک کنید.

مثال:

bbbbbbbbbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش دوم تغییر تصاویر GIF در فوتوشاپ – گزینه‌های ترکیب

درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. به پنجره لایه ها رفته و اولین لایه را انتخاب کنید. آیکون fix را کلیک کرده و منوی Blending Options را برای داشتن گزینه های ترکیب باز کنید. تغییرات دلخواه را روی اولین لایه اعمال کنید. در مثال زیر، تنها جلوه هم پوشانی رنگ ها نشان داده شده است. زمانی که تمامی تغییرات اعمال شدند روی لایه راست کلیک کرده و Copy Layer Style را انتخاب کنید. سپس همه لایه ها را انتخاب کرده، مجدداً راست کلیک کنید و در این حالت، Paste Layer Style را برگزینید. تمامی لایه ها افکت مورد نظر شما را خواهند داشت. در پنجره Animation/Timeline در قسمت بالا سمت راست، More menu  را انتخاب کنید. گزینه Make Frames from Layers را برای هر لایه فعال کنید تا بطور جداگانه در فریم قرار بگیرند. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bbb bbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش سوم تغییر تصاویر GIF در فوتوشاپ – فریم ها

اگرچه این روش از سایر روش ها وقت‌گیرتر است ولی انعطاف‌پذیری زیادی دارد چراکه انیمیشن‌های GIF فقط مجموعه‌ای از تصاویر است و این قابلیت وجود دارد که بطور مجزا هر یک از فریم‌ها را تغییر داد و درنهایت جلوه‌ای ویژه بر انیمیشن ایجاد می‌شود. درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. می توانید هر جلوه‌ای که می‌خواهید در لایه‌ها بطور جداگانه ایجاد کنید. در مثال زیر، افکت Color Halftone بر هر لایه اعمال شده است. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bb bbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

 منبع: www.creativebloq.com

۱) اندازه و رزولوشن تصاویر GIF: در ابتدای کار باید اندازه و رزولوشن فایل را انتخاب کنیم. از آنجایی اندازه های متنوعی برای تصاویر وجود دارند، بهترین و رایج ترین انتخاب می‌تواند ۴۶۸*۸۰ پیکسل و رزولوشن ۷۲dpi باشد.

۲) ایجاد تغییرات لازم: پس از اینکه لایه های متعدد برای هر اسلاید ایجاد شدند، می تواند با استفاده از قسمت Menu گزینه view را انتخاب کرده و بعد به سراغ گزینه Animation بروید. برای اینکه انیمیشن از جذابیت بیشتری برخوردار باشد می توانید لایه های متنی را کپی کرده، تغییرات لازم را اعمال نموده و از برخی جلوه های تصویری استفاده نمایید تا بدین ترتیب نتایج زیبایی بدست آورید.

۳) توالی تصاویر GIF: بر اساس مکان قرار گیری برخی از طراحان سایت ها نیاز دارند تا انیمیشن بعد از زمان معینی متوقف شود. گاهاً نیز اتفاق می افتد که تصویر برای همیشه از کار افتاده و دیگر تحرکی ندارد. برای جلوگیری از چنین مشکلاتی بهتر است چهارچوب زمانی را زیر هر اسلاید تنظیم نموده و فایل GIF نهایی را بصورت Save for Web ذخیره نمایید. درنهایت، این امکان وجود دارد که تنظیمات پایانی را پیش از ذخیره نمودن فایل تغییر داده و تنظیمات دلخواه خود را نهایی سازید.

• یک هاست خوب انتخاب کنید

بنا بر تحقیقات انچام گرفته توسط سایت Akamai، تقریباً نیمی از مردم توقع دارند صفحات سایت در زمانی کمتر از ۲ ثانیه لود شوند و حدود ۴۰% از مردم گفته‌اند که اگر این زمان تنها یک ثانیه افزایش پیدا کند، صفحه را ترک می کنند. سایت‌های فروشگاهی با دنبال کردن اهدافی همچون جذب مشتری و افزایش فروش، بیش از سایر سایت‌ها به سرعت لود و بار گذاری مطالب اهمیت می‌دهند. مطالعه‌ای با عنوان “چرا عملکرد سایت اهمیت دارد. آیا سایت شما مشتری‌ها را دور می‌کند؟” ادعا می‌کند در ساعات اوج ترافیک، بیش از ۷۵% از مشتری‌ها ترجیح داده‌اند به جای انتظار در صفحه فعلی برای لود مطالب، سایت را بسته و سایت‌های رقیب را مطالعه کنند. سایت‌هایی که به سرورهای اختصاصی با سرعت بالا، پیکر بندی و منابع بهینه مجهزند. این قبیل سرورها با وجود گران بودن، برای شما با ترافیک بازدید بالا، یک ضرورت به شمار می‌آیند. از طرفی دیگر، هاست‌های اشتراکی سایت شما را در کنار صدها سایت دیگر بر روی یک سرور قرار داده و منابع سرور چه سخت فزاری و چه نرم افزاری بین صدها سایت به اشتراک گذاشته می‌شود که در نتیجه منابع محدودتری به سایت شما تخصیص می‌یابد. بنا بر این مطمئن باشید که هاستینگ اختصاصی بهترین گزینه برای ثبات، عملکرد و ارتقا سایت شما می‌باشد. هرچند همیشه هم شرکت‌های هاستینگ مقصر نیستند. گاهی اوقات قدرت سرورهای هاست افت می‌کند. به هر حال بهترین روش آن است که از شرکتی خدمات هاستینگ خود را بگیرید که هم پشتیبانی خوبی داشته باشند و هم بتوانند در ساعات اوج شلوغی، ترافیک سایت را خوب مدیریت و کنترل کند.

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

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

• فعال کردن فشرده سازی

همانند عکسها، فشرده سازی صفحات بزرگ وب نیز می‌تواند باعث کاهش پهنای باند صفحات و در نتیجه کاهش سرعت لود شود. بدین منظور کافی است فایل‌ها را قبل از آپلود به فرمت Gzip فشرده کنید. بنا بر ادعای یاهو، پس از این کار، سرعت لود تا ۷۰% کاهش می‌یابد. بهتر است که اولین منبع فشرده سازی را Gzip انتخاب کنید؛ زیرا ۹۰% کاربران اینترنت از مرورگرهایی بهره می‌جویند که از فرمت Gzip پشتیبانی می‌کنند. علاوه بر این، Gzip از سمت سرور نیز قابل دست رسی می‌باشد و می‌توان از طریق پوشه‌های  .htaccess, nginx.conf یا web.config آن را تنظیم کرد.

•  ذخیره سازی مرورگر

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

بهترین حالت این است که بتوان تمام منابعی که قابلیت ذخیره سازی دارند را حداقل یک هفته و ترجیحاً یک سال نگه داری کرد. نکته مهم بعدی برای سرعت بخشیدن به دانلود عناصر HTTP این است که هدرهای HTTP keep-alive را فعال کنیم.. به این ترتیب مر.رگر و سرور با یک اتصال می‌توانند اقدام به دریافت و ارسال چند فایل کنند. در واقع  هنگامی که کاربر از سایت شما بازدید می‌کند، اتصال سرور باز باقی می‌ماند و دیگر نیازی نیست تا برای هر در خواستیک اتصال جدید اتفاق بیفتد. برای فعال کردن keep-alive تنها کافیست چند خط کد ساده به .htaccess, nginx.cong یا web.config file اضافه کنید.

• اسکریپت و CSS

سازمان دهی جاوا اسکریپت و CSS سایت می‌تواند سرعت بارگذاری صفحات را بالا ببرد. اگر stylesheets در بالای سند قرار بگیرد، مرورگر از رندر گیری دوباره جلو گیری می‌کند و در نتیجه دیگر لازم نیست که عناصر صفحه دو باره ترسیم شوند. کافیست فایل‌های مرتبط را در قسمت پایین صفحه جای گذاری کنید تا بعد از محتوا لود گردند. بهتر است در ابتدا فایل‌های مربوط به ظاهر سایت بار گذاری شوند تا کاربر با دیدن یک سایت بی قالب، صفحه مرورگر را نبندد. سپس می‌تواند فایل‌هایی را که برای ارتباط گیری لازم هستند را قرار دهید و در انتها نیز APIهای خارجی بار گذاری می‌شوند. دلیل این ترتیب این است که تا کاربر محتوا و قالب سایت را نبیند، نه ارتباطی برقرار می‌کند و نه اقدامی.

• پیکربندی CDN

بسیاری تصور می‌کنند که CDN نکته طلایی سرعت سایت می‌باشد. به همین دلیل در این مقاله اول موارد دیگر بررسی شد تا ثابت کنیم این طرز تفکر اشتباه است. CDN لزوماً و به تنهایی سرعت سایت را بالا نمی‌برد. سی دی ان می‌تواند بعد از اجرای روش‌های ذکر شده، عامل موثر بعدی در افزایش سرعت سایت باشد. CDNها، سرورهایی هستند که در مناطق و جاهای مختلف قرار گرفته‌اند و امکانات پایداری را به کاربر ارائه می‌دهند. هنگامی که شبکه در خواستی را دریافت می‌کند، داده‌ای که در نزدیک‌ترین سرور قرار گرفته سرعت لود صفحه را بالا می‌برد و در نتیجه، سرعت دانلود نیز بهبود پیدا می‌کند. محتوای مورد نظر بین چند سرور تقسیم می‌شود و به این ترتیب مسائلی که باعث تاخیر پاسخ گویی سرور می‌شوند، کاهش پیدا می‌کنند و بالطبع سرعت دانلود بالا می‌رود به علاوه، به دلیل پخش سرورها، up-time سایت هم افزایش پیدا می‌کند و اگر یکی از سرورها به هر دلیل نتواند به در خواست پاسخ بدهد، درخواست برای سرور نزدیک بعدی فرستاده می‌شود. این فایل‌های استاتیک به صورت جدا (و در بیشتر موارد در URLهای مختلف) از HTML مرکزی صفحه‌ای سرو شده‌اند. در نتیجه ساختمان صفحه شما به مرورگر فرستاده می‌شود. به این ترتیب نه تنها سرعت بار گذاری صفحه بالا می‌رود، بلکه اجازه نمایش صفحات قبل از لود کامل را نمی‌دهد. استفاده از CDN عملکرد سایتتان را در سر تا سر دنیا بهبود می‌بخشد و از این جهت ارزش سرمایه گذاری را دارد. باید به خاطر داشته باشید که سی در ان به تنهایی و به طور جادویی سرعت سایتتان را افزایش نمی‌دهد. استفاده از CDN  در کنار سایر نکات ذکر شده، باعث نتیجه گیری حداکثری خواهد شد.
حرف آخر
روش هایی که در این مقاله ارائه شدند واقعاً ارزشمند هستند و می‌توانند سایت وردپرسی شما را تا آخرین حد ممکن سریع کنند. اما نباید انتظار داشته باشید که فقط با کمک یکی از این روش‌ها سرعت لود صفحات سایتتان بالا برود. این تکنیک‌ها در کنار هم سرعت بار گذاری را افزایش می‌دهند. CDN  به تنهایی نمی‌تواند سرعت لود را بالا ببرد. ذخیره سازی مرورگر و فشرده سازی فایل‌های بزرگ می‌توانند منجر به دانلود سریع‌تر عناصر از سرور به کامپیوتر کاربر شود. ضمناً شما می‌توانید سرعت سایتتان را از طریق Google PageSpeed Insight  و یا GTmetix بررسی کنید و ببینید که صفحات سایت شما در مقیاس سرعت بارگذاری، اندازه صفحات و تعداد درخواست‌ها چطور عمل می‌کند. هدف سایت، ایجاد یک تجربه کاربری خوب است و اولین قدم برای نیل به این هدف  افزایش سرعت بار گذاری صفحات می‌باشد تا کاربر در اولین کلیک از سایت شما ناامید نشود.

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