Optimizing your page size is essential if you want to make your website faster, the ideal total page size for any website would be anywhere from 150k to 200k, with especially few “design objects/additions” or otherwise known as http-requests. In this context, “page size” refers to all the collective elements it takes to load your webpage fully. Elements include the HTML file, the CSS files, the images, the scripts, other design pieces, and so on. If you’re wondering how to figure out your page size, you can simply look up all the file sizes of all the elements on your page and add them up or easily search for a service to do that automatically for you instead. It all depends on file sizes, the bigger the file sizes on your page, the slower your site will run as a whole. That does not necessarily mean you have to limit the amount of elements/designs that you choose to put on your page, you can have a perfectly full and busy page that is at an average of 141k, you just must make sure each individual element is at its smallest file size possible (without losing its content quality of course). 

Moreover, you will greatly benefit from optimizing the CSS and JS by removing unwanted or thereby unnecessary pieces such as lines and extra characters (that serve no noticeable purpose). By also turning on Gzip compression, which cuts down file size by almost a whopping 90%, you will be capable of significantly reducing your page size, allowing your site to run much smoother. And finally, another big help in reducing page size is ensuring that you are optimizing the images on your website and saving said images in the best file format, which is either a JPG, GIF, or PNG (choice wholly depends on the content and image).

WHEN TO USE EACH FILE ON YOUR WEBSITE DESIGN

JPG: is typically used for photography pieces or designs that don’t require to show fine or intricate details. This is a file that most people utilize on their sites as it does not add much to the page size, since a JPG is “lossy” or in other words – a compressed file that deletes its unnecessary data. It’s an ideal file format for displaying photographs, designs, and additional decorative pieces to a website since it supports plenty of colors.

PNG: is utilized when you need an image to have a transparent background. Much like the JPG, it is commonly used on most sites and does not heavily affect page size since it is “lossless” which essentially means it compresses the file’s data but without throwing away any data (even if seemingly unnecessary). Usually used for a website’s logo design, icons, buttons, etc. that need to blend into the site’s background; having the logo or other design stand alone without a typical white square background.

GIF: is commonly used for short animated pieces, it is also “lossless” as described above in PNG, which makes it a much smaller file than a JPG, since it also only accommodates 256 indexed colors (much limited compared to a JPG file). It’s a great way to bring motion and attention to your website without slowing it down or causing low bandwidth.

The links to where I found my information can be located here, here, and here.