HTML5 Link Prefetching

Τι είναι το Prefetching;

Prefetching ονομάζουμε τη λειτουργία κατά την οποία ο browser φορτώνει εκ των προτέρων την επόμενη ή τις επόμενες σελίδες που θα επισκεφτούμε, εκμεταλλευόμενος το χρόνο που παραμένει αδρανής, π.χ. ενώ διαβάζουμε ένα άρθρο. Είναι προφανές οτι στόχος είναι η επιτάχυνση της διαδικασίας μετάβασης από τη μια σελίδα σε μια άλλη.

Prefetching με την HTML5

Η HTML5 εισάγει αυτή τη δυνατότητα, ως εξής: Εντός της ετικέτας head /head εισάγουμε την ετικέτα link με παράμετρο rel=”perfetch” και τη διεύθυνση του αρχείου. Παράδειγμα:

<!-- Ολόκληρη σελίδα -->
<link rel="prefetch" href="gallery.html" title="View our Gallery" />
 
<!-- Μια εικόνα -->
<link rel="prefetch" href="images/background_2.jpg" />
 
<!-- Ένα stylesheet -->
<link rel="prefetch alternate stylesheet" href="css/style_2.css" title="IE style" />

Πότε είναι σωστή η χρήση του prefetch

Όταν έχουμε συνεχόμενες σελίδες, π.χ. σε ένα blog
Εικόνες ή background που εμφανίζονται σε επόμενη σελίδα
Για να φορτώσουμε τη δεύτερη σελίδα των αποτελεσμάτων αναζήτησης
Για να φορτώσουμε ένα νέο stylesheet που ίσως χρησιμοποιηθεί σε κάποια ειδική σελίδα

Prefetching στο WordPress

Μπορούμε να εφαρμόσουμε την παραπάνω λειτουργία και στο WordPress! Εάν ένας επισκέπτης διαβάζει π.χ. την δεύτερη σελίδα με τα posts μας, μπορούμε ενώ διαβάζει να φορτώσουμε προκαταβολικά την τρίτη.

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

Σημειώσεις για το prefetch

Λειτουργεί και μεταξύ διαφορετικών domain, ακόμα και για να αποκτά cookies από αυτά!
Επηρρεάζει τα statistics – κάποιες σελίδες ίσως εμφανιστούν σαν να μην της επισκέφτηκε ο χρήστης!
Ο Firefox υποστηρίζει τη λειτουργία prefetch από το 2003, ενώ ο πρώτος browser που χρησιμοποίησε ποτέ τεχνική prefetch ήταν ο iCab το 2001
Ο Google Chrome “προτιμά” τη χρήση της παραμετρου prerender αντί του prefetch (http://code.google.com/chrome/whitepapers/prerender.html)

HTML5 prefetch εδώ και τώρα;

Εγώ θα έλεγα ναι, αλλά προς το παρόν θα λειτουργεί μόνο για τους χρήστες του Mozilla Firefox και του Google Chrome (από την έκδοση 13 και μετά, με prerender αντί για prefetch). Με την σταδιακή ενσωμάτωση των χαρακτηριστικών της HTML5 θα ακολουθήσουν και οι άλλοι browsers την υποστήριξη του HTML5 prefetch.

Πηγές

Shortlink URL:

Σωτήρης Καλαθάς

Tagged as:html5 prefetching

Κατηγορία: Featured HTML5 Wordpress

[!] Αναφέρετε αυτό το άρθρο

Γίνετε επεξεργασία, Παρακαλώ περιμένετε...

+ 15.5

Ο Συγγραφέας

Ονομάζομαι Σωτήρης Καλαθάς και είμαι ένας ανεξάρτητος σχεδιαστής ιστοσελίδων και συνεργάτης της MakeWeb.gr . Ακολουθήστε με στο twitter: http://twitter.com/sotiriskalathas

3 Σχολια

_tasos says:

September 17, 2011 at 9:22 pm

Γνωρίζεις αν μπορεί να οριστεί αυτό το property με javascript;

Log in to Reply

Σωτήρης Καλαθάς says:

September 19, 2011 at 1:05 pm

@_tasos: Εννοείς αν δεν έχεις HTML 5 αλλά HTML 4.01?

<script type="text/javascript">
$(document).ready(function() {
$("a").each(
function(){
    $(this).bind ("mouseover", function() {
        var href=$(this).attr('href');
        if (
            (href.indexOf('?') == -1)&&
            (href.indexOf('http:') ==-1)&&
            ($(this).hasClass('nopreload') == false)&&
            (href.indexOf('.pdf') == -1)
        ) {
            $.ajax({ url:href, cache:true, dataType:"text" });
        }
    });
    $(this).bind ("mousedown", function(btn) {
        if (btn.which==1) {
            var href=$(this).attr('href');
            if ($(this).hasClass('nopreload') == false) {
                window.location.href = href;
                return false;
            }
        }
    });
});
});
</script>

(Πηγή: http://stackoverflow.com/questions/5299063/are-there-any-downsides-to-prefetching-webpages-using-javascript)

_tasos says:

September 19, 2011 at 8:34 pm

Αναφερόμουν σε HTML5. Υπάρχει δηλαδή κάποια javascript function με την οποία να ορίζω δυναμικά ποια ή ποιες σελίδες θέλω να κάνω prefetch;

Φαντάσου ένα σενάριο όπου η επόμενη σελίδα που θέλω τελικά να φορτώσω εξαρτάται από κάποιο input που θα δώσει ο χρήστης.

Ωραίο το παράδειγμα που πόσταρες, που στην ουσία υλοποιεί αυτή τη λειτουργία με jQuery.

Log in to Reply