campaign-edianeh-98

بهینه سازی و افزایش سرعت لود شدن وب سایت توسط gzip



visibility  
mode_comment   ۶۰

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

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

شیوه کار GZIP

شاید خیلی‌ها هنوز ندانند که شیوه عمل ترفند GZIP و نحوه فشرده کردن صفحه به چه صورت انجام می‌شود. قبل از آنکه به سراغ معرفی این روش بپردازیم اجازه دهید تا با بیان یک مثال تصویری، نحوه انجام این کار را عنوان کنیم. هنگامی که فایل صفحه ای مانند https://www.7learn.com/index.php را از مرورگر درخواست می کنید، اطلاعاتی بین مرورگر و سایت مورد نظر رد و بدل می‌شود که به طور مختصر شبیه به تصویر بالا است:

۱. مرورگر: سلام! لطفا فایل index.php را به من بده ۲. سرور: خوب! اجازه بده تا فایل مورد نظر را پیدا کنم ۳. سرور: پیدا کردم! این کد پاسخ شماست (۱۰۰کیلوبایت ها!!!! OK). من فایل را برایتان می‌فرستم ۴. مرورگر: ۱۰۰ کیلوبایت؟!!! اوه چقدر زیاد! انتظار… انتظار… بسیار خوب، بارگزاری شد

این یک مکالمه بسیار ساده (و نه کامل) از آن چیزی است که هنگام درخواست مشاهده صفحه از سوی مرورگر شما با سرور سایت انجام می‌گیرد.

کجای کار مشکل دارد؟

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

تصور کنید اگر یک فایل فشرده شده (ZIP) از صفحه درخواستی کاربر را، به جای صفحه کدهای معمول سایت‌تان برای مرورگر وی بفرستید، می‌توانید تا حد زیادی از پهنای باند مصرفی سرورتان را کاهش داده و از طرفی سرعت دانلود صفحه مورد نظر را برای او به میزان چشم‌گیری افزایش دهید. این دقیقا همان کاری است که GZIP برای شما می‌کند!

1. مرورگر: سلام! می‌توانم index.php را دریافت کنم؟ اگر نسخه فشرده دارید لطفا آن‌را به من بدهید. ۲. سرور: اجازه بدهید فایل را پیدا کنم. بله، همین‌جاست! نسخه فشرده می‌خواهید؟ عالی است. ۳. سرور: من index.php را پیدا کردم (۱۰۰کیلوبایت ها!!!! OK).اما نگران نباش  فایل را فشرده و برای‌تان ارسال می‌کنم. ۴. مرورگر: فوق‌العاده است. فقط ۱۰ کیلوبایت! آن‌را از حالت فشرده خارج و به کاربر نمایش خواهم داد.

در واقع هنگامی که مرورگر به سرور سایت مراجعه می‌کند، با ارسال پیامی، از سرور درخواست ارسال فایل فشرده را می‌کند. اگر این پیام از سوی سرور پاسخ داده شد (به عبارتی دیگر، اگر سایت مورد نظر از قابلیت gzip یا deflate استفاده کند)، فایل مورد نظر برای مرورگر ارسال خواهد شد. در غیر این‌صورت، همان روال عادی بارگزاری صفحه طی می‌شود.

به‌طور ساده برای فشرده کردن فایل‌های متنی خود می‌توانید از ماژول deflate آپاچی استفاده کنید. برای این کار کافی است کدهای زیر را در فایل .htaccess سایت خود کپی نمایید

این کد، فایل‌های CSS، JS، HTML، XHTML و PHP سایت شما را gzip می‌کند.

کد زیر نیز یک نمونه بسیار خوب برای فشرده سازی فایل‌های مورد اشاره روی سایت شما و نیز Cache کردن دیگر فایل‌های استاتیک است.

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

همانطور که در تصویر می بینید حجم واقعی صفحه 94328 بایت هستش که بعد از فشرده سازی به 18095 کاهش پیدا کرده یعنی چیزی حدود 80 درصد کاهش حجم... خیلی جالبه نه؟ حالا با محاسبات زیر جالب تر هم میشه:

حالا من می خواهم سرعت لود شدن وب سایت 7learn رو قبل و بعد از فشرده سازی براتون محاسبه کنم تا بیشتر فواید gzip رو درک کنید.

ابتدا فرض میکنیم که کاربر ما توسط سرویسی با سرعت (56kbps) به اینترنت متصل است:

تبدیل حجم واقعی صفحه به کیلو بایت:

94328/1024=92kbytes

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

18095/1024=17kbytes

