طراح حرفه ای وب سایت

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

2. انتخاب سیستم مدیریت محتوای مناسب

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

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

 

ما در ادامه به معرفی کوتاه 5 مورد از بهترین CMS های امروزی می‌پردازیم :

-وردپرس (Wordpress)

سیستم مدیریت محتوای Wordpress که در حال حاضر محبوب‌ترین و کارآمدترین CMS در بین کاربران است، بر مبنای PHP و MySQL پایه‌گذاری شده است و برای اولین بار در سال 2003 معرفی شد. از کاربران آماتور گرفته تا وب‌مسترهای حرفه‌ای، همگی می‌توانند از این CMS به منظور ساخت وبلاگ، سایت، فروشگاه و انجمن‌ها بهره‌مند شوند. وردپرس رایگان و متن باز است و هر کسی که  کمی دانش برنامه‌نویسی وب داشته باشد می‌تواند محتویات قالب وردپرس را ویرایش کرده و تغییرات اساسی و بنیادی در آن ایجاد کند. وردپرس بسیار سبک بوده و از لحاظ سرعت و بارگذاری انتخاب خیلی مناسبی می‌باشد. همچنین می‌توان با بهینه‌سازی‌های بیشتر و استفاده از افزونه‌های منتشر شده در این زمینه، سرعت بازدهی آن را به مراتب بیشتر هم کرد.

-دروپال (Drupal)

سیستم مدیریت محتوای Drupal که در بین سیستم‌های مدیریت محتوا از جمله قدیمی‌ترین و کاربردی‌ترین آنها به حساب می‌آید، یک سیستم مدیریت محتوای تحت وب به صورت متن باز می‌باشد که اولین نسخه نهایی آن در سال 2001 منتشر شد. دروپال به خاطر استانداردهای مخصوص خود و همچنین امنیت بالا به شهرت رسیده است. استفاده از دروپال به راحتی وردپرس و جوملا نیست و به خاطر همین موضوع اغلب طرفداران این CMS جزو کاربران سطح حرفه‌ای هستند. دروپال بر اساس زبان PHP طراحی شده و یک نرم افزار چندسکویی (Cross-platform) است.

-جوملا (Joomla)

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

-هاب اسپات (HubSpot)

HubSpot نرم‌افزاری تحت وب و چندمنظوره برای ساخت و راه‌اندازی وب‌سایت‌های تجاری است. برای این CMS حرفه‌ای و تجاری از سیستم بازاریابی ربایشی (Inbound Marketing) استفاده شده است. هاب اسپات به وب‌مسترها کمک می‌کند تا با کمک ابزارهای انحصاری، بتوانند محصولات و سرویس‌های خود را برای شبکه های اجتماعی و شبکه‌های بازاریابی به اشتراک بگذارند. هاب اسپات همچنین به ابزارهایی برای بهینه‌سازی موتورهای جستجو، آنالیز وب و مدیریت حرفه‌ای محتوا مجهز است و از جمله سرویس‌های حرفه‌ای برای تجارت‌های فعال به حساب می‌آید. اما مسئله‌ای که شاید باعث شده است این CMS به اندازه دیگر نرم‌افزارهای تحت وب محبوبیت نداشته باشد، رایگان نبودن نسخه‌های اصلی آن است. هاب اسپات به نسبت یک نرم افزار تحت وب برای تجارت‌های کوچک و سایت‌های معمولی هزینه خیلی زیادی در بر دارد. به همین خاطر است که بازار هدف این CMS تجارت‌های تخصصی و حرفه‌ای هستند. قیمت نسخه پایه هاب اسپات نزدیک به 200 دلار برای هر ماه می‌باشد. نسخه Pro با قیمت 800 دلار و نسخه Enterprise با قیمت بسیار زیاد 2400 دلار برای هر ماه قابل خریداری هستند.

-اسکوآر اسپیس (Squarespace)

SquareSpace پلتفرمی تحت وب برای راه‌اندازی وب‌سایت‌های پیش‌فرض و از قبل آماده شده است. این پلتفرم بیشتر مناسب کسانی است که خواهان راه‌اندازی سریع یک وب‌سایت با قالب‌های متعدد و پیش‌فرض هستند. Squarespace همچنین دارای ابزارهای آنالیز و سئو بوده تا بتوان با کمک آنها با سرعت بیشتری وب‌سایت ایجاد شده را به موتورهای جستجو معرفی کرد.

 

3. فعال‌سازی قابلیت ذخیره‌سازی یا کش مرورگر (Browser Caching)

