TLDR: Is there more to optimising websites than just running PageSpeed tests and the actioning all the RED (poor bits?) If I wanted to delve a little deeper into this topic could you suggest good material to read?
So I’ve started working in the IT department of quite a large retailer as a graduate (A big thank you to everyone who helped me here. My website for the charity went a long way). One of the General Managers would like to rotate me over to the web/eCommerce team.
Essentially right now he wants me to generate a report to answer “Why the website is so slow”. I’ve run basic reports like PageSpeed and GTmetrix which has given me pretty good insight but it feels like these are surface deep. How much improvement will we get from actually , adhering to all these “best practices”.
I’ve found the Google Chrome developer tools pretty handy but even those I never really understand how much improvement each section will give.
I personally use a bunch of tools to speed up my sites.
I go through webpagetest and tools.pingdom to see if there is any problem related to load times or newtork problems.
I use cssstats.com and CSS Dig to see if my css can be improved and I can trim some bite here and there.
Other than that, if you have already followed all the advices from google speed insight, you can then start tackle all the aspects related to how you site is served. For example what hosting provider are you using, you make use of a CDN, are images optimized and so on.
But the more you want to optimize the more you’ll have to dig.
Btw I’ll be happy to give you my 2c on your site if you want to share the link so that I can have a look at it and run some tests
welcome to the world of web performance ;). I think I could help you out on that topic and share some of my knowledge and resources that might be handy for you.
Now most of you are not Germans so I will just give you resources that I found useful for writing this paper:
First of all I think the most crucial part ist to understand how the internet works and when you want to tackle mobile performance how do carrier services work and how does your phone connect to the internet and all that stuff. This will greatly enhance your knowledge of why and how things need to be setup in order to be faster.
Here are some really great books that start with the basics and go really into depth about that topic:
Books:
Really deep knowledge and insights into the world of browsers and networking. Lots of pictures with examples and a great read
High Performance Browser Networking - by Ilya Grigorik (Google) https://hpbn.co/
Lara Hogans tackles the question of how you can work on fast websites as a company. That web performance does not come from one programmer doing “webperformance things” but that the company , the design department, all need to get into the same boat to reach the goal. She basically says: When your designers design a website that has 5 big picture sliders, 4 different webfonts and some other shiny things, you’re done with fast loading speed on mobile devices because the design already set the hurdle too high. Really great book. Free on the net http://designingforperformance.com/ Print version: http://shop.oreilly.com/product/0636920033578.do or amazon I guess.
The book of speed: Provides also good insights but is incomplete. But the first few chapters are quite well done and worth a read: http://www.bookofspeed.com/
Tim Kadlec goes more into design aspects but also does speaking and workshops about web performance. https://timkadlec.com/me/#books
If you are in sales and ecommerce (or science ^^) people like numbers. Here are papers and resarch about what page load times do to the users and how they affect them.
http://www.perf-tooling.today/ the most complete collection of everything related to web performance. Articles, videos, slidedecks, tools, books etc.
The best tool for performance measuring out there is: https://www.webpagetest.org/ because it uses real devices on different locations around the globe. Also the network conditions are real 3g’s or LTE and not just simulated. There are also services and tools that use webpagetest for performance monitoring e.g. https://speedcurve.com/.
https://whatdoesmysitecost.com/ Find out how much it costs for someone to use your site on mobile networks around the world.
https://www.sitespeed.io/ is an npm package for web performance testing. It uses webpagetest internally but does output really pretty stats and metrics. Can also be used for continous performance monitoring.
People to follow:
@igrigorik @HTTP_2 @paul_irish @patmeenan @perfplanet
Hashtags: #perfmatters#webperf on twitter provide also some constant stream of resources to keep you up to date.
And because it is christmas time:
http://calendar.perfplanet.com/2016/ describes itself as “The speed geek’s favorite time of the year”. It is basically a christmas calender where every day from 1st to 24th of december there will be 1 article about web performance related topics. You can also checkout the ones from the year before. Some really great resources in there.
I hope that does not just help you but anyone here who wan’ts some deeper knowledge about web performance. There is also a lot more stuff and tools out there but those are the things that I found useful and got used to.
“How can I get more consistent results on a changing site?”
I’ve been getting inconsistent test results because the site changes quite a bit, usually I get something similar to the results included in the screen shot below. However lately I’ve been getting different results. I think this is because some drastic changes have gone through in the content on the home page, the other pages as shown below are fairly large.
I am not exactly sure what you mean by “get more consistent results” maybe you could post the results of a bad test case as well? If you would narrow your question scope it would be easier to answer
But there are several problems that you can already see in the waterfall picture:
First of all there is no combining of assets. For the HTTP 1.1 protocol (that is still the current standard) you want to combine your css and javascript files into as less files as possible. Currently there are 15 css and 70 javascript files (this is quite a damn lot )
Every file needs to be requested, downloaded and then get parsed and executed by your browser. That delays the rendering of your content. You can also imagine that the more requests your website needs to function, that there can be some hick ups on some of the files. Those hick ups can have several reasons: For example a bad network condition or the server responded slowly on some of the requests because it was busy. If that happens on an important javascript file that could delay or block the whole rendering process of your website and leads to unexpected behavior like a delay of loading times (time to first byte) here and there.
I think combining (and minifying) your js and css files would be the first big step into the right direction and then you could fix other issues like prevent content redirection, progressive images, better image compression, cache static files by using max-age or expire headers.
and follow the very detailed instructions of their analytics results for your website. That would be a good way to start i guess. Webpagetest is really good for testing and detailed reports but googles pagespeedinsight really helps you by providing information for each problem.
)