gzip در وردپرس-بهبود سرعت بارگذاری سایت

[tabtak]

gzip در وردپرس-بهبو&#158.jpg

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



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

تا با بیان یک مثال تصویری، نحوه انجام این کار را عنوان کنیم. هنگامی که فایل صفحه ای مانند http://tabtak.ir/index.php را از مرورگر درخواست می کنید، اطلاعاتی بین مرورگر و سایت مورد نظر رد و بدل می‌شود که به طور مختصر شبیه به تصویر بالا است:
۱. مرورگر: سلام! لطفا فایل index.php را به من بده
۲. سرور: خوب! اجازه بده تا فایل مورد نظر را پیدا کنم
۳. سرور: پیدا کردم! این کد پاسخ شماست (۲۰۰ OK). من فایل را برایتان می‌فرستم
۴. مرورگر: ۱۰۰ کیلوبایت؟ اوه چقدر زیاد! انتظار… انتظار… بسیار خوب، بارگزاری شد
این یک مکالمه بسیار ساده (و نه کامل) از آن چیزی است که هنگام درخواست مشاهده صفحه از سوی مرورگر شما با سرور سایت انجام می‌گیرد.
کجای کار مشکل دارد؟
درواقع مشکل کار همین حجم بالای محتوای صفحه است. کدها و تگ‌های به‌کار برده شده و تکراری موجود در صفحات، باعث سنگین شدن فایل آن‌ها می‌شود و این امر، بارگزاری صفحه را برای کاربران آن سایت به تاخیر می‌اندازد. خوب حالا سوال اینجاست که چطور می‌توان بدون دست بردن به کد و محتوای سایت، حجم صفحات را کاهش داد؟
تصور کنید اگر یک فایل فشرده شده (ZIP) از صفحه درخواستی کاربر را، به جای صفحه کدهای معمول سایت‌تان برای مرورگر وی بفرستید، می‌توانید تا حد زیادی از پهنای باند مصرفی سرورتان را کاهش داده و از طرفی سرعت دانلود صفحه مورد نظر را برای او به میزان چشم‌گیری افزایش دهید. این دقیقا همان کاری است که GZIP برای شما می‌کند!
. مرورگر: سلام! می‌توانم index.php را دریافت کنم؟ اگر نسخه فشرده دارید لطفا آن‌را به من بدهید.
۲. سرور: اجازه بدهید فایل را پیدا کنم. بله، همین‌جاست! نسخه فشرده می‌خواهید؟ عالی است.
۳. سرور: من index.php را پیدا کردم (۲۰۰ OK). فایل را فشرده و برای‌تان ارسال می‌کنم.
۴. مرورگر: فوق‌العاده است. فقط ۱۰ کیلوبایت! آن‌را از حالت فشرده خارج و به کاربر نمایش خواهم داد. در واقع هنگامی که مرورگر به سرور سایت مراجعه می‌کند، با ارسال پیامی، از سرور درخواست ارسال فایل فشرده را می‌کند. اگر این پیام از سوی سرور پاسخ داده شد (به عبارتی دیگر، اگر سایت مورد نظر از قابلیت gzip یا deflate استفاده کند)، فایل مورد نظر برای مرورگر ارسال خواهد شد. در غیر این‌صورت، همان روال عادی بارگزاری صفحه طی می‌شود.

چرا باید حالت فشرده سازی Gzip را فعال کرد ؟

منافع و مزایای چندگانه ای برای فعال کردن حالت فشرده سازی Gzip وجود دارد زیر یکی از محبوب ترین روش های افزایش سرعت سایت با کاهش بیش از ۷۰ درصد از سایز صفحه وبلاگ شما می باشد، به همین علت است که اکثر سایت های موجود در وب، از حالت فشرده سازی Gzip استفاده می نمایند. Gzip موجب خواهد شد سایت شما چندین ثانیه سریع تر لود گردد.
مزایا :

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


دو روش برای فعال سازی حالت فشرده سازی Gzip در زیر آورده شده است.

