Google Page Speed - blocking CSS resources - Rendering Delay

[Joesurf]

In trying to optimize our page speed for better SEO ranking we have tested our site with Google Page Speed Insights.

https://developers.google.com/speed/pag ... otherlinks

I have managed to minify and defer loading of javascript issues but still have issues with CSS delivery.

2 blocking CSS resources causes a delay in rendering your page.

Code: Select all

http://stanprowse.com/tmp/cache/stylesheet_combined_cfa7dad0433d18c0fa5ff0684f9edd2e.css

http://stanprowse.com/modules/Minify/min/?f=includes/JQuerySlider/ProwseSlide1.css

Any help with defer or asynchronously loading these blocking resources
is appreciated.

Thank you.



CMS Made Simple™ 1.11.9 "Bartolome"

Installed Modules
CMSMailer 5.2.2
FileManager 1.4.3
MenuManager 1.8.6
ModuleManager 1.5.5
News 2.13
Printing 1.1.2
Search 1.7.11
ThemeManager 1.1.8
TinyMCE 2.9.12
CGExtensions 1.38.1
CGSimpleSmarty 1.7.1
CGBlog 1.10.3
FormBuilder 0.7.4
FormBrowser 0.4.2
FrontEndUsers 1.22.3
CMSPrinting 1.0.5
MicroTiny 1.2.5
SelfRegistration 1.6.15
CustomContent 1.9
Captcha 0.4.6
CGJobMgr 1.2.7
NMS 2.3.8
ImageCompressor 0.10.1
Minify 0.9.5

CMS Config Settings
php_memory_limit
process_whole_template
max_upload_size 64000000
url_rewriting mod_rewrite
page_extension
query_var page
image_manipulation_prog GD
auto_alias_content true
locale
default_encoding utf-8
admin_encoding utf-8
set_names true
debug false
timezone
set_names true
set_names
root_url http://stanprowse.com
ssl_url https://stanprowse.com
root_path /home/prowse/public_html (0750)
previews_path /home/prowse/public_html/tmp/cache (0755)
uploads_path /home/prowse/public_html/uploads (0755)
uploads_url http://stanprowse.com/uploads
image_uploads_path /home/prowse/public_html/uploads/images (0777)
image_uploads_url http://stanprowse.com/uploads/images
ssl_uploads_url /uploads
use_smarty_php_tags false

PHP Information
Current PHP Version (phpversion) 5.3.19
md5 function (md5_function) On (True)
GD version (gd_version) 2
tempnam function (tempnam_function) On (True)
Magic quotes in runtime (magic_quotes_runtime) Off (False)
Is E_STRICT disabled in error_reporting (E_STRICT)
Is E_DEPRECATED disabled in error_reporting (E_DEPRECATED)
PHP Effective Memory Limit (memory_limit) 256M
Maximum Execution Time (max_execution_time) 600
PHP output_buffering (output_buffering) On
PHP Safe Mode (safe_mode) Off (False)
File uploads (file_uploads) On (True)
Maximum Post Size (post_max_size) 256M
Maximum Upload Size (upload_max_filesize) 64M
Session Save Path (session_save_path) /tmp (1777)
Sessions are allowed to use Cookies (session_use_cookies) On (True)
Basic XML (expat) support (xml_function) On (True)
Checking for the XMLReader class (xmlreader_class) On (True)
Checking if the httpd process can create a file inside of a directory it created (create_dir_and_file)
PHP register_globals (register_globals) Off (False)
disable_functions in PHP (disable_functions)
PHP Open Basedir (open_basedir)
Test for remote URL (test_remote_url)
fsockopen: Connection ok!
fopen: Connection ok!
Test ini_set (check_ini_set) On (True)
Test for the curl library (curl) On
Test curl version (curlversion) version 7.24.0, minimum recommended version is 7.19.7

