How to have a fast, responsive website.

bySergioATP

99 followers

Updated 8 years ago

Although we have access to great hosting provided by wealthy affiliate, we should always optimize our files to have a fast response of the websites.
How to have a fast, responsive website
Besides creating content, we need to include lots of images to add visual stimuli for a call to action(CDA).

Also, images facilitate the connection the writer seeks to establish with the reader. There's an old saying one picture is worth 1000 words for good reason.
But there's a small problem an image can take up to 65% of the bandwhich used by our websites, so it's crucial that they are properly optimized for maximum speed.

A one-second delay in page load times could reduce conversion rates by 8%.

Also, people in our days have a very short attention span. Even if you have the perfect image, if it takes too much time to load, you lost the user.

Fundamentals of image optimization
You will find lots of sites that have big issues; they use excellent pictures, but the way the image is presented to the visitor's lacking optimization. For example sizes too big, poor optimization, wrong format, a lack of proper Seo and other metadata examples are some of the most common issues that you can find on many sites.

Dimensions
Let's say you need 150 x 150-pixel photo on your site and let's say that your camera took that picture with 8 megapixels now that's a huge image and in essence, you are asking the browser to shrink it to the required dimensions of 150 x 150 pixels.
So basically the browser is displaying only 0.0025 percent of the original image.
The conclusion you are wasting both yours and your visitor bandwidth, increasing the loading time. So that's a situation you don't want on your site. So always resize and by resizing I mean downsize the image to the required dimensions and then upload.
You can use open source software like Krita or Gimp, but the one I use is Photoshop from Adobe, and now if I were affiliate from Adobe I would put my link right here and probably make a sale LOL. But seriously you can grab a free trial from Adobe and use it fully functional for 30 days.
You can also use a few freeware programs if you just want to batch resize your images like infanview or tiny PNG.

Next is incorrect image format
Now the formats you use for the image place a vital role so has a general rule use PNG for vector graphics and computer-generated images like clip art and use JPEG for photography is all image with a variety of colors.

Progressive JPEG's
There are two types of JPEG's, baseline and progressives. Visually both are very similar the main difference lies in the way they are loaded.
Baseline JPEG has only one layer, that layer contains the whole image so requested the entire image is loaded at one go.
The progressive JPEG compose the image with multiple layers so the image is being loaded layer by layer which gradually increases in quality giving you lossless view.

Lazy loading
Lazy loading is an excellent resource saving technique where image is loaded only when the the visitors scroll down the view frame of the image. For example let's say that you have a food blog and you have 10 images of different food. And in any monitory tablets or smart phone you cannot fit all of those 10 images in the view frame you must scroll down to view all the images.
With lazy loading enable the images will be loaded only when a visitor is in the vicinity of the image by other words the image start to load just when you scroll down to view it also the first few images are loaded instantly since you're ready in the view frame.
This way lazy loading saves you bandwidth and to your user improving your site loading time, there is a WordPress plug-in that does this BJ lazy load plug-in.

Image filename
Image filename will help the search engine optimization tried to use the same text as you would in the title tag of the image also try to include some keywords that are relevant to your site.
Text SEO is important to rank, but image SEO is essential to any site by implementing some of these tactics you will gain a significant amount of organic traffic in the long run.
If you have more tips to add to this one's I would love to hear them, Thank you.