Three Simple Tricks I Use To Make My Sites Load Faster

I love optimizing my page’s load time.

Here are some tricks I use.

1. Compress Images

I usually compress my images. Especially images that are used as thumbnails.

I use tinypng, but other websites exist.

I have seen portfolio websites …


This content originally appeared on DEV Community and was authored by DEV Community

I love optimizing my page's load time.

Here are some tricks I use.

1. Compress Images

I usually compress my images. Especially images that are used as thumbnails.

I use tinypng, but other websites exist.

I have seen portfolio websites where the only reason it takes 5-10 seconds to load is that many high-quality images are used as thumbnails!!

Not good.

2. Watch the Network Activity.

Recently I ran my portfolio website on Chrome, checking the network activity tab.

404 missing image

Uh oh!!! That 404 (bad request) is costing me 40ms on every load!

I updated the image url and saved 40ms!

3. Use Lazy Loading

My blog posts on my portfolio are displayed as gifs.... gifs can be costly to load!

Here is what the page loads like with the gifs rendered with your regular img tag

google chrome network tab

The load time is

page load time

Those gifs are blocking the site's initial load. All for images that the user will not see until much farther down in the page.

Let's add lazy loading.

// react component
   <CardMedia
          // ... react stuff 
          loading="lazy"
        />

Watch as the images load once the user reaches them.

But what about the load time?

chrome dev tools

load time

What do you think?

Did you enjoy this post?

Or did I get something wrong?

Feel free to contact me using my website or in the comments section below.

Have a fantastic day!


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-02-22T21:26:52+00:00) Three Simple Tricks I Use To Make My Sites Load Faster. Retrieved from https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/

MLA
" » Three Simple Tricks I Use To Make My Sites Load Faster." DEV Community | Sciencx - Tuesday February 22, 2022, https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/
HARVARD
DEV Community | Sciencx Tuesday February 22, 2022 » Three Simple Tricks I Use To Make My Sites Load Faster., viewed ,<https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/>
VANCOUVER
DEV Community | Sciencx - » Three Simple Tricks I Use To Make My Sites Load Faster. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/
CHICAGO
" » Three Simple Tricks I Use To Make My Sites Load Faster." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/
IEEE
" » Three Simple Tricks I Use To Make My Sites Load Faster." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/. [Accessed: ]
rf:citation
» Three Simple Tricks I Use To Make My Sites Load Faster | DEV Community | Sciencx | https://www.scien.cx/2022/02/22/three-simple-tricks-i-use-to-make-my-sites-load-faster/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts