I’m not really sorry. You need to know, and I’m not too shy to tell you.
Your images are fat.
They need to go on a big-time diet. Run on a treadmill or something. Stop eating barbeque potato chips drizzled in melted cheddar. Optimize man. Optimize!
Seriously, in today’s day and age! You still aren’t compressing your images? You’re still putting in 12 megapixel images in for thumbnails!?! I sure hope not. You’re not alone, but that’s no excuse. There are TONS of resources out there to help.
Yes yes… you use Photoshop’s save for web and know when to use a GIF vs PNG vs JPG. And you’ve even tried SVG. But wait? You can do more?
YES! There are LOSS-LESS compressions that you can run on top! And you can run them in gulp or just point them at a folder.
There’s a huge gap in a lot of web development projects: testing on slow connections! More often than not, the sites are tested on the same network as the web server or at least on some crazy business level broadband connection. No latency whatsoever. What you really need to see is how your site performs on 3G. Yes. 3G. A slow cell connection. Then you’ll start to realize what your time-to-first-load is and where the real pain points for your users lay.
This type of throttled-connection testing is also super easy. So you really don’t have any excuse not to test, do you?
Here’s a very simple way to throttle your connection down to 3G. It’s not a full-out real-world test, but it’s close enough for 99% of you.
Open Chrome Dev Tools. Open the network tab, and check out the throttle:
There’s some very cool stuff in this network tab, eh? You can change your connection throttle and limit how fast your site “downloads.” You can even take yourself offline to work out any application-cache / local storage issues.
Also, a HUGE feature for devs is the disable cache toggle. As long as you have the dev tools open and this checked, it won’t cache anything from the server. Great for testing! Tell your testers/PMs/etc about this so you don’t have to constantly tell them to clear their cache when they don’t see your bug fixes.
Preserve log will help you watch traffic between pages. With the disable-cache toggle UNchecked, this will show how your site behaves with http-caching on.
Explore the network tab. It’s amaze-balls. So much good stuff in a browser. And Chrome’s not even an IDE! THANK GOODNESS FOR THE CHROME DEV TEAM!