𝟏. 𝐌𝐢𝐧𝐢𝐦𝐢𝐳𝐞 𝐇𝐓𝐓𝐏 𝐑𝐞𝐪𝐮𝐞𝐬𝐭𝐬
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.
𝟒. 𝐏𝐮𝐭 𝐒𝐜𝐫𝐢𝐩𝐭𝐬 𝐚𝐭 𝐭𝐡𝐞 𝐁𝐨𝐭𝐭𝐨𝐦
- 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.