Skip to content
This repository has been archived by the owner on Aug 22, 2019. It is now read-only.

Optimize render-blocking JavaScript and CSS in above-the-flow Content: #47

Open
satishsurath opened this issue Oct 22, 2013 · 4 comments
Open

Optimize render-blocking JavaScript and CSS in above-the-flow Content: #47

satishsurath opened this issue Oct 22, 2013 · 4 comments

Comments

@satishsurath
Copy link

From: Google Developers PageSpeed Insights

Your page has 5 blocking script resources and 6 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=startup&only=scripts&skin=strapping&*
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=strapping&version=20130803T210522Z
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=skins.strapping&only=scripts&skin=strapping&*
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=site&only=scripts&skin=strapping&*
Optimize CSS Delivery of the following:
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared&only=styles&skin=strapping&*
http://www.your-website-here.com/wiki/skins/strapping/bootstrap/css/bootstrap.css?303
http://www.your-website-here.com/wiki/skins/strapping/bootstrap/awesome/css/font-awesome.css?303
http://www.your-website-here.com/wiki/skins/strapping/screen.css?303
http://www.your-website-here.com/wiki/skins/strapping/theme.css?303
http://www.your-website-here.com/wiki/load.php?debug=false&lang=en&modules=site&only=styles&skin=strapping&*

Is there a way to reduce the additional serverround-trips to further reduce Page load times?
references:
https://developers.google.com/speed/docs/insights/BlockingJS
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
@garrett
Copy link
Contributor

garrett commented Oct 22, 2013

Yes, ideally we would use ResourceLoader (see #46), but it has an issue with media queries (the bits of CSS that can change the layout of the page based on things like browser window size, etc.).

Getting ResourceLoader working with media queries would optimize this.

@Krinkle Krinkle mentioned this issue Nov 4, 2013
Closed
@kirabook kirabook mentioned this issue Jun 15, 2014
Open
@ghost
Copy link

ghost commented Jan 23, 2015

keywords
Above the fold means in the Your .CSS url that will render
The fix is shorten these url.
We must shorten the .CSS url in order for the webserver to carry less high priority commands in kilobytes per sec to the users web browser especially mobile browsers to increase our website speed performance.

@bluecurio
Copy link

The ResourceLoader supports media-queries. You just need to make the path to your resources a key to an array containing a media attribute. I know that sentence makes no sense, so here's an example, taken directly from ./resources/Resources.php in MW core.

   'mediawiki.skinning.elements' => array(
       'styles' => array(
           'resources/src/mediawiki.skinning/elements.css' => array( 'media' => 'screen' ),
       ),
   )

There isn't much documentation about this (although Manual:$wgResourceModules has a little) — you're better just looking in the aforementioned file for examples.

Beware, though, I had some trouble with the ResourceLoader a while back "sanitizing" some url() functions. I ended up cramming my styles into the <head> as a workaround.

@ghost
Copy link

ghost commented Feb 4, 2015

We read online somewhere
could combine all of the .js source code from each of the .js sources into one .js file served

<script src=""></script>.

then combine all of the .css source code from each of the .css sources into one .css file served

<style type="text/css">.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@garrett @bluecurio @satishsurath