Click Here!

Page Speed in Web Design

Page Speed in Web Design

2020-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?

Once design assets have been thoroughly thought through a developer must be just as meticulous. Developers have lots to think about in terms of page speed, but some major consideration include the HTML and CSS markup, is it clean and or minified? How many Javascript libraries are being loaded? Could the JavaScript be optimized? How many requests are being made to the server? These are just a few things to consider when thinking about your website page speed and how you can optimize them for the best and most optimized website.

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.

page speed browser requesting data from server

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:

 image optimizer

png mini

image optim page speed opsimize

jpeg mini image size page speed

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

css sprites image optimisation page speed

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

css gradient generator

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
  • Load the Javascript in near the footer
  • Optimize all images as much as possible
  • Correct and optimal file type for images
  • Minify HTML
  • Minify CSS
  • Minify JavaScript
  • 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.

google insights speed tester

pingdom page speed tester