حالا خودتون قضاوت کنید سرعت کدام حالت وب سایت برای لود شدن بیشتره؟ آیا تمام کاربرانتون از اینترنت پر سرعت استفاده می کنند؟ قطعا پاسخ شما منفی هستش  ...

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

منبع : وبلاگینا

امیدوارم که این مطلب مورد توجه شما واقع شده باشد.

موفق باشید...

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
محمد رسول

خیلی هم زیبا . اینجا آموزشی در باره پوشش بر روی عکسها وجود نداره ؟ منظور مثلا عکس رو به صورت بلور شده نشون بده که وقتی میری روش شفاف بشه و … یا وقتی رو عکس کلیک میکنی اونو بزرگش کنه و یک دکمه close هم داشته باشه . من خودم نمیدونستم چی جستجو کنم

لقمان آوند

می تونی از پلاگین fancybox استفاده کنی …

محمد رسول

آموزش پلاگین fancybox تو این سایت هست ؟

لقمان آوند

خیر .
ولی اینجا هست : http://fancybox.net/howto

علی

درود
سوال دارم:
آیا باید هر دو کدی که اینجا گذاشتید رو تو فایل htaccess کپی کنم یا فقط اولی رو؟

وحید صالحی

سلام دوست عزیز
همونطور که در آموزش هم گفتم اولین کد تنها مربوط به فشرده سازی text های صفحه هستش و به عنوان یه مثال ساده هستش اما دومی علاوه بر text شامل تمام عناصر سایت شما میشه…

محمد رسول

خیلی ممنون

مهران

سلام.
این روش هیچ مشکلی در بارگذاری صحیح صفحه به وجود نمیاره؟

وحید صالحی

سلام
نه مشکلی بوجود نمیاره چون کدهای استانداردی هستند…

سرزمین دی ال

سلام ببخشدید خواستم بگم مثال من که وبلاگ دارم فایل .htaccess نداره چه باید کرد ممنون

لقمان آوند

این ویژگی برای کسانی هست که هاست دارن و می تونند برای پوشه هاشون این فایل رو تعریف و ایجاد کنند .

naani

با سلام- من کد اول رو که گذاشتم و توی سایت مورد نظر رفتم، سایز واقعی صفحه من رو از 372 به 69 تغییر داد ولی گزینه اول همچنان No و گزینه دوم none بود. وقتی هم کد دوم رو گذاشتم بدون هیچ تغییری تمامی گزینه به مانند قبل، یعنی 372 و … بود. راهنمایی می فرمایید که مشکل از کجاست؟

با تشکر…

وحید صالحی

سلام
کد دوم رو نباید همراه کد اول استفاده کنی چون در کد دوم کد اول هم وجود داره…

رضا فخری

بسیار آموزش عالی بود.
در مورد وبسایت من میزان لود رو از 45,264 بایت به 8,766 بایت کاهش داد.
یعنی 80.6% فشرده کرده! سرعت مورد نیاز برای لود صفحه به 8 kbps کاهش یافت 🙂
موفق باشید.

talia

سلام
ببخشید من میخوام تو asp.net از اون استفاده کنم , آیا امکان داره ؟ و چطوری میشه اینکار رو کرد اگه امکان داره ؟
باتشکر

وحید صالحی

سلام دوست عزیز
نه برای asp نمی تونی از این کدها استفاده کنید این کد ها بر پایه php هستن…

talia

ممنون از جوابتون
راستی واسه بهبود صفحات وب با asp.net منبعی یا کدهای مثل همین کد های php که گذاشتین وجود داره ؟
یا سایت های که از اون ها استفاده کنیم (واسه اینکه امنیت یا نقص های سایت ما رو نشون بده)؟
تشکر

وحید صالحی

سلام دوست عزیز
یه تاپیک جدید در انجمن مربوط به asp.net ایجاد کنید تا جوابتون رو بدم این قسمت مربوط به سوالات مربوط به این مقاله هستش…
ممنون

علی

می خواستم بپرسم من از افزونه W3 Total Cache استفاده می کنم در اینصورت باز میشه از این کدها استفاده کرد یا باید برای استفاده از این کدها این افزونه رو پاک کنم؟
ممنون

وحید صالحی

افزونه W3 Total Cache برای cache کردن صفحات , broswer, دیتابیس و … هستش و از این طریق سرعت سایت رو افزایش میده و کاری با فشرده کردن صفحات نداره .
و فکر نمیکنم استفاده از این کدها مشکلی بوجود بیاره…

http://www.downloadco.ir

