reply
|

đź’¬ Replied to: a post

“Which leads me to the question: Is there an easy way to determine the total load size of a webpage (including dependencies / includes like stylesheet images and such)?”

an author ( )

I use the browser developer tools’ network tab to help determine the size of a page (usually accessed through the F12 key). Disable the cache before reloading, and most will tell you the combined size of every request which makes up the page, and the amount of data sent over the network. You can also (imperfectly) test the page under different network speed conditions if you want.

For example, Firefox says the post I’m replying to comes in at ~796KB, including all resources (uncached). 299KB of that is your header image, and 38KB is the HTML itself. My entire home page was 1.5MB, until I turned off embedding Tweets and Instagram widgets a moment ago. Now it’s around 492KB (but only text). It just goes to show you how much those external resources can pump the size up!

Page weight and excessive resources is something I’ve tried to stay conscious of when developing my site. Previous iterations have been better at this than what it is now – which is pretty far from “heavy” – but I’m still hoping to trim things back further.

bookmark

|

đź”– Bookmarked: Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

“In this article, we’ll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It’s easier than what you may think, and since CSS Grid was built with responsiveness in mind, it’ll take less code than writing media queries all over the place. Let’s do this!”

I might switch my current gallery code to use CSS Grid instead of Bootstrap’s “Card” system (built on Flexbox).

CSS has come such a long way since I started using it earnestly, circa 2001.