Page MenuHomePhabricator

Optimize the order of styles and scripts
Closed, ResolvedPublic

Description

On https://www.mediawiki.org/wiki/MediaWiki the Chrome DevTools Audit returns the warning:

Optimize the order of styles and scripts
3 inline script blocks were found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

<head>
    <meta charset="UTF-8" />
    <title>MediaWiki</title>
    <meta name="generator" content="MediaWiki 1.25wmf21" />
    <link rel="apple-touch-icon" href="//bits.wikimedia.org/apple-touch/mediawiki.png" />
    <link rel="shortcut icon" href="//bits.wikimedia.org/favicon/mediawiki.ico" />
    <link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="MediaWiki (en)" />
    <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd" />
    <link rel="alternate" hreflang="x-default" href="/wiki/MediaWiki" />
    <link rel="copyright" href="//creativecommons.org/licenses/by-sa/3.0/" />
    <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&amp;feed=atom" />
    <link rel="canonical" href="http://www.mediawiki.org/wiki/MediaWiki" />
    <link rel="stylesheet" href="//bits.wikimedia.org/www.mediawiki.org/load.php?debug=false&amp;lang=en&amp;modules=ext.echo.badge%7Cext.gadget.Edittools%2CEdittop%2CWmfProjectStatusHelper%2CcollapsibleTables%2Csite%7Cext.uls.nojs%7Cext.visualEditor.viewPageTarget.noscript%7Cext.wikihiero%7Cmediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.sectionAnchor%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.vector.styles&amp;only=styles&amp;skin=vector&amp;*" />
    <meta name="ResourceLoaderDynamicStyles" content="" />
    <link rel="stylesheet" href="//bits.wikimedia.org/www.mediawiki.org/load.php?debug=false&amp;lang=en&amp;modules=site&amp;only=styles&amp;skin=vector&amp;*" />
    <style>
        a:lang(ar), a:lang(kk-arab), a:lang(mzn), a:lang(ps), a:lang(ur) {
            text-decoration:none
        }
        /* cache key: mediawikiwiki:resourceloader:filter:minify-css:7:7bd1359907426500f5c6b3d58173fbf3 */
    </style>
    <link rel="stylesheet" href="//bits.wikimedia.org/www.mediawiki.org/load.php?debug=false&amp;lang=en&amp;modules=user&amp;only=styles&amp;skin=vector&amp;user=Subfader&amp;version=20150304T203349Z&amp;*" />
    <script src="//bits.wikimedia.org/www.mediawiki.org/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=vector&amp;*"></script>
    <script>
        if (window.mw) {
            mw.config.set({
                "wgCanonicalNamespace": "",
                "wgCanonicalSpecialPageName": false,
                "wgNamespaceNumber": 0,
                "wgPageName": "MediaWiki",
                "wgTitle": "MediaWiki",
                "wgCurRevisionId": 1083211,
                "wgRevisionId": 1083211,
                "wgArticleId": 1,
                "wgIsArticle": true,
                "wgIsRedirect": false,
                "wgAction": "view",
                "wgUserName": "Subfader",
                "wgUserGroups": ["autoreview", "*", "user", "autoconfirmed"],
                "wgCategories": ["Languages pages"],
                "wgBreakFrames": false,
                "wgPageContentLanguage": "en",
                "wgPageContentModel": "wikitext",
                "wgSeparatorTransformTable": ["", ""],
                "wgDigitTransformTable": ["", ""],
                "wgDefaultDateFormat": "dmy",
                "wgMonthNames": ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                "wgMonthNamesShort": ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                "wgRelevantPageName": "MediaWiki",
                "wgRelevantArticleId": 1,
                "wgUserId": 19654,
                "wgUserEditCount": 3052,
                "wgUserRegistration": 1187668448000,
                "wgUserNewMsgRevisionId": null,
                "wgIsProbablyEditable": false,
                "wgRestrictionEdit": ["sysop"],
                "wgRestrictionMove": ["sysop"],
                "wgIsMainPage": true,
                "wgWikiEditorEnabledModules": {
                    "toolbar": true,
                    "dialogs": true,
                    "hidesig": true,
                    "preview": false,
                    "publish": false
                },
                "wgBetaFeaturesFeatures": [],
                "wgMediaViewerOnClick": true,
                "wgMediaViewerEnabledByDefault": true,
                "wgVisualEditor": {
                    "pageLanguageCode": "en",
                    "pageLanguageDir": "ltr"
                },
                "wikilove-recipient": "",
                "wikilove-anon": 0,
                "wgEchoOverlayConfiguration": {
                    "notification-count": "2",
                    "max-notification-count": 99
                },
                "wgEchoHelpPage": "//www.mediawiki.org/wiki/Special:MyLanguage/Help:Notifications",
                "wgEchoConfig": {
                    "version": "1.5",
                    "eventlogging": {
                        "Echo": {
                            "enabled": true,
                            "revision": 7731316
                        },
                        "EchoMail": {
                            "enabled": true,
                            "revision": 5467650
                        },
                        "EchoInteraction": {
                            "enabled": true,
                            "revision": 5782287
                        }
                    }
                },
                "wgPoweredByHHVM": true,
                "wgULSAcceptLanguageList": ["de-de", "de", "en-us", "en"],
                "wgULSCurrentAutonym": "English",
                "wgCategoryTreePageCategoryOptions": "{\"mode\":0,\"hideprefix\":20,\"showcount\":true,\"namespaces\":false}",
                "wgNoticeProject": "wikimedia",
                "wgNoticeUserData": {
                    "registration": "20070821035408",
                    "editcount": 3052,
                    "pastyearseditcount": 180
                }
            });
        }
    </script>
    <script>
        if (window.mw) {
            mw.loader.implement("user.options", function($, jQuery) {
                mw.user.options.set({
                    "editondblclick": "1",
                    "enotifusertalkpages": "",
                    "gender": "male",
                    "thumbsize": "6",
                    "uselivepreview": "1",
                    "watchlisthideminor": "1",
                    "watchlisthideown": "1",
                    "visualeditor-enable-language": "1",
                    "visualeditor-hidebetawelcome": "1",
                    "flow-topiclist-sortby": "updated",
                    "uls-preferences": "{\"ime\":{\"language\":\"en\",\"previousLanguages\":[\"en\"],\"imes\":{\"en\":\"system\"}}}",
                    "searchNs14": "1",
                    "searchNs90": "1",
                    "searchNs91": "1",
                    "searchNs101": "1",
                    "searchNs103": "1",
                    "HHVM": "1",
                    "betafeatures-auto-enroll": "1",
                    "betafeatures-vector-compact-personal-bar": "1",
                    "gadget-Edittop": "1",
                    "gadget-ajaxrecentchanges": "1",
                    "popups": "1",
                    "timecorrection": "Offset|120",
                    "uls-compact-links": "1",
                    "watchlisttoken": "8a91e58512b10f6df4a7e3ee28e697c959e8e190"
                });
            }, {}, {}, {});
            mw.loader.implement("user.tokens", function($, jQuery) {
                mw.user.tokens.set({
                    "editToken": "976f1149865507eae9f7b793f173f05b1f46ffcd+\\",
                    "patrolToken": "799572f166e8985e3809fbc769a505b1f4841b17+\\",
                        "watchToken": "505b1f41e0889550957da76f606ee0a10fe582ee+\\"
                });
            }, {}, {}, {});
            /* cache key: mediawikiwiki:resourceloader:filter:minify-js:7:7e90c75858158a7f863c1916fa65a111 */
        }
    </script>
    <script>
        if (window.mw) {
            mw.loader.load(["mediawiki.page.startup", "mediawiki.legacy.wikibits", "mediawiki.legacy.ajax", "ext.gadget.site", "ext.centralauth.centralautologin.clearcookie", "mmv.head", "ext.imageMetrics.head", "skins.vector.compactPersonalBar.defaultTracking", "ext.visualEditor.viewPageTarget.init", "ext.uls.init", "ext.uls.interface", "ext.centralNotice.bannerController", "skins.vector.js"]);
        }
    </script>
    <link rel="dns-prefetch" href="//meta.wikimedia.org" />
    <!--[if lt IE 7]>
        <style type="text/css">
            body {
                behavior:url("/w/static-1.25wmf21/skins/Vector/csshover.min.htc")
            }
        </style>
    <![endif]-->
