Keep your content on a leash
As a site owner, the biggest thing you have control over is content, so generally keeping content to a minimum is the goal. Content in this case mostly refers to images, videos, audio files, and can also refer to text in relation to page design.
Each piece of content on your website is connected to code on the back end of your website. When you have too many content elements on a page, the html, css and javascript that needs to be loaded each time that page is displayed will affect the score of that page. Pages with more minimalistic or simple design can get by with adding text a little more freely since the text won’t translate to more complex html code. This is why it is very important that the content that is going into a page is meaningful and not just there to take up space.
A good thing to keep in mind for a homepage, for instance, is to arrange content into quick and short bites of information. Each of these sections can then point the user to another page where you have expanded on the information provided.
Also, the home page does not need to have bites of information for every single piece of content on the rest of the site. The homepage should be a hub of information that directs the user to the most important locations on the rest of the site. For example, it is fine to highlight a current campaign or product on the homepage, but don’t try to include every campaign or product (or even a few). Instead, choose the most relevant one that you want to get attention for and put it on the homepage. Then you can easily provide a link to the page where the rest of the information can be found.
Keep images in check
Images are great content to have on your site since they engage your audience and make your website more interesting. Unfortunately, images are also one of the biggest hits in performance we see on websites time and time again. Here are a few key points to always keep in mind:
If the image does not need transparency make it a JPG not a PNG. This also applies to images that go above a colored background with no patterns. It is better to include the colored background as part of the image instead of using a transparent background. This is even more true if the colored background isn't going to change regularly. Even in cases where the color will need to change, you should think about just modifying the image to be updated with the background.
When possible, export the image at a desired quality. We use imagify to programmatically optimize images but in many cases you can optimize it further by doing it manually. If you have an in-house designer they should be able to provide optimized images. Never export images at 300dpi resolution.
Use an SVG image for the logo.
Avoid making images larger than they need to be. Most images that go on sliders or hero or header sections don't need to be larger than 2000 pixels wide. Images used within the body of the page can be even smaller. Most inline images don't need to be larger than 300-400 pixels wide.
What about videos and audio files?
Very good question. As a general rule it is best not to load videos or audio files directly from the website server, instead think about using a third party video host. YouTube and Vimeo are great solutions to host videos. Hosting and distributing videos is what they do and they know how to do it best! Not to mention the extra discoverability of your video if you choose to make it public. If you prefer to only allow users to see your videos on your website, these services allow you to make your videos private instead. There are similar solutions for audio files. There are even specific solutions for podcast style audio and video files.
That being said, since these audio files and videos are still going to be embedded on the site, it is important to keep them to a minimum. A few videos on a homepage is fine, even in a carousel. If you need to display more, think about having a separate section on the website where the videos can live together. The video page you create should be paginated so that content files can load in manageable chunks instead of slowing down the page by loading all at once.
Finally avoid using multiple third party services for similar purposes unless absolutely necessary. For instance, YouTube and Vimeo both do the same thing, and each uses their own code to do it. Using both is going to load extra assets css and javascript on the site, which will negatively affect performance.
Beware of Plugins
Plugins can be great tools to perform cool stuff on our websites. They can also add a lot of bloat to a website. It's important to use plugins only where it matters. You should also avoid plugins that offer a lot of extra features you aren’t planning to use since the code for those features will load with the page even if you aren’t using them. Plugins can also be a bit of a risk if they are poorly written or maintained. Always feel free to consult an expert before installing a plugin. ( Hi! We are Cornershop and we are always glad to help!)