فعال‌سازی قابلیت ذخیره سازی یا کش مرورگرها، می‌تواند به مقدار بسیار زیادی سرعت بارگذاری وب‌سایت شما برای کاربران را بیشتر کند. این روش همچنین از بهترین راه‌های بهبود تجربه کاربری است. کش یا Caching به پروسه ذخیره‌سازی اطلاعات موجود در وب‌سایت شما از جمله فایل‌های چندرسانه‌ای، عکس‌ها، فایل‌های مربوط به قالب و کدنویسی آن (فایل های CSS ,‌JavaScript و اسناد HTML) در مرورگر کاربران گفته می‌شود.

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

برای مثال اگر از Wordpress استفاده می‌کنید، می‌توانید از افزونه‌های بسیار کاربردی همچون W3 Total Cache و یا WP Super Cache استفاده کنید و اگر از Drupal استفاده می‌کنید، می‌توانید از نرم‌افزار تحت وب Varnish Cache استفاده کنید. سیستم مدیریت محتوای Joomla ابزاری پیش فرض برای این مورد دارد که می‌توانید از بخش System>Global configuration و از قسمت Cache settings به آن دسترسی داشته باشید.

همانطور که در تصویر بالا می‌بینید، در اولین درخواست از سمت کلاینت (مرورگر کاربر) سرور اصلی آن را دریافت کرده و به آن رسیدگی می‌کند. سرور کش که به نوعی واسطه‌ای مجازی بین این دو است، اطلاعات را از سرور اصلی دریافت کرده و در اختیار مرورگرها قرار می‌دهد. این پروسه در صورت فعال بودن قابلیت Browser Caching فقط در دفعه اول صورت می‌گیرد. در عکس دوم می‌بینیم که ارسال درخواست‌های بعدی و مشابه درخواست‌های اول، فقط مابین سرور کش و کلاینت صورت می‌گیرد. به همین خاطر، ارسال درخواست‌ها و دریافت پاسخ‌ها با سرعت خیلی بیشتری انجام می‌شود.

در همین راستا، افزونه‌ای جامع با عنوان PHP Accelerator وجود دارد که به نوعی با همین سیستم فعالیت می‌کند و از طریق Caching سرعت بارگذاری سایت‌های PHP را به مقدار قابل توجهی بهبود می‌بخشد. افزونه مذکور توسط سرویس‌دهنده‌های مختلف برای وب‌سایت‌هایی که تحت زبان PHP برنامه‌نویسی شده‌اند ارائه می‌شود. برای دستیابی به لیست این سرویس‌دهنده‌ها می‌توانید اینجا کلیک کنید.

 

4. استفاده از قابلیت Expires Headers 

Expires Headers قابلیتی است که به مرورگرها اجازه می‌دهد تا نسخه کش شده (ذخیره شده) از یک صفحه را، به جای هر بار بارگذاری مجدد نمایش دهند. با نگاهی ساده به این قابلیت می‌توان گفت که مزایای استفاده از Expires Headers شامل موارد زیر است :

• کاهش مدت زمان لودینگ فایل‌ها توسط سرور
• کاهش مدت زمان بارگذاری صفحات سایت
• کاهش استفاده از پهنای باند سرور
• جلوگیری از ترافیک‌های بی‌مورد و افت سرعت انتقال داده‌ها

بگذارید کمی بیشتر راجع به این مقوله توضیح دهیم. همانطور که در بخش قبلی گفتیم، مرورگرها برای نمایش و بارگذاری یک صفحه از یک سایت، درخواست‌هایی به سرور ارسال می‌کنند. وقتی اولین باری که یک سایت در یک مرورگر به صورت کامل بارگذاری شد، اطلاعات تکمیلی آن در قسمت کش (Cache) مرورگر یا حافظه موقت آن ذخیره می‌شود. Expires Headers به مرورگرها این امکان را می‌دهد تا زمانی که آنها وارد یک سایت شدند، به جای اینکه شروع به ارسال درخواست و بارگذاری تک تک بخش‌های سایت کنند، همان نسخه ذخیره شده و دست نخورده‌ای که از قبل در حافظه موقت خود ذخیره کرده‌اند را نمایش دهند. تنها نکته‌ای که این قابلیت را با قابلیت Browser Caching متفاوت می‌کند، امکان تعیین فرمت فایل‌ها و مدت زمان ذخیره‌شدن آنها است. با استفاده از چنین قابلیتی، تعداد دانلود و ارسال درخواست‌های بی‌مورد به شدت کاهش می‌یابد و بدیهی است که همین مسئله در نهایت به نفع شما خواهد بود؛ چرا که منابع سایت و پهنای باند سرور شما کمتر از قبل مورد استفاده قرار گرفته و در نتیجه سرعت سایت شما بهبود پیدا می‌کند.

 

