How to increase website performance in 5 simple steps

๐Ÿ. ๐Œ๐ข๐ง๐ข๐ฆ๐ข๐ณ๐ž ๐‡๐“๐“๐ ๐‘๐ž๐ช๐ฎ๐ž๐ฌ๐ญ๐ฌ

Websites are mainly slow because of too many (or too large) HTTP requests. We can eliminate unnecessary request by :

(A) ๐—–๐—ผ๐—บ๐—ฏ๐—ถ๐—ป๐—ฒ๐—ฑ ๐—ณ๐—ถ๐—น๐—ฒ๐˜€ : js to a file, css to a file

(B) ๐—–๐—ฆ๐—ฆ ๐˜€๐—ฝ๐—ฟ๐—ถ๐˜๐—ฒ๐˜€ : CSS Sprites are the preferred method for reducing the number of image requests. 

(C) ๐—–๐—ผ๐—บ๐—ฏ๐—ถ๐—ป๐—ฒ ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ฏ๐—ฎ๐—ฐ๐—ธ๐—ด๐—ฟ๐—ผ๐˜‚๐—ป๐—ฑ ๐—ถ๐—บ๐—ฎ๐—ด๐—ฒ๐˜€ ๐—ถ๐—ป๐˜๐—ผ ๐—ฎ ๐˜€๐—ถ๐—ป๐—ด๐—น๐—ฒ ๐—ถ๐—บ๐—ฎ๐—ด๐—ฒ and use the CSS background-image  and background-position properties to display the desired image segment.

๐Ÿ. ๐”๐ฌ๐ž ๐š ๐‚๐จ๐ง๐ญ๐ž๐ง๐ญ ๐ƒ๐ž๐ฅ๐ข๐ฏ๐ž๐ซ๐ฒ ๐๐ž๐ญ๐ฐ๐จ๐ซ๐ค ๐‚๐ƒ๐

  • A CDN is essentially many optimized servers around the world that deliver web content to users 
    based on their geographic location. 
  • This means big performance improvements for site users.  Because, say, ๐—ถ๐—ณ ๐—ฎ ๐—ฝ๐—ฒ๐—ฟ๐˜€๐—ผ๐—ป ๐—ฎ๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€๐—ถ๐—ป๐—ด ๐˜†๐—ผ๐˜‚๐—ฟ ๐˜€๐—ถ๐˜๐—ฒ ๐—ถ๐—ป ๐—œ๐—ป๐—ฑ๐—ถ๐—ฎ, ๐˜๐—ต๐—ฒ๐˜† ๐˜„๐—ถ๐—น๐—น ๐—ฏ๐—ฒ ๐—ฟ๐—ฒ๐˜๐—ฟ๐—ถ๐—ฒ๐˜ƒ๐—ถ๐—ป๐—ด ๐˜„๐—ฒ๐—ฏ ๐—ฐ๐—ผ๐—ป๐˜๐—ฒ๐—ป๐˜ ๐—ณ๐—ฟ๐—ผ๐—บ ๐—ฎ ๐˜€๐—ฒ๐—ฟ๐˜ƒ๐—ฒ๐—ฟ ๐—ป๐—ฒ๐—ฎ๐—ฟ๐—ฏ๐˜†โ€ฆ Simple!

๐Ÿ‘. ๐”๐ฌ๐ž ๐Ž๐ฉ๐ญ๐ข๐ฆ๐ข๐ณ๐ž ๐ˆ๐ฆ๐š๐ ๐ž๐ฌ

  • Image sizes make a huge difference to site speed. – – The larger content/images, the slower the site.

we could achieve this by using –
(A) ๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฟ๐—ฒ๐˜€๐—ผ๐—น๐˜‚๐˜๐—ถ๐—ผ๐—ป : reducing the โ€œqualityโ€ of the image (and thereby the file size).

(B) ๐—–๐—ผ๐—บ๐—ฝ๐—ฟ๐—ฒ๐˜€๐˜€๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฝ๐—ถ๐—ฐ๐˜๐˜‚๐—ฟ๐—ฒ : increasing the efficiency of image data storage.

(C) ๐—–๐—ฟ๐—ผ๐—ฝ๐—ฝ๐—ถ๐—ป๐—ด ๐˜๐—ต๐—ฒ ๐—ฝ๐—ถ๐—ฐ๐˜๐˜‚๐—ฟ๐—ฒ: when cropping, you are cutting out unneeded areas and thus making the image smaller in size.

๐Ÿ’. ๐๐ฎ๐ญ ๐’๐œ๐ซ๐ข๐ฉ๐ญ๐ฌ ๐š๐ญ ๐ญ๐ก๐ž ๐๐จ๐ญ๐ญ๐จ๐ฆ

  • Javascript files can load after the rest of your page.
     
  • The simplest solution is to place your external Javascript files at the bottom of your page,  just before the close of your body tag. 
  • Now more of your site can load before your scripts. 

๐Ÿ“. ๐”๐ฌ๐ž ๐๐ž๐Ÿ๐ž๐ซ ๐จ๐ซ ๐š๐ฌ๐ฒ๐ง๐œ ๐š๐ญ๐ญ๐ซ๐ข๐›๐ฎ๐ญ๐ž๐ฌ

(when placing external .js files on your site)

(A) Async tags ๐—น๐—ผ๐—ฎ๐—ฑ ๐˜๐—ต๐—ฒ ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜๐˜€ ๐˜„๐—ต๐—ถ๐—น๐—ฒ ๐˜๐—ต๐—ฒ ๐—ฟ๐—ฒ๐˜€๐˜ ๐—ผ๐—ณ ๐˜๐—ต๐—ฒ ๐—ฝ๐—ฎ๐—ด๐—ฒ ๐—น๐—ผ๐—ฎ๐—ฑ๐˜€, but this means scripts can be loaded out of order. 

  • Basically, lighter files load first. 
    This might be fine for some scripts, but can be disastrous for others.

(B) The defer attribute ๐—น๐—ผ๐—ฎ๐—ฑ๐˜€ ๐˜†๐—ผ๐˜‚๐—ฟ ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜๐˜€ ๐—ฎ๐—ณ๐˜๐—ฒ๐—ฟ ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ฐ๐—ผ๐—ป๐˜๐—ฒ๐—ป๐˜ ๐—ต๐—ฎ๐˜€ ๐—ณ๐—ถ๐—ป๐—ถ๐˜€๐—ต๐—ฒ๐—ฑ ๐—น๐—ผ๐—ฎ๐—ฑ๐—ถ๐—ป๐—ด. It also runs the scripts in order.