Wartune home page by R2Games is very slow due to same JavaScript issues that we are facing in the game (major source of the lag):
We tried standard tool (www.webpagetest.org) to evaluate it and compare against some popular pages (we selected Google, Yahoo, Bing):
1) Cable, IE 11:
- first load 15.7s
- rep load 8.3s
- in comparison when all other pages loaded 100%, Wartune is in 19%
2) DSL, IE 11:
- first load 50.1s
- rep load 9.1s
- in comparison when all other pages loaded 100%, Wartune is 14%
3) FIOS, IE 11:
- first load 10.3s
- rep load 5.7s
- in comparison when all other pages loaded 100%, Wartune is 29%
4) programmer's view (LAN), IE 11:
- first load 1.7s
- rep load 1.3s
So nobody understand performance and UX at R2Games?
What causes such big issues:
a) No picture compression, we already see the same in the game
b) No transfer compression, we already see the same in the game
c) No server-side caching, dtto
d) Page has dynamic index 4.1 versus Google's 1.2 (JavaScript versus static HTML5)
Some notes:
SCRIPT Main Doc http://r2cdn2.r2games.com/en/js/lib/jquery.js Header size = 267 bytes
Up to 60812 of 93868 bytes could have been saved through compression.
SCRIPT Main Doc http://r2cdn2.r2games.com/en/js/home.js Header size = 267 bytes
Up to 51789 of 74145 bytes could have been saved through compression.
Analysis and Recommendations
• TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization. Y
• TOTAL_OBJECTS - Warning! The total number of objects on this page is 68 which by their number will dominate web page delay. Consider reducing this to a more reasonable number. Above 20 objects per page the overhead from dealing with the actual objects (description time and wait time) accounts for more than 80% of whole page latency. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details on how object overhead dominates web page latency. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames or a CDN to reduce object overhead.
• TOTAL_IMAGES - Warning! The total number of images on this page is 62 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Use CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques to reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames to reduce object overhead.
• TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 2 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
• TOTAL_SIZE - Warning! The total size of this page is 2582325 bytes, which will load in 528.25 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.
• TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 2 . External scripts are less reliably cached than CSS files so consider combining scripts into one to minimize HTTP requests, or even embedding them into high-traffic pages. Placing external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.
• HTML_SIZE - Congratulations, the total size of this HTML file is 5874 bytes, which less than 50K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your HTML to display content in under 10 seconds, the average time users are willing to wait for a page to display without feedback.
• IMAGES_SIZE - Warning! The total size of your images is 2392932 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example). Finally, substitute CSS techniques for graphics techniques to create colored borders, backgrounds, and spacing.
• SCRIPT_SIZE - Warning! The total size of external your scripts is 168013 bytes, which is over 20K. Consider optimizing your JavaScript for size, combining them, and using HTTP compression where appropriate for any scripts placed in the HEAD of your documents. You can substitute CSS menus for JavaScript-based menus to minimize or even eliminate the use of JavaScript.
• CSS_SIZE - Caution. The total size of your external CSS is 15506 bytes, which is above 8K and less than 20K. For external files, ideally keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.
• MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 10K.
We tried standard tool (www.webpagetest.org) to evaluate it and compare against some popular pages (we selected Google, Yahoo, Bing):
1) Cable, IE 11:
- first load 15.7s
- rep load 8.3s
- in comparison when all other pages loaded 100%, Wartune is in 19%
2) DSL, IE 11:
- first load 50.1s
- rep load 9.1s
- in comparison when all other pages loaded 100%, Wartune is 14%
3) FIOS, IE 11:
- first load 10.3s
- rep load 5.7s
- in comparison when all other pages loaded 100%, Wartune is 29%
4) programmer's view (LAN), IE 11:
- first load 1.7s
- rep load 1.3s
So nobody understand performance and UX at R2Games?
What causes such big issues:
a) No picture compression, we already see the same in the game
b) No transfer compression, we already see the same in the game
c) No server-side caching, dtto
d) Page has dynamic index 4.1 versus Google's 1.2 (JavaScript versus static HTML5)
Some notes:
SCRIPT Main Doc http://r2cdn2.r2games.com/en/js/lib/jquery.js Header size = 267 bytes
Up to 60812 of 93868 bytes could have been saved through compression.
SCRIPT Main Doc http://r2cdn2.r2games.com/en/js/home.js Header size = 267 bytes
Up to 51789 of 74145 bytes could have been saved through compression.
Analysis and Recommendations
• TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization. Y
• TOTAL_OBJECTS - Warning! The total number of objects on this page is 68 which by their number will dominate web page delay. Consider reducing this to a more reasonable number. Above 20 objects per page the overhead from dealing with the actual objects (description time and wait time) accounts for more than 80% of whole page latency. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details on how object overhead dominates web page latency. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames or a CDN to reduce object overhead.
• TOTAL_IMAGES - Warning! The total number of images on this page is 62 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Use CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques to reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames to reduce object overhead.
• TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 2 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
• TOTAL_SIZE - Warning! The total size of this page is 2582325 bytes, which will load in 528.25 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.
• TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 2 . External scripts are less reliably cached than CSS files so consider combining scripts into one to minimize HTTP requests, or even embedding them into high-traffic pages. Placing external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.
• HTML_SIZE - Congratulations, the total size of this HTML file is 5874 bytes, which less than 50K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your HTML to display content in under 10 seconds, the average time users are willing to wait for a page to display without feedback.
• IMAGES_SIZE - Warning! The total size of your images is 2392932 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example). Finally, substitute CSS techniques for graphics techniques to create colored borders, backgrounds, and spacing.
• SCRIPT_SIZE - Warning! The total size of external your scripts is 168013 bytes, which is over 20K. Consider optimizing your JavaScript for size, combining them, and using HTTP compression where appropriate for any scripts placed in the HEAD of your documents. You can substitute CSS menus for JavaScript-based menus to minimize or even eliminate the use of JavaScript.
• CSS_SIZE - Caution. The total size of your external CSS is 15506 bytes, which is above 8K and less than 20K. For external files, ideally keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.
• MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 10K.