Compression Pattern Generator | by hellocatfood
Every Second Counts
We are going to run through some top tips to make your website load faster. A fast site is a good user experience, and a satisfying user experience leads to higher conversions. Search engines typically include the page load speed to determine its visibility in search results. There are no down sides to improving your website load time.
Compress to Optomise
A simple and very effective way to reduce the demand on your website’s server and keep those important pages loading fast, is to compress your images. Reducing an image file’s size will reduce the amount of data that has to be passed between the user and the computer serving up the pages. An image can be compressed at varying levels and the user will see no difference in quality.
Display all assets loading on your webpage
Your images may require some tweaking but how long does your site take to load? And what is the total memory size of the page? A good starting point, and benchmark, is to measure your success against is to use a tool supplied with Google Chrome, the inspector.
- In Chrome, right click anywhere on your webpage and select “inspect” from the menu.
- In the inspector, click “network” from the top menu tab.
- With the network tab open, click on the refresh button on your webpage in Chrome.
Your webpage will reload and all the different items that the page loads will be listed in real time as they load. You can see the size memory being used for each asset and how long they took to load. Take a note of your load times and memory usage, you can then use this data to compare with your optimised results.
Reduce file size, save memory, load faster
There are several things you can implement to reduce the file size of your images. If you have access to an image editing tool like Photoshop or Gimp you can save the image as a different file type. Typically .jpeg or .jpg compression will save a lot of memory compared to .png. For example, two images of the same size in the two different formats, .png would be 402KB but .jpeg would be 35.7KB.
Portable Network Graphics (PNG) is a lossless file format used mainly for images with transparent backgrounds. PNG-8 is limited to 256 indexed colours and PNG-24 has millions. Joint Photographic Experts Group (JPEG) file format designed for photographic images. More compression will result in reduced quality and each time the image is compressed.
Use a tool
Keep it simple and run your larger images through an online image compression tool like Sqoosh. Have a fiddle with the options once you ave uploaded an image to compress, you will be amazed how much memory you can save with a slight adjustment of colour palette or different file format.
Find this article useful?
Get regular web design and development news updates, tips and resources delivered straight to your inbox
A critical aspect of optimising performance is the ability to store and reuse previously fetched resources. It can incur data cost for the visitor and slow the load considerably if large resources require many round trips between the client and the server.
Many WordPress plugins offer a caching service for free, with premium optional extras. I know we are always saying not to put too many plugins to your WordPress installation for the fear of slowing it down, but these types of plugins do the opposite. Even the most basic cache plugin will increase page load speeds. Choose one of the most popular and use only one.
Content Delivery Networks
A CDN is a system of distributed servers that deliver web pages based on the geographic locations of the users. The CDN will cache the websites pages and deliver them from the closest server from the user, improving the load times. The process of bouncing through content delivery networks is almost transparent to the user. They can reduce latency, reduce bandwidth consumption and secure a website from spam and data scrappers. Cloudflare is a good example of a content delivery network.
What should you do now?
Now you have peeked into the matrix and understood its nature, you can now implement your new knowledge. Pick one thing you can change easily, whether its compressing a few images or installing a caching plugin, you will see an immediate improvement in the load time of your site. This improvement will result in happier users, in fact addressing any of the above points will impact in a positive way on your visitors.
If you’d like to know more about how we work at Evolve please contact one of our team on 0333 5775253 or email firstname.lastname@example.org