Note: This article is only intended to explain how I am loading my site. These steps may change as per your use case (Building an E-Commerce websit...
For further actions, you may consider blocking this person and/or reporting abuse
Glad to see other people worrying about performance! My portfolio site gets around 800ms, I'm pretty proud of that.
My one concern about your method is loading mobile css once it's determined it's needed. If you're gonna split the css, I think it makes more sense to just load mobile at first, since a pc is more likely to be able to take the extra processing/network loads.
That's just my opinion on the matter.
Hi, yes that's a good point, I think it is totally a right approach when you have a mobile first css. In my case, I wrote it for desktop first since a lot of recruiters and even developers use desktop for surfing but I will totally go for your approach when I make a mobile first site.
Thank you for sharing and reading this article🌻 and loading site in 800ms is so coool you should totally be proud of yourself🦄
800ms? Are you willing to share your techniques?
Yes, I do mobile first which loads everywhere, and responsive.css for desktops and tablets
And it's the opinion of most others!
What happens if a potential employer receives your application on their mobile device, opens your site and has a really bad experience?
I do get the point but I think it depends on one's use-case. In my case my mobile.css is 100 lines long and plus I'm minifying it so the final production size of my mobile.css is 2kb.
Also, I cared about my comfort and I am personally more creative when I think about desktop first and then turning it into mobile view is just a few adjustments (and especially since it is a portfolio I just wanted to be as creative as I can 🦄)
I have made websites where I had to write mobile-first CSS and I totally get the point of having that extra CSS file for PCs rather than mobile but yes the topic is too broad to talk about since other parameters like the size of your files, the eventual aim of the website, Your comfort, your team's comfort matter as well.
Oh, and do let me know if you have different views on this, Thank you🌻
That makes sense. I didn't look at the source ;)
Reading the article, the way you emphasised separating mobile.css as a step towards reducing the overall payload gave the impression it was a large file.
oh my bad and yes now I feel like it would've made sense to have it in the same file as well since it is not adding much content to it. Initially I just didn't know how much it will grow so I went with two files.
What about 300ms for a WordPress + Vue.js site? ;)
wue-theme.app
(Server in Frankfurt without CDN, so in USA it could take around 2 seconds to load).
Your time to interactive is 3.3s on slow speed network. Test your site on web.dev
thepracticaldev.s3.amazonaws.com/i...
ehm, I don't know what web.dev does and how. But Google pagespeed insights says my site is quite ok ;)
Just checked web.dev as well. All Measures are between 85 and 97 points. So what's the point?
thepracticaldev.s3.amazonaws.com/i...
Do you know what each of the scores (in seconds) actually mean?
Fair enough if you're happy with 3.4s on TTI :)
No, I don't know what each score on web.dev - a site I heard first time 2 minutes ago - means.
And yes, I'm very proud and happy about 300ms page load of a Wordpress + Vue.js + GSAP site and which is actually even faster than your site (joomjunk.co.uk up to 450ms) build with pure html and with 10 lines of JavaScript and CSS. You obviously taking this parody here too seriously:
motherfuckingwebsite.com
It's not my problem if you browse the internet on a feature phone ;)
Well according to Pingdom, you're coming back at 480, not 300,but either way...
75% of the website is viewed on a mobile, so it's mobile that's important to target in regards to performance....and yes, that includes 3G connections.
Not taking that parody seriously at all.
You have have a faster response rate, but on 3G, your site will take 4x longer before the user can interact with it. Just an FYI :)
You have a very fast site and you can be proud of it. But I just don't get why you want me or other users here make believe my fully functional, cutting edge WORDPRESS (which is famous for being slow) site for realistic usage with an elite Lighthouse mark of 94 points would be slow. That's just insane. Actually it's defamation.
You wrote something about 3.3 seconds to first interaction with my site - this would mean a connection of 200kb/s - seriously? Is this your target group? ~1% of devices in the western hemisphere or some people hiking through woods, tundra or desert? I bet you make a lot of money with such of sites... Also even web.dev says 3.3 seconds (for prehistoric phones / bad connection) is very good (green).
Did you know 3G is going to be shutdown within next 2-4 years? In India, USA and Europe many providers will shut it down next year. You better should catch up with modern web technology ;)
I also don't know where you get your numbers from. 75% wtf? The figures I read all the time are around 50%. And how many of them are still using 3G?
"Well according to Pingdom, you're coming back at 480, not 300,but either way..."
I build websites for people not for bots. Pingdom can't render Single Page Applications. Did you hear about this technology? It's the new kid on the block... since 2002/2003 ;) So Pingdom is rendering my Search Engine Non JS Bot Markup which is not performance optimised at all.
So on my DSL Desktop your site is 100-200ms slower than mine. But you can be proud of you. People in the woods can "interact" with you site after 0.8 second!
Stop trolling man.
95% of the UK will be covered by 4G. You then have to remember those who commute to work where there is a poor connection in many areas, or even public networks such as cafes. There are still thousands of areas in hundreds of countries that dont yet have 4G coverage.
Why do you think the leading audits tools (based on lighthouse) give you a throttled result? Because it's important. It's reality.
If you do some research on companies that have seen huge bounce rate improvements due to shaving a single second off their TTI, you'd be surprised of the outcome.
I'm not trolling at all. Ask anyone who knows their shit about site optimosation
You should stop to generalise and judge about others on your personal preferences. If your main target group are people with feature phones, poor connections (for what ever reasons) - it's totally fine, it's your business. But when you say my site is slow because it takes 3.3 seconds to load from the woods - then you are just rude. According to all performance optimisation tools my site is still very good even when throttled. It's not as good as yours in the woods, but it's still good, so don't tell me my site slow. It's fooking elite.
"Ask anyone who knows their shit about site optimosation"
You're talking here to such a one.
~ cutting edge WORDPRESS.
Hahaha oh please...
~ You should stop to generalise and judge about others on your personal preferences.
Nothing to do with personal preference. A large % of the web is viewed on mobile. It's nothing to do with "being in the woods".
TTI is also a very important UX factor.
The truth hurts, so take it as being rude or not, but my point still stands, whether you like it, or not.
"Hahaha oh please..."
Please what? There are not many Single Page App's based on WordPress out there. You don't think Single Page Apps are cutting edge?
"Nothing to do with personal preference. A large % of the web is viewed on mobile. It's nothing to do with "being in the woods".
You started this dumb discussion not about mobile web. But about prehistoric 3G connections. How many % of the mobile traffic is made with a 200kb/s connection? And yes 200kb/s you get only in the deepest countryside in the western Hemisphere. Even the third world is pushing 4G/5G as its cheaper than physical wires.
"TTI is also a very important UX factor."
And the "TTI" of my site is very good. So what's your fucking point?
"The truth hurts, so take it as being rude or not, but my point still stands, whether you like it, or not."
Yeah, please tell me what's your point?
Is all you wanted to say is that my site isn't as fast as yours in the woods? Great!!! Did you apply for an Awwwards nomination?
"TTI is also a very important UX factor."
Show me some examples of your great UX work where you respect not only the factor of being able to load a site from the woods within 0.8s (people on the countryside and in the woods are very busy and have no time to loose) but respecting circumstances and factors relevant to the other 99% of the users. Or is your beautiful site the only one you've build so far?
Seriously I can't imagine any sane client would let you build a business site based on your "UX" skills (except the 0.8s page load from the woods) you show here: joomjunk.co.uk.
I don't fully understand why you've tried to diss my site, but doing so you only embarrass yourself.
By the way 3G means a speed of up to 15Mbits/s which is ~2MB/s.
Even my first smartphone ever - iPhone 4 - which I bought in 2010 or 2011 had a speed of up to 1MB/s (or ~8Mbit/s).
appleinsider.com/articles/10/06/25...
So this dumb and embarrassing discussion is not even about 3G but really prehistoric devices and countryside with a very, very bad infrastructure (woods and fields!).
So please stop embarrassing yourself and waisting my time. I will not response to your bullshit anymore.
Did I hit a nerve?
This looks cool, congrats for the work!
So can I use any WordPress plugin and it will work with the theme as with any other theme? If yes, that's amazing, if not, what is the purpose of using WordPress at all, as I know WordPress is all about the ecosystem (themes/plugins)?
Hey, thanx for the star on Github :D
"So can I use any WordPress plugin and it will work with the theme?"
Yes, the theme works POTENTIALLY with any plugin. But it only provides the basic concept. You have to build everything you need on your own. But Yoast SEO for example works out of the box. Also any plugin which relies on wp_head() and wp_footer().
The problem with single page apps was primarily the SEO. And that problem does the theme solve without server side rendering (Nuxt.js) which brings some disadvantages (separated node.js server; you can't use the window object).
So you will still have to implement all the features like comments, forms etc yourself. And it's really hard work. I'm working for almost half a year full time on a commercial version of this theme which will include or does already include Polylang / WPML, Elementor, WooCommerce, Categories, advanced ajax comments, Subcategories, advanced Ajax Search, Vue Form Builder, Advanced Vue Mailchimp Plugin, Theme-Options powered by Vue.js as well. But it's still far from being released. I'll hopefully will publish next week a first MVP version, which is already really, really cool, but I will offer it only together with individual customisation starting at 1500€. But next year I hope to make it available as downloads at lower prices.
That is really cool! Would you mind sharing what you're doing for the first load?
Thanx :)
First of all a VPS server with a handmade nginx, MySQL and PHP setup. Then also the theme itself is fully handmade without any plugins that could effect the speed negatively (e.g. WPML). Only those measures already drop the loading time to ~600ms. Then WP Rocket does the rest :)
woaahh so cool 🦄🦄 I have no idea about server setup and deployments tbh mine is hosted over netlify 😂🕺 Thank you for sharing it was super informative🌻
On udemy there is a bunch of nice tutorials. I didn't watch this one, but it has great ratings:
udemy.com/course/wordpress-the-def...
This is good stuff.. although, the stylesheets still load, even with a media attribute. Combining css into fewer sheets/links, and keeping the media queries in the stylesheet, is proving to be the fastest way to load.
Hi Mark, I just checked my network tab and
mobile.cssis not really getting any request when I turn to desktop view.Mobile view
Desktop View
I'm not really sure about the browser support or for any gotchas in this but apparently this is how it works in new browsers.
Thank you for reading the article 🌻
I have a question on that matter.
If a user loads the website on phone in landscape that has more that 768px,
then rotates the screen into portrait, will the mobile.css file be loaded and applied?
That could make a big difference in my work. I could try that on my next project.
No, it won't be loaded by default since the media is checked on the loading time. However, you can actually call a javascript function which will add that link to head dynamically when a user rotates the screen but it depends if it fits your project needs
Thanks for sharing! You can also use f_auto and q_auto for automatic format and quality selection.
Oh, thank you so much! I will try out f_auto and q_auto🦄
Also, you guys are doing great job🌻
1.6s is still pretty poor for a static site.
Yeah I'm still working on improving it :D
I'm just very proud about it since it has canvas animations a lot of colors, images etc. 🦄
I personally use Javascript to load all JS/CSS files asynchronously. With the Joomla CMS powering my site and on SiteGround hosting (pretty bad TTFB times), I can manage 0.8s for first interactive
I am loading them asynchronously too. In fact I'm preloading them and applying them when they are loaded that should be faster than straight up loading them. Is there anything extra you're doing? Would you like to share your website?
This is what I wrote to properly asynchronously load JS gist.github.com/C-Lodder/a00cf9894...
You can use it for CSS too. My main template CSS I'm loading inline as I wrote my own mini framework and it's only 22kb
that looks interesting I have async attribute true in my script link, I'll do some research. Thanks for sharing! the performance insights are pretty crazy :D
Thanks so much for this write up. When I am optimizing websites I always feel overwhelmed with the amount of code there is to modify. Having a step by step guides like this really help to break up those problems into smaller bite-size packets.
Refreshing to hear about someone only using vanilla JS for a site. Nice!
Thank you! and yes I am actually super impressed with where the vanilla is heading. In the website the astronaut is a web component and the blue tshirt guy is just the same component with different styles. also, I love how much control you get when you work in vanilla of any language🦄 Thank you for reading the article🌻
You can preload image and javascript assets as well. Another suggestion for optimizing is to create image sprites for small images like icon sets or logos or other images that are small and similar or limited in color palette. Lots of npm packages that can help you with that, but easiest for people just starting to make them is one of the online generators like toptal.com/developers/css/sprite-g...
or spritegen.website-performance.org/
Another good optimization regarding images is to make sure the images are not only sized correctly, lazy loaded and/or spritified, but also that the individual images have been fully optimized. Again, lots of npm packages for that, but easiest for beginners is to use a GUI application like FileOptimizer, which I think is very good. Can download that here: sourceforge.net/projects/nikkhokkh...
Oh, these are some really helpful tips! Thank you so much I will check them out :D
The lack of spaces before the opening bracket of a code-block makes me want to throw up.
Hi, can you tell me which code-block are you talking about? I will fix it.
I'm just giving you a hard time - I liked the article.
This is what I'm talking about though, no spaces before the opening bracket:
function loadProjectImage(e){
You do it in pretty much every code block in the JS and CSS:
html,body{
.lazyload, .main-container{
Like I said though, just giving you a hard time. It is a style thing and I'm pretty anal about style. it was a good article. Thanks.
Oh I see. I think it totally depends on how you (and your team) prefer it.
I've seen a lot of w3 articles not putting any space there. Even a lot of code snippets in this article about JavaScript best practices - w3.org/wiki/JavaScript_best_practices do not add any space in the code.
So yeah it depends on how you are linting that particular project :)
Just checked google.github.io/styleguide/jsguid... and yes they mentioned about the space before brackets :D
Too funny! I was just about to link the Google style guide for you. Ya, Douglas Crockford recommends it as well: crockford.com/code.html
As well as every other style guide I've seen. Interesting that the w3 best practices doc writes them that way, I hadn't seen that.
On another note, I've also seen it said that it is against best practices to pass the event object around. Here is a link to the page of the book I saw it in, Maintainable JavaScript, thought you may be interested (it is a very good book too, I always recommend it, as well as JavaScript Patterns by Stoyan and JavaScript The Good Parts by Crockford:
books.google.com/books?id=bHhlCrvb...
Ever since I have seen this post, I have been working on improving my website and I am 100 all the way now. Thanks for the inspiration man!
unsungnovelty.org.
PS: Yes, I like my website plain and minimal. :)
Nice work!!.
What tool did/do you use to track your lighthouse score?
You can check your score on web.dev or chrome developer tools have the option of "audit" where you can check the score directly.
Lighthouse also has a CLI so you can run the performance insights from your command line
I know this tools. Thanks.
But I didn't know about web.dev possibility to login and save audits over time.
Nice feature to see improvements :)
Cool great job! That's why I love using Gatsby. Code in React but get static assets && optimized images 🤩😎
Cool looking website doe
Nice!
I dunno if i would bother splitting css even if it was 50kb
I agree, For my current use-case it would've worked to have a single file. Initially I just had no idea how big it would get. I'm not sure if having this extra file will cause any issues though since it is anyway loaded dynamically and does not block render.
My site renders in 200ms, if it's throttled to 4g it'll render in 1.6s. That's the power of statically generated sites :)
omg haha, 200ms is soo cool! that's literally less than my server's response time.
That is so Nice! Im a new dev and making things work and not so slowly are ok by now for me, but Im always looking for the best :)
Hi, That is totally a right approach 🌻 Good luck with your journey 🕺
If you want fast static site, Gatsbyjs FTW ❤️
Well done! Its always nice to squeeze some extra load time out of a website 👍🏼
Really cool portfolio site
Thank you :D
Thank you so much :D
Isn't that kind of slow though? : )
It is! I am still trying to improve it, its just that I'm proud of whatever I did till now.
Also, I don't think so there will be any major changes in the load time now. The thing is, After this point if I want to improve the performance I would have to compromise on the content (by deleting elements) or compromise on accessibility or seo (by rendering in javascript).
Eventually its not about providing the fastest website rather providing them with a good overall website which is comfortable to maintain, doest not take tooo long to load, and has good accessibility and seo. :)
Those are some pretty awesome optimisations! well done!
Love the animations 😊 If you would like to restart your austronaut animations check out my article 😉
link.medium.com/1CKzyKfNU1
Thank you for your kind words🦄 reached the end of my medium limit :) I will read it later thank you for sharing :D
You should try to put your css inline in your html. May not be the best practice, but your css it's really small, maybe, killing one (or two) requests worth it :)
That will surely help me in 'getting the content along with the styles and overall colors' as soon as possible but my index.css is still large and making it inline will just block the first load for some time.
Since they are preloaded they don't really make any change in the first load right now so I can afford having that extra request :D
Great article buddy!!
And...
That discussion between @technomad and @clodder is worth a read!!!
Saurabh, your rocket game is unbeatable.
Thank you so muchh! It's a old project though so there are some mistakes. for the next few months I'll be working on games only so probably will end up building better games :D Thank you 🌻
Hi write blog on razorpay interview ...
If you make changes to your css, since everything is cached in browser, it wont fetch latest css, unless a hard reload is done manually. am i right?
I'm not really caching it but yes that is how it works when you use service worker and cache css. However there are some tricks to handle it like you can manually show in Ui when new css is ready and ask user to update and onclick of the update the new css can be loaded dynamically. Also, even without a hard reload they eventually get cached replacing the old ones.
Edit: If you're talking about the browser's cache without service worker, I am not very sure about this but I've seen sites eventually adapt to new css without hard reloads. I looked around and apprenntly it also depends on your server configurations.