آموزش افزایش سرعت سایت (قسمت اول)

سئو ارزان| تیر ۲۸, ۱۳۹۴| آموزش سئو| 4 دیدگاه

کاملا اختصاصی توسط سئو ارزان

در مقاله امروز سعی داریم آموزش بهینه کردن سرعت وبسایت رو به شما آموزش بدهیم.

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

مقاله نیز به زبان خودمونی نوشته شده تا بتونید بیشتر و بهتر باهاش ارتباط برقرار کنین:)

اگر تمامی قسمت های آموزش رو دنبال کنید میتونید خیلی از کارهایی که سئو کار ها انجام میدهند رو خودتون انجام بدین.

قسمت اول آموزش بهینه سازی :

مقدمه :

سرعت وبسایت یکی از عوامل مهم هم برای موتورهای جستجو و هم برای بازدیدکنندگان است.

اگر مدت زمانی که طول میکشد وبسایت شما لود شود زیاد باشد همانطور که بازدیدکنندگان آن را نمی پسندند ، موتورهای جستجو نیز نخواهند پسندید و آن را پس میزنند.پس سرعت سایت برای سئو و بهینه سازی وبسایت امری حیاتی و مهم به شمار می آید.

۱ – اولین و مهمترین چیزی که من ( علی طباطبایی ) به عنوان نویسنده این مقاله بهش اهمیت میدم و مد نظرمه HTTP Requsets هست.حالا اصلا این چی هست؟بیاین یه سری به مقالات انگلیسی بزنیم.

Whenever your web browser fetches a file (a page, a picture, etc) from a web server, it does so using HTTP – that’s “Hypertext Transfer Protocol”.  HTTP is a request/response protocol, which means your computer sends a reques

به بیان ساده به درخواست هایی که مرورگر شما میفرسته و وب سرور جوابش رو برمیگردونه ، Http request میگیم. مثلا مرورگر شما به وب سرور میگه که فایل home.html رو برای من بیار و وب سرور هم اگه اون فایل موجود باشه ، بهتون نمایشش میده.

حالا چرا ما اصلا داریم در مورد این موضوع توضیح میدیم و اصلا چه ربطی به سئو داره؟

جواب اینه : هر چه تعداد این درخواست ها به وب سرور کمتر باشه ، کاملا واضحه که سرعت لود وبسایت بالا میره.این مسئله ای هست که به بحث سئو مرتبط میشه.

حالا ما میخواهیم ببینیم چه کاری باید انجام بدیم تا تعداد Http Requests رو به حداقل برسونیم.

در سئو به این موضوع Minimize ( مینی مایز ) کردن میگیم.( Minimize Http Requests )

دوباره به مقالات انگلیسی سر میزنیم.

According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render

That being the case, the quickest way to improve site speed is to simplify your design

Streamline the number of elements on your page

Use CSS instead of images whenever possible

Combine multiple style sheets into one

Reduce scripts and put them at the bottom of the page

میگه که ۸۰% زمان لود یک وبسایت صرف دانلود کردن اجزای مختلف یک صفحه نظیر عکس ها و فایل های css و js و flash و غیره میشه و برای هر کدوم از این ها یک Http Request ایجاد میشه پس هرچه تعداد این موارد ( همون عکس ها و … ) روی وبسایت بیشتر باشه ، زمان بیشتری طول میکشه تا وبسایت به صورت کامل لود بشه.

حالا راه حل ها چیه؟

۱ – بهینه کردن تعداد این المنت ها روی وبسایت

۲ – استفاده از css به جای عکس ها ( در صورتی که بشه اینکارو کرد البته! )

۳ – یکی کردن ( combine ) تمامی فایل های css و تبدیل تمامی اون ها به یک فایل css

۴ – یکی کردن تمامی فایل های java script خارجی ( External JS Files ) و تبدیل تمامی اون ها به یک فایل js

۵ – قرار دادن لینک فایل های css در ابتدای پرونده و لینک فایل های js در انتهای پرونده.

۶ – استفاده از Css Sprite

اولین کاری که به ذهن میرسه کم کردن این تعداد المنت هاست.المنت هایی که به نظرتون بیهوده میاند رو از وبسایتتون حذف کنید.زیبایی از عوامل مهمی برای جذب بازدیدکننده به شمار میاد اما تاحالا به این فکر کردین که اگه سرعت لود وبسایتتون کم باشه ، اصلا بیننده منتظر باز شدن وبسایتتون نمیمونه و میره سراغ وبسایت رقیبتون؟!!!پس قید بعضی چیزها که صلاح میدونین رو بزنید هر چند که حجم اونها کم باشه ( به هر حال داره یک Http Request ایجاد میکنه )

