با استفاده از لینک تگ Prefetch در صفحات وب که با استفاده از HTML5 نوشته شده‌اند به سادگی و بدون نیاز به انجام تنظیمات خاصی می‌توانیم صفحات و محتوای دیگری از سایت خود را در هنگام بارگذاری و نمایش صفحه فعلی در مرورگر کاربر بارگذاری کنیم و از این طریق افزایش سرعت قابل توجهی را در هنگام مشاهده کاربران توسط مرورگر وب ایجاد کنیم. در این آموزش طراحی سایت تورتک با چگونگی پیش بارگذاری محتوا در کدهای HTML5 آشنا می‌شویم و البته با بررسی مثال‌هایی شیوه صحیح استفاده از این امکان را نیز مرور می‌کنیم.
آشنایی با Prefetch در HTML5
با استفاده از لینک تگ Prefetch که با استفاده از link rel=prefetch در کدهای HTML مشخص می‌شوند توانایی پیش بارگذاری و یا همان واکشی اولیه محتوا و دیگر صفحات وب را در هنگام بارگذاری صفحه فعلی در مرورگر کاربران خواهیم داشت. برای مثال در کد زیر تعیین می‌کنیم که صفحه دوم آرشیو نوشته سایت آذین وب در هنگام ورود کاربر به این سایت بارگذاری شود و در هنگامی که کاربر بر روی لینک صفحه دوم کلیک کند دیگر مرورگر کاربر درخواست HTTP برای دریافت Header مورد نیاز و دیگر فایل‌های موجود در این صفحه ارسال نمی‌کند و صفحه دوم خیلی سریع به نمایش در می‌آید.
<link rel="prefetch" href="http://azinweb.com/page/2" >
البته با استفاده از کد بالا هم اکنون تنها امکان پیش بارگذاری محتوا و صفحات وب در مرورگر فایرفاکس را خواهید داشت و اگر دوست دارید از Prefetching در مرورگر گوگل کروم استفاده کنید از لینک تگ زیر در قسمت <Head> کدهای HTML5 سایت خود می‌توانید استفاده کنید.
<link rel="prerender" href="http://azinweb.com/page/2" >
با استفاده از تشخیص User Agent کاربر در کدهای سایت خود توانایی تشخیص مرورگر کاربر و اضافه کردن کد مورد نیاز با توجه به مرورگر مورد استفاده توسط کاربر را خواهید داشت اما برای جلوگیری از بار اضافه بر روی سرورهاست سایت خود و کاهش طول کدهای صفحات سایت خود با استفاده از شیوه زیر می‌توانید مطمئن باشید صفحه مورد نظر در هر دو مرورگر فایرفاکس و گوگل کروم به خوبی پیش واکشی اولیه می‌شوند.
<link rel="prefetch prerender" href="http://azinweb.com/page/2" >
اما اگر از سیستم مدیریت محتوا و انتشار وبلاگ همانند جوملا، وردپرس و … برای راه اندازی و انتشار محتوا در سایت خود استفاده می‌کنید بهتر است محتوا و یا صفحاتی از سایت خود را بارگذاری کنید که به احتمال زیاد کاربر پس از مشاهده صفحه فعلی به آن خواهد رفت. این کار با استفاده از کد نویسی به صورت کاملاً خودکار قابل انجام است که در دو مثال زیر در بخش کد وردپرس سایت تورتک با چگونگی استفاده از آن‌ها می‌توانید آشنا شوید.
همان طور که در آموزش‌های بالا نیز مشاهده کردید به سادگی و با استفاده از شرط کوتاهی در سیستم مدیریت محتوا و انتشار محتوا در وب توانایی استفاده کاربردی از لینک تگ Prefetch را خواهیم داشت. از تکنیک پیش بارگذاری محتوا برای افزایش سرعت بارگذاری و نمایش صفحات سایت در سرویس بزرگی مانند سرویس CloudFlare نیز استفاده می‌شود.
چگونگی تشخیص بهترین صفحات برای Prefetching توسط آمارگیر گوگل
در صورتی که از سرویس آمارگیر گوگل (Google Analytics) در سایت خود برای ثبت و مشاهده آمار بازدید کاربران استفاده می‌کنید اطلاعات ارائه شده توسط این سرویس می‌تواند بهترین راه برای تشخیص بهترین صفحات و محتوا برای پیش بازگذاری و یا Prefetching در صفحات مختلف سایت شما باشد. با استفاده از این ابزار می‌توانید به سادگی از پر بازدیدترین صفحات سایت خود اطلاع پیدا کنید و سپس با Prefetch کردن فایل و محتوای سنگین این صفحات و یا پیش بارگذاری کلی آن صفحات وب با استفاده از URL آن‌ها سرعت نمایش سایت خود را در مرورگر کاربران افزایش دهید. پیشنهاد می‌کنیم برای این منظور از قسمت گزارش Visits Flow آمارگیر گوگل استفاده کنید تا پیش از تشخیص صفحاتی که کاربران با استفاده از آن‌ها به سایت شما وارد می‌شوند در کدهای HTML آن صفحات، محتوا و صفحه بعدی که معمولاً کاربران به آن‌ها مراجعه می‌کنند را واکشی اولیه کنید.
البته برای این منظور از دیگر قسمت Google Analytics نیز همانند Goal و بررسی نتایج بدست آمده توسط آن‌ها، آمار ورود به صفحه Landing Page و … نیز می‌توانید استفاده کنید که با توجه به تعداد صفحات و گستردگی سایت خود می‌توانید بهترین گزارش را در میان گزارش آماده آمارگیر گوگل برای این منظور استفاده کنید.
تعیین صفحاتی که باید پیش بارگذاری شوند توسط jQuery
در این قسمت از آموزش پیش بارگذاری (Prefetch) صفحات در HTML5 برای افزایش سرعت سایت قصد داریم با استفاده از jQuery به صورت خودکار مقصد لینک موجود در صفحه فعلی را که با کلاس prefetch تعریف شده‌اند پیش بارگذاری کنیم. با استفاده از این تکنیک به سادگی می‌توانید در هنگام ایجاد صفحات جدید در سایت خود با توجه به محتوا صفحات و محتوایی را که به احتمال زیاد کاربران پس از خواندن و مشاهده صفحه فعلی به آن‌ها خواهند رفت را با اضافه کردن کلاس prefetch به لینک آن‌ها مشخص کنیم تا به صورت خودکار برای مراجعه کاربران پیش بارگذاری شوند.
var app = {
prefetchLinks: function(){
var hrefs = $("a.prefetch").map(function(index, domElement){
return $(this).attr("href");
});
return $.unique(hrefs);
},
addPrefetchTags: function(){
this.prefetchLinks().each(function(index,Element){
$("<link />", {
rel: "prefetch", href: Element
}).appendTo("head");
});
},
}
jQuery(function(){
app.addPrefetchTags();
}همان طور که مشاهده می‌کنید در کدهای بالا با استفاده از jQuery به صورت دینامیک یا پویا لینک تگ Prefetch مورد نیاز را به قسمت Head صفحه فعلی اضافه کرده‌ایم و در هر صفحه با اضافه کردن کلاس (Class) تعیین شده به کدهای HTML لینک مورد نظر محتوای آن را واکشی اولیه کنیم.
