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

gzip چگونه کار می کند؟

gzip یک ایده بسیار ساده است که در صورتی که به درستی مورد استفاده قرار بگیرد میتواند بسیار مفید باشد.دلیل اثر بخشی بالای gzip این است که  فایل های HTML وCSS دارای سطرهای تکراری زیادی است  و فضای زیادی را اشغال می کنند،  این قابلیت باعث کاهش حجم صفحات و استایل شیت ها تا 70 درصد می شود.

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

چرا GZIP مهم است?

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

نحوه فعال سازی GZIP?

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

• فعال سازی GZIP درآپاچی

 کد زیر را در فایل .htaccess وارد کنید:

<IfModule mod_deflate.c>

  # Compress HTML, CSS, JavaScript, Text, XML and fonts

  AddOutputFilterByType DEFLATE application/javascript

  AddOutputFilterByType DEFLATE application/rss+xml

  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

  AddOutputFilterByType DEFLATE application/x-font

  AddOutputFilterByType DEFLATE application/x-font-opentype

  AddOutputFilterByType DEFLATE application/x-font-otf

  AddOutputFilterByType DEFLATE application/x-font-truetype

  AddOutputFilterByType DEFLATE application/x-font-ttf

  AddOutputFilterByType DEFLATE application/x-javascript

  AddOutputFilterByType DEFLATE application/xhtml+xml

  AddOutputFilterByType DEFLATE application/xml

  AddOutputFilterByType DEFLATE font/opentype

  AddOutputFilterByType DEFLATE font/otf

  AddOutputFilterByType DEFLATE font/ttf

  AddOutputFilterByType DEFLATE image/svg+xml

  AddOutputFilterByType DEFLATE image/x-icon

  AddOutputFilterByType DEFLATE text/css

  AddOutputFilterByType DEFLATE text/html

  AddOutputFilterByType DEFLATE text/javascript

  AddOutputFilterByType DEFLATE text/plain

  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)

  BrowserMatch ^Mozilla/4 gzip-only-text/html

  BrowserMatch ^Mozilla/4\.0[678] no-gzip

  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  Header append Vary User-Agent

</IfModule>

• فعال سازی GZIP در IIS

در صورتی که از وب سرور IIS استفاده می کنید این دستورالعمل که در وب سایت ماکروسافت آمده است را دنبال کنید.

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

در قدم اول برای باز کردن یک فایل مرورگر،  فایل HTML را در یافت  کرده و آن را می خواند.سپس مرورگر فایل های دیگر همچون Css,js و تصاویری که فایل HTML به آن اشاره می کند را درخواست می کند.در صورتی که  KeepAlive فعال نباشد،مرورگر فقط یک فایل را می تواند در هر بار درخواست دریافت کند و چون برای بار گذاری یک صفحه به درخواست چندین فایل نیاز است زمان زیادی برای دریافت همه آنها تلف خواهد شد.

 با استفاده از KeepAlive، مرورگر و سرور توافق می کنند که برای انتقال چند فایل از یک ارتباط (Session) استفاده کنند.

کاربردهای KeepAlive

قبل از استفاده از KeepAliveمرورگر شما باید درکی از این  خاصیت داشته باشد، که در مرورگر های مبتنی بر ویندوز 95 این امکان وجود نداشت، اما امروزه  تقریباً تمام مرورگر ها آن را پشتیبانی  می کنند.

از پیش شرط های استفاده از KeepAlive این است که طول فایل ها مشخص باشد.

مزایای استفاده از KeepAlive

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

کاهش مصرف پردازنده:ایجاد و خاتمه ارتباط های یک فرایند مصرف کننده  زمان پردازنده است.بنابراین کاهش  تعداد این ارتباط ها می تواند صرفه جویی زیادی در مصرف پردازنده داشته باشد.

معیاب استفاده از KeepAlive

افزایش مصرف حافظه: تا زمانی که ارتباط بین مرور گر و سرور وجود دارد این ارتباط در حافظه سرور وجود دارد و در نتیجه  مصرف حافظه بالا می رود.

آیا KeepAlive به طور پیش فرض فعال است؟

برخی به اشتباه بر این باورند که KeepAlive به طور پیش فرض فعال است و لازم نیست برای  در مورد آن نگران باشند. گرچه این گفته درست است اما برخی از افراد از هاست های اشتراکی استفاده می کنندکه ممکن است با توجه به سیاست های مربوطه این ارتباط بسته باشد. 

برای بررسی فعال بودن و یا نبودن KeepAlive بر روی سایت خود می توانید از  سایت Gtmetrix استفاده کنید.

فعال کردن KeepAlive

1-فعال سازی Keep Alive با استفاده از htaccess

