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?
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:
-
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.
-
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 OffBEGIN 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 CompressionAddDefaultCharset 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 WebPageTest Test - Running web page performance and optimization tests... 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?