I have a ((very)) simple WP site with the above mentioned theme.
The theme loads a ton of external .css and .js files above the fold that causes render-blocking and I am sure I don't use half of them.
The header.php only includes a few directly and most are included via the php wp_head() -tag. I am struggling to find out, which .js and .css are in use and which aren't. Also how to get rid of them totally since I feel like using 'defer' or 'async' is only solving the problem partially.
My site is http://toptand.dk. Be aware, that I currently use WP Super cache for compressing and autooptimize to further minimize render-blocking etc. which might make the header look very different. I would rather get rid of it for real.
I have read many articles about how to prevent render-blocking, but non really explains how to deal with all the crap from a WP template.
The theme loads a ton of external .css and .js files above the fold
that causes render-blocking and I am sure I don't use half of them.
This is very typical of commercial WordPress themes; such themes load many files, as many are required for the "multipurpose" backend functions which provide short-codes, drag-and-drop features, custom post types, ecommerce, etc.
You sacrifice speed and page weight for all those features you use as well as the potential features you don't. If you need speed and a light-weight site, don't use a theme like that. You can go into that theme and wp_dequeue_script scripts and style sheets, but the features theme will break. See https://codex.wordpress.org/Function_Reference/wp_dequeue_script
Try a simpler, lighter weight (and free) theme from https://wordpress.org/themes/ and learn how themes work https://developer.wordpress.org/themes/getting-started/ in order to get features you want without all the extra code.
You can utilize Chrome Dev Tools' Audits tab.
I am struggling to find out, which .js and .css are in use and which
aren't
Upon selecting the Audits tab, include Network Utilization based on necessity but mandatorily check Web Page Performance option. Once the selection is done, either click on Audit Present State or Reload and audit.
Once the process is complete, the results will provide inputs on the number of unused CSS rules. This will give you an idea about the unused CSS.
Also how to get rid of them totally since I feel like using 'defer' or
'async' is only solving the problem partially.
The recent version of Chrome (59) has brought in a new feature called Coverage (you can find this under More Tools inside the dev tools). This helps in understanding the percentage of the CSS being used in the current page and clicking on one of the results redirects to the code and marks the portions of non-executed code in red and the executed ones in green.
These inputs should help you optimize your assets and remove the unused code.
Hope this helps!
Related
I am using google's audit and its tells me to remove unused CSS. I don't know if that css is for just that page or the whole site. The CSS might be there but not needed on that page but another page. Can someone tell me how this works?
It is telling you to remove unneeded CSS for that page.
However you have rightly pointed out the flaw in this suggestion as it only takes into account the current page (in it's initial state, obviously if you have a pop-out menu it won't gather the CSS for that).
Think of it more as a guideline of making sure you don't send the whole of Bootstrap just for the grid and column layouts for example.
Overall this is very difficult to fix, just use the coverage section on the performance tab in Developer tools to make sure you don't have any massively bloated CSS files and you will be fine.
Obviously reduce your unused CSS if it is easy to do so.
The only other thing that this point covers (in it's description, not as part of it's monitoring) is deferring non-essential CSS.
You should defer any Style Sheets that are not required for rendering 'above the fold' content (and inline your 'above the fold' CSS).
This point is also covered in 'Eliminate Render Blocking Resources' so I never quite get why they add the suggestion under this part as well but I have added it for completeness.
I find this rule was good at guiding me when designing a theme from the ground up as it made me seperate global CSS and page CSS more effectively.
Unless your site is scoring 98 / 100 (or you have hundreds of kilobytes of CSS) and you want to squeeze that last little bit of performance out of the site, simply minify and combine your CSS files and ignore this point.
Google's audit tool compares the entire stylesheet against the current URL and then tells you how much of it is actually not used by the browser.
The browser however still needs to download the entire file and then match all CSS selectors that apply to the current URL.
There are many ways to deal with this, but I find it the easiest to use an external API tool like Splitcss that does this for you on URL basis.
If you have only a few URL patterns in your web application, you can use some CLI tools like purgecss or uncss.
I am building my own template in OpenCart by making a copy of the default one and then making my own.
When I edit the CSS in Chrome code inspector and copy it to my stylesheet. Is it "correct" (from a web standards/web developer view) to leave the old commented code in place or should it be completely removed.
I sometimes find that unticking features in code inspector and then copying over the block of code from the Chrome stylesheet is the quickest and easiest way of doing things.
Or maybe there are better "Live CSS" tools and extensions out there?
When you deploy for production you should remove comments, and also minify your CSS. You can add a minification tool to your build process which would remove the comments and whitespace for you.
The reason is that it makes a smaller file for the end user to download. Smaller file means less bandwidth use and a faster transfer. This is especially important for mobile device users.
It should ideally be removed (and then minified et cetera as mentioned by another answer). Best practice would be to use some version control software such as Git to keep track of what is removed and added and so forth.
I'm curious if anyone has experience with refining their WordPress site to make it as fast for page loading as possible and which approaches work better than others.
For example, lets take adding social media buttons to a footer. What would be fastest? What would be the biggest drag?
Plugin - there are some plugins, including for Genesis, that allow the user to enter a social media URL and then the icon and link are generate in a widget. I'm wondering if this would be a big load in case the CSS and files for all icons sets are loaded instead of just those being used, plus any additional plugin code being run.
HTML in a widget - With something this simple I thought that the code could be created and added to a text widget, with the images being stored in the theme folders. This can be a little risky because I've seen HTML code in a widget get blown out and clients can accidently edit the wrong piece.
HTML in the theme - I try to avoid hardcoding elements that the client might want to update, but this seems very efficient, unless it's in a widgetized area by default, in which case would you un-widgetize it?
Shortcode - with hardcoded elements that would need to be used in a couple of different places, I thought creating a shotcode could be a good option. But does anyone know if shortcodes tend to drag on a site? Do all of the elements within the shortcode file get loaded even if that shortcode is not called on that page? I'm trying to do away with unneeded CSS or scripts whenever necessary, but I don't know if shortcodes will only call the piece being called. Anyone know?
Thanks, any information or advice is greatly appreciated.
Personally I use a theme options page which echos out HTML if the admin fills out the information. It isn't the fastest but its great for management and simplicity.
Unfortunately, there's not a black-and-white answer here, because there's a variety of factors that come into play.
For example, server-side rendering of content is in many cases actually faster than rendering on the front-end, but that's largely dependent on the speed of your server. If you're on cheap, sharing hosting (like many of us are), server-side can be slower.
There are 7 things I recommend everyone do to improve site performance:
Concatenate. Combining like files together.
Minify. Removing the spacing, line breaks and comments from files.
Smush. Removing unneeded data from image files.
Icon Fonts. Icon fonts are a lighter, faster alternative to image-based icons.
Compress. Reduce file size by up to 70 percent.
Cache. Telling browsers to keep static assets stored locally so that they doesn’t have to be re-downloaded every time they visit your site.
Page Structure. Adjusting the location of CSS and JavaScript files for faster rendering.
If you'd like to learn more about any of these, I've written a pretty detailed article on faster WordPress sites. I've personally used these tips to create multiple sites that load in less than 2 seconds on cheap, shared hosting.
http://gomakethings.com/high-performance-websites/
1- Html & PHP : for social media you put them in other file like social-Blox.php then call it by
<?php include(locate_template( 'templates/social-Blox.php' ));?>
now you have the social in separated file you can use it in many places and it still very light no plugin load or any thing
after this inside the social-Blox.php
you dont add only html NO .
the parts that will be changed later you can use ACF or theme options ...
to make them dynamic for example the links for facebook and twitter ... etc .
<a href="<?php the_field("facebook",105); ?>" class="icoFacebook a_t" title="Facebook">
<i class="fa fa-facebook"></i>
</a>
the fields that need change for example social media I add them to custom page like " general page " so the client change them from there this I use that values every where like in this and that files ...
here you are reusing blocks of files ... and reusing data ... with one control panel .
2- widget & short code : I don't like this it need more time to develop its not easy to reuse and to let client use it its a little hard
3- Plugin plugins always big problem for performance the less you use of them the better ...
there is big famous plugins you can not replace or recreate like AFC , mailPoet ...
there is small plugins but have some idea you need ok take the plugin its mostly 1 files take the PHP you need and the css & JS you need and add it to BOlX as I explain before ( in this case you will take max 50% of the plugin code ) and now the code is your not close box with process you dont need of problems you dont know ...
I'm working on a premium theme for WordPress, it's my first. My question is how modular should/can I get my code before it gets to be a problem for the server or other developers who buy my theme?
For example I have 3 custom post types with taxonomies and custom column headings. Should they all be in one php file or can I break them up so that each post type is in its own file?
I'm thinking that for future projects more modular is the way to go so I can just drag and drop the pieces that I need for that project. I don't want to make my theme any slower though so I could use a little advise on how granular to make my files.
I've bought themes in the past that have both extremes but want to set myself up properly from the start.
Thanks.
This is an opinion request this one because either approach works and based on this information plus the fact you seem keen on individual files. I would encourage just that.
Modular approach works with themes if you plan to provide the same functionality per theme as you won't need to edit functions per theme. I would go with individual files and just put them in a folder. If one of those files has a bug you'll be quick on applying the changes to all the themes you create.
If you put all the functions in one file and each theme gets its own versions of those files due to requests etc. Then you create a little more work in that you copy and paste code. Not a lot of work but then that demands on just how much that single file changes over the years or even within some months.
There is nothing wrong with many folders and files. It won't have an effect on loading. It would take hundreds of include() or require() before it becomes an issue.
I've been using Google PageSpeed to improve my site's performance. One of its recommendations is eliminating unused CSS in my app. Although a lot of the CSS is unused for a given page, it is used elsehwere in the app.
What's the right approach here? I'm considering creating a base CSS file for common CSS and then separate files for each individual page. Luckily there aren't that many pages. Is this overkill? And is there a better approach?
This is a Rails app, and I'm using asset_packager to minify my CSS and Javascript
Thanks!
Moe
It won't speed up your application because you will be adding new http requests, while if you pack all CSS into one file, that file will stay in the cache and you won't have to have an http-request for it for subsequent pages.
Google PageSpeed simply mean that you shouldn't provide styles you don't use anywhere in your application or only in pages that a user can't visit, for example the admin area.
As people in here mentioned, definitely not. You will just add new http requests. You should really keep in mind that pagespeed will probably always show that you have unused css on a given page, but that's not really a big issue.
Take a look at the other recommandations page speed is showing like enabling compression, optimizing the images (consider using css sprites if you aren't already) and more.
See also yahoo best practices to speed up your site.
That'll depend on the size of the file(s) and the way people use your site. If the file isn't huge to begin with and people will often go to many different pages, having page-specific css files will forfeit the benefit of caching, which is generally going to garner more benefit.
The overhead of an extra HTTP request to download yet another CSS file greatly outweighs the overhead of an extra few KB in the master CSS file.
I think it is best to componentise your stylesheets. For example, you might have a base css that provides the layout for your pages. Then you might have a theme css that provides colours, images, borders - visual elements. Then you might have separate css files for individual UI components, e.g. popup.css, calendar.css etc.
base.css
theme-blue.css
theme-blue-popup.css
theme-blue-calendar.css
This approach makes it easier to manage your styles (and switch them if you need to). More relevant to your question however, is that you now have the ability to specify what stylesheets are needed for each page on your site. Now if the user visits the homepage of your site only, and the homepage has no popups or calendars, then they haven't downloaded the styles for the components they aren't using. As they proceed further into the site, they will get the required stylesheets as and when they need them.