advanced settings &#8211; Load CSS asynch &#8211; not saving

(@alignak)

Hi, thanks again.

Last issue has been fixed (I hope) on 1.5.1…
The setting was saved but not checked by default on page load.

Also be advised that the critical path section is meant to have css code (not file paths) and that the critical path itself, is made with the least amount of code as possible to render only the above the fold content.

If your css is small enough, you can try the “Inline all enqueued CSS” option first and see if it triggers a warning on pagespeed insights telling you that it needs more than 2 round trips… if it doesn’t, then use that instead of defer css.

Thread Starter

(@marampb)

Hi Raul

The issue was fixed. thanks for the quick fix.

I removed the wrong elements in the over the fold part, and back to a more normal setting.
i keep however having problems once the css processing is activated. i almost removed (excepted) all the folders that might have css inside, but i still keep having “ugly” page display. tried the different configurations, but still something which hang the page. looks like the bottons and some overlays get broken.
no css is reported as being processed, except some google fonts.
all cache is cleaned and my testing firefox clean cache each time i close it.

i currently deactivated the css processing. i kept the js part, and i will come back when i have some time. need to continue on other parts of this dev site, before coming back to optimisation side.

seems there are 2 methods of css processing. the previous one (present till 1.4.4 worked better on my side), the new one a little bit less. that’s life ??

if possible having a toggle in between old fashion optimisation and new one – if possible
could be nice. for sure if possible.

Anyway thanks for all your investment, and pro dev done for this plugin.

regards,
B

Plugin Author

(@alignak)

I think it might be some inlined css your theme might be printing on the page.
Does it still happen when you select the “Inline all CSS” option?

If you have a staging version or if you’re willing to send me a full backup for testing, then please send it via https://fastvelocity.com/
If this is something I can fix then I will surely fix it.

The biggest difference between old and new version now, is that earlier, the header css was separated from the css in the footer. Now we grab them both and put them together in the header… so, if you have some inline css on the page “after” the css file reference, it will overwrite it.

What is your site url so I can take a quick look at the html source and css structure on my end?

Edit:
Haa… I just noticed that you were loading your CSS Async?
That will probably cause the broken css layout you’re talking about (it’s an advanced feature) so try to disable all options on the advance tab first and css “should” work without any file on the ignore list.

This reply was modified 7 years, 6 months ago by Raul P..

Thread Starter

(@marampb)

Hi Raul

thanks for the support
i’ve just sent a message on your website.

thanks a lot
B

Plugin Author

(@alignak)

Hi,

I added some improvements to the css processing on 1.5.2 that may fix your issues.
Try to remove the css paths from the ignore list completely, update to the latest version and let me know.

Thanks

Thread Starter

(@marampb)

Thanks Raul

waiting the version 1.5.4 ?? (as per plugin history)
In meanwhile I removed the css, and also the above the fold content.

thanks again
regards
B

Thread Starter

(@marampb)

Thanks Raul

waiting for the version 2.0 to become real and available to download ??

regards,
B

Plugin Author

(@alignak)

Hi,

Version 2.0.0 has already been pushed to the repository, but it’s still not updating (can take up to 6 hours or so).

Here’s the changelog:

= 2.0.0 [2017.05.11] =
* moved the css and js merging base code back to 1.4.3 because it was better for compatibility
* removed the font awesome optimization tweaks because people have multiple versions and requirements (but duplicate css and js files are always removed)
* added all usable improvements and features up to 1.5.2, except for the "Defer CSS" and "Critical Path" features (will consider for the future)
* added info to the FAQ's about our internal blacklist for known CSS or JS files that are always ignored by the plugin 
* changed the way CSS and JS files are fetched and merged to make use of the new improvements that were supposed to be on 1.4.4+
* changed the advanced settings tab back to the settings page for quicker selection of options by the advanced users
* changed the cache purging option to also delete our plugin transients via the API, rather than just let them expire
* changed the "Inline all CSS" option into header and footer separately

Reverting back to 1.4.3 and then refactoring all the improvements back seems to have fixed all issues on all my development sites, so please let me know when you test it.

If you want to get it before it’s live, you can download it here:

https://dev.fastvelocity.com/fast-velocity-minify-2.0.0.zip

Thread Starter

(@marampb)

thanks Raul

I installed the new version few minutes back.
and after doing a quick config not the most agressive but allowing processing both js and css, and adding 2 specific js folders (themefuse theme + FVB pro) , , I said to myself… Am I dreaming is the plugin activated ???

ALL IS WORKING FINE NOW ! and looks like i changed my server LOL. much faster.
you’re welcome to visit. (Currently updating one of the forms :))

I will take a look more deeply next days, but frankly at first sight i see no issue. Great job! GREAT JOB GREAT JOB

i would have a quick question, maybe not a so bad idea …
why don’t you add a “caching” and expiration method? and an admin bar CLEAN, or intelligent cleaning/serving by last use/modified/expired. I know maybe this is not the initial purpose of the plugin. and doing too much becomes like the multi printers/scanner/etc (doing lot things, but none well ?? ).

thanks again
B

This reply was modified 7 years, 6 months ago by marampb.

Thread Starter

(@marampb)

Are these files generated by fast velocity? ??

