What do you make of my results?

Hi I am a new web developr and have made the small webshop at energyshop.se and I am trying to optimize it and ran this test. What o you guys htink about the result and what should I really take care of and what is not so important?

http://www.webpagetest.org/result/130219_5J_H17/

Hi geemonkey. You’re definitely off to a good start by coming to WPT for your performance analysis. There are a few things you should know as you get started…

WPT is great at pointing out areas in need of improvement. It also gives you times for how long resources load, and even how long the page itself loads. Don’t take these load times too seriously. It’s not that they’re wrong, but they’re just not representative of what all of your visitors would experience.

The other note about timings is that they’re easily influenced by anomalies on the network. Among many other factors, some random packet loss could make it seem like a request is taking too long to load, so you won’t be able to duplicate those results consistently. The trick to minimizing these anomalies is to run a few tests and let WPT choose the median test run. In effect, this smooths out the outliers and what you’re left with is the common case.

In addition to the increased test runs, you should also opt to record a video of the page load. This enables other features dependent on the video including filmstrips, visual progress charts, and comparison against other tests. This should be selected by default because it offers so much in addition to the standard info.

I’d also add that you’re testing in IE 7, which is over six years old. I know you’re testing from London, which has a limited selection of browsers, but whenever possible try to test using a browser that is popular among your visitors. (let’s hope it’s newer than IE 7)

So you’ve run the test and you’re confident in the results - now it’s time to analyze the results. The first thing you do is look up at the grades A through F. These are the most rudimentary performance best practices that nobody has an excuse to ignore. Clicking on each grade will give you more information about it. The big ticket items for this test are first byte time, compress transfer, and cache static content. I’ll get into first byte time in a bit.

The “F” grade for “Compress Transfer” is really easy to fix on the backend. You need to make sure you enable gzip compression for text-based resources including HTML, CSS, and JS. Make sure you talk to whoever works on your backend about getting this changed. It could literally be a one line code change, but it has a noticeable improvement on performance.

The “F” grade for “Cache static content” is made evident by the yellow background behind requests in the repeat view. They are getting a HTTP 304 response because the browser knows about the last time the resources were modified and even some unique identifiable information about them (E-Tags) but the server never tells the browser to explicitly keep these resources in cache. The two HTTP headers that do this are Expires and Cache-Control. I suggest using a combination of Last-Modified and “Cache-Control: max-age” to specify how long you’d like the browser to hang on to these resources before bothering the server. Some people are afraid to set the lifetime of a resource too far in the future, but if you do this right it won’t be a problem. The trick is to implement some sort of “cache busting” to let the browser know that no matter what is in cache, it needs to pull down a newer copy of the file. The most straightforward way to do this is to change the file name itself. So if you have style.css, maybe you want to call it style_20130219.css (for today’s date) and set the time to live of the file to one year. If you change the file tomorrow, keep the caching info exactly the same but simply update the file name to style_20130220.css. The browser will treat it as a totally new resource and the old one in cache will go away in time. This can be a pain to maintain, so work this into an automated build process if you can.

The colorful waterfall chart is the crux of the performance analysis. There are many many things to look out for here, but I’ll point out some of the big ones that I can see in your test results.

Starting at the top, your first problem is the long time your server takes to output some content (700ms). This is indicated by the bright green portion of the bar, aka time to first byte. This is the reason for the “F” grade on First Byte Time. Optimizations to this are going to be on the backend, which may be out of your purview. As for what exactly is causing this delay, the waterfall cannot say – but it usually ends up being slow database queries to build the initial HTML. Monitoring tools would be necessary to pinning this down.

The biggest thing that jumps out at me is the green vertical line, start render, which takes place at about 4.5 seconds. This is the time it takes for something/anything to be displayed on the screen. As a reminder, we don’t really care about the number 4.5 but we know that there are things we can do to improve it. So there are a couple of reasons why this could be taking so long:

  1. You’re loading most of the page resources before it. It’s possible to use HTML attributes to defer the loading until later, or even some basic JavaScript to wait until the document is ready or the onload event fires. By taking these requests out of the flow, the page can start to render sooner. One important change you should make is to load scripts before your closing tag, not in the HTML head.

  2. Between 2 and 3 seconds, you can see a gap where not a lot is happening over the network, but the browser is doing a lot of work. At the bottom of the waterfall chart there are a couple of line charts that illustrate what’s going on. A couple of reasons why this could be happening are long-running JavaScript code or complicated HTML. So long-running JS is a problem because the browser waits for the code to finish before moving on with UI. The other cause is unoptimized HTML, the best example of which is using incorrectly for page layout. I’m not seeing either of these red flags in your code, which is great. This may not be an issue after all, but you can see how you need to chase down anomalies. This is why it’s important to run multiple tests from different locations. IE 7 from Dulles, VA does not show this gap consistently. IE 7 from London, UK does show this gap consistently. Bottom line, synthetic testing is especially prone to anomalies.

    Dulles: http://www.webpagetest.org/result/130219_90_QTC/
    London: http://www.webpagetest.org/result/130219_7G_P75/

    Hope this wasn’t too low-level or boring. If not it should be of some help to others new to performance analysis.

+1

Awesome write-up Rick

Hi again and thanks for the great reply. Now I had some time to invetigate it further and dig into it (its my first time…) and I have spent some time to try to edit the .htaccess (which I didnt even have in my foder to start with) and after some scouting on the web I came up with this document:

[code]

BEGIN W3TC Browser Cache

<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|js|js2|js3|js4|CSS|HTC|JS|JS2|JS3|JS4)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
# END W3TC Browser Cache

Header unset ETag
FileETag None

Hantera och redirecta användare till en gemensam error-sia

ErrorDocument 404 /psych/cgi-bin/error/error?404

BEGIN Turn ETags Off

Header unset ETag FileETag None # END Turn ETags Off

BEGIN Gzip Compression

mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* # END Gzip Compression

AddDefaultCharset UTF-8
DefaultLanguage sv-SE

Force “File Save As” Prompt

AddType application/octet-stream .avi .mpg .mov .pdf .xls .mp4 .rar[/code]

But I still get only 82/100 http://www.webpagetest.org/result/130222_EN_DK5/ and its telling me that stuff I thought i got rid of with the .htaccess is still not set up properly.

Is there anything I should really consider here or can I move along really? I will today try to optimize my images to the fullest and then run the test again.

UPDATE: Fixed images - now have 90/100. Now onto next thing, why isnt my JS/CSS compressed? I use “correct” gzip/deflate but they still show up as not compressed on different test sites. The things that are still there now mainly is about JS and CSS. It might be some setting on not my end? Didnt get your tester to work today so I used this:
https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fenergyshop.se_2F&mobile=false

Any chance mod_deflate isn’t installed on your server?