Optimizing Web Page Elements

Let’s dive into the elements on a web page that impact page size. Page size, also known as page weight, is the overall size of the blocked of stored memory that makes up a page. If you reduce the overall size of a page, you will increase the load speed. Minification and compression reduce the overall size of your HTML, CSS and JavaScript files, but what about the elements that these files actually include? Here are a few best practices for optimizing the elements of your web page to use existing video hosting solutions, compress your images, and make your images responsive. Let’s dive into each of these best practices.
Fonts add a weight to your web page, and custom fonts add even more. If your website uses custom fonts and the person who is visiting your website doesn’t have that font installed on their operating system, then their browser will need to download the web font files along with the rest of the website.
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. Are you self-hosting your videos? If you are, you might be adding unnecessary weight to your website. Self-hosting a video essentially means that the video is stored on your own web server. This means that you’re using your own server’s bandwidth to display the video and increasing the overall page size of your page by doing so. This problem is an easy fix. Use an existing hosting solution like YouTube, Vimeo. or Amazon. All of these solutions can significantly reduce the weight of your page. Instead of storing your video content on your own server, you use their servers instead. To display the video on your web page, you can embed the video using the code provided by each platform. Plus video hosting solutions do a lot of work on their end to ensure a smooth user experience and optimal viewing quality.
web elements
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. 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. Who knew that seemingly simple things like text, videos, and images could have such a big impact on your page speed? By using Google Fonts, a video hosting solution, and responsive images, your on-page elements will be optimized to load their fastest.

Leave a Comment

Your email address will not be published. Required fields are marked *