Something on the side, I had a thought in regards to Beans being fast, why not add some things which are rapidly becoming a standard of technology (and which is several instances are already a prereq for seo anyway). Particularly in regards to prefetch/prerender options.
It's a little quirky, I don't know much php, but sofar the following tidbit appears to work for blog posts.
<?php
function mk_post_prerender_prefetch() {
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( !empty( $next_post ) ) {
echo '<link rel="prefetch" href="'.get_permalink( $next_post->ID ).'" />
<link rel="prerender" href="'.get_permalink( $next_post->ID ).'" />';
}
if ( !empty( $prev_post ) ) {
echo '<link rel="prefetch" href="'.get_permalink( $prev_post->ID ).'" />
<link rel="prerender" href="'.get_permalink( $prev_post->ID ).'" />';
}
}
add_action( 'wp_head', 'mk_post_prerender_prefetch', 10 );The results are - in seo terms as well as overall pagespeed influences - rather interesting.
Thing is, overdo it and it won't end well - as in Search providers applying sanctions. So the above can't readily be applied to the core of data relations & information layers: (in the case of Wordpress) pages.
So I'm thinking, what if there were a way from within beans to add rel elements programmatically? For example:
link rel="dns-prefetch"
link rel="preconnect"
link rel="prefetch"
link rel="subresource"
link rel="prerender"All of the above are integral to modern IE, Chrome, Opera and others. Especially for mobile use there's some neat things possible. But it should be done in a smart manner.
For example a CTA or smart button element could benefit a lot from, and provide benefit with, the prerender option. Smooth scroll & scroll spy could make good use of prefetch on portfolio pages. Subresource is a neat thing for images there as well.
Alternatively, you can make good use of these methods via functions.php or an include if your theme or site uses elements which connect with other sites. Think facebook dislike, errr, like, or cdn but also WP's own connects.
<?php
function mk_dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//secure.gravatar.com" />
<link rel="dns-prefetch" href="//apis.google.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//www.facebook.com" />
<link rel="dns-prefetch" href="//scontent.xx.fbcdn.net" />
<link rel="dns-prefetch" href="//gstatic.com" />
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//public-api.wordpress.com" />
}
add_action( 'wp_head', 'mk_dns_prefetch', 0 );Thing to keep in mind: for desktop it is glorious. For mobile you need to keep in mind to not dump resource consumption on the user (hello bandwidth). So there comes a need for a breakpoint flag, alternatively, an on/off setting.
Obviously it's something for Thierry to consider 🙂
Eh, so I guess a practical question at this point, for the current state of things, is how to best approach adding a link rel-"prerender" to say, a menu item 🙂
Hey J.C.
Performance is very close to my heart and a subject I love. Unfortunately this is very particular to each website and there isn't a global rule for it. Moreover it would use server and users ressource while not always necessary. Beans can not assume that everybody build websites the same way and can't impose "invisible" things which might "damage" some websites. Beans is a powerful framework to enable users to build from very simple to extremely complex websites without having to undo when possible.
Something like this would either be implemented in WP Core or via a plugin, but I don't see that as being Beans Theme territory. Such functionnilities is not specific to Beans but WordPress in general. Beans is still young and the plan is definitely to build plugins but we can't go faster than the speed light, things take time 🙂
I moved this topic in the Extend category because it is where it belongs, and we might well see third party devs getting their hands dirty building such plugins.
Thanks for your suggestions,
I'd say it is particular to browsers, the modern ones all carry the functionality within their core feature sets and render engines. Granted, it's not found withint IE below v9, but for the rest it's been a standard since quite a few years. It's only in 2014 that Automaticc picked up on it for Wordpress (unfortunately, only for VIP). Since last year it's also become integral to mobile / device browsers for both IOS and Android.
The load isn't on the server side as such, provided one keeps in mind to not overdo things - which is part of usage guidelines for the main Search providers either way for just about everything. Where it comes to prerendering the crux is the intrinsic balance between paths of use (which step is a visitor likely to take, which step would you like him or her to take) and bandwidth (since in essence you're telling their device browser to load the intended next step in a hidden tab). The same principle applies to prefetch, it's only those intended (not adopted) expansion methods where server QoS can become a real factor (but that's a standards debate which is going to take another year and version increase for all browser platforms anyhow - for a fun exploration consider the "preload" debate).
As for servers and QoS, inserting the attributes is no different from repositioning a fragment or enabling interaction for an element. Yes, it costs a tick and a bit of cpu, which is saved (with bonus) once the prefetch or prerender is used as a step. It's offsetting cost in return for optimization. Not a bad thing.
Both Venture, Sysmonds and karen Arnold have commented on the functionality, powerful, but a developer and a platform focus, not Core. Benefits to be gained, but the realm of choice for developers, in a nutshell. There are plugins which integrate the functionality, usually not as a feature element but as an internal element of functionality (for example AMP, Instant Articles but also a few commercial social & mailing plugins). On the side of Search providers, it isn't hard to find the big three search/browse/platform brands pushing it hard for performance and customisation focus for developers.
I'm not saying to consider this as an umbrella feature, but as a functionality feature for development. Let it be the developer's choice how well to provide solutions based on a framework which innovates where others lag behind 🙂
The alternative approach, is to consider something which would provide benefits in several other ways. Menu systems, links, UI navigation elements, most of the time (particularly in frameworks) there is a reflex to rely on WP Core concepts, yet when customisation comes into play the consequence is typically lots of custom additions and modifications - kinda going against the graid of rapid enablement. Consider XFN, title attributes, accessibility - why not consider a mechanism which would let people add / insert attributes to navigation elements. Not something thought up overnight either, but there is a heck of a lot of innovation already established. From flip browsing to amp to data relations between navigation. Both active (menu, button, etc) and internal (header, footer).
My simple (heh) thought was to find a way to selectively add prerender attributes to very specific links (set to on, from default off, per item), and to add prefetch to elements which make use of external (data) relations. In many ways it's a usability and design arena (as usage must be focused and path specific), but it struck me as something which could go hand in hand with beans 🙂
As for WP, I can't shake the statements from the past year out of my head, WP as data platform, tiered focus between development and the path away from traditional theme/plugin constructs to feature and functionality projects. Something tells me that WP will see gradual but severely significant changes in terms of platform focus. With Core being that platform, but "projects" being the new development realm for both design and develop strata. In a nutshell, it's exactly why .org is tightening things up while steering very clear from certain things (increasingly), why .com gets a heavier internal dev focus, why vip is no longer project based, and why the wp (third party) frameworks debate has become such a tight-lipped topic at bootcamps for the Automaticc folks.
Don't get me wrong, I do understand where you are coming from. There is a strong logic to it, but one has to consider that since more than a year now Automaticc has become very quiet on frameworks on top of core developments (beyond where it comes to the concept of "specialisation" and the people at the dead horse called Genesis). Except for that "from feature to projects" drama debate. From another perspective, in technology innovation builds upon that which is enabled in or for the engines which drive things forward. Since these are concepts already long in place, it strikes me as something to enable for developer use. WP Frameworks are going to see changes in course for market and development focus, much more so than in the past five years. When given the choice to adapt while facing legacy drag, I'd favour running with that which is ahead of the curve 🙂
Also, I do think Beans can go faster than the speed of light 🙂
Hey J.C.
I do understand where you are coming from but we have to consider the environement we are in and monitor what goes into Beans Core if we want to keep a solid product. There are a million of super cool things but we have to be strict about what belongs in Beans and what belongs in plugins.
You can easily add attributes to any HTML generated by Beans but the scripts in the head are generated by WP Core. If we wanted to change that, we would have to hook into the system to modify its output. Not only it is risky because we don't know how all plugins are using it and which scripts need to be prefixed, but it also does not belong in Beans.
If you want to modify it, I would suggest to look into WP scripts filters such as script_loader_tag and style_loader_tag.
Hope that helps,