Why Page Weight Matters: Aim For < 500kb

Why Page Weight Matters: Aim For < 500kb
Keeping page weight small is critical in making your application loading faster. Here are techniques used to keep page weight small:

Image Optimization
Images are generally the largest contributor to page bloat. There are a few things you should be doing to optimize your images.
Increasing compression levels, image file sizes can be dramatically reduced with little or no noticeable loss in visual quality. Background images are often the best candidates for optimization because they tend to be large and unnecessarily high quality.
Tools like  Guetzli that generates JPEG images with file sizes 35% smaller than current alternatives. 
Modern compression tools and formats continue to improve, allowing developers to achieve smaller file sizes, faster page loads, lower bandwidth usage, and a better user experience.
If using pallete or indexed color image, choosing the optimized pallette can also help reduce file size using image manipulation softwares.
 Depending on your image, a PNG8 will often be fine instead of a PNG24, and will result in a significantly smaller file.
A further optimisation that can be performed is to strip EXIF image metadata. EXIF (Exchangeable Image File Format) metadata contains information such as date and time of image capture, camera settings, copyright information, and even geolocation information (e.g. GPS coordinates).
You can use simple free tools such as ImageOptim, PNG Gauntlet, JPEG Optimizer, and TinyPNG to quickly compress and optimize your images, as well as more comprehensive programs such as GIMP and Photoshop.
Using the right format for your images in your application is also important. WebP and SVG are the most recommended.
Images should be resized to the size that they will be displayed at. If you want to display an image at 200x200 pixels then don’t send a 400x400 pixel image and let the browser resize; send a 200x200 pixel image and save bandwidth.

Lazy loading
It mean image is not laoded until is needed
If an image is not in the viewport, then it can’t be seen by a user, and if the user never scrolls down, then the image will never be displayed, so loading it is a waste of bandwidth.
Making a good optimization of it will help reduce size of byte downloaded when only a portion of a page is loaded
Lazy-loading also helps to improve the perceived performance by making the page feel snappier since the initial payload is not as large.
Consider whether you really need a background image! CSS can do a really good job if you just need a fade or simple repeating pattern. While this won't be the right thing to do in every case—for example a small image vs a complicated CSS effect - it will save you some bytes in some cases.

GZIP Server Compression
All modern web servers can compress the text files that make up your website, such as HTML, JavaScript, CSS, before they are sent to the browser. This reduces the amount of data that needs to be sent to the browser, resulting in really big performance gains with no downside.

Magnification
Minification (or minimization) is the process of reducing the size of text-based files by removing unnecessary characters such as whitespace, newline characters, and comments. File size can drop by over 30%. JavaScript, CSS, HTML and SVG can all be minimized.
Build tools such as Gulp and Grunt can also automate these tasks as part of your build process.

Caching
Caching reduces the number of requests made to a server. It works by downloading pages and resources only on the first request, and won’t download anything a second time unless it has changed, or until a certain amount of time has passed. By setting cache headers, you can specify how long a specific resource should remain cached. The next time the browser needs it, it can look in the cache to see if it has it already. Because the browser has less to download, pages load more quickly. 
HTML5 offers a number of APIs that give the developer far more control over cached resources. AppCache and Service Workers are two APIs that give enough control over cached resources and HTTP requests that reliable caching and offline experiences can be built.

Avoid unecessary embeds
Things like YouTube videos, embedded Twitter tweets, and social media icons can all harbour unexpected bloat. For example:
• YouTube video embed: adds an extra 574KB. You might think that some of this is the placeholder image it shows before you play the video but no, that image is generally only a fraction of the embed itself. Unfortunately this cost is incurred whether the user hits play or not.
• Twitter tweet embed: adds 74KB for a 140B tweet. That’s a pretty appalling ratio of content to packaging. 140bytes in a 75,766byte package, or 0.1% of transfer weight is the text payload.
• AddThis social media buttons: adds 248KB for simple social media sharing buttons. That's quite a payload for questionable value.