Page Speed in Web Design2020-01-24 |
A users web experience can be massively effected to the speed at which a web page loads
Why Page Speed Matters
Just like the aesthetic design, a good or poor page speed can meddle with a users emotions, leaving them satisfied or extremely unhappy with the experience.
The aesthetics of a web page are critical to its success but with coding standards and UX design becoming more and more complex in recent years, this means browsers suffer heavy loads and large files to cope with the increasing demand, for this reason optimising your page speed is now absolutely integral to a company achieving its online goals.
Some very techie people may have the opinion that as important as design may seem, it simply is non essential and over engineered in the modern world, making the web slower and more difficult to navigate. This is true in the fact that a website can still be fully functional and usable with little or not design but that's really missing the point isnt it? Design and development must work together like ying and yang to create a truly awesome experience, without a strong foundation the walls of a website will simply crumble, but without the window gazing out on the hill, the wall would go un noticed and decay over time.
Working Together for Better Page Speed
When considering page speed it is often the job of a developer to handle the situation in the post design phase, this is not the ideal solution or a collaborative workflow between designers and developers. Designers should also be highly aware of what they are trying to achieve when designing for page speed. Designers should consider things like how many fonts will be imported on a page? Are they using large detailed images that may not be optimal for page speed and how are images going to be exported? Will they be PNG, JPEG or SVG?
Too Many Requests
The number of requests a page makes to the server to retrieve and decode files is one of the most important aspects of page speed. This process is quite simple
When a web page loads, it talks to a server regarding the files necessary to load the assets on the page, it sends all of the information it needs and retrieves it in a stream of data. The more requests a web page makes to the server, the longer is takes to load all of the assets.
Its All About The Images
When optimizing your images, its not all about size, you must get a good balance between quality and page speed. Keep the images at as high a resolution as possible but keep the file size to a minimum to ensure a faster page speed. Not only are image sizes important but also the amount of images per page, try to keep the number of images request to a minimal. This combined with optimized image sizes will greatly decrease your websites page speed loading time.
Here are some examples of Image optimization software that may be useful:
File extensions are another valuable factor in page speed.
When exporting your files, be sure you are using the correct file type for total optimization, here are some examples of which file type can be used in different way.
- JPG - High resolution photographs
- GIF - Image animations
- PNG 8 - Images with few colors
- PNG 24 - Images that feature transparency
- SVG - Reusable icons and logos
Another useful technique when dealing with images are the use of sprites. Sprites are images that are made up many smaller images inside. These can be used for reusable small images across you site, this will reduce the number of image request which in tern will improve page speed. The sprite creation process can be quite tedious so here is a handy tool to help you along
Often a website will use gradients in their images as header or button backgrounds, more often than not these images can render poorly and be large in file size. These gradient effects can easily be achieved with css, a useful tool for achieving this can be found here
Page Speed Check List
To finish up here is a quick beginner checklist that should help with your overall page speed optimization.
Final check list:
- Number of requests made to the server
- Number and optimization of web fonts
- Load the CSS from the header
- Optimize all images as much as possible
- Correct and optimal file type for images
- Minify HTML
- Minify CSS
- Replace gradient images with code
- Are images being cached for returning visitors
Page Speed Testing
When optimizing it is often a good idea to test as you build, here are a couple of good tools to help you with that process.