باسلام وتبریک سال نو به شما
من یه مشکل دارم نمیدونم از فایل .htaccess چرا دوتا توی سرورم هست یکی توی شاخه home ودیگری توی public_html حالا توی کدوم بزارم وایا باید این دوتا باشه یا نه کدومو پاک کنم اصلا باید پاک کنم یکی رو یانه وسوال بعداین کد دومو آخرش کپی کنم مشکل نداره باتشکر از شما

وحید صالحی

سلام دوست عزیز
سال نو شما هم مبارک
اگه فایل htaccess در root سایت یا همون public_html باشه دستورات داخلش به کل سایتت اعمال میشه ولی اگه در شاخه دیگری مثل home باشه دستورات درون آن تنها به شاخه home اعمال میشه یه چیزی مثل فیلتر کردن پس نتیجه می گیریم که می توانیم از چندین htaccess در سرور استفاده کنیم و به هر کدام از آنها وظایفی را محول کنیم… در مورد کپی کردن کدها در آخرش باید اول چک کنی که کدها تکراری نباشه اگه نبود مشکلی نداره می تونی کپی کنی

http://www.downloadco.ir

یه سوال دیگه اصلا اگه محتویات .htaccess به کلی پاک کنم وکد شماره 2 رو توش کپی کنم چی میشه باتشکر

وحید صالحی

اول باید ببینی کدهای موجود چه کاری رو انجام میدن ممکنه تنظیمات حیاتی مربوط به سایتت درش باشه که با پاک کردنش سایتت دچار مشکل بشه…
اگه به فرض همه رو پاک کردی و کد دوم رو درش کپی کنی فقط صفحات سایتت رو فشرده و باعث افزایش سرعت لود شدن صفحات سایتت میشه در حالی که از فایل htaccess تنها برای این منظور استفاده نمیشه و میشه سایر تنضیمات سایت از قبیل کد های مربوط به مثال امنیتی سایت و خیلی چیزهای دیگه رو درش قرار داد پس باید معلومات بیشتری در مورد توانایی های این فایل کسب کنی تا بتونی ازش به درستی استفاده کنی و باید بگم کد های مربوط به gzip تنها یکی از کارهایی هست که این فایل میتونه انجام بده…
موفق باشی

http://www.20dl.ir

باسلام
ایا بعد از گذاشتن کد باید چند روزی صبر کرد یا اینکه همان لحظه این امکان فعال میشود بنده مدت2روزه کدو توی htaccess گذاشتم اما درسایت فوق هنوز no رونشون میده باید هنوز منتظر باشم یا مشکل جای دیگریه لطفا راهنمایی نمایید

وحید صالحی

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

http://www.downloadco.ir

من 2 روز پیش کد شماره دو رو تویhtaccess کپی کردم ولی هنوز توی سایت مربوطه چک میکنم برام میزنه no ایا باید بیشتر منتظر باشم یا کار دیگر باید انحام دهم راهنمایی نمایید باتشکر

وحید صالحی

دوست عزیز پاسخ سوال شما رو در کامنت قبلیت دادم…

bahman

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

وحید

سلام
اگه فعاله دیگه نیازی نیست در سایتت قرار بدی…

7alma

آقا خیلی ممنون ببین چیکار کرد
Size, Markup (bytes) 40,045
Size, Compressed (bytes) 5,230
Compression % 86.9

وحید

مثل شعبده بازی می مونه نه؟؟؟

takwar

بسیار تا بسیار عالی عالی …

علی امینی

سلام آقا وحید عالی بود.
فقط یه چیزی ،بیشتر سایت هایی که توسط آنتی ویروس من (آواست) ویروسی شناسایی میشه آدرسش مثل این پایینه (مثلا):
http://fawzolazim.ir{gzip}” mesl ini ke neveshtam”
نمیدونم مشکل از آنتی ویروسمه یا واقعا داره ویروس پخش می کنن.
ممنون میشم راهنماییم کنید.
یا علی

وحید صالحی

سلام
ممنون
من تا حالا به همچین موردی برخورد نکردم…
شاید از انتی ویروست باشه شاید…

hossein

سلام من توی هاستم htaccess موجود نیست . خواستم بپرسم میشه خودم ایجاد کنم ؟ و اینکه مشکلی ایجاد نمیکنه؟

وحید صالحی

سلام
بله می تونید خودتون درست کنید ولی در بعضی مواقع و بسته به نوع مسائل امنیتی باید تغییراتی در نوع فایل ایجاد کنید و لرای اینکه بهتر متوجه بشی از سری آموزشی جوملا موجود درسایت قسمت هفتم اون رو مشاهده کن درش در مورد این تغییرات صحبت کردم …
موفق باشی

حسین

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

لقمان آوند