۱- فعال کردن Gzip توسط پلاگین ها
W3 Total Cache
در صورت امکان این افزونه رو به صورت کامل آموزش خواهیم داد در آینده نزدیک
پلاگین محبوب (W3 Total Cache) نقش مهمی در توسعه عملکرد وب سایت شما بازی میکند، همچنین به شما امکان فعال سازی Gzip را می دهد (برای فعال کردن فشرده سازی Gzip توسط W3 Total Cache به Performance سپس Browser Cache بروید).



افزونه(وردپرس Gzip را فشرده سازی)
WordPress Gzip Compression

افزونه (gzip فشرده سازی نینجا سرعت)
GZip Ninja Speed Compression

آموزش کار با افزونه GZip Ninja Speed Compression

این افزونه با فشرده سازی کدهای HTML و CSS و بهینه سازی آنها و در نتیجه سریع تر شده انتقالب صفحات وب سایت از سرور به مرورگر باعث افزایش سرعت سایت وردپرسی می شود.
بعد از نصب افزونه گزینه GZip Ninja Speed به داشبورد وردپرس اضافه می شود

با کلیک روی این گزینه به صفحه افزونه می رویم که تنها یک دکمه update وحود دارد

بعد از کلیک پیغام Settings saved successfully. داده میشود.همین!
نکته۱: استایل خود افزونه با سایت های فارسی کمی مشکل داشت که در افزونه ای که در همیار وردپرس برای دانلود قرار داده شده این مشکل حل شده.
نکته۲:برای استفاده از این افزونه یا افزونه های مشابه باید در هاست شما قابلیت gzip فعال باشد(معمولا در هاستینگ ها اینطور هست)
۲- فعال کردن حالت فشرده سازی Gzip توسط فایل htaccess
به‌طور ساده برای فشرده کردن فایل‌های متنی خود می‌توانید از ماژول deflate آپاچی استفاده کنید. برای این کار کافی است کدهای زیر را در فایل .htaccess سایت خود کپی نمایید.برای این کار تنها کافی است که به سی پنل خودتون بروید و در فولدر اصلی سایت مکانی که فایل های اصلی سایت شما قرار دارد در فایل htaccess. کد های زیز را به انتهای آن اضافه کنید :
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

به صورت جداگانه میتونید از کد های زیر استفاده کنیدکد HTML:

<ifModule mod_deflate.c>
<filesMatch "\.(css|js|x?html?|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>

این کد، فایل‌های CSS، JS، HTML، XHTML و PHP سایت شما را gzip می‌کند.
کد زیر نیز یک نمونه بسیار خوب برای فشرده سازی فایل‌های مورد اشاره روی سایت شما و نیز Cache کردن دیگر فایل‌های استاتیک است
# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch "\.(css|js|x?html?|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

# BEGIN Turn ETags Off
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off

# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header

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

بررسی صحت عملکرد gzip سایت

یک راه دیگه هم هست و بیان میکنم شاید مورد استفاده دوستان قرار بگیر.
برای فعال کردن آن در وردپرس یک راه ساده هست:
در قسمت مدیریت که واردی شدید به لینک options.php بروید مثلا:
http://www.yoursite.com/wp-admin/options.php
حال به همه آپشن های وردپرس دسترسی دارد و کافیه گزینه gzip compression را برابر ۱ قرار دهید.

امیدوار هستیم در آینده با ارائه مطالب مفیدتر و کاربردی تر نظر شما دوستان وردپرسی را جلب نماییمنظر شما چی هست کردم روش بهتر هست به نظرتون ؟

منبع : تب تک

[pixco]

درود من انجام دادم توفیقی حاصل نشد متاسفانه .شایدم اشتباه رفتم شما ببینید درست رفت میا نه .افزونه W3 Total Cache رو نصب کردم بعد اون دوتا افزونه دیگرم نصب کردم .تو تنظیمات افزونه total cash رفتم اونارو تیک زدم بعد سیو کردم .این کاری بود که من انجام دادم

[shivahost]

