WebPagetest Forums
What do you make of my results? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: What do you make of my results? (/showthread.php?tid=12055)

What do you make of my results? - geemonkey - 02-20-2013 01:27 AM

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?


RE: What do you make of my results? - rviscomi - 02-20-2013 05:34 AM

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 </body> 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 <table> 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.

RE: What do you make of my results? - pmeenan - 02-22-2013 06:53 AM


Awesome write-up Rick

RE: What do you make of my results? - geemonkey - 02-22-2013 09:49 PM

(02-20-2013 05:34 AM)rviscomi Wrote:  Awesome text

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:

# 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 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 mod_deflate.c>
        <IfModule mod_headers.c>
            Header append Vary User-Agent env=!dont-vary
            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
    <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"
    <FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|X​SL|XML)$">
        <IfModule mod_headers.c>
            Header set Pragma "public"
            Header append Cache-Control "public"
    <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|j​peg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|od​f|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|D​IVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M​4A|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|X​LW|ZIP)$">
        <IfModule mod_headers.c>
            Header set Pragma "public"
            Header append Cache-Control "public"
    # 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
<ifModule mod_headers.c>
  Header unset ETag
FileETag None
# END Turn ETags Off

# BEGIN Gzip Compression
<ifModule mod_gzip.c>
  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

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:

RE: What do you make of my results? - pmeenan - 02-26-2013 06:08 AM

Any chance mod_deflate isn't installed on your server?