Expires Headers چطور کار می‌کند؟

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

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

روش استفاده از Expires Headers

وارد کنترل پنل سرور خود شده و از طریق بخش مدیریت فایل، به فولدر اصلی هاست وارد شده و فایل htaccess را با یک ویرایشگر متنی باز کنید. سپس کد مورد نظر را در این فایل اضافه کرده و آن را ذخیره کنید. برای مشاهده این کد از این لینک استفاده کنید. همانطور که در کدها می‌بینید، فرمت‌های خاص برای مدت زمان‌های خاص مشخص شده‌اند. شما قادر هستید تا این فرمت‌ها و یا مدت زمان‌های مشخص شده را به راحتی ویرایش کنید. به عنوان مثال فایل‌های تصویری jpeg به مدت یک سال در حافظه مرورگرها ذخیره خواهند شد. این فرمت در بخش image/jpeg و مدت زمان آن در خط جلوئی یعنی 1 year مشخص شده‌اند. اگر می‌خواهید مدت زمان مربوطه را به سال وارد کنید، کافیست عدد 1 را تغییر دهید و اگر می‌خواهید این زمان را به ماه حساب کنید، جای year کلمه month وارد کرده و به جای عدد 1 تعداد ماه های دلخواه را وارد کنید.

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

 

5. فعال‌سازی قابلیت Gzip Compression

همه ما با فرآیند فشرده‌سازی فایل ها به خوبی آشنا هستیم. فرآیندی که طی آن فایل‌های مختلف را در یک فایل فشرده (فایل Zip یا Rar) قرار داده و باعث کاهش چشم‌گیر حجم آن فایل یا فایل‌ها می‌شویم. قابلیت Gzip Compression هم از همین متد استفاده می‌کند. در واقع شما با کمک این قابلیت، می‌توانید برخی از فایل‌های موجود در هاست و وب‌سایت خود را بهینه و فشرده کنید تا با این کار حجم نهایی وب‌سایت کاهش پیدا کند.

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

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

نحوه فعال‌سازی Gzip Compression

-Wordpress:

از جایی که اغلب این مدل ابزارها توسط افزونه‌ها در وردپرس ارائه می‌شود، برای این مورد نیز ما به شما افزونه‌ای برای فعال‌سازی خودکار این قابلیت معرفی می‌کنیم. افزونه WordPress Gzip Compression به شما امکان فعال کردن قابلیت Gzip Compression در کمترین زمان ممکن را خواهد داد.

-Joomla:

-Drupal:

برای راه‌اندازی Gzip در دروپال، می‌توانید از ماژول انحصاری این سیستم یعنی CSS GZip استفاده کنید. البته این ماژول مدت‌هاست که به روزرسانی نشده و ممکن است روی نسخه‌های جدید دروپال به درستی فعال‌سازی نشود. بنابراین اگر دروپال دارید، پیشنهاد می‌کنیم از روش عمومی که در ادامه خواهیم گفت استفاده کنید.

فعال‌سازی Gzip Compression از طریق فایل htaccess (روش عمومی)

اگر از روش‌های بالا موفق به راه‌اندازی Gzip Compression نشدید، می‌توانید با یک ویرایش ساده فایل htaccess این قابلیت را در سرور خود فعال کنید. کافیست کدی که در این لینک قرار گرفته است را کپی کرده و به فایل htaccess اضافه کنید و سپس آن را ذخیره کنید. اگر با قرار دادن این کد قابلیت Gzip به سایت شما اضافه نشد، کد قبلی را حذف کرده و این کد جایگزین را در فایل htaccess قرار دهید. همچنین در صورتی که وب‌سرور شما NGINX می‌باشد، کدی که در این لینک وجود دارد را کپی کرده و در فایل کانفیگ (Config) سرور اضافه کنید.

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

چطور متوجه شویم که Gzip Compression به درستی تنظیم و فعال‌سازی شده است؟

کافیست وب‌سایت checkgzipcompression.com را باز کرده و آدرس سایت خود را در فیلد مورد نظر وارد کنید. سپس این ابزار به شما نشان می‌دهد که سایت شما قابلیت Gzip را دارا می‌باشد یا خیر. همچنین این سایت درصد و مقدار حجم کاهش یافته نسخه اصلی و نسخه فشرده شده سایت شما را نیز به شما نمایش خواهد داد.