سلام دوست عزیز
کدتون مشکل خاصی نداره . البته به نظر میرسه توسط افزونه ی W3 total cache ایجاد شدن که خوبه .
موفق باشی

حسین

ممنون
خب حالا ماژول deflate رو کدهاشو بزارم یا کدهای بعدی که کش هم میکنه؟
آخه میدونیکه من از افزونه W3 total cache هم استفاده میکنم .
ضمناً تمامی کدهایی که براتون فرستادم رو افزونه W3 total cache در فایل htaccess ساخته ؟

لقمان آوند

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

حسین

سلام مهندس صالحی عزیز
مشکلی دارم که مدتهاست درگیرشم انشالله که بتونید راهنماییم کنید, البته از لحاظ وقت

من از افزونه فایرباگ (فایرفاکس) برای شناخت عناصر استفاده میکنم و فقط میتونم المانهایی رو که میخوام ویرایش بدم براحتی در فایلهای سی اس اس با مسیری که نشون میده پیدا کنم, اما مثلاً اگر بخوام متنی رو در اچ تی ام ال ویرایش کنم نمیتونم در فایرباگ مسیر فایل پی اچ پی رو پیدا کنم, نمیدونم تونستم منظورمو برسونم یا نه ؟

ممنون میشم اگه راهنمایی کنید
البته هر چی گشتم تماس با شما را پیدانکردم مجبور شدم اینجا مطرح کنم, میتونید به ایمیلم جواب بفرستید

وحید صالحی

سلام
دوست عزیز زبان های مثل phpو تکنولوژی asp زبان های سرور ساید هستند یعنی بعد از درخواست کاربر کدهای مربرطه در سرور پردازش شده و بصورت کد های html برای شما در مرورگر به نمایش در می آید بخاط همینه که شما کدهای php رو نمیتونید ببینید و پیدا کنید برای مثال اگه شما سورس سایت ما رو هم با راست کلیک و انتخاب گزینه view page source مشاهده کنید با تعداد زیادی تگ html و script مواجه میشید و در حالی که خبری از کدهای php نیست و یکی از دلایل آن بالا بردن امنیت هست…
موفق باشید…

حسین

ممنون توضیح بسیار جامع و مفیدی بود
اما وحید جان آخه هیچ راهی واسه منه آماتور نیست بتونم هر جا مثلاً تو پنل ادمین ویرایشی داشته باشم یا قسمتی رو بخوام ترجمه کنم یا…..؟
خب وقتی مشکلی ایرادی چیزی میبینم میخوام یراست برم سراغ فایلش که دیگه هی نگردم تو فایلای پی اچ پی یک یکی بازشون کنم

وحید صالحی

اگر فایل هات روی سرور باشه توسط ابزار firebug نمیشه دوست عزیز باید از کامنت گذاری در فایل هات استفاده کنی تا توسط اون ها بتونی به راحتی در محیطی که کد میزنی بهشون دسترسی داشته باشی…

onlooker

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

وحید صالحی

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

onlooker

سلام
ممنون از اینکه جواب دادید..

وحید صالحی

خواهش می کنم…

mohammad

ببخشید من اون کد ها رو به اون فایل اضافه کردم اما وقتی توی سایت آنالیز میکنم چیزی نمیاد . اینم نوشته های آنالیز :
Web page compressed? No
Compression type? none
Size, Markup (bytes) 88,816
Size, Compressed (bytes) 0
Compression % 0.0

وحید صالحی

فایل htaccess در روت سایتت بود یا خودت ایجاد کردی؟

mohammad

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

mohammad

این محتویات فایل htaccess سایت منه . میشه ویرایشش کنیو و با اون کدا بهم بدید ؟ مرسی

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

وحید صالحی

نیاز به ویرایش نیست همون کدها در زیر کدهای بالا پیست کن همین…

mohammad

الان همین کارو کردم . وقتی که این آدرس رو تایپ میکنم>>> www.2fani.ir
این نوشته میاد Unknown Error.
وقتی که این آدرس رو میزنمو>>>> http://2fani.ir
همون no و 0% میاد
میشه راهنمایی کنید ؟ 🙁

شاهین

عالیه!
تشکر از کدها 🙂

صابر

با سلام
من اینو اپلود کردم اما وقتی
http://www.gidnetwork.com/tools/gzip-test.php
میزنم
Unknown Error.
میاره
هاست من رایگان هست
از 000webhost.com گرفتم

کیوان علی محمدی

این هاست های رایگان همشون مشکل اساسی دارن.

صابر

تشکر فراوان با پاسخگوتون ممنون

حامد

با سلام
چگونه می توان Specify a Vary: Accept-Encoding header را افزایش داد؟
با تشکر

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :