Comments (4)
This should be fixed in master now :)
from critical.
Hi @addyosmani thanks for the merge, happy to help. I don't believe we have fixed this particular issue. I have a fix and I'll do my best to explain.
There are actually two issues here. The first is that there is not an option to set a max image file size for in-lined images. Google page speed kept complaining about prioritizing my atf content and I found that it was indeed an in-lined background image causes this. So I built in an option to set the max file image size and once I did that I was able to skip images that were too large and keep round trips for atf content to a minimum. Google was happy.
However in doing this I re-encountered this #24 issue which is that in the event images are not in-lined, the relative css paths are no longer referencing the proper paths. To be clear I am speaking of fonts and images paths which are not being in-lined by image inliner. My previous pr gave the image inliner module the proper path to work with it so it could inline those images but does nothing to workout the new relative paths for these resources once their in-lined into a html file that is outside the root css dir.
So for example If I have a stylesheet located at root/stylesheets/styles.css
and an image directory at root/img/
Then the following styling rule will fail to locate the proper image path once in-lined, assuming the html file is not in the stylesheets dir..
background: url(../img/mypic.jpg);
It would also fail even if img folder was in the stylesheets dir and we had
background: url(img/mypic.jpg);
When referenced from let's say root/index.html those paths are not valid. The behavior is the same for fonts.
I have written a fix for this which, essentially re-bases the relative path based on the base path set by configuration or cwd.
I'll shoot over a pr after I set up some tests
from critical.
Issue re-opened. Thanks for the detailed feedback!
from critical.
This should be fixed by now. Feel free to re-open if there are still issues we did not consider yet.
from critical.
Related Issues (20)
- critical just stucks at loading and does nothing HOT 2
- Remove query string from stylesheet path
- Print stylesheet unexpectedly gets `onload` attribute HOT 3
- Generated CSS is big HOT 8
- 'noscript)>[rel="stylesheet"]' is not a valid selector HOT 6
- Generate ciritical for multiple pages HOT 2
- Request: Add option to disable link media attribute wrapping HOT 1
- Rules within media queries duplicate when using multiple dimensions HOT 2
- Lots of css generated from below the fold
- Does not take redirects into account when looking for relative CSS HOT 2
- Does not take the <base HTML tag into account when looking for relative CSS HOT 7
- dimensions don't work HOT 2
- Error: Failed to launch the browser process! HOT 3
- typescript support ? HOT 1
- Add the option of a prefix path HOT 3
- On @container queries
- PageSpeed Insights consider CSS not deferred HOT 1
- Allowing internal functions to be imported HOT 3
- [✨] feat: Add the option of pass plain css HOT 2
- Several warnings appear when installing the latest version of critical HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from critical.