Server Information
Server API (server_api) cgi-fcgi
Server Database (server_db_type) mysql (mysql)
Server Database Version (server_db_version) 5.1.72
Check database access levels (server_db_grants) found a "grant all" statement that appears to be suitable
Check for filesystem time differences (server_time_diff) no filesystem time difference found
Server Software (server_software) apache/2.2.23 (unix) mod_ssl/2.2.23 openssl/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 frontpage/5.0.2.2635 mod_jk/1.2.35
Server Operating System (server_os) linux 2.6.18-348.16.1.el5 on x86_64
Timezone Offset (tz_offset) 0

[JohnnyB]

You shouldn't need to defer (or want to defer) CSS files. If they are minified and being sent with a caching header, then you are all set.

BUT, all CSS should be linked above all JS. All JS should be as close to the closing /body tag as possible. If not possible, then JS should be at the bottom, at the end of the /head tag.

This should be placed before any JS resources.

Code: Select all

<link type="text/css" rel="stylesheet" href="/modules/Minify/min/?f=includes/JQuerySlider/ProwseSlide1.css" />

[Joesurf]

Yes have done all of this.

Code: Select all

<head>
<title>{title} | Certified Family Law Specialist</title>
{metadata}

<link type="text/css" rel="stylesheet" href="/modules/Minify/min/?f=includes/JQuerySlider/ProwseSlide1.css" />

{cms_stylesheet}

Code: Select all

<div id="footer">{global_content name='footer'}</div>

<__script__ type="text/javascript" src="/modules/Minify/min/?b=includes/JQuerySlider&f=jquery.extend.js,JQuerySlider.js,ProwseSlide1.js" defer></__script>

<__body>
</__html>

Yet still getting this review message from GoogleSpeed Insights:

Should Fix
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 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.

Optimize CSS Delivery of the following:
http://stanprowse.com/…ned_3cc890d85678 ... 1585cb.css
http://stanprowse.com/…f=includes/JQuer ... Slide1.css

Could it be the latest Google Hummingbird Update just doesn't like the manner in which CMSms delivers CSS styles?

This has downgraded our ranking.

Thank you for your help!

[staartmees]

It seems Google page speed doesn't like the way CMS made simple handles css.
www.cmsmadesimple.org get's the same so-called errors.

[JohnnyB]

It seems Google page speed doesn't like the way CMS made simple handles css.
http://www.cmsmadesimple.org get's the same so-called errors.

I don't think it is a CMSMS thing because WP blogs and other non CMSMS sites get the same result. Also, this is mostly a mobile recommendation that may not have a huge adverse consequence since there are only two CSS files being loaded.

I would recommend minifying the slider's CSS and then adding that to your other CSS file. It is not a lot of CSS and when it is minified, it will not add much more overhead to your other CSS. This way, only one CSS resource is being loaded.

One thing to consider is that by loading the all the CSS that will be used for the entire site during the initial load, will set that CSS file into the browser's cache, so new page views will be faster as result vs downloading new and more CSS files that are specific to those pages. But, this is not good practice if your CSS is huge.

Although browsers are better at max http requests and more people have better bandwidth and speeds you still have to be careful not to have too many simultaneous downloads.

Google recommends using an approach like: "The application order of CSS rules is maintained by injecting all the <style> and <link> elements into the document through javascript."

But, I think that is a matter of opinion. JS is fired after the document loads and before CSS links. Having JS load a linked CSS resource seems like it would be slower, not faster. But, maybe Chrome is doing something different now a days.

Maybe the JS to load CSS approach is helpful if you have a lightbox or HTML content that is triggered by JS, for example. Instead of loading all of the supporting CSS on initial page load, you could fire the CSS only when the JS is fired for the lightbox. That may save mobile bandwidth and resources (battery power). ?

[applejack]

I managed to get 100% for both desktop and mobile

https://developers.google.com/speed/pag ... jack.co.uk

This won't work for every site though a lot depends on what you are doing re jQuery and where it needs to be in the source code. You could even try putting the css in the bottom above the body tag but before any JS.