CSS parsing error in pages in WordPress

[Chathu07]

When I view the pagespeed messages, I can see that there's several warning about the "CSS parsing error ".

[Wed, 11 Nov 2020 17:58:21 GMT] [Warning] [10334] CSS parsing error in https://site.com/drink-recipes/

What kind of thing case this css error? Is there any way to get more information about this CSS parsing error?

pagespeed                                     on;

#add header
pagespeed XHeaderValue "Powered By ngx_pagespeed";

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
      add_header " " " ";
        }

location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }

#InPlaceResourceOptimization    
pagespeed InPlaceResourceOptimization on;

#Preserve URL Relativity
pagespeed PreserveUrlRelativity on;

#unoptimized resources
pagespeed InPlaceSMaxAgeSec 10;

pagespeed Allow "*";

#browser-specific in-place optimization
pagespeed EnableFilters in_place_optimize_for_browser;

#Disable PageSpeed Core Filters and enabale one by one.
pagespeed RewriteLevel                        PassThrough;

pagespeed FileCachePath                       /var/cache/ngx_pagespeed_cache;

pagespeed AllowVaryOn                         "Auto";

#Cause Render Blocking CSS
pagespeed EnableFilters                       hint_preload_subresources;

pagespeed UseExperimentalJsMinifier           on;

#Rewrite Domains
pagespeed EnableFilters rewrite_domains;

#Sizes
pagespeed JsOutlineMinBytes                   3000;
pagespeed MaxCombinedCssBytes                 -1;
pagespeed MaxCombinedJsBytes                  1000000;

pagespeed CssInlineMaxBytes                   1000;
pagespeed JsInlineMaxBytes                    1500;

#Flatten CSS Imports
pagespeed CssFlattenMaxBytes                  4000;

pagespeed LazyloadImagesAfterOnload           on;

pagespeed RewriteDeadlinePerFlushMs           2000;
pagespeed MaxCacheableContentLength           2048000;

pagespeed FetchHttps                          enable;
pagespeed FetchHttps                          enable,allow_self_signed;

# Implicit cache-lifetime for resources
pagespeed ImplicitCacheTtlMs                  3600000;

# In-memory LRU Cache
pagespeed LRUCacheKbPerProcess                16192;
pagespeed LRUCacheByteLimit                   64384;

pagespeed EnableCachePurge                    on;
pagespeed PurgeMethod                         PURGE;

pagespeed DownstreamCacheRebeaconingKey       "{{PAGESPEED_BEACON}}";

pagespeed RespectVary                         on;
pagespeed RespectXForwardedProto              on;

pagespeed LowercaseHtmlNames                  on;

#Extend Cache
pagespeed EnableFilters extend_cache;

#Fix PageSpeed remove comment AMP validation error.
pagespeed RetainComment "AMP_VALIDATION:*";

#Disable meta refresh.
pagespeed SupportNoScriptEnabled false;

pagespeed WebpQualityForSaveData 50;
pagespeed WebpRecompressionQuality 75;

#Combine CSS wildcard.
pagespeed MinImageSizeLowResolutionBytes      10;
pagespeed PermitIdsForCssCombining font*;
pagespeed PermitIdsForCssCombining *-css;
pagespeed PermitIdsForCssCombining ver*;
pagespeed PermitIdsForCssCombining gmw*;
pagespeed PermitIdsForCssCombining mashsb*;
pagespeed PermitIdsForCssCombining rs*;
pagespeed PermitIdsForCssCombining chosen*;
pagespeed PermitIdsForCssCombining contact*;
pagespeed PermitIdsForCssCombining redux*;
pagespeed PermitIdsForCssCombining js_composer*;
pagespeed PermitIdsForCssCombining footer*;
pagespeed PermitIdsForCssCombining woocommerce*;
pagespeed PermitIdsForCssCombining wc*;
pagespeed PermitIdsForCssCombining dashicons*;
pagespeed PermitIdsForCssCombining blade*;

#requirement for combine css and js
pagespeed CombineAcrossPaths on;

