I've installed mod_pagespeed on our server but it won't combine my CSS and JS on our website oktoberfest.it. Obviously I've activated combine_css, combine_javascript and PassThrough in filters in pagespeed.conf file.
I've also read that mod_pagespeed can't combine CSS files that contains CSS3 directives, but in my Apache's log file, after enabling LevelLog debug of course, there aren't any error or infos about failures in combining. Neither CSS neither JS.
I've tried to:
Readd CoreFilters
Reboot Apache
Delete mod_pagespeed cache with touch
/var/mod_pagespeed/cache/cache.flush
Deactivate all filters except combine_css and combine_javascript
I've check that folders indicated in .config file are CHMOD 777
I don't know what to do now. I'm done with ideas. I really want this mod_pagespeed features work with our website, we have 40 requests of CSSs and JSs that come from plugins that we can not manage.
What do you suggest me to do?
For CSS Combine
As you are using Wordpress, you need to add a Function in
function.php of Wordpress.
function remove_style_id($link) {
return preg_replace("/id='.*-css'/", "", $link);
}
add_filter('style_loader_tag', 'remove_style_id');
Wordpress writes ID="" Tags into the css link which pagespeed doesn´t like. So it will be ignored.
BUT It "could" cause Problems with a Plugin if a Javascript calls the ID, but regular no one will do it that way. So you´ll be safe.
You can permit IDs for css combining as of version 1.12.34.1, have a look at the documentation.
As wordpress adds -css to any ID, you can just add:
Apache:
ModPagespeedPermitIdsForCssCombining *-css
Nginx:
pagespeed PermitIdsForCssCombining *-css;
There appear to be a few issues preventing mod_pagespeed from combining resources on your site. First of all, many of your CSS files have id attributes, which will prevent the combine_css filter from functioning. HTML generally expects elements to have a single id attribute, and it's not clear what that should be if those CSS files are combined.
That doesn't explain why mod_pagespeed does not seem to be rewriting any CSS or JS resources on your page though. mod_pagespeed is able to rewrite the HTML, for example www.oktoberfest.it/?ModPagespeedFilters=collapse_whitespace is able to remove whitespace from the page. The issue is likely that mod_pagespeed is not able to fetch these resources internally. This can happen for a number of reasons, but look in your apache error_log for messages related to SERF.
The best fix for fetch related failures is to use the ModPagespeedLoadFromFile directive if your environment will allow it. Also have a look at this FAQ entry, which explains the problem. You can also try updating to beta release 1.4.26.1 or later, which includes a workaround for common loopback fetch errors.
Related
I'm generating dynamic CSS URLs for cache-busting. I.e. they're in the format styles-thisisthecontenthash123.css.
I also want to use HTTP Link headers to load the files slightly faster. I.e. have the header Link: <styles-thisisthecontenthash123.css>; rel=stylesheet
I'm pretty sure it's possible to do this in Fastly using VCL, but I'm not familiar enough with the ecosystem to figure it out. The CSS URL is in index.html, which is cached. I'm thinking I can open index.html and maybe use regex to parse out the CSS URL. How would I do this?
If I'm understanding your question correctly, you want to include a link header for all requests for index.html. You can do that with Fastly, but if the URL for the CSS file is changing you're not going to be able to pull that info out with VCL (you can't inspect the response body).
You could use edge dictionaries and whenever your CSS filename changes, update the reference via the API.
Thing is, if you're going to make an API call whenever the file changes, might as well just keep the filename consistent (styles.css) and whenever you publish a new version send a cache invalidation (purge). Fastly will clear the cache in ~150ms, so you then all you have to do is add the header which is can be done in the Fastly web portal with a condition.
I've been using S3 to host static websites and I've made changes to the HTML & CSS files and have seen those changes reflected in the past. For some reason I go to do the exact same thing I've done before, change the style of one of my sites, and no change would take place. In-fact after deleting all previous files, the old build was still rendering. I had no version control on that particular bucket.
Content-type is set to 'text/css'. My file structure is normal with index.html being in the root. My normal steps of creating or updating new or existing sites has not changed, but S3 has for some reason.
When I click on the index.html file and go to the public url link, it reflects all my changes.
My only fix is to add the full url to the style link.
<link href="https://s3.amazonaws.com/{bucket-name}/css/style.css">
Does anyone know why this is happening or how to fix it other than adding the http link? If not, I hope my solution helps others for this weird S3 issue. Normally you can just upload your files to a bucket, set the policy and finally enable hosting after stating the root html file.
It might be due to your browser caching, where it's loading locally stored assets (CSS stylesheet) from a previous time you've visited the URL rather than fetching the new resources in an attempt to speed up load times. There are settings you can change in your browser to determine how long your browser will hold onto cached resources before fetching new ones.
By setting the stylesheet link directly to the s3 bucket URL, it will cause it to fetch the new stylesheet every time the page is loaded, which leads me to believe that caching is the issue here.
Try clearing your cache and see if it solves the problem.
Here is a deeper explanation of the concept with respect to browsers, and a list of commands to perform a cache refresh depending on what browser/OS you have!
I think it's the CSS folder's doesn't allow you to access the files inside. If you make the folder public, it will work.
Select all your files and folders, go to actions tab and then select make public to allow objects to access one another.
There is an issue with caching on my website. I used standard in-build cache and css&js compression previously, but now I had to turn it off. Turns out, all js&css code still minified. What's more - it affects sub-domain folders (my host is bluehost) so all sub-domain are also have same problem with scripts.
It's really weird issue. I tried to clear all cache_ tables from Drupal database, as well as everything related to cache from /sites/ folder. Still no result.
Any help will be appreciated.
Perhaps you have used advagg or minify module for that. If so - you need disable them in order to get rid of minification.
I would also recommend to inspect the current css files in browser and check what is the path to it. Doing that you would get better understanding what is going on here.
After disabling minification options on System/Development/Performance page in the actual html source on a page it should change from
into a list of
#import url("http://domain.name/sites/all/modules/admin_menu/admin_menu.css?nlpz6z");
I use Nginx and I have installed Google PageSpeedModule on one of my domain. This module is really usefull, and easy to use. All CSS and JS are minified, my images are compressed... it has reduced the weight of 500 kb of my pages.
My question is, can I use this module to deliver only ressources ? I create a kind of CDN, containing all my CSS, images, JS... But, I installed Nginx + pagespeedmodule and the module is not working for one image only for example. But it works with an HTML page and compress the images in this page, but can it work with a direct access image ? Thanks.
Yes, you can use InPlaceResourceOptimization to optimize images even if they are not optimized in HTML (Note: That doc says that this is an Apache-only feature, but that's out of date, it works in the latest Nginx as well.). Add this command to your config:
pagespeed InPlaceResourceOptimization on;
Note that the default way that ngx_pagespeed works is by rewriting resources found in HTML. That is the most efficient way to run it. If you only use InPlaceResourceOptimization you will not get some advantages like cache extension and image resizing. However this is a convenient feature if you cannot optimize resources in HTML.
I have change a bit of code in my CSS from Magento for my header logo but Magento doesn't load my new CSS update and still shows the old one.
I have already refresh the cache in Magento
Flush Magento Cache
Flush Cache storage
Flush Javascript/CSS Cache
At System - Cache Management
I have a folder var/cache and in here folders like mage--0, mage--1
i have tried to back-up them so i can restore it when i delete them and something won't wrong but i cant back-up it.
Hello first of all you can always safely delete the contents of var/cache you do not need to back it up. I konw it might sound silly but did you clear browser cache? Also make shure you changed the correct css file, use Firebug to see if your changes are not overwritten by other rules. A link to the project and more information will be helpful.
It may be that the browser is caching your files, not the server. To check, try either merging your files or unmerging your files and refresh the page. If you see the changes, then it is indeed your browser that is caching the files.
In that case, we've developed a handy little extension that automatically refreshes the merged JS + CSS static files. http://extensions.activo.com/css-and-javascript-versioning.html
you may be using different theme. check in system config design section what package and theme you are using and then check for that folder in skin and change. delete the var cache and changes will show. you do not need to back up var cache
Its also important to check System -> Design, where design overrides are located. Recently we've had a problem with this, someone (we are not sure who, hacker?) added override without dates, and whole shop become broken (we have pretty sophisticated package with lots of modifications). It took us about 30 minutes to figure out what was going on.