من خیلی با این gzip و روش های مختلفش ور رفتم و فعال هم هست روی سایتمون اما باز سایتی مثل gtmetrix تعدادی از فایل های js رو میگه کامپرس نیستن! آیا راهی برای این ها هست؟

[tabtak]

درود من انجام دادم توفیقی حاصل نشد متاسفانه .شایدم اشتباه رفتم شما ببینید درست رفت میا نه .افزونه W3 Total Cache رو نصب کردم بعد اون دوتا افزونه دیگرم نصب کردم .تو تنظیمات افزونه total cash رفتم اونارو تیک زدم بعد سیو کردم .این کاری بود که من انجام دادم

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

- - - Updated - - -

من خیلی با این gzip و روش های مختلفش ور رفتم و فعال هم هست روی سایتمون اما باز سایتی مثل gtmetrix تعدادی از فایل های js رو میگه کامپرس نیستن! آیا راهی برای این ها هست؟

سلام . آیا دستی css , js رو کامپرس کردید یا از سایت های آنلاین که این کار رو واستون انجام میدن ؟

[shivahost]

سلام . آیا دستی css , js رو کامپرس کردید یا از سایت های آنلاین که این کار رو واستون انجام میدن ؟

دستی؟ نه بابا همین افزونه ها، htaccess یا options.php همه روش ها

[tabtak]

دستی؟ نه بابا همین افزونه ها، htaccess یا options.php همه روش ها

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

[shivahost]

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

ببینید همانطور که در لینکی که دادید چک می کنیم نشون میده gzip یا کامپرس کلا فعال هست اما یک تعداد فقط فایل js رو در سایت هایی مثل gtmetrix فشرده نشده نشان می دهد! حتی سرور ما nginx هم داره که اونجا هم فعاله gzip

[tabtak]

ببینید همانطور که در لینکی که دادید چک می کنیم نشون میده gzip یا کامپرس کلا فعال هست اما یک تعداد فقط فایل js رو در سایت هایی مثل gtmetrix فشرده نشده نشان می دهد! حتی سرور ما nginx هم داره که اونجا هم فعاله gzip

به صورت مثل اگر منظورتون این هست
http://www.shivahost.net/wp-content/.../js/plugins.js

بهینه نشده bytes (Input 160512) من به صورت مبتدی بهینه کردمbytes (Output 123,937)
29.51% حجمش کمتر شده حجم کمتر سرعت لود بهتر سئو مناسب . من راضی گوگل راضی (به قول ما ترکا )


وقتی اینو جایگزین کنی و دوباره کوک ها رو پاک کنی و با سایت gtmetrix اسکن رو انجام بدید دیگه برات نشون نمیده که بهینه نیست

[shivahost]

به صورت مثل اگر منظورتون این هست
http://www.shivahost.net/wp-content/.../js/plugins.js

بهینه نشده bytes (Input 160512) من به صورت مبتدی بهینه کردمbytes (Output 123,937)
29.51% حجمش کمتر شده حجم کمتر سرعت لود بهتر سئو مناسب . من راضی گوگل راضی (به قول ما ترکا )


وقتی اینو جایگزین کنی و دوباره کوک ها رو پاک کنی و با سایت gtmetrix اسکن رو انجام بدید دیگه برات نشون نمیده که بهینه نیست

بله می دونم و ممنون از شما بابت زحمتتون، ولی سوال من اینه چرا gzip با این فایل ها کاری نداره!؟

[pixco]

میشه آموزش رو قرار بدید ببینینم.جالب این جاست که حتی سایت gtmetrix هم این روش رو تایید کرده https://gtmetrix.com/wordpress-optimization-guide.html

- - - Updated - - -

من طبق آموزشی که در لینکی که در نوشته بالا قرار دادم رفتم و دوتا افزونه رو نصب و اجرا کردم و درصد page speed از 83 رفت به 87 درصد و سرعت لودم بهتر شد.خواستم بدونم این روند آیا مشکلی ایجاد نمیکنه در سئو و قالب سایت؟