pagespeed MaxSegmentLength 2048;

#JavaScript Optimization.
pagespeed EnableFilters                       rewrite_javascript,outline_javascript,combine_javascript,extend_cache,local_storage_cache,canonicalize_javascript_libraries,defer_javascript,rewrite_javascript_external;

#Other Optimization.
pagespeed EnableFilters                       insert_dns_prefetch,add_head;
pagespeed RetainComment                       " google_ad_section*";
pagespeed EnableFilters                       trim_urls;

#3rd Party script Optimization.
pagespeed GoogleFontCssInlineMaxBytes         20000;
pagespeed EnableFilters                       inline_google_font_css;
pagespeed EnableFilters                       make_show_ads_async;
pagespeed EnableFilters                       make_google_analytics_async;

#HTML Optimization.
pagespeed EnableFilters                       elide_attributes,remove_comments,combine_heads,collapse_whitespace,remove_quotes;

#CSS Optimization.
pagespeed EnableFilters                       prioritize_critical_css,rewrite_css,combine_css,fallback_rewrite_css_urls,flatten_css_imports,inline_css,inline_import_to_link,rewrite_style_attributes_with_url,move_css_above_scripts,move_css_to_head;
pagespeed PermitIdsForCssCombining            *-css;

#Image Optimization.
pagespeed EnableFilters                       inline_preview_images,resize_rendered_image_dimensions,insert_image_dimensions,responsive_images,resize_images,lazyload_images,dedup_inlined_images,inline_images,rewrite_images,recompress_images,rewrite_css,sprite_images,convert_png_to_jpeg,convert_jpeg_to_webp,convert_to_webp_animated,convert_to_webp_lossless,recompress_webp;

#Mobile Optimization.
pagespeed EnableFilters                       resize_mobile_images;

#Browser Optimization
pagespeed EnableFilters                       convert_meta_tags;                      

# redis storage backend
#pagespeed RedisServer "{{REDIS_UPSTREAM}}";
#pagespeed RedisTimeoutUs 1000;

[Lofesa]

In this page https://site.com/drink-recipes/ you have malformed css. Try https://site.com/drink-recipes/?PageSpeedFilters=+debug and look in the html code the debug messages. For example in this page you have:

.pt-cv-wrapper .h1, .pt-cv-wrapper .h2, .pt-cv-wrapper .h3, .pt-cv-wrapper .h4, .pt-cv-wrapper .h5, .pt-cv-wrapper .h6, .pt-cv-wrapper h1, .pt-cv-wrapper h2, .pt-cv-wrapper h3, .pt-cv-wrapper h4, .pt-cv-wrapper h5, .pt-cv-wrapper h6 {
         font-family: 'economica';align-content
  }

But what value have align-content? Or have:

element.style {
 color: #ffffff;
 background-color: #e86d20;
 border-color: #e86d20;
 border-radius: 5px;
 padding: 3px 8px;align-content;
 }

with background-color and border-color with the same color.....

Better try https://jigsaw.w3.org/css-validator/validator

[uhlhosting]

@utags did you solved the issue? What was the problem in the end?

[Lofesa]

@uhlhosting If you have css parsing errors you must take a look at you css, inlined and files, there are css malformed.

[Chathu07]

.pt-cv-wrapper .h1, .pt-cv-wrapper .h2, .pt-cv-wrapper .h3, .pt-cv-wrapper .h4, .pt-cv-wrapper .h5, .pt-cv-wrapper .h6, .pt-cv-wrapper h1, .pt-cv-wrapper h2, .pt-cv-wrapper h3, .pt-cv-wrapper h4, .pt-cv-wrapper h5, .pt-cv-wrapper h6 { font-family: 'economica';align-content   }

Thank you. I run the CSS validator and corrected most of the errors.

[Chathu07]

@utags did you solved the issue? What was the problem in the end?

I guess yes. Using the https://jigsaw.w3.org/css-validator/#validate_by_uri I corrected many CSS errors.