In a quest to achieve the fastest page loads and best optimizations I've come across a few things that GTmetrix and Google recommend performing. Here's the list:
Defer parsing of JavaScript
Remove query strings from static resources
Make fewer HTTP requests
Use cookie-free domains
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Prioritize visible content
Optimize images
Minify JavaScript
I'm using CloudFlare's free plan and have it set up for CDN + Basic Optimizations (Full Optimizations prevented my portfolio images from loading). I also use the SmushIt plugin to optimize images. Is there anything else I can do on my end to make the site faster? When I did choose CloudFlare's "Full Optimizations" the site did load faster as I think it was doing more minifying and combining code, but it broke the portfolio pages.
It seems Google really wants me to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" as it has the red exclamation mark icon next to it and it says I "should fix" this. Any ideas on how to remedy this or any other general suggestions for increasing speed?
when combining scripts you have to use some finesse to ensure the order remains the same so they can still function normally. The tip given from Google's pagespeed tool about "Eliminate render-blocking JavaScript and CSS in above-the-fold content" is letting you to know you should move all js to the footer, but Salient already does that with all scripts except one (modernizr). The other three I can see it complaining about are from the WordPress core (jquery, migrate & comment reply) If you try to move them into the footer it might also cause the page to break if not done correctly. Optimizing the css for mobile is a bit more involved actually, since you would need to create a separate stylesheet loading only the essential rules for rendering the page and defer the rest until later on.
It seems you've done a great job optimizing your site in other aspects, so your these really are the only things on the to-do list as far as I can see if you're trying to squeeze everything you can out performance wise.
no idea why it's flagging all the themes scripts on your URL as they're loaded in the footer (not render blocking). Running the live demo running Salient you'll see these are the only scripts flagged as render blocking
and only modernizr is something i've included because including in the footer will break its intended functionality.
The only thing i'm looking into doing going forward is allowing an in option theme to minify all the scripts so that people who are not comfortable manually doing it can have a quick one click solution - but I really need to figure out a practical way to do that still.
I figured out a way on CloudFlare to use their Rocket Loader with a page rule to block it from running on my portfolio pages, which is where it was breaking the site. The Rocket Loader is an asynchronous JavaScript loader, which seems to greatly improve load times. In addition to the Rocket Loader, CloudFlare automatically minifies JS, CSS and HTML. To optimize images I use the SmushIt plugin, which seems to do a good job. I also swithced hosting from HostGator to WP Engine, which was one of the best moves I could have made. Although it's a bit expensive, I believe it's well worth it. They take care of all the heavy lifting when it comes to caching and optimizing for speed. Your results may vary, but my experience with WP Engine & CloudFlare has been a positive one and I would definitely recommend the two.
@themenectar need your help and would love to give you business. If you have a chance can you tell me where I could find this theme for my business its similar to the business shown here : www.fetchr.us and www.shyp.com keep mind they are copying each other and the them is the same .
Hey Ryan,
when combining scripts you have to use some finesse to ensure the order remains the same so they can still function normally. The tip given from Google's pagespeed tool about "Eliminate render-blocking JavaScript and CSS in above-the-fold content" is letting you to know you should move all js to the footer, but Salient already does that with all scripts except one (modernizr). The other three I can see it complaining about are from the WordPress core (jquery, migrate & comment reply) If you try to move them into the footer it might also cause the page to break if not done correctly. Optimizing the css for mobile is a bit more involved actually, since you would need to create a separate stylesheet loading only the essential rules for rendering the page and defer the rest until later on.
It seems you've done a great job optimizing your site in other aspects, so your these really are the only things on the to-do list as far as I can see if you're trying to squeeze everything you can out performance wise.
Cheers :)
These are the details from Google:
Remove render-blocking JavaScript:
Optimize CSS Delivery of the following:
Do you see anything that can be cleaned up or perhaps optimized in a future update of Salient?
Hey again,
no idea why it's flagging all the themes scripts on your URL as they're loaded in the footer (not render blocking). Running the live demo running Salient you'll see these are the only scripts flagged as render blocking
Remove render-blocking JavaScript: http://themenectar.com/…-includes/js/jquery/jquery.js?ver=1.10.2 http://themenectar.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1 http://themenectar.com/…themes/salient/js/modernizr.js?ver=2.6.2 http://themenectar.com/…includes/js/comment-reply.min.js?ver=3.8and only modernizr is something i've included because including in the footer will break its intended functionality.
The only thing i'm looking into doing going forward is allowing an in option theme to minify all the scripts so that people who are not comfortable manually doing it can have a quick one click solution - but I really need to figure out a practical way to do that still.
Cheers!
Ryan,
Other than the cloudflare optimization what have you done to get a 90/100 score on google developer's site?
I didn't see any minify plugins on your site either although this is set by default with cloudflare.
I think this answer would help a lot of people here.
Thanks!
I figured out a way on CloudFlare to use their Rocket Loader with a page rule to block it from running on my portfolio pages, which is where it was breaking the site. The Rocket Loader is an asynchronous JavaScript loader, which seems to greatly improve load times. In addition to the Rocket Loader, CloudFlare automatically minifies JS, CSS and HTML. To optimize images I use the SmushIt plugin, which seems to do a good job. I also swithced hosting from HostGator to WP Engine, which was one of the best moves I could have made. Although it's a bit expensive, I believe it's well worth it. They take care of all the heavy lifting when it comes to caching and optimizing for speed. Your results may vary, but my experience with WP Engine & CloudFlare has been a positive one and I would definitely recommend the two.
Hey again Ryan! Thanks for taking the time to share that with others :)
@themenectar need your help and would love to give you business. If you have a chance can you tell me where I could find this theme for my business its similar to the business shown here : www.fetchr.us and www.shyp.com keep mind they are copying each other and the them is the same .
please advise
Hey ,
Fetchr is using Salient where as shyp is using a custom html page built on bootstrap .
Thanks
ThemeNectar Support Team
Can you provide a template that would be fit for the sample platform .
Regards
Hey ,
No we dont have any such template available.
All the best,
-T
ThemeNectar Support Team