Page Load Analysis Issues #839

GAWDS · 2012-09-22T10:11:12Z

Hiya, I've been testing my deployment to optimize for page load speeds and have found the following issues; wondering if there are any ideas floating around to deal with these:

Defer parsing of Javascript

890.2KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

Specify Image Dimensions

The following image(s) are missing width and/or height attributes.

Enable GZip Compression

Compressing the following resources with gzip could reduce their transfer size by 671.0KiB (74% reduction).

Combine Images Using CSS Sprites

The following images served from globalanimalwelfare.org should be combined into as few images as possible using CSS sprites.

Minify CSS

Minifying the following CSS resources could reduce their size by 19.0KiB (19% reduction).

Minifying http://labs.globalanimalwelfare.org/themes/default/css/style.css could save 10.2KiB (19% reduction). See optimized version
Minifying http://labs.globalanimalwelfare.org/media/css/jquery-ui-themeroller.css could save 4.8KiB (18% reduction). See optimized version
Minifying http://labs.globalanimalwelfare.org/themes/unicorn/css/_default.css could save 2.1KiB (20% reduction). See optimized version
Minifying http://labs.globalanimalwelfare.org/media/css/openlayers.css could save 1.6KiB (18% reduction). See optimized version
Minifying http://labs.globalanimalwelfare.org/media/css/global.css could save 354B (14% reduction). See optimized version

Remove query strings from static resources

Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

Use Efficient CSS Selectors

http://labs.globalanimalwelfare.org/media/css/jquery-ui-themeroller.css has 4 very inefficient rules, 16 inefficient rules, and 3 potentially inefficient uses of :hover out of 319 total rules.
Very inefficient rules (good to fix on any page):
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a Tag key with 3 descendant selectors and Class overly qualified with tag
.ui-tabs .ui-tabs-nav li.ui-state-disabled a Tag key with 3 descendant selectors and Class overly qualified with tag
.ui-tabs .ui-tabs-nav li.ui-state-processing a Tag key with 3 descendant selectors and Class overly qualified with tag
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a Tag key with 3 descendant selectors and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
.ui-widget-content .ui-state-highlight a Tag key with 2 descendant selectors
.ui-widget-content .ui-state-error a Tag key with 2 descendant selectors
.ui-accordion .ui-accordion-header a Tag key with 2 descendant selectors
.ui-datepicker .ui-datepicker-prev span Tag key with 2 descendant selectors
.ui-datepicker .ui-datepicker-next span Tag key with 2 descendant selectors
.ui-datepicker .ui-datepicker-title select Tag key with 2 descendant selectors
.ui-datepicker td span Tag key with 2 descendant selectors
.ui-datepicker td a Tag key with 2 descendant selectors
.ui-datepicker .ui-datepicker-buttonpane button Tag key with 2 descendant selectors
.ui-datepicker-multi .ui-datepicker-group table Tag key with 2 descendant selectors
.ui-datepicker-rtl .ui-datepicker-buttonpane button Tag key with 2 descendant selectors
.ui-dialog .ui-dialog-titlebar-close span Tag key with 2 descendant selectors
.ui-dialog .ui-dialog-buttonpane button Tag key with 2 descendant selectors
.ui-tabs .ui-tabs-nav li Tag key with 2 descendant selectors
.ui-tabs .ui-tabs-nav li a Tag key with 3 descendant selectors
.ui-tabs .ui-tabs-nav li a Tag key with 3 descendant selectors
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
.ui-datepicker-rtl .ui-datepicker-prev:hover
.ui-datepicker-rtl .ui-datepicker-next:hover
.ui-dialog .ui-dialog-titlebar-close:hover
http://labs.globalanimalwelfare.org/themes/default/css/style.css has 50 very inefficient rules, 89 inefficient rules, and 3 potentially inefficient uses of :hover out of 541 total rules.
Very inefficient rules (good to fix on any page):
div.search-form ul li Tag key with 2 descendant selectors and Class overly qualified with tag
div.filters ul li a Tag key with 3 descendant selectors and Class overly qualified with tag
div.filters ul li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
div.cat-filters span a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.category-filters li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.category-filters li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
div.content-block h5 span Tag key with 2 descendant selectors and Class overly qualified with tag
div.content-block-left h5 span Tag key with 2 descendant selectors and Class overly qualified with tag
div.footermenu ul li Tag key with 2 descendant selectors and Class overly qualified with tag
div.footermenu ul li a Tag key with 3 descendant selectors and Class overly qualified with tag
div.footermenu ul li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
div.report-media-box-tabs .report-tab-selected a Tag key with 2 descendant selectors and Class overly qualified with tag
div.report-media-box-tabs .report-tab-selected a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
ul.map-toggles li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.map-toggles li a:active Tag key with 2 descendant selectors and Class overly qualified with tag
div.report-details ul.details li Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
div.report-details ul.details li small Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
div.report-details ul.details li a Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
div.report-details ul.details li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
div.report-description div.additional-reports a Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
table.table-list thead th Tag key with 2 descendant selectors and Class overly qualified with tag
table.table-list tbody tr td Tag key with 3 descendant selectors and Class overly qualified with tag
table.table-list tbody tr td a Tag key with 4 descendant selectors and Class overly qualified with tag
div.incident-notation ul li Tag key with 2 descendant selectors and Class overly qualified with tag
.report-description table tr td a Tag key with 4 descendant selectors

