Request: Improve Widget Code for Perfomance and SEO

[imFORZA]

#229

All the widgets IDX providers are PHP pages outputting javascript. For starters the javascript outputted should be minimized for performance. Secondly the outputted code should be reviewed for SEO and performance. For example lets look at a example Showcase Widget:

http://imforzademo.idxbroker.com/idx/customshowcasejs.php?widgetid=39336

What improvements can be made?

1) Line 37 – Link should use // instead of http://. If the MLS or image provider supports https then the same can be done on line 38 for the images as well.

2) Line 39 – The img tag should apply the width and height of the original image, css can still be used to change the size for the widget as needed. I noticed the showcase widget applies the width and height but uses it incorrectly. It should just provide the original width and height of the image, and use a style block at the top (Preferred Method) or use inline styles to adjust the size for the widget.

I created a basic demo page with nothing but IDX Broker widgets, here you can see how the browser wants all the height and width dimensions for the images: https://www.evernote.com/shard/s1/sh/a2f68011-d186-467a-bb3d-c1f6ad2587cf/59321af3c7effcc976e3b30891011dac

3) Kill camelCase for all class and id names

4) Also I am not sure if you are already but I ran a few of the widgets thru JS Lint and some issues/notices appeared, so it might be useful to run it against all the various widgets IDX Broker provides. http://www.jslint.com

(+5 rating, 5 votes, rated)
You need to be a registered member to rate this post.

Loading...

[imFORZA]

#441

Due to the recent report (from the Facebook group) of map quest causing site speed issues, I wanted to update this request with more details to the performance of the map widget. This was something I had brought up previously with the IDX Broker team. The current issue is the IDX Broker plugin loads several resources to display the map widgets. Here is a list of the files:

<link rel=”stylesheet” href=”//d1qfrurkpai25r.cloudfront.net/graphical/css/leaflet.css” />
<script type=”text/javascript” src=”//d1qfrurkpai25r.cloudfront.net/graphical/javascript/leaflet.js”></script>
<script type=”text/javascript” src=”//d1qfrurkpai25r.cloudfront.net/graphical/frontend/javascript/maps/plugins/leaflet.draw.js”></script>
<script type=”text/javascript” src=”//www.mapquestapi.com/sdk/leaflet/v1.0/mq-map.js?key=Gmjtd%7Cluub2h0rn0%2Crx%3Do5-lz1nh”></script>

Currently the IDX Broker WordPress plugin will load all of these files regardless if a map widget (or shortcode) is being used on the page. This creates a performance ding for all pages that are not using the map, and if any one of these resources from third party servers such as the mapquest API have any issues it will cause every page on the site to slow to a crawl, or not load at all.

1) For starters the IDX Broker plugin should be updated to only load these files when a map widget (or shortcode) is being used on a page. WordPress offers these two functions which make it fairly easy:
* http://codex.wordpress.org/Function_Reference/is_active_widget
* https://codex.wordpress.org/Function_Reference/has_shortcode

2) Leaflet.css should be Minified:
//d1qfrurkpai25r.cloudfront.net/graphical/css/leaflet.css

3) When the map resources are loaded thru the WordPress plugin all the urls have ver=X.X. This is because no version of each script is set when they are registered via the plugin, so it defaults to using the version of WordPress the site is using. Ideally these should be set to the actual version number for the script/file OR I actually prefer setting them to null which disables the version and provides better support for caching. You can read more about setting the version by reading about wp_register_script:
https://codex.wordpress.org/Function_Reference/wp_register_script

4) If possible, load the Javascript at the bottom of the page instead of the top. This is done by setting $footer to true when registering the javascript files. Again you can read more about this here: https://codex.wordpress.org/Function_Reference/wp_register_script

5) It appears IDX Broker is now loading leaflet.js and leaflet.draw.js thru their Amazon CloudFront account. Are these customized? If so maybe they can be combined and just load them as one file, to reduce the number of file requests? If they are not customized, maybe they should use a public CDN service such as cdnjs.com?

6) Lastly, I notice the DNS lookup for these urls can be a bottleneck, so I would suggest also having a function to set the DNS Prefetch for each of these urls. This example should be updated so it only loads when the map widget (or shortcode) is used on a page.

<?php

function idxbroker_map_dnsprefetch() {

echo “\n\n<link rel=’dns-prefetch’ href=’//d1qfrurkpai25r.cloudfront.net’ />\n”;
echo “<link rel=’dns-prefetch’ href=’//www.mapquestapi.com’ />\n”;
}
add_filter(‘wp_head’,’idxbroker_map_dnsprefetch’, 0);

(+5 rating, 5 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Jeff Blakemore]

#1445

This request was posted over a year ago. I came in here searching for a solution because even after re-optimizing my images (ugh) and minifying my CSS, I’m still getting a report from Page Speed Insights that I have render-blocking javascript in above the fold content. The report points to the IDX widgets. Are there any plans to optimize the js used in your widgets? An update on this request would be appreciated.

(+5 rating, 5 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Author]

Posts