Mobile devices Web Page Performance very low Desktop improved

Chathu07 commented 4 years ago

I use a responsive theme and use a LEMP stack and use the WordPress platform.

When I test the site performance using the pagespeed insights, I can achieve 81% score for the desktop site but mobile site score less than 30%.

Below you can find my configuration file. My I know which filters improve the mobile site performance?

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$" { }

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;

Sizes

pagespeed JsOutlineMinBytes 3000; pagespeed MaxCombinedCssBytes -1; pagespeed MaxCombinedJsBytes -1;

pagespeed CssInlineMaxBytes 28000;

pagespeed JsInlineMaxBytes 16096;

pagespeed LazyloadImagesAfterOnload on;

pagespeed RewriteDeadlinePerFlushMs 2000; pagespeed MaxCacheableContentLength 2048000;

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 LoadFromFileRuleMatch disallow .*; pagespeed LoadFromFileRuleMatch allow .css$ps_dollar; pagespeed LoadFromFileRuleMatch allow .jpe?g$ps_dollar; pagespeed LoadFromFileRuleMatch allow .png$ps_dollar; pagespeed LoadFromFileRuleMatch allow .gif$ps_dollar; pagespeed LoadFromFileRuleMatch allow .js$ps_dollar; pagespeed LoadFromFileRuleMatch allow .ico$ps_dollar; pagespeed LoadFromFileRuleMatch allow .svg$ps_dollar; pagespeed LoadFromFileRuleMatch allow .php$ps_dollar;

pagespeed Disallow /js/buzz.js;

pagespeed Disallow */lost-password/lost;

pagespeed Disallow /lost-password/;

pagespeed Disallow /cron.php; pagespeed Disallow /admin.php;

pagespeed DownstreamCacheRebeaconingKey "{{PAGESPEED_BEACON}}";

pagespeed RespectVary on; pagespeed RespectXForwardedProto on;

pagespeed LowercaseHtmlNames on;

JavaScript Optimization.

pagespeed EnableFilters rewrite_javascript,outline_javascript,combine_javascript,extend_cache,local_storage_cache,canonicalize_javascript_libraries,defer_javascript;

Other Optimization.

pagespeed EnableFilters insert_dns_prefetch,add_head; pagespeed RetainComment " google_ad_section*"; pagespeed EnableFilters trim_urls;

3rd Party script Optimization.

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;

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,lazyload_images,dedup_inlined_images,inline_images,rewrite_images,recompress_images,rewrite_css,sprite_images;

Mobile Optimization.

pagespeed EnableFilters resize_mobile_images;

Browser Optimization

pagespeed EnableFilters convert_meta_tags;

redis storage backend

pagespeed RedisServer "{{REDIS_UPSTREAM}}";

pagespeed RedisTimeoutUs 1000;

Combine CSS wildcard.

pagespeed PermitIdsForCssCombining font*; pagespeed MinImageSizeLowResolutionBytes 10;

Extend Cache

pagespeed EnableFilters extend_cache;

Fix PageSpeed remove comment AMP validation error.

pagespeed RetainComment "AMP_VALIDATION:*";

Disable meta refresh.

pagespeed SupportNoScriptEnabled false;

Lofesa commented 4 years ago

Hi First, pagespeed module do nothing with ico,svg nor php files, so you don´t need these lines:

pagespeed LoadFromFileRuleMatch allow .ico$ps_dollar;
pagespeed LoadFromFileRuleMatch allow .svg$ps_dollar;
pagespeed LoadFromFileRuleMatch allow .php$ps_dollar;

In fact, I think you need to include these file extensions in the disallow section. My score for your site is 81 mobile 95 desktop, if your site still the same (drcrhub). I see you have issues with render blocking with css and js files. For css files you may take a look to the filters you have set: If you enable prioritize_critical_css, I think you don´t need any of the inline filters nor any of the move filters For the js files, I don´t know why the defer_javascript is not working, but you need to set the js script w/ defer or async attributes For the filter inline_google_font_css you need, like css or js inline filters, the size with pagespeed GoogleFontCssInlineMaxBytes bytes; And you have TTFB issues too, so you need to optimize the nginx server for better TTFB, for example tunning the ssl config ( read https://haydenjames.io/nginx-tuning-tips-tls-ssl-https-ttfb-latency/)

Take account that the Ligthhouse test for mobile emulates a very slow connection, with a fixed 150ms RTT and 1.6Mbps

And maybe using cloudflare you have trouble with optimized resources and the clodflare cache. In fact i can´t test you site cause it.

Chathu07 commented 4 years ago

Dear @Lofesa thank you for your reply. Problem is that I use Contact Form 7 with ReCaptcha v3. After I disabled it again site perform well. I have tested https://foodsreborn.com/ site. But still I have image lazy loading issue.

When I debug I get following response. Please look at its DelayImages and Lazyload Images both automatically disabled.

`

mod_pagespeed on

`

Lofesa commented 4 years ago

These filters are disabled for "this" request. "this" is the wrod. For lazyload/delay images pagespeed need some info that take some time to collect. The info como back to pagespeed server via the beacons. ¿What positio have the images related to the viewport? ¿What distance from the star of page maybe considered as a "frontier" to show or not images? These questions need info, these info is collected by the javascript injected in the page when the beacon is working and reported to the server via POST request. Take a look at the server log files, you must see some log request type POST whit ngx_pagespeed_beacon in the url

apache / incubator-pagespeed-mod

Mobile devices Web Page Performance very low Desktop improved #1991

add header

Disable PageSpeed Core Filters and enabale one by one.

Cause Render Blocking CSS

pagespeed EnableFilters hint_preload_subresources;

Sizes

pagespeed JsInlineMaxBytes 16096;

Implicit cache-lifetime for resources

In-memory LRU Cache

pagespeed Disallow /js/buzz.js;

pagespeed Disallow */lost-password/lost;

pagespeed Disallow /lost-password/;

JavaScript Optimization.

Other Optimization.

3rd Party script Optimization.

HTML Optimization.

CSS Optimization.

Image Optimization.

Mobile Optimization.

Browser Optimization

redis storage backend

pagespeed RedisServer "{{REDIS_UPSTREAM}}";

pagespeed RedisTimeoutUs 1000;

Combine CSS wildcard.

Extend Cache

Fix PageSpeed remove comment AMP validation error.

Disable meta refresh.

mod_pagespeed on