Now that we have images that are the correct size, or at least closer to the target display size, we can address the type of image we're using. Except for animated images, we use webp (`cwebp`) to accomplish a reduction in the size of our images.

                    
sudo apt-get install webp
cd /mywebapp/static/img/
mkdir webp        
for file in *.{jpg,png,jpeg}; do cwebp -q 60 ${file} -o webp/${file}.webp; done;
                    
                    

We'll need to make sure our img tags are updated to point to /webp/filename.jpg.webp now, but depending on how aggregious our file type was we have saved ourselves a ton of bandwidth. A local dentist office near me renders a 900x1000 PNG file that is originally 1500x1750 and weighing in at 3MB! The webp version of the same size is ~79KB. Resizing our image to 1000x1152 shrinks our PNG down to 1.5MB, and finally running cwebp to convert it to a webp we're down to 49KB.

The last bit in your control is to ask yourself if your design needs a 1000px image or an image at all. The answer to the latter part is often yes, but the size has an impact on the weight of your website and is often no. You don't need to see a 3MB->50KB reduction for this to make a difference, shaving off a few hundred KB per image when you have a handful of them to load can amount to a meaningful impact to your users in aggregate.

CSS, Fonts and Javascript Imports

There are a lot of hard realities of customer requirements that may get in the way of knocking down the number of dependencies and resources you find yourself loading, but there are a few opportunities to reduce the bandwidth it brings. The examples below are commonly found issues, but some may apply to your use cases more than others.

• Do you really need 150KB of Font resources to display two 16x16 icons?
• Do we need 500KB of javascript to display a static view of our business on google maps?
• Is everything minified?
• Do you like a metric or do you need a metric?
• Are we using gzip?
• Do we really need more than a MB of CSS to render a web site (Looking at you wordpress)?

There are a lot of times when using things like `material icons extended` is used by habit when an application requires one or two icons, loading a 150KB font file to display 1KB of images can be avoided with simply supplying the icon as a static image.

If you have your company located on a static google map frame, you're loading a javascript file that is probably a few times larger than all of your sites pertinent content and information in order to avoid creating an image of this with a clickable link to jump your user out to google maps or Open Street Map. So create a small (webp) of your desired map and shave off a few hundred KB and some processing power that can be better spent elsewhere.

Minify your files! Use Minified files! Gzip your bits over the wire! All of these things should be able to be done quickly and if you find yourself relying on large 3rd party files that aren't minified, consider retrieving them to be minified and served from your server.

If you are using gtag for google analytics, facebook signal, or whatever else front end tracking mechanism you're using you are making me download hundreds of KB of javascript for something that I don't want and quite possibly you actually don't either. What are you tracking? Do you want to see page views? Do you care how many times you showed up in google or bing search results this week? Are you tracking how long a user is on your page before going to the shopping cart? What facebook demographic is the person visiting my local dentist's office? Which pages are users leaving our site without a completed transaction? According to facebook, what is my target audience for a local pizza place? There are probably a million more metrics that we can ask about, but for the most common that small businesses and local services want to know, how many times am I coming up on search results, how many people are visiting the page, and which promotions are directing traffic to their site.

Google Search Console will provide insights into performance on google search without any front end dependencies. Bing web master Provides similar functionality and pretty performance charts. Both of their UIs are intuitive enough for non technical users to access and make sense of.

Server side analytics are usually more than enough to get a fairly accurate look into URLs visited to find out overall page views and which atrocious utm_* codes were visited the most. The technology stack you have is going to greatly impact the implementation details for server side analytics, Go Access provides a rich dashboard for server side analytics, page views and query values or look into Prometheus and Grafana.

There are also bad habits out there of including all of jquery in place of using a few document.getElementById or document.querySelector calls, grabbing all of bootstrap in order to get row and col-sm-12 col-md-6 col-lg-4umn css classes instead of just grabbing bootstrap-grid.min.css or just what they actually need or using wordpress. Use the Coverage Tool to find javascript we're making clients download that we aren't actually utilizing.

Chrome dev-tools now have a CSS Overview which you can use to find unused declarations that you can simply remove from your page.

Less IS More

For lots of people, we learned this from navigating to a myspace page with an mp3, two videos, and a dozen flashing gifs that took as long to load as it did for it to become responsive enough to figure out how the hell to turn them off. This phenomenon still applies today when you navigate to a business page and find yourself greeted with a 75vh image carousel, social media links and banners, a subscribe card, a "Chat Now!" banner with a GPT bot typing, xyz.com wants to know you location, or a prompt for cookies just to scroll, click and grumble through to read the services, hours, contact information, pricing and location.

Having a site that conveys the services and information instantly on any device under poor network conditions allows more of your message to be seen by users and potential customers quicker. There is an endless number of clever things you can do to decrease the size of your page loads, but making a direct and lightweight initial design will always yield the best results.

Uncluttering your resources and your design also has a noticeable effect on accessibility. When pertinent information on the site is more distilled it becomes much easier to lay out the idea and information using properly formed and organized html tags to attain a perfect accessibility score using devtools Light house and folks with disabilities that benefit from this use and need local service and businesses like anyone else.

Hopefully your next project shows up on The 1MB Club

Happy Hacking!