Hello!
I have found nice testing tool for testing site loading speed. This is
particularly important for mobiles.
Here are results for Wt home page:
http://developers.google.com/speed/pagespeed/insights/?url=webtoolkit.eu&tab=mobile
I think, Wt library itself can optimize most of warnings.
See results for my Wt based site kiset.org:
http://developers.google.com/speed/pagespeed/insights/?url=webtoolkit.eu&tab=mobile
Here are some fixes.
1. Viewport
addMetaHeader("viewport", "width=device-width, "
"initial-scale=1.0, maximum-scale=1.0, "
"user-scalable=0");
2. Warnings about font size in mobile version can be fixed by using
Bootstrap theme.
3. Avoid extra redirects. This warning is clear.
Currently, webtoolkit.eu redirects to webtoolkit.eu/wt which redirects
to www.webtoolkit.eu/wt
Instead, webtoolkit.eu should redirect to www.webtoolkit.eu/wt
4. Eliminate render-blocking JavaScript and CSS in above-the-fold content.
There are actually no JavaScript files rendering in Wt homepage. If
they were, they should be loaded when needed (most JS libraries are
not needed to render mainpage properly).
CSS is an interesting part.
If <link> tags are used to load CSS, then browser starts rendering DOM
only after all CSS is loaded and parsed!
More information on this issue:
http://www.phpied.com/5-years-later-print-css-still-sucks/
"media" attribute doesn't magically fix this problem.
http://www.phpied.com/css-and-the-critical-path/
How to solve this:
https://gist.github.com/scottjehl/87176715419617ae6994
Working solution:
https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js
This approach requires JavaScript.
In context of Wt, the following approach can be used: use loadCSS +
<link> inside <noscript>. This should work (and works in kiset.org)
for both JavaScript and HTML versions.
I have changed method WebRenderer.renderStyleSheet. See file
renderStyleSheet_nonblocking.cpp
Best regards,
Boris Nagaev
void WebRenderer::renderStyleSheet(WStringStream& out,
const WCssStyleSheet& sheet,
WApplication *app)
{
// https://github.com/filamentgroup/loadCSS/
out << "<script>(function() {"
"var ss = document.createElement('link');"
"var ref = document.getElementsByTagName('script')[0];"
"ss.rel = 'stylesheet';"
"ss.href = '";
DomElement::htmlAttributeValue(out, sheet.link().resolveUrl(app));
out << "';"
"ss.media = 'only x';"
"ref.parentNode.insertBefore(ss, ref);"
"setTimeout(function(){ ss.media = '" << sheet.media() << "'; } );"
"})()"
"</script>";
out << "<noscript>";
out << "<link href=\"";
DomElement::htmlAttributeValue(out, sheet.link().resolveUrl(app));
out << "\" rel=\"stylesheet\" type=\"text/css\"";
if (!sheet.media().empty() && sheet.media() != "all")
out << " media=\"" << sheet.media() << '"';
closeSpecial(out);
out << "</noscript>";
}
------------------------------------------------------------------------------
_______________________________________________
witty-interest mailing list
witty-interest@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/witty-interest