html .step-2 .box label input Tag key with 5 descendant selectors
*+html .step-2 .box label input Tag key with 4 descendant selectors
ul.pager li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.pager li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
.gallery .gal-nav .mask ul li Tag key with 4 descendant selectors
.gallery .gal-nav .mask ul li img Tag key with 5 descendant selectors
.report-description .orig-report .report a.lnk:hover span Tag key with 4 descendant selectors and Class overly qualified with tag
.report-description .orig-report .report a.lnk span Tag key with 4 descendant selectors and Class overly qualified with tag
.report-description .orig-report .discussion .discussion-box p Tag key with 4 descendant selectors
.report-description .orig-report .discussion .discussion-box a.lnk:hover span Tag key with 5 descendant selectors and Class overly qualified with tag
.report-description .orig-report .discussion .discussion-box a.lnk span Tag key with 5 descendant selectors and Class overly qualified with tag
ul.link-toggle li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.link-toggle li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
ul.lt-icons-and-text li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.lt-icons-only li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.link-toggle li.active a Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
ul.link-toggle li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
.rb_nav-controls ul.pager li Tag key with 2 descendant selectors and Class overly qualified with tag
.rb_nav-controls ul.pager li a Tag key with 3 descendant selectors and Class overly qualified with tag
.rb_nav-controls ul.pager li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
.rb_nav-controls ul.pager li.current a Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
ul.inline-links li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.inline-links li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
ul.filter-list li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.filter-list li li Tag key with 2 descendant selectors and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
div#logo h1 Tag key with descendant selector and ID overly qualified with tag
div#logo a Tag key with descendant selector and ID overly qualified with tag
div#logo span Tag key with descendant selector and ID overly qualified with tag
div.language-box select Tag key with descendant selector and Class overly qualified with tag
div.search-form ul Tag key with descendant selector and Class overly qualified with tag
div.submit-incident a Tag key with descendant selector and Class overly qualified with tag
div.submit-incident a:hover Tag key with descendant selector and Class overly qualified with tag
div#mainmenu ul Tag key with descendant selector and ID overly qualified with tag
div#mainmenu li Tag key with descendant selector and ID overly qualified with tag
div#mainmenu a Tag key with descendant selector and ID overly qualified with tag
div#mainmenu a:hover Tag key with descendant selector and ID overly qualified with tag
div.filters strong Tag key with descendant selector and Class overly qualified with tag
div.filters ul Tag key with descendant selector and Class overly qualified with tag
div.filters li Tag key with descendant selector and Class overly qualified with tag
div.slider-holder label Tag key with descendant selector and Class overly qualified with tag
div.cat-filters strong Tag key with descendant selector and Class overly qualified with tag
div.cat-filters span Tag key with descendant selector and Class overly qualified with tag
ul.category-filters li Tag key with descendant selector and Class overly qualified with tag
div.additional-content ol Tag key with descendant selector and Class overly qualified with tag
ul.content-column li Tag key with descendant selector and Class overly qualified with tag
div.content-block img Tag key with descendant selector and Class overly qualified with tag
div.footermenu ul Tag key with descendant selector and Class overly qualified with tag
div.report-category-list a Tag key with descendant selector and Class overly qualified with tag
div.report-category-list a:hover Tag key with descendant selector and Class overly qualified with tag
#report-video ol li Tag key with 2 descendant selectors
div.report-description-text h5 Tag key with descendant selector and Class overly qualified with tag
div.report-comments h5 Tag key with descendant selector and Class overly qualified with tag
div.comment-block h5 Tag key with descendant selector and Class overly qualified with tag
div.comment-block form Tag key with descendant selector and Class overly qualified with tag
div.report-media-box-tabs ul Tag key with descendant selector and Class overly qualified with tag
div.report-media-box-tabs li Tag key with descendant selector and Class overly qualified with tag
div.report-media-box-tabs a Tag key with descendant selector and Class overly qualified with tag
div.report-media-box-tabs a:hover Tag key with descendant selector and Class overly qualified with tag
ul.map-toggles li Tag key with descendant selector and Class overly qualified with tag
div.report-additional-reports h4 Tag key with descendant selector and Class overly qualified with tag
div.report-additional-reports h5 Tag key with descendant selector and Class overly qualified with tag
div.report-description h5 Tag key with descendant selector and Class overly qualified with tag
div.report-description h3 Tag key with descendant selector and Class overly qualified with tag
table.table-list td Tag key with descendant selector and Class overly qualified with tag
div.incident-notation ul Tag key with descendant selector and Class overly qualified with tag
.ui-slider dt span Tag key with 2 descendant selectors
.slider-holder .play a Tag key with 2 descendant selectors
.slider-holder .play a:hover Tag key with 2 descendant selectors
.report_left table tr th Tag key with 3 descendant selectors
.report_block table tr th Tag key with 3 descendant selectors
.report_right table tr th Tag key with 3 descendant selectors
.report-description table tr th Tag key with 3 descendant selectors
.report-description table tr td Tag key with 3 descendant selectors
.report-description table tr:hover Tag key with 2 descendant selectors
.report_row .date-box img Tag key with 2 descendant selectors
.report_category ul li Tag key with 2 descendant selectors
.report_category ul li label Tag key with 3 descendant selectors
.report_category ul ul Tag key with 2 descendant selectors
.report_category ul li li:hover Tag key with 3 descendant selectors
table.rating-table td Tag key with descendant selector and Class overly qualified with tag
.big-block .page_text p Tag key with 2 descendant selectors
.step-1 .location label Tag key with 2 descendant selectors
.step-1 .map p Tag key with 2 descendant selectors
.step-2 .box input Tag key with 2 descendant selectors
.step-2 .box label Tag key with 2 descendant selectors
.step-2 .box label input Tag key with 3 descendant selectors
.step-2 .box label span Tag key with 3 descendant selectors
ul.pager li Tag key with descendant selector and Class overly qualified with tag
.feedback_forms textarea input Tag key with 2 descendant selectors
.gallery .gal-nav .mask ul Tag key with 3 descendant selectors
.gallery .big-img img Tag key with 2 descendant selectors
.report-description .orig-report .report h4 Tag key with 3 descendant selectors
.report-description .orig-report .report p Tag key with 3 descendant selectors
.report-description .orig-report .discussion h5 Tag key with 3 descendant selectors
.discussion h5 a Tag key with 2 descendant selectors
.discussion h5 a:visited Tag key with 2 descendant selectors
div.green-box h3 Tag key with descendant selector and Class overly qualified with tag
div.red-box h3 Tag key with descendant selector and Class overly qualified with tag
div.green-box ul Tag key with descendant selector and Class overly qualified with tag
div.red-box ul Tag key with descendant selector and Class overly qualified with tag
.btns ul li Tag key with 2 descendant selectors
.btns ul li a Tag key with 3 descendant selectors
.btns ul li a:hover Tag key with 3 descendant selectors
ul.link-toggle li Tag key with descendant selector and Class overly qualified with tag
ul.inline-links li Tag key with descendant selector and Class overly qualified with tag
p.labeled-divider span Tag key with descendant selector and Class overly qualified with tag
.r_details h3 span Tag key with 2 descendant selectors
.hover .r_details h3 span Tag key with 3 descendant selectors
p.r_location a Tag key with descendant selector and Class overly qualified with tag
.ui-accordion .ui-accordion-header a Tag key with 2 descendant selectors
.ui-accordion .ui-accordion-content p Tag key with 2 descendant selectors
.ui-accordion .ui-accordion-content a Tag key with 2 descendant selectors
ul.filter-list ul Tag key with descendant selector and Class overly qualified with tag
ul.filter-list li Tag key with descendant selector and Class overly qualified with tag
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
.slider-holder .play:hover
.report-description table tr:hover
.report_category ul li li:hover
http://labs.globalanimalwelfare.org/themes/unicorn/css/_default.css has 18 very inefficient rules, 14 inefficient rules, and 1 potentially inefficient uses of :hover out of 89 total rules.
Very inefficient rules (good to fix on any page):
table.table-list tbody tr td a Tag key with 4 descendant selectors and Class overly qualified with tag
div.footermenu ul li a Tag key with 3 descendant selectors and Class overly qualified with tag
div.filters ul li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
ul.category-filters li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
div#mainmenu ul li a:hover Tag key with 3 descendant selectors and ID overly qualified with tag
div#logo h1 a Tag key with 2 descendant selectors and ID overly qualified with tag
div#mainmenu ul li Tag key with 2 descendant selectors and ID overly qualified with tag
div#mainmenu ul li a Tag key with 3 descendant selectors and ID overly qualified with tag
div#mainmenu ul li a:hover Tag key with 3 descendant selectors and ID overly qualified with tag
ul.category-filters li li Tag key with 2 descendant selectors and Class overly qualified with tag
ul.category-filters li a Tag key with 2 descendant selectors and Class overly qualified with tag
ul.category-filters li a:hover Tag key with 2 descendant selectors and Class overly qualified with tag
div.filters ul li Tag key with 2 descendant selectors and Class overly qualified with tag
div.filters ul li a Tag key with 3 descendant selectors and Class overly qualified with tag
div.filters ul li a span Tag key with 4 descendant selectors and Class overly qualified with tag
div.filters ul li a:hover Tag key with 3 descendant selectors and Class overly qualified with tag
div.content-block h5 span Tag key with 2 descendant selectors and Class overly qualified with tag
div.footermenu ul li a Tag key with 3 descendant selectors and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
div.submit-incident a Tag key with descendant selector and Class overly qualified with tag
div#loggedin_user_action a Tag key with descendant selector and ID overly qualified with tag
div#loggedin_user_action a:visited Tag key with descendant selector and ID overly qualified with tag
div.submit-incident a:hover Tag key with descendant selector and Class overly qualified with tag
div#loggedin_user_action a Tag key with descendant selector and ID overly qualified with tag
div#loggedin_user_action a:visited Tag key with descendant selector and ID overly qualified with tag
div#logo span Tag key with descendant selector and ID overly qualified with tag
div.submit-incident a Tag key with descendant selector and Class overly qualified with tag
div#mainmenu ul Tag key with descendant selector and ID overly qualified with tag
ul.category-filters li Tag key with descendant selector and Class overly qualified with tag
#how-to-report-box ol li Tag key with 2 descendant selectors
div.content-block h5 Tag key with descendant selector and Class overly qualified with tag
div.report-additional-reports h4 Tag key with descendant selector and Class overly qualified with tag
div.report-additional-reports h5 Tag key with descendant selector and Class overly qualified with tag
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
.btn_submit:hover
http://labs.globalanimalwelfare.org/media/css/openlayers.css has 0 very inefficient rules, 1 inefficient rules, and 0 potentially inefficient uses of :hover out of 90 total rules.
Inefficient rules (good to fix on interactive pages):
.infowindow .infowindow_image img Tag key with 2 descendant selectors
http://labs.globalanimalwelfare.org/media/css/global.css has 4 very inefficient rules, 2 inefficient rules, and 0 potentially inefficient uses of :hover out of 28 total rules.
Very inefficient rules (good to fix on any page):
header ul#header_nav_left a:hover Tag key with 2 descendant selectors and ID overly qualified with tag
header ul#header_nav_left li Tag key with 2 descendant selectors and ID overly qualified with tag
header ul#header_nav_right li Tag key with 2 descendant selectors and ID overly qualified with tag
header nav li.header_nav_user a Tag key with 3 descendant selectors and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
header .logo a Tag key with 2 descendant selectors
header .logo a:hover Tag key with 2 descendant selectors
http://labs.globalanimalwelfare.org/media/css/jquery.jqplot.min.css has 0 very inefficient rules, 0 inefficient rules, and 1 potentially inefficient uses of :hover out of 39 total rules.
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
td.jqplot-seriesToggle:hover

