For people who can't code good and want to learn to do other stuff good too.
You can use your browser's built-in Developer Tools (DevTools) to see how well your webpage performs.
In Chrome or Edge:
- Open a Private or Incognito browser window.
Regular browser windows cache (download and reuse) most of the pages, images, etc. that you see, whereas Private and Incognito windows do not. This makes them better for testing your webpage's performance. Keyboard shortcut:- Windows: Ctrl + Shift + N
- Mac: Command + Shift + N
- Open the DevTools with this keyboard shortcut:
- Windows: Ctrl + Shift + J
- Mac: Command + shift + J
You cannot hurt anything on the webpage or on your computer with DevTools. Please click around and explore. If you seem to have messed something up, just refreshing the page should fix it.
If you click the kebab menu in the top right, you can pop out the DevTools into a new window:
Use the 'Network' tab to see everything that gets loaded on your page:
- Click the 'Network' tab in DevTools
- Make sure 'Disable cache' is checked, which will force your browser to reload everything on each page load
- Reload the page, or go to a new address
The tab will show all the requests made on this webpage -- every image, font, script, and pixel that was loaded.
At the bottom is a summary of the total number of requests and their combined size.
You can filter the results to show only requests of a certain kind or from a certain address:
Within DevTools, click the 'Lighthouse' tab. It might be hidden under the little double-arrow icon.
You can use this to run a report that scores various aspects of your site.
Most webpages have one big "hero" image, and then a bunch of smaller images. As a quick-and-dirty rule, shoot for keeping the hero image size at 1 megabyte or less, and the smaller images at 300 kilobytes or less.
Most images are JPGs or PNGs. Any JPG can be converted to a PNG and vice-versa without changing how it looks. However, it can make a big difference in how "heavy" it is -- how much memory, storage, or bandwidth it requires.
- Use JPGs for images that have color gradients, like photos.
- Use PNGs for images that are mostly solid blocks of color, like logos and graphics, or if the image has to have transparency (which JPGs don't support).
For example, this photo when saved as a PNG is a very large 3 megabytes:
You can use Windows Paint (or Mac Preview) to easily convert it to JPG. The resulting JPG is 1/6th of the size of the original PNG, without a noticeable change in quality.
(If you want to be really efficient, you should use SVGs for most logos and graphics. However, it's not easy to convert JPG/PNGs to SVGs, so we won't cover that here.)
Photo editing programs tend to add a lot of unnecessary bloat to images in the form of metadata and other cruft. This can account for more than 50% of the image's weight.
Before I upload any image to a website, I run it through a program that removes all of the bloat. I recommend ImageOptim for Mac, or one of its free alternatives for Windows: