My website now loads in less than 1 sec! Here&#39;s how I did it! ⚡

Yeah! I will work on that for sure!

Hemant Joshi • Jul 5 '20

How did you test your website speed?

And is your thumbnail relevent to your own website?

I tested it through Lighthouse in Chrom DevTools. And yeah! This thumbnail is from that report only. You can run this test yourself too! 😊

Bayu Angora • Jul 5 '20

Yes, don't use FontAwesome.

Mark Goho • Jul 9 '20

If you're going to use FontAwesome, the responsible way to do it is to use IcoMoon to create a font subset of just the icons you need, and then save that as a custom font and use that. It'll bring your gzip size from 70KB down to maybe 10KB (obvs depending on how many icons you use).

Bayu Angora • Jul 11 '20

IcoMoon is really good alternative.

lighthouse-dot-webdotdevsite.appsp...

Why not? Over 1000,000,000 websites use it. 🤔

Bayu Angora • Jul 5 '20 • Edited

I only need 3 social icons. So, I rather choose svg than bloated FontAwesome.

Your website is really cool! 🤘

Bayu Angora • Jul 13 '20

Thanks.

Gary Bell • Jul 5 '20

I'd probably add "use caching where possible" into the mix.

With the majority of sites using a CMS database of some kind, skipping that whole database read can save a lot of time (relatively) if the content won't change regularly

JoelBonetR 🥇 • Jul 8 '20

Pagespeed and lighthouse ignore cache so you will never get a better score adding cache. I've tried it many times using cloud flare and another services of that kind.
If you have static content there's no point on caching it out of your server, it will be slower than using server cache (no redirects, no third party implications), so you can simply use server cache module like memcached, opcache, pagecache or another, you'll need to check it depending on having apache or nginx.

Gary Bell • Jul 8 '20

That's what I was meaning by avoiding the database for CMS reads. I should have been clearer.

JoelBonetR 🥇 • Jul 8 '20

yes, you mean on a dynamic site (which sometimes a server language will need to read from a DB to process the output content), of course it's useful to cache this sites even on a third party cache-proxy :)

Mark Goho • Jul 9 '20

Lighthouse inspects cache-control headers, and if you don't have them set (or set properly) you will be penalized.

JoelBonetR 🥇 • Jul 9 '20

You will always have caching (servers usually perform cache automatically by default) but the error you get on pagespeed about "Serve static assets with an efficient cache policy" is about resource cache headers (images, scripts, style sheets...) that implies cache lifetime. This means adding Cache-Control: max-age=31536000 (which is a 1 year lifetime cache).

BTW cache must speed up the downloaded resources, so logically (and practically) you must get more pagespeed score using a cache of 1 day than not using cache for example, but pagespeed request uses no-cache server request and avoids user/local cache, so the score will be the same using cache or not, that's what I wanted to mean .

The difference on pagespeed score about using 1 year cache lifetime on all assets and not using cache will be only about the weight of the error mentioned above. You can try solving all errors and performing all recommendations except this one and check how much it weights.

Another point to keep in mind is that if you are managing a web app which is constantly evolving and you set a 1 year lifetime cache, you'll probably need to purge the cache every time you deploy a version into production (recommended custom purge only for the assets you updated).

Thanks for sharing this! 😊

Pacharapol Withayasakpunt • Jul 4 '20 • Edited

How do I convert GIF to webm?

Also, about webm and webp, I am worried about caniuse in Edge / IE...

Ran Rubinstein • Jul 8 '20

Edge supports webp, and the next version of Safari too. However you can use Cloudinary to do the format selection automatically - It's free forever up to 25GB of traffic/month.

See akshayranganath.github.io/How-to-m... for easy instructions.

Mark Goho • Jul 9 '20

You should use cloudinary to host your images and you can serve them in a format that's optimized by browser, e.g. in chrome you'll get a webp, in ie you'd get a jpg.

Edson Jr. • Jul 7 '20

You can make use of CSS @supports feature to check if the browser support WEBP images. If not than it'd load PNG, JPG instead.

There are many online converters like ezgif and convertio.

Jayant Lohani • Jul 5 '20

Great portfolio. Amazing design. Keep it up.
Looking forward to more projects and tips to learn and also so that I can clone them.😆

Thanks! 😊 And yeah sure! I will keep them coming for you! I got your back! 😄🤘

Ajay Gupta • Jul 5 '20

Nice article.

the thing you said it is related to client side only.

Thanks! 😊

Daniel Lintott • Jul 4 '20

Great work on the design and optimisation!

Really love the clean style, with just enough colour thrown in

Thanks! 😊

Madza • Jul 5 '20

Good looking portfolio :)

lighthouse-dot-webdotdevsite.appsp...

Thanks! 😊

Suraj Sharma • Jul 5 '20

You're using a previous version of lighthouse.. try the latest lighthouse web.dev/measure/

Garret • Jul 5 '20

