Archive for 2010/02

افزایش سرعت مرور صفحات اینترنت با افزونه فایرفکس

۱۳۸۸/۱۱/۲۱ ۲۳:۳۶ Salar Khalilzadeh https://plus.google.com/105397214522932500988 منتشر شده در تاریخ : ۱۳۸۸/۱۱/۲۱ دسته بندی : ، ، ، 5

نکته مهم: در صورتی که آشنایی کافی به اینترنت، مرور صفحات اینترنت و نحوه کارکرد صفحات آن ندارید این شیوه برای شما مناسب نیست. برای درک صحیح عملکرد این روش حداقل باید با mime type ها آشنایی داشته باشید.

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


دریافت افزونه BetterCache


شیوه نصب و راه اندازی با تنظیمات بهینه

پس از نصب، این افزونه به طور خودکار شروع به کار خواهد کرد، اما تنظیمات پیش فرض آن چندان مناسب نیست و نیاز به تغییرات اندکی دارد. برای اعمال تغییر باید به صفحه تنظیمات این افزونه بروید. برای این کار گزینه Add-ons را از منوی Tools فایرفاکس انتخاب کنید. در پنجره Add-ons به برگه Extensions رفته و با انتخاب BetterCache دکمه Options را انتخاب کنید. به برگه Never-cache list بروید. در کادر Mime-type مقدار text/html را وارد کنید و دکمه Add را بزنید.

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

BetterCache Never-cache list

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

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

کاری که این افزونه انجام میدهد دقیقا مربوط به قوانین caching است. این افزونه با دستکاری این قوانین فایرفاکس را مجبور به ذخیره و cache کردن محتویات سایت برای مدت زمان بیشتری میکند. این نکته رمز موفقیت این افزونه در افزایش سرعت است.

اما نکته مهم در اینجا به کارگیری صحیح و جلوگیری از کش کردن اطلاعات ضروری توسط این افزونه است. زیرا ممکن که محتویات قدیمی را به جای محتویات جدید مشاهده کنید. (در این صورت راه حل استفاده از کلید F5 است)

چرا text/html رو به لیست چشم پوشی ها اضاف کردیم؟ به این علت که معمولا محتویات اصلی سایتها توسط صفحات عادی یا html انتقال پیدا می کند. پس در صورتی که این صفحات را کش کنیم دیگر به محتویات تازه دسترسی نخواهیم داشت.

چند نکته مهم در هنگام به کارگیری این افزونه

در صورتی که احساس می کنید که محتویات سایت در حال مشاهده قدیمی هست از دکمه reload فایرفاکس استفاده کنید. برای اینکه تمامی محتویات سایت به طور کامل و از ابتدا دریافت شود از ترکیب کلید های ctrl+f5 استفاده کنید.

در تنظیمات پیش فرض این افزونه سایت های ssl دار کش نمی شوند(این سایتها با یک s اضافی مشخص هستند httpS). برای فعال کردن این امکان گزینه Cache secure connections too را از صفحه اصلی تنظیمات این افزونه انتخاب کنید. با این کار شاهد افزایش چشمگیر سرعت gmail خواهید بود. گزینه refresh در gmail هم فراموش نشود.

نکته برای طراحات وبرنامه نویسان وب: برای جلوگیری از ایجاد مشکل در مشاهده صفحات localhost، در لیست Never-cache list مقادیر localhost و 127.0.0.1 رو هم با استفاده از فیلد URL اضافه کنید.

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

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

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

 

سرویس گوگل برای بدست آوردن favicon ها و اعمال آن بر لینک های خارجی

۱۳۸۸/۱۱/۱۹ ۱۹:۱۱ Salar Khalilzadeh https://plus.google.com/105397214522932500988 منتشر شده در تاریخ : ۱۳۸۸/۱۱/۱۹ دسته بندی : ، ، ، ، ، 10

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

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

مزیت اصلی این سرویس گوگل در همین زمینه است، یعنی برای سایتهایی که favicon آنها یافت نشد یک آیکون پیش فرض در نظر میگیرد. مزیت دیگر آن png بودن فرمت تصاویر این favicon های برگردانده شده هست که باعث خواهد شد که تقریبا توسط همه مرورگرها قابل شناسایی باشند.

آدرس این سرویس مورد نظرما:

http://www.google.com/s2/favicons?domain=domainName


آیکون پیش فرض این سرویس یک جهان 16 پیکسلی هست که خیلی مناسب برای منظور ماست. البته سرویس مورد استفاده در google reader به این آدرس هست:

http://s2.googleusercontent.com/s2/favicons?domain=domainName&alt=feed

که آیکون پیش فرض آن هم آیکون فید هست. میتونید با حذف &alt=feed آیکون پیش فرض رو به آیکون جهان تغییر بدید.

به جای domainName باید آدرس دامین سایت قرار دهید. برای مثال دامنه برای سایت گوگل google.com خواهد بود و آدرس سرویس آن هم http://www.google.com/s2/favicons?domain=google.com است. که نتیجه این Google Favicon تصویر آیکون گوگل هست که به این طریق بدست آمده.

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

در ادامه کدی را قرار دادم که برای اضافه کردن آیکون هر سایت به کنار لینک آن می توانید استفاده کنید.

افزودن تصویر favicon به لینکهای خارجی با JQuery

اگر در سایتتون از jquery استفاده میکنید، میتوانید از این کد استفاده کنید:
$(document).ready(function() {
$("a").each(function() {
var href = $(this).attr("href");
if (href && href.match(/:\/\//) && !href.match(document.domain)) {
var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
var img = "<img src='http://www.google.com/s2/favicons?domain=" + domain + "' style='margin:0px 2px;border:0px;width:13px;height:13px'/>";
//$(this).prepend(img); // For LTR site
$(this).append(img); // For RTL site
}
})
});

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

در صورتی که از jquery استفاده نمی کنید میتوانید از کد زیر استفاده کنید:
function ApplyFavicons() {
for (i = 0; i < document.links.length; i++) {
var a = document.links[i];
var href = a.href;
if (href && href.match(/:\/\//) && !href.match(document.domain)) {
var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
var img = document.createElement("img");
img.src = "http://www.google.com/s2/favicons?domain=" + domain;
img.style.border = '0px'; img.style.margin = '0px 2px'; img.style.width = '13px'; img.style.height = '13px';
a.appendChild(img);
}
}}

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

توجه کنید که در این دو تابع من اندازه favicon را به 13 پیکسل تغییر دادم. در صورت نیاز می توانید آن را به اندازه پیش فرض یعنی 16 پیکسل تغییر دهید.

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