مرحله بعدی استفاده کردن از css به جای عکس ها هست البته در جاهایی که بشه اینکارو کرد!

مثلا چی؟مثلا دیده شده فوتر ( footer ) و هدر ( header ) بعضی از سایت ها کاملا به صورت عکس هست!در صورتی که ما میتونیم با استفاده از css چیز بهتری تولید کنیم اینجوری علاوه بر زیبایی ، تعداد Http Request رو هم کمتر کردیم

حالا اینکه چجوری این مرحله رو انجام بدین؟باید کاملا با Html و Css آشنایی داشته باشین:)

اگه آشنایی دارید که خب همین الان شروع به ادیت کردن قالب خودتون بکنید ( البته اگه این مورد توی وبسایتتون موجوده )

مرحله بعدی یکی کردن فایل های css و تبدیل اونها به یک فایل css هست.کار سختی نیست.کدهاتون رو کپی کنید و همه رو در یک فایل css. قرار بدین.به مثال زیر توجه کنین:

مثلا توی وبسایتتون سه تا فایل css به نام های first و second و third دارین.بیاین و یک فایل به اسم main.css بسازین و تمامی کدهای اون سه فایل رو در این فایل کپی کنید.حالا لینک اون فایل های css که در قالبتون هستند رو بردارین و جای اون لینک فایل main.css رو بذارین.اگر وردپرس دارین و آشنایی خاصی با کد زنی ندارین ، استفاده از پلاگین های مربوطه پیشنهاد میشه.

در مورد فایل های js نیز دقیقا همین کارهایی که انجام شد رو انجام بدین و اونها رو به یک فایل main.js تبدیل کنین.

سایتهای وردپرسی همیشه چندتا فایل css و js دارن( به خاطر خود وردپرس و پلاگین هایی که استفاده میشه )!!

و یکی کردن اینگونه فایل ها در وبسایت های وردپرسی از اهمیت خاصی برخورداره…

حالا که اینکارو کردین ، لینک این دو تا فایل رو در کجا باید قرار بدین؟منظورم دو تا فایل main.css و main.js هست.

بهترین کار اینه که لینک فایل css رو در ابتدای پرونده ( درون تگ <head> ) قرار بدین و لینک فایل js رو در انتهای پرونده و قبل از بسته شدن تگ انتهایی وبسایت.

علتش چیه؟علتش اینه که فایلهای جاوا اسکریپت ( java script ) و یا به اختصار js زمانی که کامپایل میشوند ، پروسه رندر ( render ) کردن اجزای دیگه ی وب رو میگیرن و زمانی که تمامی کدها کامپایل بشن به سراغ اجزای دیگر وبسایت رفته میشه.پس اگه ما فایل js خودمون رو در ابتدای وبسایت لینک کنیم در واقع داریم به وبسایتمون ظلم بزرگی میکنیم.پس این مورد رو حتما در نظر داشته باشین.

مورد نهایی در این مقاله هم استفاده از css sprite هست.

حالا اصلا این چی هست؟بریم ببینیم یاهو در این مورد چی گفته.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

ما با استفاده از css sprite میتونیم تعداد http request ها رو کم کنیم.چجوری؟

در واقع ما با css sprite چند عکس رو به یک عکس تبدیل میکنیم.مثلا من ده تا عکس رو به یک عکس تبدیل میکنم و بعدا فقط از اون عکس استفاده میکنم( اینجوری تعداد http request ها از ۱۰ تا به یکی میرسه )

اگه قالبتون از تعداد عکس زیادی استفاده میکنه این مورد میتونه نجات بخش باشه برای وبسایتتون.

استفاده از css sprite هم نیاز به آشنایی با html و css داره.

خب اگه تا اینجای کار همراه ما بوده باشین اولین مرحله بهینه سازی سرعت سایت رو یاد گرفتین و یا حداقل یک آشنایی با اون دارین.

این آموزش های بهینه سازی سرعت سایت میتونه تا ۲۰ مقاله هم بشه.با نظراتتون به ادامه آموزش این مبحث به ما دلگرمی بدین.

ممنون بابت وقتی که برای این مقاله گذاشتین.امیدوارم این سری مقاله ها بتونه بدردتون بخوره

تیم طراحی ، سئو و بهینه سازی وبسایتسئو ارزان

4 نظر

  1. مطالب عالي بود. بزودي جهت سفارش بهينه سازي با شما تماس خواهيم كرفت

  2. بسیار ممنون این ۲ بخش در زمینه سرعت سایت خیلی عالی بود

نظر بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

میتوانید از کد های HTML زیر استفاده نمایید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*