0
votes

I have a website that scores 88% on on GTmetrix pagespeed test (89 Google), the total page size is 343kb and the page load time is 1.4s but it takes and age to display when testing (approx 20 seconds)

The site is hosted with Go daddy and believe this could be the issue but it's proving it.

It's a plesk hosted account and I'm trying to enable Leverage browser caching, I have added a .htaccess file to the root containing the following:

# BEGIN Expire headers

<ifModule mod_expires.c>

ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 1200 seconds"

</ifModule>

# END Expire headers

I still get error messages that Leverage browser caching needs to be enabled, any idea how this is done?

If there any other good speed/network tests to help troubleshoot the slow page display?

2
Sorry, but I'm not sure what you mean. All the resources load in 1.4 secs but it takes the browser 20 secs to parse and format the page?... - War10ck
Your favorite browser should have a devtools feature. There there should be a Resources/Network/Performance page/tab/section with detailed information about timing... - Adriano Repetti
Try page speed plugin of chrome. It will give suggestions as well as optimized versions of files. - Nachiket Kate
@War10ck Yes, looking at most of the speed checkers is comes back with page load times of around 1.4 but the page takes around 20 seconds to display content, I don't use a lot of jquery and this is placed in the footer. I need to sort caching but having some issues - TJ15

2 Answers

3
votes

Your problem is icomoon.tff.
Font files are considered CSS.
The Browser cannot begin rendering the page until all CSS is loaded in to the DOM.

The page actually began rendering at about 1.6 where the purple stripe (DOM Loaded) begins.

The DOM was almost done at 1.563 after the jQuery was parsed.

When the font file is encountered all rendering from 1.6 to 1.85 was scrapped and the Browser started over.

As you can see icomoon.tff starts at 1.863 right between First paint and Start Render.

Move the font file link up in the header or add it. Better, do not use it.


The cache is another problem. Expires is not cache control.
In the HTTP Response Header Cache control Looks like this:

Cache-Control: max-age=31536000, public

You need to set cache control in .htaccess or in the server configuration

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf|mp3|vtt|)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

jQuery is costing you. If you want to do page design correctly, do not use jQuery. There is nothing on this page that requires jQuery to render. It can easily be done without. As a matter of fact when I disabled JavaScript, the page appeared to render the same.


CSS could be better. It is costing you about 1.5 seconds.
Considering this page could load in about 0.500 seconds or less, it is costing you 3x page load time.

enter image description here enter image description here

If you were to do the CSS efficiently rather than use other people stuff, the CSS would fit well in the HTML <head><style> and this page would begin rendering before 0.400.


Put it on a good server, GoDaddy sucks, and your page load could be under 0.300. AWS is hard to beat in performance an price. With GoDaddy you are paying too much for too little.


The following times are from webpagetest.org

domElements' => 115,
pageSpeedVersion' => '1.9',
title' => 'Trinitas Designs',
titleTime' => 877,
loadEventStart' => 2646,
loadEventEnd' => 2652,
domContentLoadedEventStart' => 1563,
domContentLoadedEventEnd' => 1808,
lastVisualChange' => 2680,
browser_name' => 'Google Chrome',
browser_version' => '50.0.2661.94',
server_count' => 1,
server_rtt' => 139,
base_page_cdn' => '',
adult_site' => 0,
fixed_viewport' => 1,
score_progressive_jpeg' => 0,
firstPaint' => 1852,
docCPUms' => 1653.611,
fullyLoadedCPUms' => 1887.612,
docCPUpct' => 61,
fullyLoadedCPUpct' => 36,
isResponsive' => -1,
browser_process_count' => 9,
browser_main_memory_kb' => 50872,
browser_other_private_memory_kb' => 71108,
browser_working_set_kb' => 121980,
domInteractive' => 1563,
date' => 1462831114,
SpeedIndex' => 2278,
visualComplete' => 2680,

icomoon.tff

full_url' => 'http://www.trinitasdesigns.com/fonts/fonts/icomoon.ttf?2ym5un',
score_progressive_jpeg' => -1,
load_end' => 2638,
ttfb_start' => '1863',
ttfb_end' => 2033,
download_start' => 2033,
download_end' => 2638,
download_ms' => 605,
all_start' => '1863',
all_end' => 2638,
all_ms' => '775',

enter image description here

enter image description here

0
votes

If you fire up the developer tools in the Browser and look at one of the HTTP requests it doesn't look like the Expires header is set correctly.

Network tab

If I reload the page it makes another full request and I get a 200 response. Your htaccess file looks okay, but have you tried following another example, the one in this article looks like the full package:

https://paulund.co.uk/set-expire-headers-in-htaccess

You might also need to add:

Header append Cache-Control "public"

To your htaccess file.