- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi,
Do you have any custom css? If you do please remove it and check the page again.
Thank you, Emil G.
Speed Booster Pack
This plugin is a all in one that will give you that 95% score on Google PageSpeed, YSlow, Pingdom and GTmetrix.
The plugin comes with some great features like:
1. Moves scripts to the footer to improve page loading speed.
2. Loads javascript files from Google Libraries rather than serving them from your WordPress install directly, to reduce latency, increase parallelism and improve caching.
3. Defers parsing of javascript files to reduce the initial load time of your page.
4.Removes query strings from static resources to improve your speed scores.
5. Removes extra Font Awesome stylesheets added to your theme by certain plugins, if Font Awesome is already used in your theme.
6. Removes junk header tags to clean up your WordPress Header.
I’m using this plugin as well and it really help removed the rest of those files in render-blocking CSS and JS files.
With this plugin you will not need the other plugin ““Query Strings Remover”…
The plugin name is “Speed Booster Pack” by the author tiguan
You can download this plugin via the wordpress website @ this url
http://wordpress.org/plugins/speed-booster-pack/
Speed Booster Pack – Documentation
Steven,
Great Job getting the information out. I, too, love Async JS and CSS (note: use the default CSS inline and hack away at style.css).
A combination of that tool, removing td speed booster, and Google PSS helped me score a 100 Page Speed Insights on my homepage! http://www.popworkouts.com
I know that but this theme get a lot of updates and keep going back editing a file all the time is work and time..that’s why i share the plugin where make it easy for those that don’t want keep playin with codes…
Hi, Steven
you can actually add query strings remover code to your functions.php file, which many of us do. For those who don’t want to edit their functions file over and over the plugin is a great alternative 🙂
Hi Lucian,
Many thanks! With the help of a friend i was able to bypass the problem completely using the WP No Category Base – WPML compatible plugin. I guess it had something to do with the fact that in mid production process we changed the URL format of the content.
Here is the site, we just wen’t online and i want to congratulate tagDIV for the wonderful theme, great work guys.
Still have a couple of issues though, specially because i’m no expert on CSS at all.
1. The social icons in the theme don’t seem to be fully integrated with the destination social networks (eg: i’m able to post in facebook but no picture or title appear as it happens in the newspaper theme demo, just the website name link).
2. Trying to solve the issue above i made the mistake of activating jetpacks publicize whith inserted 3 extra social icons that i’m not being able to remove at this point even after deactivating publicize.
These are the main issues i’m having at this point, everything else seems to be running swell. Most apreciated if you can direct me to links that might help me solve these problems.
PS – as you see we did some homepage subtle CSS changes, nothing much.
thanks and all the best
Hi,
To do that you need custom modifications, if you want to try it yourself you will need to style the slider using CSS and then modify the images sizes in the functions.php file: http://screencast.com/t/wcUV89eV
If you don’t know how to do it you may have to hire a professional developer to do it for you.
Thank you
Here is another awesome plugin that every one should have install it’s called “Query Strings Remover” i’m using it as well and it works great.
What this plugin do is remove the query strings from your static resources like CSS and JavaScript files to help improve your cache performance and overall score in Google PageSpeed, YSlow, Pingdom and GTmetrix.
The plugin name is “Query Strings Remover” by the author Atul Kumar Pandey
You can download this plugin via the wordpress website @ this url
To not break any slide are the menu on mobile please add these files in the
Exceptions (files to ignore and load in render-blocking way) box to the bottom
jquery.min.js
external.min.js
site.min.js
js_composer_front.js
these files can’t be loaded in render-blocking are the sliders on ur site will not work also the mobile slide menu..
Can you sticky my topic please so i can keep adding more tips
Good tips – I’ll try these out once I’m back up to speed 🙂
I just want to share with most of those people that stress over the google pagespeed score and the issue they having with the “render-blocking CSS and JS files” i’m using a awesome plugin that stop this issue and i’ll like to recommend this plugin because it works great and stop that issue with render-blocking CSS and JS files.
The plugin name is “Async JS and CSS” by the author elCHAVALdelaWEB
You can download this plugin via the wordpress website @ this url
http://wordpress.org/plugins/async-js-and-css/
Also i have another awesome plugin i used as well that removed “Leverage browser caching”
You can find that plugin also via wordpress website @ the url http://wordpress.org/plugins/leverage-browser-caching-ninjas/
I’m just trying to past on my tips that works great for my self and make my site fast etc..i have more but not sure if every one will want to hear about them…:)
May be this will help it works very good,i’m using it my self…
@Lukao350
Hi, it’s almost impossible to fully remove all render blocking — most websites need to have some CSS load before the page … otherwise you get a flash of unstyled text – where page starts to load but is messed up, then the CSS loads and corrects – ugly.
So, with full optimization, you typically you will end up with one main CSS file, and one main JS file, as well as the other render blocking stuff will be external files (e.g., fonts from Google) that don’t load in “async” mode. The TagDiv Speed Booster plugin helps a bit – have you tried that yet ?
Hi,
You have to delete the code for Search Icon from menu-header.php file like this : http://screencast.com/t/qbBLGt6x
and into the menu-top.php file you have to add this code like this: http://screencast.com/t/cao8imbu8q3
And you also have to change the name of the class from “span9” to “span8” like shown in the printscreen.
<!-- Search -->
<div class="span1">
<div class="dropdown header-search">
<a id="search-button" href="#" role="button" class="dropdown-toggle " data-toggle="dropdown"><span class="td-sp td-sp-ico-search"></span></a>
<div class="dropdown-menu" aria-labelledby="search-button">
<form role="search" method="get" class="td-search-form" action="<?php echo home_url( '/' ); ?>">
<div class="td-head-form-search-wrap">
<input class="needsclick" id="td-header-search" type="text" value="<?php echo get_search_query(); ?>" name="s" autocomplete="off" /><input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="<?php _etd('Search')?>" />
</div>
</form>
<div id="td-aj-search"></div>
</div>
</div>
</div>You will get this result: http://screencast.com/t/NK81ivEzu.
Now to style it simply add this custom CSS in the Custom CSS in Theme Panel:
div.header-search {
display: inline;
float: right;
}
#search-button .td-sp{
background-image: url('http://localhost/wordpress/wp-content/themes/Newspaper/images/header/elements-menu.png')!important;
background-repeat: no-repeat;
}
.td-sp-ico-search{
width: 25px;
height: 25px;
background-position: -20px -544px;
}Result here: http://screencast.com/t/WW0j2lV6Ek.
Thank you
I’m the problem “Eliminate render-blocking javascript and css in above-the-fold content”. I do not know what else to do, would have any tips for that?
For those who want to see: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.techtube.com.br&tab=mobile.
Sorry for my english.
Hi,
Yes you can do it by adding this code to loop-single.php file:
<?php echo do_shortcode('[vc_row][vc_column width="1/1"][td_ad_box spot_id="custom_ad_3"][/vc_column][/vc_row]'); ?>
like this: http://screencast.com/t/L5bcdJal0, and you will get this result: http://screencast.com/t/CGRi9VLbmy.
Also you will have to style the ad box to lower it a bit using this CSS code, that you will add to your Custom CSS in Thme Panel:
.post .td-a-rec-id-custom_ad_3 {
margin-top: 30px;
}You will then get this result: http://screencast.com/t/bzUSSMDXnws
Thank you.
That wrapper css appears to have worked… Thanks
Estou com o problema “eliminate render-blocking javascript and css in above-the-fold content”. Não sei mais o que fazer, teria alguma dica para isso?
Pra quem quiser ver: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.techtube.com.br&tab=mobile.
Desculpe pelo meu inglês.
Hi Emil,
Thanks for the reply.
I only used the emulator to be able to show you the problem.
I did test on a few mobile phones and had the problem.
On the newspaper demo site there appears to be no issue on my mobile phone. Has some custom css been applied to this site?
I find it strange that out of the box the theme has this issue, as other themes I have not had to mess around with custom css.
I will attempt to apply this custom css, it will be a shame if this does not work as i purchased the theme for a clients site. If it does not work properly it will be a shame as I love the theme . One important part is the client wanted site to be mobile friendly.
I will advise.
Um, well if you look at the changelog files it explains the changes. These are found in the download of the theme update from themeforest.
Always useful to explore the files and folders found in the theme download:
——————————————–
update_log.txt
[ V 3.8.4 ]
– fixed view counter + yoast incompatibility
– removed legacy code for backward compatibility
– added text title support to the row shortcode from the pagebuilder
– fixed missing animations from visual composer
– social counter plugin update
– visual composer plugin update
———————————-
changed_files_3.8.3_3.8.4.html
Here is a list of all the changes between v 3.8.3 and v 3.8.4
Modified files – 13 files
•functions.php
•header.php
•includes\plugins\js_composer.zip
•includes\plugins\revslider.zip
•includes\plugins\td-social-counter.zip
•includes\wp_booster\td_config.php
•includes\wp_booster\td_js_generator.php
•includes\wp_booster\td_page_views.php
•less_files\main.less
•less_files\menu-header.less
•style.css
•vc_templates\vc_column.php
•vc_templates\vc_row.php
New files – 2 files
•includes\plugins\td-speed-booster.zip
•less_files\pagebuilder\included_front_css_incomplete\page_builder_front.less
Hi Guys,
Is there an elegant and update proof (Custom CSS code) way of moving the Search Icon from the Main Menu to the Top Header menu? Like this: http://goo.gl/yCsXvp
As you can see on my site http://www.techplanet.nl I don’t have any room left for a search icon/box in the main menu. So I want one in the top menu.
Hope you can help. Thanks in advance and keep up the good work.
thank you will try and let you know. thanx.
Hi,
I don’t thrust mobile emulators, we test on real phones and tablets.
You should make some test on real phones/tablets to see if the result is the same before applying custom css.
Use inspect on the elements you want to target and look for the wrapper. – http://screencast.com/t/2nL7D3mtR
Thank you, Emil G.
Hi,
Use the following css to fix the pagination and the search button issue:
.bbp-search-wrap .td-widget-search-input {
width: 558px !important;
}
.bbp-breadcrumb {
float: none !important;
padding-bottom: 10px;
}
#bbpress-forums .page-nav {
padding-bottom: 15px !important;
}http://screencast.com/t/Q1d77IVkP10Y
Thank you, Emil G.