rjmackay · 2012-12-09T23:30:46Z

Work in pull request #958 should address some of this:

Combining and minifying CSS and JS

As to some of the rest of this:

Defer parsing JS - working on this. My theme changes will allow us to push JS to the bottom of the page, but some of the code needs rewriting to handle this
Specify image dimension - some of this could be done in your theme. Try it out and let me know what progress you make. All the google urls are google maps stuff we can't change
Gzip compression - This can be setup in your server config. With apache use mod deflate, google should yield good instructions on doing this.
CSS sprites - could probably be done better in our themes
Query strings on static resources - this is all from google maps.
Efficient CSS selectors - Largely due to the default theme or JS libraries. We can't help some of this, but once Code Review: CSS/JS Abstraction and Theme improvements #958 lands you should be able to override default css and start from scratch.

I'm going to close this bug since its a little too open ended to be actionable - once #958 lands (Ushahidi 2.7) you could log bugs for specific issues around this.

rjmackay closed this as completed Dec 9, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page Load Analysis Issues #839

Page Load Analysis Issues #839

GAWDS commented Sep 22, 2012

rjmackay commented Dec 9, 2012

Page Load Analysis Issues #839

Page Load Analysis Issues #839

Comments

GAWDS commented Sep 22, 2012

rjmackay commented Dec 9, 2012