سایت های اینترنتی با توجه به سرعت کند و هزینه بسیار بالای اینترنت برای کاربران، نیازمند سرعت بارگذاری هر چه سریع تر هستند اما متاسفانه اکثر مدیران سایت ها اطلاع یا تخصص کافی برای افزایش سرعت سایت خود را ندارند بر همین اساس در این مطلب تلاش کردم که با در اختیار گذاشتن تجربیات شخصی خودم تا حدودی به شما که درحال مطالعه این مطلب هستید کمک کنم.
Avoid a character set in the meta tag – از تعیین نوع کاراکتر های سایت در تگ meta خودداری کنید.
حروف زبان شیرین پارسی در کامپیوتر جزو رمزنگاری (Encoding) های یونیکد (Unicode) حساب می شوند و متاسفانه به صورت پیش فرض در بعضی از مرورگر ها مانند Mozilla Firefox برای نمایش در صفحات وب پشتیبانی نمی شوند به همین دلیل در کد (تقریباً) همه قالب ها با قرار دادن یک تگ meta در داخل تگ head به مرورگر ها گفته می شود تا از Encoding معروف UTF-8 که تقریباً همه کاراکتر های زبان های مختلف را پشتیبانی می کند استفاده کنند اما به جای قرار دادن این تگ در صورتی که فضای میزبان (Host) اختصاصی در اختیار داشته باشید می توانید براحتی از یک خط کد AddDefaultCharset UTF-8 در اولین خط فایل htaccess. استفاده کنید.با این کد رمزنگاری UTF-8 توسط وب سرور (WebServer) به HTTP Header ارسالی قبل از HTML تمامی صفحات اضافه می شود.HTTP Header هم بخشی مخفی محتوی تنظیماتی برای مرورگر است که حتی در کد های سایت (Source) هم نمایش داده نمی شود می توانید با جستجو HTTP Header در بخش افزونه های مرورگر های فایرفاکس، کروم و… افزونه های برای مشاهده HTTP Header سایت ها نصب کنید.اطلاعات بیشتر در پیشنهاد Specify a character set early
Avoid bad requests – از قرار دادن لینک های خراب در سایت خودداری کنید.
بعضی از صفحات یا فایل های سایت ممکن است عمداً یا سهواً حذف شده باشند اما همچنان لینک آن در سایت شما موجود باشد.اگر لینک هایی که سایت gtmetrix.com با کلیک بر روی این پیشنهاد نمایش داده است اشتباهی حذف شده می توانید سریعاً اقدام به ترمیم لینک ها با قرار دادن محتوایی در آن ها کنید اما اگر لینک عمداً توسط شما حذف شده باشد باید آن را از کد قالب و صفحات سایت خود نیز حذف کنید.
Avoid CSS @import – از فراخوانی فایل های CSS توسط کد import@ خودداری کنید.
فراخوانی فایل CSS دیگری در داخل یک فایل CSS توسط کد import@ یا قرار دادن کد import@ در تگ <style> به جای فراخوانی مستقیم فایل توسط تگ link باعث ایجاد درخواست های بیشتر برای مرورگر و در نتیجه کاهش سرعت سایت شما می شود. بهترین کار این است که فایل های CSS را تنها توسط تگ link به صورت <link rel="stylesheet" href="آدرس فایل CSS"> در داخل تگ head کد قالب خود فراخوانی کنید.
Avoid landing page redirects – از انتقال صفحات سایت به آدرس های دیگر خودداری کنید.
در بعضی مواقع انتقال یک آدرس اینترنتی به آدرسی دیگر می تواند کار ساز باشد مانند انتقال آدرس کامل سایت از یک دامنه به دامنه ای دیگر اما انتقال در صفحات داخلی سایت خصوصاً وقتی صفحات و بازدید کننده های زیادی وجود داشته باشد باعث کاهش سرعت بارگذاری سایت برای کاربران می شود.در این صورت بهترین کار ویرایش لینک های سایت و قرار دادن لینک هایی است که باید منتقل می شدند برای مثال اگر صفحه site.ir/test باید به site.ir/test2 منتقل بهتر است در کد های سایت به صفحه site.ir/test2 لینک دهید و اگر صفحه اول در موتور جستجوی گوگل نیز ثبت شده بهترین کار انتقال یا حذف لینک در کنترل پنل Google Web Master است.
Combine images using CSS sprites – تصاویر کوچک را توسط CSS Sprites با هم ترکیب کنید.
معمولاً در ظاهر سایت ها از تصاویری مانند تصویر منو ها، دکمه ها، لوگو سایت های دوستان و… استفاده می شود که حجم و اندازه پیکسلی کوچکی دارند.این نوع تصاویر با توجه به استفاده زیاد آن ها در هر صفحه سایت موجب ایجاد درخواست های تکی خیلی زیادی برای مرورگر کاربر می شوند به همین دلیل بهترین پیشنهاد نمایش همه تصاویر فقط با یک درخواست در مرورگر کاربر است که این کار براحتی با CSS Sprite ها قابل انجام است.اگر با بازی های رایانه ای آشنایی داشته باشید احتمالاً میدانید که تصاویر Sprite در بازی ها نیز استفاده می شود CSS Sprite ها هم بر همان اساس است به طوری که تمامی تصاویر کوچک در یک تصویر معمولاً با فرمت png. کنار هم قرار می گیرند و توسط کد استایل background-position از آن استفاده می شود یعنی برای همه مکان هایی که از تصاویر کوچک استفاده شده است یک تصویر با کد استایل background-image فراخوانی می شود و فقط با کد استایل background-position تعیین می شود که مرورگر از کجای تصویر کامل برای نمایش در آن مکان سایت استفاده کند.در این روش چون فقط یک درخواست برای این عکس توسط مرورگر کاربر ارسال می شود باعث افزایش چشمگیر سرعت بارگذاری سایت و خصوصاً همین تصاویر می شود.
Defer parsing of JavaScript – از فراخوانی تعداد زیاد جاوا اسکریپت ها خودداری کنید.
کد های جاوا اسکریپت عملکرد هایی را تحت سیستم کاربر اجرا می کنند که می توانند علاوه بر کاربر برای مدیر سایت نیز جالب و کاربردی باشند اما استفاده بیش از حد از این کد ها باعث افزایش حجم صفحات سایت و در نتیجه کاهش سرعت بارگذاری می شود به همین دلیل اگر کد های جاوا اسکریپتی در سایت شما وجود دارد که نیاز مبرمی بر بودن آن ها ندارید حذف آن ها می تواند به صورت چشم گیری باعث افزایش سرعت سایت شما شود.همچنین کد های تبلیغاتی مثل پاپ آپ (Pop-Up) ها نیز از کد های جاوا اسکریپت استفاده می کنند که در ازای پول تبلیغاتی که فقط به شما می رسد کاربران شما باید رنج سرعت خیلی کند سایت را علاوه بر عذاب باز شدن پاپ آپ تحمل کنند.اگر کد های جاوا اسکریپتی وجود دارند که به هیچ وجه من الوجود مایل به حذف آن ها نیستید بهترین کار Minify و اگر مشکلی نداشت ترکیب آن ها در یک فایل است.درباره Minify کردن کد های جاوا اسکریپت پایین تر توضیح دادم اما درباره ترکیب آن ها در یک فایل به دلایل مثل کد نویسی غیر استاندارد ممکن است باعث عدم اجرای بعضی کد ها شود پس بهتر است به صورت آزمایشی یک بار آن ها را ترکیب کنید اگر مشکلی نداشت که هیچ ولی اگر مشکلی به وجود آمد فایل های قبل را بازگردانید.
Enable gzip compression – فشرده سازی gzip را در سایت خود فعال کنید.
فشرده سازی فایل های ثابت (Static) با الگوریتم gzip می تواند به صورت چشمگیری باعث افزایش سرعت بارگذاری صفحات سایت شما شود.با این ویژگی فایل های ثابت سایت شما مانند فایل های css. و فایل های js. به صورت فشرده شده خودکار توسط وب سرور به مرورگر ارسال می شود و خوشبختانه چون اکثر مرورگر های امروزی از فشرده سازی gzip پشتیبانی می کنند سایت با سرعتی دو چندان برای کاربر باز می شود.این مورد ممکن است در میزبان (Host) هایی که سرور خود را کاملاً بهینه می کنند مثل پارس پک parspack.com به صورت پیش فرض فعال باشد اما اگر میزبان سایت شما فشرده سازی gzip را در سرور خود فعال نکرده است می توانید کد زیر در فایل htaccess. واقع در پوشه اصلی سایت خود (public_html) قرار دهید تا فشرده سازی gzip را در تمامی صفحات سایت شما فعال کنید.
<IfModule mod_deflate.c> <IfModule mod_headers.c> Header append Vary: Accept-Encoding </IfModule> AddOutputFilterByType DEFLATE application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/html text/javascript text/plain text/xml text/x-component text/x-js text/richtext text/xsd text/xsl <IfModule mod_mime.c> AddOutputFilter DEFLATE js css htm html xml </IfModule> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule>
Enable Keep-Alive – ویژگی Keep-Alive را در وب سرور فعال کنید.
به صورت پیش فرض مرورگر کاربر برای نمایش هر صفحه از یک سایت نیازمند ایجاد اتصال (Connection) جدید به آن سایت است.پروسه ایجاد اتصال به سرور خصوصاً برای سایت هایی که کاربران و صفحات زیادی دارند ممکن است طولانی شود و حتی در بعضی مواقع با اخطار هایی مثل Connection Time Out رو به رو شود.برای حل این مشکل و باز شدن سریع تر سایت برای هر کاربر وب سرور (WebServer) ها ویژگی به نام Keep-Alive دارند که پس از اولین اتصال مرورگر کاربر به سرور اطلاعات Connection در سرور به صورت موقت ذخیره شده و مرورگر کاربر برای مشاهده صفحه ای جدید از سایت نیازمند ایجاد اتصال جدید به سرور نیست.ویژگی Keep-Alive در اکثر هاستینگ (Hosting) های بهینه مانند پارس پک parspack فعال است اما به دلیل اینکه این ویژگی نیازمند استفاده بیشتری از Ram و CPU سرور است بعضی از هاستینگ ها نیز برای صرفه جویی در هزینه های خود این ویژگی را فعال نمی کنند.برای فعال سازی ویژگی Keep-Alive در هاست خود می توانید کد زیر را در فایل htaccess. پوشه اصلی سایت خود (public_html) قرار دهید.با این کد ویژگی Keep-Alive برای سایت شما فعال می شود اما اگر مدیر سرور راضی به فعال سازی این ویژگی نباشد ممکن است این کد را حذف یا کارکرد آن را خنثی کنند.
<IfModule mod_headers.c> Header set Connection keep-alive </IfModule>
Inline small CSS – کد های CSS کوچک را درون کد HTML قرار دهید.
بعضی از فایل های CSS ممکن است دارای تعداد خط های کمی از کد های CSS باشند که پیشنهاد gtmetrix.com این است که خطوط کم استایل های CSS را در همان کد HTML به صورت inline قرار دهید با اینکار از ارسال و دریافت یک درخواست جداگانه برای چند خط کد CSS جلوگیری می کنید و در نتیجه سرعت نسبتاً بیشتری دارید اما چون نوشتن کد های CSS به صورت inline درون فایل HTML جزو استاندارد های HTML5 حساب نمی شود پیشنهاد من این است که اگر چندین فایل CSS وجود دارد آن ها را با هم ترکیب کنید که هم تعداد کد های CSS درون فایل بالا رود و هم تعداد درخواست های مرورگر کاربر کمتر شود با این کار علاوه بر افزایش سرعت سایت از فراخوانی چندین فایل CSS متعدد در کد HTML نیز جلوگیری می کنید.
Inline small JavaScript – کد های جاوا اسکریپت کوچک را درون کد HTML قرار دهید.
این گزینه نیز مانند گزینه بالایی است با این تفاوت که در این گزینه فایل های جاوا اسکریپت با تعداد خط های کد کم یافت شده است.ترکیب فایل های جاوا اسکریپت به دلیل غیر استاندارد بودن کد نویسی بعضی از آن ها موجب کار نکردن بعضی و یا همه آن ها می شود به همین دلیل بهتر است اگر کد فایل هایی که سایت gtmetrix.com به آن ها اشاره نموده نوشته خودتان است آن ها را با رعایت Syntax زبان جاوا اسکریپت ترکیب کنید اما اگر به زبان جاوا اسکریپت مسلط نیستید و فایل های مذکور نوشته شما نیست آن هایی که خط های کمی را در فایل ذخیره شده است به فایل HTML سایت خود در داخل تگ <script type="text/javascript"> کد جاوا اسکریپت </script> قرار دهید.
Leverage browser caching – نیروی کَش (Cache) مرورگر را با تعیین تاریخ انقضاء بیشتر کنید.
در اینترنت اکثراً همه با واژه کَش (Cache) آشنا هستند اما کمتر کسی پیدا می شود که با نحوه کامل کش شدن اطلاعات سرور توسط مرورگر اطلاع داشته باشد.من اینجا قصد آموزش مرورگر یا کش را ندارم اما باید بدانید همه کوکی (Cookie) ها نیازمند تاریخ انقضاء (Expiry Date) معین و دقیق هستند تا مرورگر بداند که آن فایل را حداکثر تا چه زمانی باید در کامپیوتر کاربر نگه دارد.فایل های ثابت (Static) متشکل تصاویر، css. ها، js. ها و… نیز برای کش شدن در هارد (Hard Disk) سیستم شخص نیازمند تعیین تاریخ انقضاء دقیق هستند.این تاریخ باید بر اساس نوع فایل ها در HTTP Header که قبل از ارسال HTML به مرورگر ارسال می شود وجود داشته باشد.HTTP Header اطلاعاتی درباره صفحه درخواستی است که توسط وب سرور به صورت مخفی به مرورگر ارسال می شود و حتی در کد های Source سایت نیز قابل مشاهده نیست برای مشاهده دستورات HTTP Header صفحات می توانید متن header را در بخش افزونه های مرورگر های فایرفاکس، کروم و… جستجو کنید و افزونه هایی را برای مشاهده HTTP Header ها نصب کنید.برای ارسال تاریخ انقضاء دقیق برای نوع هر فایل نیز می توانید کد زیر در فایل htaccess. واقع در پوشه اصلی سایت خود (public_html) قرار دهید تا از این پس وب سرور به صورت خودکار تاریخ انقضاء فایل های ثابت را در تمامی صفحات سایت شما ارسال کند.
<IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype .otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype .ttf .ttc AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip AddType application/vnd.ms-fontobject eot AddType application/x-font-ttf ttf ttc AddType font/opentype otf AddType application/x-font-woff woff </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule>
Minify CSS – کد های CSS را کوچک (Minify) کنید.
Minify JavaScript – کد های جاوا اسکریپت را کوچک (Minify) کنید.
کوچک کردن (Minify) کد یعنی حذف کد های راهنما (Comments)، فاصله های اضافی، خطوط و سایر موارد اضافی که در اجرای کد ها تاثیر ندارند.با Minify کردن کد ها خوانایی آن ها برای چشمان انسان دشوار می شود اما چون باعث کاهش حجم بسیار چشمگیر فایل کد ها می شود در افزایش سرعت بارگذاری سایت تاثیر خیلی زیادی دارد.معمولاً پیشنهاد همه در این باره این است که از فایل های CSS و جاوا اسکریپت خود یک کپی ایجاد کنید و به قبل از پسوند آن واژه min. به معنای کوچک شده (Minified) را اضافه کنید سپس در فایل های HTML به CSS ها و جاوا اسکریپت هایی که دارای واژه min. در قبل از پسوندش است لینک دهید.با این کار علاوه بر این که فایل های جاوا اسکریپت و CSS به صورت کوچک شده برای کاربر بارگذاری می شود خودتان نیز در فضای میزبان (Host) خود یک پشتیبان (Backup) از نسخه کامل فایل ها در اختیار دارید.
Minify HTML – کد های HTML را کوچک (Minify) کنید.
کوچک کردن (Minify) کامل کد های HTML به دلیل اینکه اکثراً خود سیستم های مدیریت محتوا مانند وردپرس یا افزونه هایشان کد هایی را به صورت inline به کد HTML صفحات سایت اضافه می کنند امکان پذیر نیست به همین دلیل این مورد زیاد مهم خطاب نشده و اکثر وب سایت ها آن را به 100 درصد خود نمی رسانند اما اگر سایت شما با کد اختصاصی است و امکان کوچک کردن کامل کد HTML صفحات سایت را دارید انجام دادن آن خالی از لطف نیست و باعث افزایش سرعت خیلی زیادی در بارگذاری صفحات سایت می شود.
Minimize redirects – انتقال های بی مورد صفحات را حذف کنید.
انتقال هایی مثل انتقال یک صفحه با www به همان صفحه بدون www یا بالعکس و یا انتقال یک صفحه بدون / (Slash) به صفحه ای با / برای کسانی که از موتور های جستجو یا مکان های دیگر وارد سایت شما می شوند شاید کاربردی باشد اما انتقال لینک های داخلی خود سایت واقعاً کار بی موردی است برای مثال فرض کنید شما تعیین کردید سایت فقط با www باز شود اما در کد HTML به صفحات سایت بدون www لینک داده باشید در این صورت کاربر با انتقال (Redirect) های مکرر و خیلی زیاد مواجه می شود که باعث کاهش سرعت چشمگیری می شود برای رفع این مشکل فقط کافی است همان لینک بعد از انتقال را در صفحات سایت خود قرار دهید که حداقل کاربر در خود سایت شما با کلیک روی لینک های داخلی شما چندین بار منتقل نشود.
Minimize request size – حجم بسته (Packet) های دریافتی HTTP Headers را کم کنید.
یک درخواست HTTP استاندارد هرگز نباید حجم بیشتر از یک بسته (Packet) معادل 1500 بایت داشته باشد.اطلاعات سایت ها در بستر اینترنت بر اساس بسته هایی جدا جدا ارسال می شوند که اگر حجم این بسته ها بالاتر از استاندارد یک بسته که 1500 بایت است باشد ممکن است با اینترنت بعضی از سرویس دهنده های اینترنت (ISP) که محدودیت حجم برای بسته (Packet) های ارسالی و دریافتی ایجاد می کنند مثل شرکت پارس آنلاین سایت شما اصلاً نمایش داده نشود و یا با تداخلاتی نمایش داده شود که بعضی اوقات قطع باشد و بعضی اوقات وصل برای جلوگیری از بروز این مشکل حتی در همان بعضی از اینترنت ها باید HTTP Header هایی مانند کوکی ها (Cookies)، شناسایی مرورگر ها (Browser-set fields)، دریافت اطلاعات بیش از حد از متُد (Method) ارسالی GET در URL و… که باعث افزایش حجم بیش از حد بسته ارسالی به ISP می شود را حذف و یا بهینه تر کنید تا همه مردم بتوانند از سایت شما استفاده کنند.
Optimize images – حجم تصاویر سایت را کمتر کنید.
برای هر تصویر مانند سایر فایل های سایت نیاز به یک درخواست از مرورگر و دانلود کامل آن فایل است به همین دلیل سایت های پر از تصاویر با سرعت خیلی کمی نسبت به سایر سایت ها باز می شوند اما خوشبختانه برای همه نوع تصاویر روش هایی برای کاهش حجم آن ها ابداع شده است تا علاوه بر افزایش سرعت بارگذاری سایت، از تمام شدن سریع پهنای باند ماهانه میزبان (Host) اختصاصی خود نیز جلوگیری کنید.بهترین فرمت برای تصاویر کوچک و متوسط سایت ها فقط و فقط PNG و برای تصاویر خیلی بزرگ JPEG است.شاید بتوان گفت فرمت PNG تنها فرمتی است که الگوریتم های فشرده سازی دارد که بدون هیچ افت کیفیتی حجم فایل را کاهش می دهند در این راستا الگوریتم OptiPNG و PNGOUT جزو موفق ترین الگوریتم های فشرده ساز تصاویر با فرمت PNG است اما هر کدام به تنهایی کاهش حجم چشمگیری ندارند ولی وقتی توسط نرم افزار رایگانی مثل PNGGauntlet هر دو با هم ترکیب شوند کاهش حجم خیلی بیشتری خصوصاً در تعداد زیاد فایل ها اعمال می شود پیشنهاد میکنم حتماً نرم افزار رایگان PNGGauntlet را از سایت سازنده به آدرس pnggauntlet.com دانلود کنید.برای تصاویر JPEG هم نرم افزار های زیادی وجود دارند اما اکثراً با کاشه کیفیت تصویر موجب کاهش حجم آن می شوند بهترین سرویس کاهش حجم تصاویر JPEG از لحاظ عدم افت کیفیت فقط سرویس اینترنتی Yahoo SmushIt است که آن هم حجم زیادی در مقایسه با الگوریتم های فرمت PNG کاهش نمی دهد اما برای تعداد خیلی زیاد فایل خیلی هم خوب است و خوشبختانه سرویس API نیز ارائه میکند که به همین دلیل می توانید به جای استفاده از سایت در زبان هایی مثل php نیز از آن استفاده کنید یا در سایت وردپرسی خود افزونه WP-SmushIt را نصب کنید.از سایر فرمت های تصاویر فقط GIF می ماند که برای استفاده در وب مناسب است که من به شخصه فشرده ساز تخصصی برای آن پیدا نکردم اما می توانید از ویژگی Save for Web نرم افزار فتوشاپ یا کاهش کیفیت سایر نرم افزار ها مثل Gimp استفاده کنید.
Optimize the order of styles and scripts – ترتیب متوالی برای استایل ها و جاوا اسکریپت ها تعیین کنید.
کد های فراخوانی استایل ها و جاوا اسکریپت ها باید بر اساس نوع آن ها با ترتیب متوالی و پشت سر هم قرار گیرند.طوری که ابتدا همه استایل ها فراخوانی شوند سپس سراغ فراخوانی جاوا اسکریپت ها برویم برای مثال اگر چند استایل فراخوانی کنید سپس سراغ فراخوانی جاوا اسکریپت ها بروید و دوباره بعد از آن استایلی جدید فراخوانی کنید باعث کاهش سرعت نسبی بارگذاری سایت خود می شوید زیرا مرورگر وقتی درحال فراخوانی یک جاوا اسکریپت باشد و اگر خط بعدی را نیز فراخوانی جاوا اسکریپت بداند با توجه به اینکه از قبل آماده سازی برای فراخوانی جاوا اسکریپت ها انجام داده است با سرعت بیشتری جاوا اسکریپت های متوالی و پشت سر هم در خط های بعد را فراخوانی می کند.این موضوع در فراخوانی استایل ها نیز صدق می کند به همین دلیل پیشنهاد gtmetrix.com این است که ابتدا همه استایل ها را فراخوانی کنید سپس سراغ فراخوانی جاوا اسکریپت ها بروید تا حتی شاهد کاهش سرعت نسبی بارگذای سایت خود نیز نباشید.
Prefer asynchronous resources – اسکریپت های مانع بارگذاری HTML را تصحیح کنید.
اگر جاوا اسکریپت های زیادی داخل تگ head فراخوانی کنید و کاربر مدت زمان خیلی زیادی را در صفحه سفید بارگذاری بماند باعث این مشکل می شوید.به صورت معمول مرورگر وقتی به تگ <script> می رسد بارگذاری HTML سایت را متوقف کرده و سراغ بارگذاری و اجرای جاوا اسکریپت می رود و پس از بارگذاری و اجرای کامل آن ها دوباره به بارگذاری HTML سایت ادامه می دهد.در این بین اگر تا قبل از شروع بارگذاری و اجرای جاوا اسکریپت ها صفحه ای به کاربر نمایش داده نشده باشد کاربر بسته به سرعت اینترنت خود ممکن است حتی تا دقایقی فقط صفحه سفید بارگذاری را ببینید.برای جلوگیری از بروز این مشکل بهترین پیشنهاد قرار دادن جاوا اسکریپت ها در پایین ترین (Footer) نقطه کد HTML قبل از بسته شدن تگ <html> است اما اگر حتماً مایل به قرار دادن آن ها در داخل تگ head هستید می توانید به آخر تگ <script> واژه async را به این صورت <script src="demo_async.js" async></script> اضافه کنید تا مرورگر آن را به صورت پروسه ای جدا از پروسه بارگذاری HTML سایت بارگذاری و اجرا کند.به این نوع بارگذاری و اجرای کد های جاوا اسکریپت بارگذاری ناهمگام (Asynchronous) گفته می شود که فقط با همین یک کلمه کم اهمیت باعث می شود بارگذاری HTML و جاوا اسکریپت ها هر دو همزمان انجام می شود و کاربر به خاطر بارگذاری جاوا اسکریپت ها مدت زمان زیادی را در صفحه سفید سپری نکند.فقط باید توجه داشته باشید که استفاده از واژه async فقط در تگ های <script> مجاز است که کد جاوا اسکریپت آن ها در فایلی مجزا باشد و با خصوصیت src آدرس دهی شود یعنی بارگذاری ناهمگام روی کد های جاوا اسکریپتی که داخل همان تگ <script> به صورت inline نوشته شوند عمل نمی کند و باید حتماً کد های جاوا اسکریپت در فایلی جدا باشد و به آن آدرس دهید.همچنین این ویژگی در مرورگر اینترنت اکسپلورر نسخه 9 به پایین، فایرفاکس نسخه 3.6 به پایین و کروم نسخه 8 به پایین پشتیبانی نمی شود.برای مطالعه اطلاعات بیشتر درباره بارگذاری ناهمگام کد های جاوا اسکریپت می توانید به آدرس http://www.w3schools.com/tags/att_script_async.asp مراجعه کنید.
Put CSS in the document head – استایل های CSS را فقط در داخل تگ head قرار دهید.
فراخوانی و اجرای استایل های CSS در استاندارد زبان HTML فقط باید در داخل تگ head باشد.استایل های CSS در زبان HTML به دو روش فراخوانی شوند روش اول که بهترین روش است قرار دادن استایل های CSS در فایل هایی جدا و فراخوانی آن ها با تگ link به این صورت <link rel="stylesheet" href="آدرس فایل CSS"> است اما روش دوم که باعث مشکلاتی مثل کش (Cache) نشدن استایل، افزایش حجم HTML و کاهش سرعت سایت، غیر استاندارد بودن و… می شود قرار دادن کد های استایل داخل تگ <style> مثل <style> کد استایل </style> است.پیشنهاد من این است که اولاً فقط از روش اول کد های استایل را فراخوانی کنید و دوماً همه آن ها را در داخل تگ head قبل از فراخوانی جاوا اسکریپت ها قرار دهید.اگر کد استایلی خارج از تگ head فراخوانی شود علاوه بر نقص استاندارد ها ممکن است باعث بروز مشکلاتی در بعضی از مرورگر ها شود.پس بهترین راه فراخوانی آن ها به صورت استاندارد در داخل تگ head است.
Remove query strings from static resources – به فایل های ثابت (Static) کد های query اضافه نکنید.
در بعضی از سیستم های مدیریت محتوا برای شناسایی نسخه (Version) درحال استفاده یک فایل یا استفاده از کد های پویا (Dynamic) مثل php برای نمایش فایل های ثابت (Static) به آخر آدرس فراخوانی آن فایل متغیر (Variable) هایی را به صورت Query اضافه میکنند برای مثال ممکن است به آخر آدرس فایل jquery.js نسخه درحال استفاده آن را به این صورت jquery.js?ver=1.5.2 اضافه کنند یا یک سری کد css را با زبان php به این صورت index.php?load=css نمایش دهند.استفاده از Query ها برای شخصی سازی نوع نمایش یک صفحه وب بسیار کاربردی است اما برای فایل های ثابت (Static) مانند تصاویر، css ها، js ها و… باعث ایجاد مشکلاتی مثل کش (Cache) نشدن فایل ها در پراکسی سرور ها می شود.به همین دلیل پیشنهاد gtmetrix.com این است که هرگز به آدرس فایل های ثابت متغیر های Query و هر چیزی که نیازمند قرار گیری علامت سوال ? آخر آدرس فایل می شود قرار ندهید.اگر سایت وردپرسی دارید که نمی دانید چطور باید کد فراخوانی فایل های ثابت پیش فرض وردپرس مثل jquery.js را ویرایش کنید می توانید کد زیر را در فایل functions.php قالب فعلی سایت خود قرار دهید تا تمامی آدرس های فراخوانی فایل های ثابت مثل تصاویر، js ها و css ها بدون Query شوند.
function remove_wp_ver_css_js($src) { if (strpos($src, 'ver=')) $src = remove_query_arg('ver', $src); return $src; } add_filter('style_loader_src', 'remove_wp_ver_css_js', 9999); add_filter('script_loader_src', 'remove_wp_ver_css_js', 9999);
Serve resources from a consistent URL – فایل های هم شکل را فقط با یک آدرس فراخوانی کنید.
خوشبختانه سیستم شناسایی سایت gtmetrix.com قدرتمند و دقیق است که فایل های هم شکل را نیز تشخیص می دهد.پیشنهاد gtmetrix.com این است که فایل هایی با محتوای یکسان مانند دو تصویر دقیقاً یک شکل را با آدرس های مختلف در سایت خود نمایش ندهید و فقط از یکی از آن ها استفاده کنید برای مثال ممکن است شما یک تصویر را در پوشه ای آپلود کرده باشید و به آن لینک داده باشید اما بعد از چند ماه فراموش می کنید که این تصویر را از قبل آپلود کردید و دوباره در جایی دیگر آپلود می کنید و به آن در صفحات سایت لینک می دهید در این صورت دو تصویر کاملاً هم شکل و یکسان با دو آدرس مختلف در صفحات سایت شما فراخوانی می شود که باعث ایجاد یک درخواست اضافی از طرف مرورگر کاربر، کاهش سرعت نسبی سایت و کاهش پهنای باند میزبان (Host) شما به صورت تدریجی می شود.زیرا مرورگر ها مثل سایت gtmetrix.com در این حد هوشمند نیستند تا بین چند تصویر مشابه فقط یکی را انتخاب کنند بلکه کل تصاویر را چه مشابه چه غیر مشابه برای کاربر به صورت جدا دانلود میکنند به همین جهت برای جلوگیری از کاهش سرعت نسبی سایت بهتر است فایل های یکسان را پیدا کرده و یکی از آن ها را حذف کنید سپس در تمامی صفحات سایت فقط به آن یکی باقیمانده لینک دهید.
Serve scaled images – اندازه تصاویر را قبل از آپلود در سایت تعیین کنید.
در اکثر سایت ها تصاویری وجود دارند که اندازه واقعی آن ها با اندازه ای که در سایت نمایش داده می شود تفاوت دارد.مثلاً ممکن است اندازه واقعی یک تصویر آپلود شده در سایت 1024 در 768 پیکسل باشد اما برای کاربران با اندازه 500 در 300 پیکسل در سایت نمایش داده شوند.با این کار شاید مشکلی در ظاهر سایت نباشد اما سرعت بارگذاری سایت را کاهش و سرعت تمام شدن پهنای باند میزبان (Host) شما را افزایش می دهد زیرا برای هر کاربر هنگام بارگذاری اولیه سایت باید تصویر اصلی با اندازه کامل دانلود شود و سپس توسط مرورگر به صورت کوچک شده به کاربر نمایش داده شود اما اگر از اول قبل از آپلود عکس تصویر را با نرم افزار های ویرایش عکس مثل Paint ویندوز به همان اندازه ای که باید در سایت نمایش داده شو تغییر اندازه دهید به افزایش سرعت بارگذاری سایت و کاهش مصرف پهنای باند سایت خود کمک کرده اید.همچنین می توانید با مطالعه پیشنهاد Optimize Images حجم فایل تصاویر را نیز کاهش دهید تا حداکثر بهینه سازی را روی تصاویر سایت خود انجام دهید.
Specify a cache validator – یک اعتبار سنج کش (Cache) برای فایل های ثابت (Static) تعیین کنید.
خوشبختانه در اکثر میزبان (Host) ها سرور به صورت پیش فرض طوری تنظیم (Config) شده است که اکثر فایل های ثابت (Static) مانند تصاویر، css ها، js ها و… با تمامی HTTP Header های مورد نیاز برای کش (Cache) شدن به مرورگر کاربر ارسال شوند اما اگر در سرور میزبان شما اینطور نیست یا فرمت فایل ثابتی که gtmetrix.com به شما گفته جزو فرمت های از پیش تعیین شده سرور برای ارسال HTTP Header های مخصوص کش (Cache) نیست باید به صورت دستی اطلاعات Last-Modified یا ETag را به HTTP Header فایل های ثابت سایت خود اضافه کنید.به این منظور می توانید کد زیر را به فایل htaccess. واقع در پوشه اصلی سایت خود (public_html) قرار دهید تا براحتی این مشکل حل شود.کد زیر تقریباً استاندارد ترین کد برای این کار است که شامل همه فرمت های فایل های ثابت (Static) می شود.
<IfModule mod_headers.c> Header unset Pragma Header unset ETag FileETag None </IfModule>
Specify a character set eary – نوع کاراکتر صفحات سایت را در کد HTML هر صفحه تعیین نکنید.
همانطور که در پیشنهاد Avoid a character set in the meta tag گفتم بر خلاف تصور اکثر وب مستران خصوصاً توسعه دهنده های (Developers) ایرانی نوع کاراکتر های صفحات سایت نباید در کد HTML توسط تگ meta تعیین شود خصوصاً هرگز نباید از کد غیر استاندارد http-equiv در تگ meta استفاده شود بلکه بهترین و سریع ترین راه تعیین نوع کاراکتر ها در HTTP Header هایی است که قبل از کد HTML به مرورگر کاربر ارسال می شود.بار ها HTTP Header ها را در همین صفحه توضیح دادم HTTP Header اطلاعاتی درباره آن صفحه است که به صورت مخفی به مرورگر کاربر ارسال می شود و حتی در Source سایت نیز قابل مشاهده نیست برای مشاهده HTTP Header همه سایت ها می توانید کلمه header را در بخش افزونه های مرورگر های فایرفاکس، کروم، اپرا و… جستجو و نصب کنید.برای افزودن تعیین نوع کاراکتر های همه صفحات سایت خود در HTTP Header ارسالی به مرورگر فقط کافی است یک خط کد AddDefaultCharset UTF-8 را به اولین خطوط فایل htaccess. واقع در پوشه اصلی سایت خود (public_html) اضافه کنید و براحتی کد تعیین نوع کاراکتر هایی که با تگ meta در HTML سایت شما است را حذف کنید.مزیت تعیین نوع کاراکتر های همه صفحات سایت فقط با یک خط کدی که گفتم افزایش سرعت نسبی و از همه مهم تر تعیین نوع کاراکتر در دانلود فایل ها است برای مثال اگه بدون این کد در تگ meta نوع کاراکتر صفحات سایت را تعیین کنید برای فایل های متنی که درون آن ها متون فارسی است تعیین نمی شود و ممکن است مثلاً یک فایل js که دارای متون فارسی است در مرورگر به صورت ASCII و غیرقابل خواندن نمایش داده شود اما وقتی تعیین کنید در HTTP Header ارسالی به مرورگر نوع کاراکتر ها UTF-8 باشد حتی برای فایل های غیر HTML مثل js ها نیز این قاعده اعمال می شود.امکان استفاده ار هر دو روش هست اما وقتی در HTTP Header نوع کاراکتر های صفحات تعیین شود تعیین دوباره آن در تگ meta فقط کاری بیهوده است که یک خط اضافی از فایل های HTML شما می گیرد.اطلاعات بیشتر در لینک http://www.askapache.com/htaccess/setting-charset-in-htaccess.html
Specify a Vary: Accept-Encoding header – به صفحات gzip شده Vary: Accept-Encoding را اضافه کنید.
اگر از فشرده سازی gzip برای صفحات و فایل های ثابت (Static) سایت خود استفاده میکنید حتماً باید به HTTP Header تمامی صفحات سایت مشخصه Vary: Accept-Encoding نیز اضافه کنید.زیرا بعضی از پراکسی سرور ها و مرورگر های قدیمی از فشرده سازی gzip پشتیبانی نمی کنند و متاسفانه امکان اینکه به صورت پیش فرض متوجه بشوند که باید درخواست نسخه غیر فشرده را به سرور سایت ارسال کنند ندارند به همین دلیل با تعیین این کد در HTTP Header صفحات سایت به مرورگر قدیمی یا پراکسی سرور ها می فهمانید که در صورت عدم پشتیبانی فشرده سازی gzip از نسخه غیر فشرده صفحات سایت استفاده کنند.اگه از کدی که در پیشنهاد Enable gzip compression گفته شده استفاده کنید نیازی به اضافه کردن چیزی ندارید اما اگر از کد دیگری استفاده میکنید می توانید یک خط Header append Vary: Accept-Encoding را به آن اضافه کنید تا مشکل حل شود.
Specify image dimensions – اندازه تصاویر با تگ img را با width و height در کد HTML تعیین کنید.
اکثر کد نویسان HTML برای تصاویر با تگ img که نیاز به تغییر اندازه ندارند پهنا (width) و ارتفاع (height) قرار نمی دهند یا اگر نیاز به تغییر اندازه ببینید به صورت استایل در کد های CSS پهنا و ارتفاع تصویری که با تگ img است را تعیین می کنند که اشتباه است.برای تمامی تگ های img چه نیاز به تغییر اندازه باشد چه نباشد باید خصوصیت های width و height در همان کد HTML قرار گیرد زیرا مرورگر هر بار که به تگ های img می رسد بررسی میکند که آیا width و height در کد img تعیین شده یا نه اگر تعیین شده بود که با همان اندازه های تعیینی شما نمایش می دهد در غیر این صورت از طریق توابع GDI در سیستم عامل کاربر تصویر را به صورت گرافیکی در حافظه Ram باز کرده و پهنا و ارتفاع اصلی آن را پیدا می کند سپس تصویر را با پهنا و ارتفاع اصلی خودش نمایش می دهد.شاید به نظر شما این کار زیاد مهم نباشد اما باید بدانید در سایت هایی که از تگ های img بسیاری استفاده شده است عدم تعیین width و height باعث کاهش سرعت بارگذاری سایت می شود به همین دلیل برای تمامی تگ های img چه نیاز به تغییر اندازه باشد چه نباشد حتماً پهنا (width) و ارتفاع (height) نیز در همان کد HTML قرار دهید.به این دلیل width و height کد استایل CSS برای عدم کاهش سرعت بارگذاری تصاویر با تگ img تاثیر ندارد زیرا مرورگر علاوه بر اینکه نیازمند باز کردن تصویر در حافظه Ram است پس از آن نیازمند بارگذاری کامل فایل های CSS و کد های CSS داخل خود HTML است تا بتواند اندازه تصویر را به آن اندازه ای که شما تعیین کردید قرار دهد.به همین دلیل تعیین پهنا (width) و ارتفاع (height) تصاویر با تگ img فقط و فقط باید در همان تگ img درون کد های HTML مانند نمونه زیر انجام شود.
<img src="آدرس تصویر" width="800" height="600" alt="نام تصویر" title="نام تصویر">
پایان آموزش
منبع: lighthost.ir