اگر به فایل config وب سرور خود دسترسی ندارید می توانید KeepAlive را از طریق htaccess فعال کنید. کد زیر را به فایل htaccess اضافه کرده و سپس آن را ذخیره کنید:

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

2-فعال سازی Keep Alive در آپاچی

اگر به فایل پیکربندی  آپاچی دسترسی دارید، می توانید KeepAlive را در آن فعال کنید، کافی است تغییرات زیر را اعمال کنید:

#

# KeepAlive: Whether or not to allow persistent connections (more than

# one request per connection). Set to "Off" to deactivate.

#

KeepAlive On

#

# MaxKeepAliveRequests: The maximum number of requests to allow

# during a persistent connection. Set to 0 to allow an unlimited amount.

# We recommend you leave this number high, for maximum performance.

#

MaxKeepAliveRequests 100

#

# KeepAliveTimeout: Number of seconds to wait for the next request from the

# same client on the same connection.

#

KeepAliveTimeout 100

در این مقاله به بررسی تاثیر تصاویر بر روی سرعت لود وب سایت خواهیم پرداخت.

1-بهینه سازی حجم تصاویر

ابزار های مختلفی جهت بهینه سازی حجم عکس ها وجود دارد  که یکی از آنها نرم افزار فتوشاپ است. برای انجام این کار کافی است در زمان ذخیره تصاویر مورد نظر،  از منوی FILE گزینه Save For Web را انتخاب کنید.علاوه بر این ابزار های انلاینی نیز وجود دارد که با استفاده از آنها می توانید حجم تصاویر خود را کاهش دهید، در ادامه دو نمونه از انها معرفی شده است:

• compressor.io
• compressjpeg.com

2-مشخص کردن ابعاد عکس

ابعاد تصاویر مورد استفاده را در کد نویسیHTML مشخص کنید.

روش کار:

استفاده از قالب کلی زیر برای عکس ها

<img src="/beyamooz.jpg" alt="" width="470" height="307">

 3-استفاده از عکس ها در اندازه واقعی

از عکس ها با همان ابعادی که هستند استفاده کنید و آنها را با استفاده از HTML تغییر اندازه ندهید.

4-از ادغام تصاویر استفاده کنید.

زمانی که مجبور هستید از چندین عکس در یک صفحه استفاده کنید ، یکی از روش های مفید استفاده از Css Image Sprites می باشد که تمامی تصاویر را به یک تصویر تبدیل می کند. این کار باعث می شود تمام عکس ها در قالب یک عکس نمایش داده شوند و سپس با استفاده از Css و مختصات x,y میتوان  هر عکس را در جای خود فراخوانی کرد. یکی از ابزار های آنلاین برای این کار Css Sprites می باشد.

5-تبدیل عکس ها به Base64 Code

یکی دیگر از روش ها،  تبدیل عکس ها به  کد های Base64 می باشد، که عکس را به کد تبدیل می کند. گرچه در این روش طول کد ممکن است زیاد باشد اما نیاز به درخواست مجدد برای بارگذاری عکس نیست.برای انجام این کار می توانید از Base64 File Encoder استفاده کنید. کافی است که تصویر را انتخاب کنید تا به صورت اتوماتیک  کد تصویر ساخته شود.

6-بهینه سازی تصاویر با استفاده از Gtmetrix

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

 مقالات مرتبط:

افزایش سرعت لود وب سایت بخش1

افزایش سرعت لود وب سایت بخش 2

هر بار که مرورگر یک   صفحه وب را بار گذاری می کند باید تمام فایل های  وب را برای نمایش درست آن صفحه دانلود کند. این فایل ها شامل فایل های  HTML , CSS و تصاویر می  باشد.

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

در این رابطه دو مسئله وجود دارد:

1-فایل های بزرگ، زمان بیشتری برای لود شدن نیاز دارند و این مسئله برای کسانی که  دارای  اتصال اینترنتی کند هستند ( مانند موبایل ) دشوار  است.

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

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

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

 کش مرورگر( Browser Caching) چگونه کار می کند؟

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

با استفاده از سرور به مرورگر می گوییم که این فایل ها را ذخیره کن . این کار موجب صرفه جویی قابل ملاحظه در زمان کاربر و پهنای باند سرور شما خواهد شد .

چرا  کش مرورگر( Browser Caching) مهم است؟

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

نحوه فعال سازی کش مرورگر( Browser Caching) 

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

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

</IfModule>

## EXPIRES CACHING ##

 در دستور بالا مقادیر به صورت پیش فرض قرار گرفته اند و شما میتوانید بر اساس فایل های خود آنها را تغییر دهید.

پیشنهاد می شود برای فایل هایی که به روز رسانی های کمتری دارند زمان بیشتر و برای فایل هایی که به روز رسانی بیشتری دارند زمان کمتری را در نظر بگیرید.