I just ran one too out of curiosity. Definitely always a good tool to check for almost anything. Has always helped me get to about the 1s load time which is really nice. I also normally do SSR so it's just that much faster on initial load especially when accessing external data.

Suraj Sharma • Jul 5 '20 • Edited

Yes, I mostly work on performance part of the application. This tool has helped me with everything, even their documentation is great

Thanks for sharing this! 😊

Damien Cosset • Jul 4 '20

Not only does it load fast, it is also beautiful <3

Thanks! Damien 😊

Awdesh • Jul 4 '20

Good stuff and a nice portfolio. Keep it up. 👍

C M Pandey • Jul 4 '20

Thanks a lot! 😊

Devendra Meena • Jul 5 '20

Brother html site usually perform better. And hosted from github and netlify usually are faster.

Yeah! I know that! That's why I used them. 😄

Devendra Meena • Jul 5 '20

But html aren't adsense friendly.

Why would someone try to place ads on their portfolio? 🤔

Muhimen • Jul 6 '20

Perhaps someone who needs to buy a domain for his/her portfolio 😂

C M Pandey • Jul 6 '20

Damn! 😂😂😂

Ajeet Yadav • Jul 5 '20

Congrats, it is blazing fast ⚡⚡

Here is my blog, not fast as yours though 🙂

Thanks! 😊 Just checked out yours too! UI is amazing and so many articles!!!

James Sinclair • Jul 8 '20 • Edited

That's a fairly decent looking portfolio page -- except for the carousel in your Achievements section. Carousel's are user-hostile and frustrating to interact with. You're also using a library for it that the developer has abandoned and doesn't recommend anyone use.

Thanks for sharing this! 😊 Tiny Slider seems better. Will try that out in the future!

James Sinclair • Jul 12 '20

Tiny Slider may be better (it's maintained, at least) but carousels are horrible for people trying to look at your portfolio. Just don't use one at all.

Thanks for your insights!

zenull • Jul 6 '20 • Edited

I absolutely cannot agree with point 10.

Images with exact dimensions (as rendered) look ugly when it comes to laptops and many mobile devices. Even Windows by default make laptop screen 15.6 inches / 1920x1080 all higher and (Recommended by Microsoft Windows) to 125%. So all the images on the web will be 25% zoomed and if the size is exactly as in page then it loses in quality while displaying. So you get less size but loose on quality of how your content looks.

From my experience, the images should be at least +25% larger (with dimensions set in "img" tag) while better to +50% so it looks good on mobile zooming. Better to compress images to 60% instead so the image still looks great and your UI is good on laptops and small screens.

If you never heard about this just go to your Windows (if you use it :) Display settings -> Scale and layout and set it to 125% then look on your exact size images.

I was using small sized images so it didn't had much impact.

zenull • Jul 11 '20

Yes, while using a normal monitor or without zooming everything looks well.
Even Pingdom Speed Test recommends using scaled images but I won't do it.
I would rather loose some milliseconds of loading speed than see that image quality.
Now and in the near future the speeds will increase so serve that image a little bigger and laptop users with small screen sizes will be grateful to you. :)

graphql.org/learn/queries/#mutations

Thanks for sharing this! 😊

Ali Sherief • Jul 13 '20

I have another suggestion to add: Instead of making two REST requests with might have a race condition, like a POST followed by a GET, and avoiding it using setTimeout, you can use GraphQL mutations for atomic manipulation of server-side data.

TutorialsMate • Jul 5 '20

Can you please check us for a minute and list some points that I can work with to boost my score. Working hard on it. Score was quite good before I put adsence codes on the site.

Just give some of your valuable time and help me here. It would be really helpful.
Link to site: tutorialsmate.com

Thank you...

codeproject.com/Articles/133738/Qu...

Let's take this to DM. 😊

Kiquenet • Jul 8 '20

Backend performance ?

codeproject.com/Articles/23306/10-...

Omar Al Zabir hace unos años: es.slideshare.net/oazabir/scaling-...
De Encosia: encosia.com/a-harsh-reminder-about...

Deanohume:
deanhume.com/Home/BlogPost/faster-...
deanhume.com/Home/PageSpeed

O referencias más avanzadas
robbagby.com/rest/rest-in-wcf-part...

Thanks for sharing this! 😊

Drawcard • Jul 6 '20

What you host your site on matters incredibly - shared hosting will perform really poorly compared to dedicated hosting with hardware caching etc. We've helped clients go from sites that load 15+ sec to under 3 sec just by moving them to a better server and properly configuring LiteSpeed caching. WebP is also a good thing to implement, and it's now supported by Safari in their upcoming release. And reducing calls to 3rd party hosted libraries (ie Jquery) helps a lot.

Thanks for sharing this! 😊

Mark Goho • Jul 9 '20 • Edited

Tip #0: Use webpagetest.org to get real measurements: webpagetest.org/result/200709_JA_4...

"Loads in 2 seconds" isn't quite accurate since it looks like your best run was doc complete at about 4 seconds, while your repeat views are <1 sec (which is great).

Your lighthouse perf score was 73. Still a lot of work to do, but you're well on your way.

Make sure to take a look at the caching recommendations, those are going to be the lowest hanging fruit, although you might not have the ability to change this if using Github Hosting. I'd recommend something like Firebase Hosting which is free for your usage and allows for complete control over the static asset caching.

Yeah! I should move to a dedicated hosting! Thanks for sharing this! 😊

David Paine20 • Aug 18 '20

Statistics from Google indicate that 50% of website visitors expect a mobile website to load within 2 seconds. 53% of users will probably leave the blog page if it takes longer than 3 seconds to load. So for Google, page speed is one of the factors, that define the user experience. And for Google, the user is a boss. Here for optimization of your page, you can also get the tools from the following link url-decode.com/cat/ as well. Where you will find tools related to minification, image optimization, and many more.

Yeah! Speed does matter when it comes to websites! Thanks for sharing this link. It's a treasure of tools. 😄

Ran Rubinstein • Jul 8 '20

Great post! You mention image CDNs but you don't use them. Here's a way to use an image CDN easily with your github pages site: akshayranganath.github.io/How-to-m... , your images will be typically 40% lighter and served faster if you use it.

Cheers,

Ashley Sheridan • Jul 6 '20

Minifying the JS files won't actually reduce parsing time unless tree shaking is part of the minification process (and this is usually considered a separate part of the build process).

Thanks for sharing this! 😊

Ali Hussain Dhuniya • Jul 6 '20

Well it's showing 88 scores point of performance
![dev-to-uploads.s3.amazonaws.com/i/...)

According to Lighthouse, "Values are estimated and may vary. The performance score is based only on these metrics." This report was generated on 4th of July, 01:28:48 PM IST. These scores might reflect a bit different on your machine due to slow internet connection or multiple extensions running in the background

Zen • Jul 19 '20

Your site:

C M Pandey • Aug 2 '20

I think you didn't read the note at the beginning. I have mentioned the score from Google Lighthouse not from web.dev tool.

Zen • Aug 4 '20

I think, that's same

No! They're not!

Paweł Kowalski • Jul 5 '20

I prefer our documentation scores:

AMA ;-)

Looks great!

Jang Rush • Jul 23 '20

Cool! I'd like to translate this post to Chinese. Can you give me the permission? The translated text will be published at nextfe.com

C M Pandey • Aug 2 '20

Sure! You can repost this to Chinese at nextfe.com, if you mention the link to this post.

Jang Rush • Aug 13 '20

Chinese translation is finished: nextfe.com/site-loads-in-less-than...

There is a backlink to this post at the beginning of the translated text.

Great!

Bharat Saraswat • Jul 6 '20 • Edited

I created a small dashboard here: covidtrackerlite.in?utm_source=dev.to

Since its very minimal and I am using caching, it loads really fast.
Any comments?

It looks good. You can use a number counter animation to make it more attractive! 🤘

Yishai Zehavi • Jul 9 '20 • Edited

Wow, concise yet comprehensive. Thank you!

Welcome! 😊

Uploadcare • Mar 4 '21

Impressive work! Can also add 'Use the right image formats' to the Tip #7

If possible, it's good to use WebP (although, it's supported by a limited number of browsers). Google claims that WebP lossless images are 26% smaller in size compared to PNGs, and WebP lossy images are 25-34% smaller than JPEG images.

C M Pandey • Mar 10 '21

Thank You! 😊 I am aware of that and as you mentioned it is supported by a limited number of browsers, so I didn't mentioned it earlier but I should do it now (for future case).

Jacko • Sep 8 '20

How can one person remember so many languages!? Lol, nice site. Very quick to boot up on my iPhone XR. 👍

dev-to-uploads.s3.amazonaws.com/i/...

Thanks! 😊 That's the result of 7 years into programming! 😂

Harshad Prajapati • Jul 6 '20

Have a look of light house score of my page (my portfolio) built with Gatsby.js
harshadprajapati.vercel.app/

Woah! Your scores are pretty good! Just add some styling to your skills elements.

Harshad Prajapati • Jul 24 '20

Thank for your suggestion.

dev • Jul 22 '20

(y)

Zen • Jul 19 '20

My blog 🙃

I use Vue.

C M Pandey • Aug 2 '20

Good for you! :)

Bruno Austine • Jul 7 '20

That's is a very beautiful website. I would love to borrow some features to add to my own 😊😊

Surely! All of the source code is available at my GitHub repo

Jordan Humberto de Souza • Jul 9 '20

your website is so bright xD my retinas burned... i suggest adding a dark mode switch or make it auto-switchable based on system theme mode. xD other than that, great job!

Already working on it! 😎🤘

T.Hunold • Jul 8 '20

Well, my site loads as fast as this page and yet only scores a 2 for performance... Everything is loaded and interactive.