- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperBest Of Forums
- NewspaperHow to Make the Site Faster
Hi, Shashank
you know, I tried using a sub domain, and in our case with APC and mod_pagespeed I didn’t see much improvement since in theory once it’s cached, it’s not critical which locale on your server it comes from. I think there is some “number of connections” level where if you’re above that it CAN help, which I don’t recall off top of my head; maybe 15 or 20? Meaning if you were loading 50 images per page, then loading some off sub.yourdomain.xyz might speed things up. Again, you’d need to run some multiple speed tests on that to see how many msec you save.
And do something logical like
pix.mysite.zyz >> all portfolio images
mysite.xyz/images/ >> all business images
or something like that, otherwise you might end up with a nightmare of organization remembering what is where. 🙂
ALSO: remember a homepage is always a “special case” where loading many small compressed thumbnails doesn’t add much overhead. I think one of mine has 60+ images on it, also.
But remember most people these days don’t start at your home page, they start on a post found from social media, etc. (unless you’re tracking audience entry points and know the homepage is that critical for speed).
Hi,
I’m trying to improve the performance of my site (http://admitto.nl), which is now at 49% for mobile and 65% for desktop with Pagespeed). This is however the max I’ve been able to reach. Do you have any more tips or tricks?
Im using the Newspaper theme with the following plugins:
ClickDesk Live Chat
Contact Form 7
Google Analytics Dashboard
Hide Title
MailPoet Newsletters
Custom Anti-Spam
Recent Tweets Widget
Share buttons by AddtoAny
tagDiv Social Counter
tagDiv speed booster
W3 Total Cache
Wordpress SEO
WP-Optimize
WPBakery Visual Composer
WP Smush.it
I know these are a lot of plugins, but I don’t think they influence the performance that bad. Pagespeed is mainly complaining about compressing CSS/JS. Any ideas here?
Thanks in advance!
Hello,
I need to optimize my images but i can’t find a good plugin for the job. I mainly use PNG pictures on my site.
I’ve checked out the ‘Pagespeed’ topic on the forums but people recommend ‘EWWW Image Optimizer’, but unfortunately i can’t use this plugin because i get the error:
EWWW Image Optimizer requires exec(). Your system administrator has disabled this function.
Are there anymore plugins i can use that don’t affect this theme?
Many thanks 🙂
Actually, if you’re using mod_pagespeed and caching on your server, then (at least in our case), our images load faster via local cache after the first visit. And you have no control over the issues you’re having – you can’t change the URLs as used by Photon as the CDN likely uses the ?= for cache control to manage updates automatically.
Always a trade off on that stuff. And you would need to do some actual tests on “page load speeds” for the images to see how that works.
In our case, our dedicated server with APC and mod_pagespeed was faster than Amazon’s CDN after first load, unless somebody happened to be in a really far away country.
Your mileage may vary, obviously. But only way to get around the issues with outside sites impacting your rating, is simply not to use them 🙂
You might have a wait. Not everybody who is on the forum has time to fix your server for you. Your first chore would be to read through all the posts in the PageSpeed topic where many folks, including myself, have provided a wealth of FREE advice on how to optimize your server, pagespeed, caching, htaccess and set your server settings properly for gzip/deflate, time to live headers, etc.
The “tagdiv speed booster” plugin is only designed to help with issues of loading js and css files in the most efficient manner for the theme; it doesn’t do anything for your server side caching, account speed on the net (response time), gzip/deflate, expiration headers, or image compression. Put another way it’s not a “config file” for your server, it’s preset to speed up the theme, rather seamlessly in most cases. While you can add to it, if you need to have an additional plugin or something “optimized” for loading when theme pages load, it will NOT fix issues on your server or the content you upload.
Advice would be to first optimize your site content such as using GTMetrix to check your site for server side elements which need to be addressed FIRST, then move on to elements which can be addressed via htaccess, optimize images, and the like. Do all your checks with mod_pagespeed off as this caches elements while you’re working on things. Set the tagdiv speed booster last (only edit it if you understand what you’re doing); then when you have a decent setup, then switch on mod_pagespeed.
However, as noted in the PageSpeed topic, gzip/deflate, expires headers, and the like are good for 20 points all alone. Most common issue if your score is below 80 desktop.
Also, remember this forum provides theme support from the developer, not server management support. You need to learn to manage your server and hosting setup, and this is necessary regardless of what theme you run. So, unless you address those issues first, then the elements to fix in WordPress will not be very effective.
I’m sure Marius will be happy to help with questions on the td_speedbooster plugin included with the theme, but you really should read through the PageSpeed topic since I’ve provided a wealth of advice, and how-to elements there which are critical to optimizing your site — including my own mod_pagespeed settings!
Always glad to help 🙂
I’ve been tweaking PageSpeed on a daily basis since we setup our new web server last December (or rather, I started last year on this topic, but then ran into needing new web server in order to run mod_pagespeed). We run a mix of both WordPress and old-school shtml sites, and so it’s been a challenge to optimize some things for both, especially on our main business website where we have 15 years of static content, wordpress ‘blog’ and then new area for content using wordpress, plus ecommerce area, all on one domain. Fun times! 🙂
I’m super happy with Newspaper, as the devs have been one of the *few* WP devs who understand that it’s not good anymore to have 12 js files and 5 css files linked from every page. One theme I looked at the other day “required” a child theme, and had 15+ js/css files, and one loaded from the child theme not the parent theme. Really nice theme, but very badly architected for modern PageSpeed.
So, in case I haven’t said so lately to Radu and co. BRAVO!!!!!!!!!!!!
Great theme + great suggestions + some smart work = My score is 97 🙂
https://developers.google.com/speed/pagespeed/insights/?url=www.styzic.com
Well, in my own testing photon did NOT work properly on numerous fronts as it’s not the best way to manage optimization and placement, at least on our sites. It’s loading those images off wp.com and not your own site, so it will be slower and not managed locally by your own site/server speed. A lot of that stuff is for newbies who don’t want to dig in and manage their own site; it’s not for power users at all!
If you look through my posts on this topic, try instead
1) changing default setting for WordPress which uses server side imagemagik modules, change in functions.php by adding directive to set quality at 60 (default is 90)
2) use the plugin for auto creating featured images
3) use the plugin to auto resize images from featured image
These help to manage correct sizes, optimized images without going through another server (wp.com), and I don’t get warnings about any image issues from PageSpeed.
Can somebody please setup my speedbooster.php file according to pagespeed as descibed above. It will be really helpful. Thanks
Hi again, So I get the following scores on http://www.styzic.com
Desktop = 97
Mobile = 60
https://developers.google.com/speed/pagespeed/insights/?url=www.styzic.com
On desktop adsense ads are enabled and it’s still fair and better than theme demo page ( score = 90). But two things that are annoying for on mobile are:
1) Optimize Images: I have optimized all images and this warning does not show on desktop but only on Mobile. When I turn jetpack photon off the warning is gone. Jetpack uses quer strings to resize images and that’s the reason.
2) Eliminate render-blocking CSS: This warning doesn’t occurs for js as they are defered. My css are at the bottom of the page but still this warning appears. I’ve minified the css files.
So, any bdy out here who might be so generous to help with Photon and async css?
I’ve tried all plugins in the sticky threads here but none of them could async the 3 css files.
Thanks, Shashank 🙂
I tried many times to clear render blocking css and JS but not successful. I hope someone here will help me out.
Here is my speedbooster.php file
<?php
/*
Plugin Name: tagDiv speed booster
Plugin URI: http://tagdiv.com
Description: Speed booster for Newspaper theme - It moves the styles and all the scripts of the theme to the bottom. It also activates internal theme optimizations for better speed.
Author: tagDiv
Version: 2.5
Author URI: http://tagdiv.com
*/
/*
* 2.6 - fixed rendering bug on the loading of the page
* 2.5 - code improvements, newspaper 4 compatibility
* - makes most of the javascript files use defer parsing
* - better compatibility with revolution slider
* 2.4 - updated jquery version
* - support for https
* 2.3 - fixed warnings when trying to move javascript files that are not registered
*/
class td_speed_booster {
var $load_contact_form_7 = '';
var $load_google_fonts = '';
var $styles_for_footer = array();
var $async_js_scripts = array(
'contact-form-7',
'bbpress',
'woocommerce',
'site',
'devicepx',
'js_composer_front'
);
function __construct() {
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts_hook'), 100);
add_action('wp_footer', array($this, 'wp_footer_hook'), 15);
add_action('wp_head', array($this, 'wp_head_hook'), 15);
define('TD_SPEED_BOOSTER' , 'v2.5');
}
function enqueue_scripts_hook() {
global $wp_scripts;
//$this->move_js_to_footer('bp-legacy-js');
//detect revmin - revolution slider and do not move jquery
if( !is_admin() and !isset($wp_scripts->registered['revmin'])){
if (is_ssl()) {
$td_protocol = 'https';
} else {
$td_protocol = 'http';
}
wp_deregister_script('jquery');
wp_register_script('jquery', ($td_protocol . '://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'), true, '1.11.0', true);
wp_enqueue_script('jquery');
}
//move styles
$this->move_style_to_footer('bbp-default-bbpress'); //bpress old
$this->move_style_to_footer('bbp-default'); //bpress
$this->move_style_to_footer('contact-form-7');
$this->move_style_to_footer('td-bootstrap');
$this->move_style_to_footer('td-theme');
$this->move_style_to_footer('google-font-rest');
$this->move_style_to_footer('woocommerce_frontend_styles');
//jetpack lost styles
$this->move_style_to_footer('jetpack-subscriptions');
$this->move_style_to_footer('jetpack-widgets');
$this->move_js_to_footer('themepunchtools');
$this->move_js_to_footer('revmin');
//bbpress
//remove_action( 'bbp_head', array($BBP_Default, 'head_scripts') );
}
function wp_footer_hook() {
$current_theme_version = '';
if (defined('TD_THEME_VERSION')) {
//get the theme version for style
$current_theme_version = TD_THEME_VERSION;
//on demo mode, autogenerate version hourly + day
if (TD_DEPLOY_MODE == 'demo') {
$current_theme_version = date('jG');
}
}
foreach ($this->styles_for_footer as $style_id => $style_src) {
echo "<link rel='stylesheet' id='" . $style_id . "-css' href='" . $style_src . "?ver=" . $current_theme_version . "' type='text/css' media='all' />\n";
}
}
function wp_head_hook() {
if (defined('TD_THEME_VERSION')) {
echo '<style>body {visibility:hidden;}</style>';
}
}
function move_style_to_footer($style_id) {
global $wp_styles;
if (!empty($wp_styles->registered[$style_id]) and !empty($wp_styles->registered[$style_id]->src)) {
$this->styles_for_footer[$style_id] = $wp_styles->registered[$style_id]->src;
wp_deregister_style($style_id);
}
}
function move_js_to_footer($js_id) {
global $wp_scripts;
if (isset($wp_scripts->registered[$js_id])) {
wp_enqueue_script($js_id, ($wp_scripts->registered[$js_id]->src), '', $wp_scripts->registered[$js_id]->ver, true);
}
}
function async_js_hook($url) {
//check to see if we have js
if (strpos( $url, '.js' ) === false) {
return $url;
}
if ($this->strpos_array($url, $this->async_js_scripts) === false) {
return $url;
} else {
return "$url' defer='defer";
}
}
private function strpos_array($haystack_string, $needle_array, $offset=0) {
foreach($needle_array as $query) {
if(strpos($haystack_string, $query, $offset) !== false) {
return true; // stop on first true result
}
}
return false;
}
}
new td_speed_booster();
And here is my function generated file
registered scripts
common | /wp-admin/js/common.min.js
admin-bar | /wp-includes/js/admin-bar.min.js
utils | /wp-includes/js/utils.min.js
svg-painter | /wp-admin/js/svg-painter.js
wp-auth-check | /wp-includes/js/wp-auth-check.min.js
itsec_file_change_warning_js | http://mydomain.com/wp-content/plugins/better-wp-security/modules/free/file-change/js/admin-file-change-warning.js
itsec_strong_passwords | http://mydomain.com/wp-content/plugins/better-wp-security/modules/free/strong-passwords/js/strong-passwords.js
devicepx | http://s0.wp.com/wp-content/js/devicepx-jetpack.js
wpuf-subscriptions | http://mydomain.com/wp-content/plugins/wp-user-frontend-pro/assets/js/subscriptions.js
wp-color-picker | /wp-admin/js/color-picker.min.js
jquery |
media-upload | /wp-admin/js/media-upload.min.js
thickbox | /wp-includes/js/thickbox/thickbox.js
wpuf-chosen | http://mydomain.com/wp-content/plugins/wp-user-frontend-pro/admin/../assets/js/chosen.jquery.js
wpseo-admin-global-script | http://mydomain.com/wp-content/plugins/wordpress-seo/js/wp-seo-admin-global.min.js
td-wp-admin-general | http://mydomain.com/wp-content/themes/Newspaper/wp-admin/js/general.js
td-wp-admin-panel-js | http://mydomain.com/wp-content/themes/Newspaper/wp-admin/js/wp-admin-panel.js
suggest | /wp-includes/js/jquery/suggest.min.js
registered styles
admin-bar | /wp-includes/css/admin-bar.min.css
colors | 1
ie | /wp-admin/css/ie.min.css
wp-auth-check | /wp-includes/css/wp-auth-check.min.css
itsec_notice_css | http://mydomain.com/wp-content/plugins/better-wp-security/core/css/itsec_notice.css
wp-color-picker | /wp-admin/css/color-picker.min.css
wpuf-chosen-style | http://mydomain.com/wp-content/plugins/wp-user-frontend-pro/admin/../assets/css/chosen/chosen.css
google-font-ubuntu | http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic
td-wp-admin-td-panel-2 | http://mydomain.com/wp-content/themes/Newspaper/wp-admin/css/wp-admin.css
thickbox | /wp-includes/js/thickbox/thickbox.css
wpalchemy-metabox | http://mydomain.com/wp-content/themes/Newspaper/wp-admin/content-metaboxes/meta.css
ithemes-icon-font | http://mydomain.com/wp-content/plugins/better-wp-security/lib/icon-fonts/icon-fonts.css
bbp-admin-css | http://mydomain.com/wp-content/plugins/bbpress/includes/admin/css/admin.css
jetpack-icons | http://mydomain.com/wp-content/plugins/jetpack/_inc/jetpack-icons.min.css
Here what my pagespeed test suggest
Remove Render Blocking Javascript
http://mydomain.com/wp-includes/js/jquery/jquery.js.pagespeed.jm.ocognCjcS2.js
http://mydomain.com/wp-includes/js/jquery/jquery-migrate.min.js.pagespeed.jm.mhpNjdU8Wl.js
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/maps-api-v3/api/js/17/15/main.js
http://mydomain.com/wp-content/plugins/wp-user-frontend-pro/assets/js/frontend-form.js.pagespeed.jm.DduuMTRcHs.js
Optimize CSS Deliver of the following
http://mydomain.com/wp-content/plugins/revslider/rs-plugin/css/W.settings.css,qrev=4.3.8.pagespeed.cf.DyIPD1r_80.css
http://mydomain.com/wp-content/plugins/revslider/rs-plugin/css/W.captions.php,qrev=4.3.8.pagespeed.cf.VUw1T7K7S2.css
http://mydomain.com/wp-content/plugins/wp-user-frontend-pro/assets/css/W.frontend-forms.css.pagespeed.cf.vemqQTxrMU.css
http://fonts.googleapis.com/css?family=Roboto%3A400%2C700
I am also using Dreampress which is on varnish cache. I enabled Page Speed Mod as well. No other caching plugin.
My Page Speed Score is 64 for desktop and 41 for mobile.
Further, Here is what i added in my httaccess
<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedModifyCachingHeaders off
</IfModule>
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
#ExpiresByType text/html "access plus 600 seconds"
#ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
Now please suggest me what to do for increasing my page speed. My site is damn slow. Please help me to correct the speedbooster.php file as per instructions. Special request ot Christopher for helping me out. Thanks
we use APC along with mod_pagespeed 🙂
My pleasure. I ended up not using cache plugin, since mod_pagespeed does great job in combination with server-based cache since it doesn’t have to run through the php system or wordpress code as a caching “plugin” does. You *can* use one, but I found it didn’t help much really and caused too many issues when I need to update a page or template.
Trick is knowing how to clear the cache on server when you go to update the theme to clear out everything before and after upgrade so web browsers can “see” the new versions of the style sheets.
But I think you’ve got it 🙂
Varnish is often used at server level, and that is the Dreamhost interpretation. You often need to let them know you’re running a WordPress site, or visit your control panel to tweak the settings for the cache. Since this runs on server “above” the typical second-tier plugins like W3 or Total Cache, you should not have to use the plugins stuff at all.
However, with mod_pagespeed running also, there are some things you will want to tweak (you can see my settings in the pagespeed sticky topic; but Dreamhost will likely have some things which can/cannot be set to “on” by using either your control panel or .htacess file declaration at top — again, see my settings in the forum pagespeed topic here).
Also, remember when testing that a page is slow first time when being cached, then subsequent visits are cached on server.
However, I’d likely
1) do a Google search for
Dreamhost DreamPress Varnish + Mod_Pagespeed + WordPress
2) check with your hosting provider (Dreamhost) for optimum setup for Varish and mod_pagespeed for WordPress, since they deal with that all the time and may even have a support FAQ on the right settings to use.
The combination of Varnish and mod_pagespeed is truly awesome. We are using APC opcode cache + mod_pagespeed on our server.
Normally the main issue is connecting mod_pagespeed to Varnish for caching so that mod_pagespeed can see updated content properly, but I’m certain DreamHost would have that properly connected by default or nothing would work right.
Hope that helps.
Upshot: with Varnish and Mod_pagespeed (aka “GPS”), you should not need to run a caching plugin (in theory).
The developers recommend to use W3 Total Cache. Also, checkout the Pagespeed topic for some great tips from some other guys.
I am using dreampress + Newsletter Theme, and found that my site is really slow. I enabled PageSpeed mod from domain management settings but this doesn’t affect a lot. Any solutions for using varnish cache with this theme?
Thanks
Hi again 🙂
Question, i’m trying to defer parsing of javascripts by adding this code to the theme’s functions.php
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );Works great! Only the images disappeared from the posts.
I guess i have to exclude some javascripts, but which one, and how?
Thanks!
Hi, Mehedi
I usually try to use the js and css minifier links I’ve posted couple of times in the pagespeed topic …
You can also “try” to use the GTmetrix optimized versions they do for you, but I usually only minify the main couple of files (don’t recall which ones at the moment)…
You can try these
http://javascript-minifier.com/
I use the CSS one all the time.
Hi
I got 90 on desktop and 64 on mobile for my page speed of my site. I know there is lots of tips on the Pagespeed topic but I couldn’t figure out how to minify JS the right way so that it doesn’t break the slider and other JS of the theme.
@christopher , I know you might know how to fix it. So, please help.
@Manuel Fink
1) you have graphics loading from another website as part of your “network”
2) you don’t have the option in mod_pagespeed to insert image dimensions, if you’re using mod_pagespeed
ModPagespeedEnableFilters insert_image_dimensions
HI, JBH
I will be offering this service again soon, but I’m knee-deep in redoing our sites, and was sick (with it turns out onset diabetes) and so I was REALLY REALLY sick for 2-3 months (April to early July). I’m waaaaaay behind on my own stuff, sadly.
Also my note about the functions.php compression setting should have said change to “60” not “6” … which obviously would not work.
Also, I charge $60/hour for this stuff, so not cheap. But I’ve been doing design for 30 years, webdev since 1994, and WordPress since 2006.
Anyway… “optimization” is a process. Do what you can in baby steps. From your test page, the Yslow stuff might be addressed first.
