jenkins-bot has submitted this change and it was merged.
Change subject: Use Ajax request to fetch image size
......................................................................
Use Ajax request to fetch image size
All browsers will fetch the size of each image instead using a
Ajax request.
Bug: T118164
Change-Id: I9c4a5c2b911010b5f4162bb3fa206c017e4c9cda
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M modules/collectors/ext.PerformanceInspector.imagesize.js
M modules/templates/imagesize.mustache
5 files changed, 77 insertions(+), 53 deletions(-)
Approvals:
Krinkle: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index b1e8e42..c59e890 100644
--- a/extension.json
+++ b/extension.json
@@ -1,18 +1,18 @@
{
"name": "PerformanceInspector",
"version": "0.1.0",
- "author": [ "Peter Hedenskog" ],
+ "author": ["Peter Hedenskog"],
"url": "https://www.mediawiki.org/wiki/Extension:PerformanceInspector";,
"descriptionmsg": "performanceinspector-desc",
"license-name": "GPL-2.0+",
"type": "other",
"Hooks": {
- "BeforePageDisplay": [
"PerformanceInspectorHooks::onBeforePageDisplay" ],
- "BaseTemplateToolbox": [
"PerformanceInspectorHooks::onBaseTemplateToolbox" ],
+ "BeforePageDisplay":
["PerformanceInspectorHooks::onBeforePageDisplay"],
+ "BaseTemplateToolbox":
["PerformanceInspectorHooks::onBaseTemplateToolbox"],
"ResourceLoaderTestModules":
["PerformanceInspectorHooks::onResourceLoaderTestModules"]
},
"MessagesDirs": {
- "BoilerPlate": [ "i18n" ]
+ "BoilerPlate": ["i18n"]
},
"ResourceModules": {
"ext.PerformanceInspector.startup": {
@@ -71,6 +71,7 @@
"performanceinspector-imagesize-column-image-extra",
"performanceinspector-imagesize-too-big",
"performanceinspector-imagesize-description",
+
"performanceinspector-imagesize-warning-description",
"performanceinspector-modules-summary-images"
]
}
diff --git a/i18n/en.json b/i18n/en.json
index d8b4a06..61b9cf0 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -35,10 +35,11 @@
"performanceinspector-imagesize-name": "Image size",
"performanceinspector-imagesize-label": "Image size",
- "performanceinspector-imagesize-column-image-name":"Name",
- "performanceinspector-imagesize-column-size":"Size",
- "performanceinspector-imagesize-column-image-extra":"Extra",
+ "performanceinspector-imagesize-column-image-name": "Name",
+ "performanceinspector-imagesize-column-size": "Size",
+ "performanceinspector-imagesize-column-image-extra": "Extra",
"performanceinspector-imagesize-too-big": "Warning",
- "performanceinspector-imagesize-description":"Here are all the images
loaded on this page.",
- "performanceinspector-modules-summary-images": "The page
{{PLURAL:$1|has|have}} $1 {{PLURAL:$1|image|images}} with a total size of $2."
+ "performanceinspector-imagesize-description": "Here are all the images
loaded on this page.",
+ "performanceinspector-imagesize-warning-description": "Images that are
too big will be flagged with a warning. You should try to make the images
smaller by compressing them and make sure they have the right DPI.",
+ "performanceinspector-modules-summary-images": "The page
{{PLURAL:$1|has|have}} $1 {{PLURAL:$1|image|images}} with a total size of $2."
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 225837a..a082cfc 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -36,5 +36,6 @@
"performanceinspector-imagesize-column-image-extra": "The name of the
column displaying extra information about the images.\n{{Identical|Extra}}",
"performanceinspector-imagesize-too-big": "Information displayed in the
extra column if the image is too big.\n{{Identical|Warning}}",
"performanceinspector-imagesize-description": "Description of the image
section, displayed before the table of images.",
+ "performanceinspector-imagesize-warning-description": "Explain how the
wanring system for images work: Images over 1 mb will be flagged as too big.",
"performanceinspector-modules-summary-images": "Information from the
images displaying the summary information from the image objects."
}
diff --git a/modules/collectors/ext.PerformanceInspector.imagesize.js
b/modules/collectors/ext.PerformanceInspector.imagesize.js
index 43b9f8f..c696d4f 100644
--- a/modules/collectors/ext.PerformanceInspector.imagesize.js
+++ b/modules/collectors/ext.PerformanceInspector.imagesize.js
@@ -1,18 +1,19 @@
-/*jshint undef:false */
-
( function ( mw, $ ) {
-
+ /**
+ Collect image information. W make a ajax request per image and
check the size from the response header.
+ */
var imageSizeCollector = function runImageSizeCollector() {
- var warningLimit = 6000,
+ var warningLimitInBytes = 1000000,
totalSize = 0,
warnings = 0,
- images = [],
- resources,
- imageSizeTemplate = mw.template.get(
'ext.PerformanceInspector.analyze', 'imagesize.mustache' ),
- isResourceTimingV2Supported = ( window.performance &&
window.performance.getEntriesByType && window.performance.getEntriesByType(
'resource' ) && window.performance.getEntriesByType( 'resource' )[ 0
].encodedBodySize );
+ maxImageNameLength = 60,
+ images = [];
- function isImage( name ) {
- return ( name.match( /\.(jpeg|jpg|gif|png)$/i ) !==
null );
+ function getImageName( name ) {
+ if ( name.length > maxImageNameLength ) {
+ return name.substr( 0, maxImageNameLength - 1 );
+ }
+ return name;
}
function humanSize( bytes ) {
@@ -30,43 +31,61 @@
return bytes.toFixed( i > 0 ? 1 : 0 ) + units[ i ];
}
- // The browser supports Resource Timing V2
- if ( isResourceTimingV2Supported ) {
- resources = window.performance.getEntriesByType(
'resource' );
-
- for ( i = 0; i < resources.length; i++ ) {
- if ( isImage( resources[ i ].name ) ) {
- totalSize += resources[ i
].encodedBodySize;
- if ( resources[ i ].encodedBodySize >
warningLimit ) {
- warnings++;
- }
- images.push( {
- name: resources[ i
].name.substring( resources[ i ].name.lastIndexOf( '/' ) + 1 ),
- url: resources[ i ].name,
- size: humanSize( resources[ i
].encodedBodySize ),
- warning: resources[ i
].encodedBodySize > warningLimit ? true : false
+ function fetchUsingAjax() {
+ var deferred = new $.Deferred(),
+ img = document.getElementsByTagName( 'img' ),
+ promises = [],
+ i;
+ function fetchContent( url ) {
+ return $.ajax( {
+ url: url
+ } ).then( function ( data, textStatus,
jqXHR ) {
+ return {
+ url: url,
+ contentLength:
jqXHR.getResponseHeader( 'Content-Length' )
+ };
} );
+ }
+
+ for ( i = 0; i < img.length; i++ ) {
+ if ( img[ i ].currentSrc ) {
+ promises.push( fetchContent( img[ i
].currentSrc ) );
}
}
- return {
- summary: {
- imagesSummary: mw.msg(
'performanceinspector-modules-summary-images', images.length, humanSize(
totalSize ), warnings )
- },
- view: {
- name:
'performanceinspector-imagesize-name',
- label:
'performanceinspector-imagesize-label',
- template: imageSizeTemplate,
- data: {
- totalImageSize: totalSize,
- warningLimit: warningLimit,
- images: images
- }
- }
- };
- } else {
- return {};
+ $.when.apply( $, promises ).done( function () {
+ var values = arguments,
+ i;
+ for ( i = 0; i < values.length;
i++ ) {
+ images.push( {
+ name:
getImageName( values[ i ].url.substring( values[ i ].url.lastIndexOf( '/' ) + 1
) ),
+ url: values[ i
].url,
+ size:
humanSize( values[ i ].contentLength ),
+ warning:
values[ i ].contentLength > warningLimitInBytes ? true : false
+ } );
+
+ totalSize += Number(
values[ i ].contentLength );
+ }
+ deferred.resolve( {
+ summary: {
+ imagesSummary:
mw.msg( 'performanceinspector-modules-summary-images', images.length,
humanSize( totalSize ), warnings )
+ },
+ view: {
+ name:
'performanceinspector-imagesize-name',
+ label:
'performanceinspector-imagesize-label',
+ template:
mw.template.get( 'ext.PerformanceInspector.analyze', 'imagesize.mustache' ),
+ data: {
+
totalImageSize: totalSize,
+ images:
images
+ }
+ }
+ } );
+ } );
+ return deferred.promise();
}
+
+ return fetchUsingAjax();
+
};
module.exports.collectors.push( imageSizeCollector );
}( mediaWiki, jQuery ) );
diff --git a/modules/templates/imagesize.mustache
b/modules/templates/imagesize.mustache
index e11d3a1..c052c1d 100644
--- a/modules/templates/imagesize.mustache
+++ b/modules/templates/imagesize.mustache
@@ -1,6 +1,8 @@
<h4>{{#msg}}performanceinspector-imagesize-title{{/msg}}</h4>
-
-<p>{{#msg}}performanceinspector-imagesize-description{{/msg}}</p>
+<p>
+ {{#msg}}performanceinspector-imagesize-description{{/msg}}
+
{{#msg}}performanceinspector-imagesize-warning-description{{/msg}}
+</p>
<table class="wikitable">
<thead>
<tr>
--
To view, visit https://gerrit.wikimedia.org/r/284887
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9c4a5c2b911010b5f4162bb3fa206c017e4c9cda
Gerrit-PatchSet: 22
Gerrit-Project: mediawiki/extensions/PerformanceInspector
Gerrit-Branch: master
Gerrit-Owner: Phedenskog <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: Phedenskog <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
