How do I determine the cause of a slow load times?

I have a network solutions hosting and ExpressionEngine. I have a page which uses jquery isotope to display our products. This page takes a significant amount of time to load. I downloaded the "Yslow" FF plugin and have gone through optimizing according to these guidelines to the point that I get a 93 score. Yet the page is still very slow.

  • I have compressed all images with "smush.it"
  • Set Etags and expires headers
  • Combined and minified js and css
  • Reduced the number of DOM elements
  • Reduced the number of EE queries - down from 415 to 69 by removing playa fieldtype associations.
  • css is at the top, js at bottom

Answers


Looked at the link you provided made one suggestion for benchmarking in the comments above.

Are you using Chrome Developer Tools as suggested by @kant312 ? Or better yet try Google Canary as the tools are next gen there.

Total payload in an unprimed browser cache is over 1.0MB and 74 total network requests. This is a lot of data and a lot of requests.

Using that Chrome tool it looks like from a network point of view your worst offenders are:

http://www.hexarmor.com/automin/8ce57c337ec87d08b88c9da7c9fbb37b.js?modified=1338396875 this is a 154KB .js file and for some reason it is not being gzipped.

Your second biggest file is http://www.hexarmor.com/assets/img/background.jpg this is a 147KB image. The kind of noisy textured background you are using here does not compress well. As to the compression algorithm it all looks like "important detail". If you blur it slightly it might compress better. But this is a design factor.

Third biggest file is http://www.hexarmor.com/automin/ede5907dc9f416131684b845fc597112.css?modified=1342712812 this is a 117KB CSS file. Again, highly compressible, but your server is not gzipping it.

I think by fixing these 3 files you could reduce the total payload by 200KB (20%). Fixing the gzipping of CSS and JS will apply to other files as well so that will give you further payload reduction automatically.

Here's the .htaccess line that we use for gzipping

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/x-js application/x-javascript text/javascript

There are a ton of extra rules that some folks use for handling edge cases (mostly older browsers) but this should get you started.

If you are going to show that many products on a page then you are going to have a lot of network requests for images. Maybe you can lazy load the ones that are lower on the page? Also consider combining your social buttons into a single sprite.


Need Your Help

How to navigate within settings flyout in Windows 8.1 Store app?

windows-store-apps settings flyout charms-bar

I am working on my first Win 8.1 Store app and have some trouble understanding the SettingsFlyout.

Zebra Datepicker UI does not pop up on icon click (Internet Explorer 9)

javascript jquery jquery-ui datepicker jquery-ui-datepicker

I am trying to use zebra datepicker library in my project. I have followed the instructions here and written the following codes: