The main thread was blocked for 324 ms

[Abraham54]

The main thread was blocked for 324 ms
When files block the main thread, users are unable to interact with the page content. Typically, parsing and executing large JavaScript files, as well as running long JavaScript tasks can block the main thread and should be avoided. These files had high thread blocking times:

• 266 ms: https://www.piepcomp.nl/js/vendor/jquery/jquery-3.5.1.min.js?_v=7c0d87cc
• 65 ms: https://www.piepcomp.nl/js/xf/core-compiled.js?_v=7c0d87cc

WebPageTest Opportunities & Experiments

Check out these opportunities for improvement identified by WebPageTest

www.webpagetest.org

This site has a blocking time of 152 ms with even more js files:
7 JavaScript files are blocking page rendering.
By default, references to external JavaScript files will block the page from rendering while they are fetched and executed. Often, these files can be loaded in a different manner, freeing up the page to visually render sooner.

• js/xf/preamble.min.js?_v=35b6227c
• js/vendor/jquery/jquery-3.5.1.min.js?_v=35b6227c
• js/vendor/vendor-compiled.js?_v=35b6227c
• js/xf/core-compiled.js?_v=35b6227c
• js/vendor/lightslider/lightslider.min.js?_v=35b6227c
• js/xfmg/slider.min.js?_v=35b6227c
• js/xf/notice.min.js?_v=35b6227c

WebPageTest Performance Test Results

Check out these web performance test results on WebPageTest.org:

www.webpagetest.org

What is the possible reason, my site has a higher blocking time with only two Js files?

 

[briansol]

Normal.

The js is required to load before dom rendering.

the js that is not blocking is already deferred or put in the bottom of the page.

 

[Abraham54]

@briansol, you say it is normal.
What is Webtagetest telling you about TBT of your site?

Js is preloaded on my site.

 

[briansol]

yeah, it's the same thing here.

WebPageTest Opportunities & Experiments

Check out these opportunities for improvement identified by WebPageTest

www.webpagetest.org

preloading only does so much. it's still blocking the render of the DOM until it parses and loads.

 

[Abraham54]

@briansol - Mobile is always slower than desktop - what if you chose standard setting via Cable?

 

[Abraham54]

The blocking time of another Dutch XF forum with ads is even higher,
but strange enough, vendor js is not reported blocking - is that due to the adss?

 

[Abraham54]

Update:

The main thread was blocked for 364 ms
When files block the main thread, users are unable to interact with the page content. Typically, parsing and executing large JavaScript files, as well as running long JavaScript tasks can block the main thread and should be avoided. These files had high thread blocking times:

• 268 ms: https://www.piepcomp.nl/js/vendor/jquery/jquery-3.5.1.min.js?_v=bd3477b7

I have implemted a new .htacces:

Spoiler: New .htaccess

<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
# mod_headers can't match by content-type, but we don't want to send this header on everything...
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
# mod_headers, y u no match by Content-Type?!
<FilesMatch "\.(gif|ico|jpe?g|png|svg|svgz|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>


# ----------------------------------------------------------------------
# Cross-domain AJAX requests
# ----------------------------------------------------------------------

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>


# JavaScript
# Normalize to standard type (it's sniffed in IE anyways)
# tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript js jsonp
AddType application/json json

# Audio
AddType audio/mp4 m4a f4a f4b
AddType audio/ogg oga ogg

# Video
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv

# SVG
# Required for svg webfonts on iPad
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

# Webfonts
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType application/x-font-woff woff
AddType font/opentype otf

# Assorted types
AddType application/octet-stream safariextz
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-shockwave-flash swf
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall xpi
AddType application/xml rss atom xml rdf
AddType image/webp webp
AddType image/x-icon ico
AddType text/cache-manifest appcache manifest
AddType text/vtt vtt
AddType text/x-component htc
AddType text/x-vcard vcf

<IfModule mod_deflate.c>

# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>

# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable mod_filter
# and can remove the <IfModule mod_filter.c> and </IfModule> lines as
# AddOutputFilterByType is still in the core directives)
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>

<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
ExpiresByType text/html "access plus 0 seconds"

# Data
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"

# Feed
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"

# Webfonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"

</IfModule>

<IfModule mod_headers.c>
Header unset ETag
</IfModule>

See also:

html5-boilerplate/.htaccess at dac15682b35ad69f519205e1b82694d0cab189ca · h5bp/html5-boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites. - html5-boilerplate/.htaccess at dac15682b35ad69f519205e1b82694d0cab189ca · h5bp/html5-boilerplate

github.com