Web Page Elements
Fonts
Using Google Fonts decreases your page size. Google fonts is a collection of fonts that are hosted by Google and accessible to all web browsers Google has optimized these fonts to be delivered to web browsers in the most optimal way. So if someone using the latest version of a web browser, they receive the latest version of that font is optimized for their specific browser. This makes downloading Google fonts fast plus they’re free to use and people might already have these fonts cached in their browser, meaning that it’s ready to use.
Videos
Let’s compare YouTube, Vimeo, and Amazon. YouTube is by far the most popular solution for many people getting started with video, plus it’s free. But the videos do include ads and provide additional recommendations at the end of the video. Vimeo is ad-free solution that’ll cost you the price of about two coffees every month. Vimeo optimizes videos hosted with them to serve smaller fie size to your website visitors. This means faster load speeds. Amazon offers more customization but is also more technical. Depending on the size of your business and your level of technical competency, Amazon can be a good option.
Images
The problem with unoptimized images is that too many or too large of images can also bog down your page weight. To optimize the size of your images, these are few solutions, some are complex than others. But at the very minimum, you should be compressing the images. Image compression groups parts of an image together to reduce its size without visibly decreasing quality. But be sure to save original copies of your images too. The compression will permanently alter the image. A great tool to compress your images is TinyPNG.com It’s free, easy to use and effective. I recommend compressing every image you use on your blog posts, landing pages, and everywhere else on your site.
But what about illustrations? If you have illustrations on your web page, like a logo for example, save them as an SVG file. An SVG file or scalable vector graphic, is a graphic file that uses a two-dimensional vector graphic format designed specifically for the internet. These files contain an infinite amount of code behind them which means that they can be sized to fit any screen automatically. For any image, not just SVGs, the size of your images matter because they determine how much space on the screen the image will take up. So we know that for illustrations, save them as an SVG, they can be resized automatically.
But what about the rest of your images? Well responsive images are a must. Take out your phone and view your website from a mobile browser. How do the images look? Are they sized correctly to the screen? Ideally, your page should never serve images in dimensions that are larger than somebody’s screen. You might need some help from your developer for this one, but all it takes to make your images responsive is to add a few lines of code to your HTML or CSS. To make your images responsive, add a CSS rule that sets all images to fill the width of the container that the image is in.
You can also set certain elements of the image to be fixed like a max width. This means that your images will scale down but never scale up. Depending on the type of images you’re using, this might be helpful. think about your web page elements.