Pagespeed Caching CSS, Annoying to Develop

Pagespeed caching css, annoying to develop

According to http://code.google.com/speed/page-speed/docs/using_mod.html#htaccess
you can turn off the module with the line ModPagespeed off in a .htaccess file.

The best solution would be to have a non-live development environment that didn't have mod_pagespeed on at all, or where it could be added only for some final testing.

how to stop using google page speed

It looks like mod_pagespeed is installed on the host.

If you don't have access to disable it for your site, you can add ?ModPagespeed=off to the end of your URL in the browser like this

http://dev.eatfit.co.nz/?ModPagespeed=off

CSS Optimisation and PageSpeed Insights

You should consider the critical path and also put all the necessary style in your head section so as to avoid the FOUC (just the style for contents above the fold). This can be done either extracting the style by hand or — for larger sites — with an automatic task like critical-path-css-demo for gulp

Anyway if you choose to load all the stylesheets with javascript consider to still include them inside a <noscript> block, so they can be loaded also when JS is not available.

<noscript>
    <link rel="stylesheet" ...>
</noscript>

---

As a further optimization for near-future browser (at this time it works only on Chrome Canary) it will be possible to early preload stylesheets using

<link rel="preload" href="..." as="style">

and to create an async loader in a simpler way

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

---

Another interesting and recent approach is described by Jake Archibald and it's called "Multi-stage CSS loading": it requires to load a small piece of CSS just before the markup that has to be styled and thus avoid the need for critical CSS, e.g.

<link rel="stylesheet" href="/site-header.css">
<header>…</header>

<link rel="stylesheet" href="/article.css">
<main>…</main>

<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>

The plan is for each to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes behave similar to <script src="…"></script>.

PageSpeed Insights 99/100 because of Google Analytics - How can I cache GA?

Well, if Google is cheating on you, you can cheat Google back:

This is the user-agent for pageSpeed:

“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.8 (KHTML, like Gecko; Google Page Speed Insights) Chrome/19.0.1084.36 Safari/536.8”

You can insert a conditional to avoid serving the analytics script to PageSpeed:

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
// your analytics code here
<?php endif; ?>

Obviously, it won't make any real improvement, but if your only concern is getting a 100/100 score this will do it.

Optimizations to reduce website loading time

Remove/Minimize any bottlenecks on the server side. For this purpose, use a profiler like Xdebug or Zend Debugger to find out where your application is doing expensive and slow operations. Implement caching where possible. Use an OpCode Cache. If this still isn't fast enough consider investing in more CPU or RAM or SSDs (depending on whether you are CPU, IO or Memory bound)

For general server/client side optimizations, see the Yahoo YSlow! User Guide.

It basically sums it up to:

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put StyleSheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable
15. Use GET for AJAX Requests
16. Reduce the Number of DOM Elements
17. No 404s
18. Reduce Cookie Size
19. Use Cookie-Free Domains for Components
20. Avoid Filters
21. Do Not Scale Images in HTML
22. Make favicon.ico Small and Cacheable

Also see the comments contributed below, as they contain some additional useful information for other users.

---

Related Topics