</head>

Event Timeline

Subfader created this task.Mar 15 2015, 4:23 PM
Subfader raised the priority of this task from to Needs Triage.
Subfader updated the task description. (Show Details)
Subfader added a subscriber: Subfader.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 15 2015, 4:23 PM
Subfader set Security to None.

I'm not sure what this warning is signifying in this case.

Simplified version of the output::

<head>
    <meta charset="UTF-8" />
    <title>MediaWiki</title>
    <link rel="shortcut icon" href="//bits.wikimedia.org/favicon/mediawiki.ico" />
    <link rel="stylesheet" href="/load.php? only=styles & modules=ext.echo.badge..skins.vector.styles .." />
    <meta name="ResourceLoaderDynamicStyles" content="" />
    <link rel="stylesheet" href="/load.php? only=styles &  modules=site .." />
    <style>
        a:lang(ar), a:lang(kk-arab), a:lang(mzn), a:lang(ps), a:lang(ur) {
            text-decoration:none
        }
    </style>
    <link rel="stylesheet" href="/load.php? only=styles & modules=user .." />
    <script src="/load.php? only=scripts & modules=startup .."></script>
    <script>
        if (window.mw) {
            mw.config.set({..});
        }
    </script>
    <script>
        if (window.mw) {
            mw.loader.implement("user.options",  ..);
            mw.loader.implement("user.tokens", ..);
        }
    </script>
    <script>
        if (window.mw) {
            mw.loader.load(..);
        }
    </script>
    <link rel="dns-prefetch" href="//meta.wikimedia.org" />
    <!--[if lt IE 7]>
        <style>body { behavior:url("/w/static-1.25wmf21/skins/Vector/csshover.min.htc") }</style>
    <![endif]-->
</head>

Basically:

  • Meta
  • Styles
  • Scripts
  • DNS prefetch
  • (IE<7 comment) load csshover.htc

Having scripts after styles there seems correct and desirable. Maybe it's the "DNS prefetch" resource that it is complaining for?

Krinkle added a subscriber: ori.
Aklapper triaged this task as Lowest priority.Mar 17 2015, 12:59 PM
Krinkle moved this task from Tag to Next-up on the Performance Issue board.May 18 2015, 5:53 PM
He7d3r updated the task description. (Show Details)Jul 9 2015, 4:38 PM