FQDN/wp-content/uploads/fvm/cache/footer-19b2046e-1494356542.min.js
(expiration not specified)
FQDN/wp-content/uploads/fvm/cache/footer-4c2d0784-1494356542.min.js
(expiration not specified)
FQDN/wp-content/uploads/fvm/cache/footer-6ee339a7-1494356542.min.js
(expiration not specified)
FQDN/wp-content/uploads/fvm/cache/header-210d0f6c-1494356542.min.js
(expiration not specified)
FQDN/wp-content/uploads/fvm/cache/header-45a935da-1494356542.min.css
(expiration not specified)

should i force the expiration through a .htaccess? or the plugin could en generate one?
what would be your advice

thanks a lot ??
B

Plugin Author

(@alignak)

Hi, glad it’s sorted out.

Yes, the files at FQDN/wp-content/uploads/fvm/cache/* are the merged cached files.
Those have always existed on the plugin (feature) because we serve them static, rather than having php generating them on the fly (slow).

The “cache” (those files) will auto expire and the directory will be kept clean over time (every few days).

As for the “expiration” of css and js files (as usually shown on pagespeed) that’s a server configuration. People use different servers (Nginx, Apache, etc)… so in my case, I always setup this on Nginx for all sites.

If you’re on Apache (probably the most common), you can edit your .htaccess or your apache virtual hosts file (you need the mod_expires installed on the server).

Add this code to the top of your .htaccess file (if you don’t have some similar code yet):

# BEGIN Browser Cache
<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType image/webp .webp
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.ms-opentype ._otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType image/svg+xml .svg .svgz
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType application/vnd.ms-opentype ._ttf
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/font-woff .woff
    AddType application/font-woff2 .woff2
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 7 days"
    ExpiresByType text/x-component "access plus 7 days"
    ExpiresByType application/x-javascript "access plus 7 days"
    ExpiresByType application/javascript "access plus 7 days"
    ExpiresByType text/javascript "access plus 7 days"
    ExpiresByType text/x-js "access plus 7 days"
    ExpiresByType text/richtext "access plus 7 days"
    ExpiresByType image/svg+xml "access plus 7 days"
    ExpiresByType text/plain "access plus 7 days"
    ExpiresByType text/xsd "access plus 7 days"
    ExpiresByType text/xsl "access plus 7 days"
    ExpiresByType text/xml "access plus 7 days"
    ExpiresByType video/asf "access plus 7 days"
    ExpiresByType video/avi "access plus 7 days"
    ExpiresByType image/bmp "access plus 7 days"
    ExpiresByType application/java "access plus 7 days"
    ExpiresByType video/divx "access plus 7 days"
    ExpiresByType application/msword "access plus 7 days"
    ExpiresByType application/vnd.ms-fontobject "access plus 7 days"
    ExpiresByType application/x-msdownload "access plus 7 days"
    ExpiresByType image/gif "access plus 7 days"
    ExpiresByType application/x-gzip "access plus 7 days"
    ExpiresByType image/x-icon "access plus 7 days"
    ExpiresByType image/jpeg "access plus 7 days"
    ExpiresByType image/webp "access plus 7 days"
    ExpiresByType application/json "access plus 7 days"
    ExpiresByType application/vnd.ms-access "access plus 7 days"
    ExpiresByType audio/midi "access plus 7 days"
    ExpiresByType video/quicktime "access plus 7 days"
    ExpiresByType audio/mpeg "access plus 7 days"
    ExpiresByType video/mp4 "access plus 7 days"
    ExpiresByType video/mpeg "access plus 7 days"
    ExpiresByType application/vnd.ms-project "access plus 7 days"
    ExpiresByType application/x-font-otf "access plus 7 days"
    ExpiresByType application/vnd.ms-opentype "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.database "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.chart "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.formula "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.graphics "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.presentation "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet "access plus 7 days"
    ExpiresByType application/vnd.oasis.opendocument.text "access plus 7 days"
    ExpiresByType audio/ogg "access plus 7 days"
    ExpiresByType application/pdf "access plus 7 days"
    ExpiresByType image/png "access plus 7 days"
    ExpiresByType application/vnd.ms-powerpoint "access plus 7 days"
    ExpiresByType audio/x-realaudio "access plus 7 days"
    ExpiresByType image/svg+xml "access plus 7 days"
    ExpiresByType application/x-shockwave-flash "access plus 7 days"
    ExpiresByType application/x-tar "access plus 7 days"
    ExpiresByType image/tiff "access plus 7 days"
    ExpiresByType application/x-font-ttf "access plus 7 days"
    ExpiresByType application/vnd.ms-opentype "access plus 7 days"
    ExpiresByType audio/wav "access plus 7 days"
    ExpiresByType audio/wma "access plus 7 days"
    ExpiresByType application/vnd.ms-write "access plus 7 days"
    ExpiresByType application/font-woff "access plus 7 days"
    ExpiresByType application/font-woff2 "access plus 7 days"
    ExpiresByType application/vnd.ms-excel "access plus 7 days"
    ExpiresByType application/zip "access plus 7 days"
</IfModule>
# END Browser Cache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^application/font.*
mod_gzip_item_include mime ^application/x-font.*
mod_gzip_item_include mime ^application/json.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

I’ll consider adding this in the future to the plugin.

Note that sometimes the “GZIP COMPRESSION” is not supported causing an error 500 and that’s why I haven’t added this yet… if that happens, simply remove that section.

Plugin Author

(@alignak)