- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- NewspaperNewspaper Theme Support
- NewspaperNewspaper theme documentation
- NewspaperWeather Shortcode
- NewspaperCloudflare (CDN)
- NewspaperBest Of Forums
- TutorialsSystem status parameters guide
- NewsmagWhat’s included in Newsmag theme package
- NewsmagRequirements for Newsmag
- NewsmagNewsmag documentation
- Thumbnails vs. Featured image size
- NewspaperThumbnails – Fix strange looking images on blocks
- NewspaperRequirements for Newspaper
- NewspaperHow to Make the Site Faster
So first of all I’d like to thank you for creating an awesome theme. It really is doing its job on practically every level and so far I’ve encountered only 3 things that do not really suit me.
1. The scroll on mobiles is absolutely horrible for me (tested on Galaxy SII with android 4.1). Instead of going smoothly it’s choppy and requires me to tap the screen repeatedly to scroll up/down. Pointing out that the problem is not only on my site, same thing happens with your demo.
2. My website is in Polish so it requires usage of foreign letters (ą, ł etc.). All the letters appear just fine but when I turn on the tagDiv speed booster, the letters suddenly go lowercase arial (they’re just no longer being formatted).
3. Despite enabling the speed booster, google pagespeed is still throwing out that there is a ton of render blocking js/css (especially on mobile).
If you could help me resolve those 2 issues, I’m honestly giving 11/10 to this theme. Will immensely appreciate it!
HI, folks
for many of you (including us), we wanted to use slightly different method for the social media buttons at bottom of the post in the theme, and for some reason with the default theme setup and using Yoast SEO plugin, the Pinterest image would never populate even with all the Pinterest-friendly code in the head of the theme.
So, starting playing with using the WP AddThis plugin, however its main flaw (and those folks are really dumb in not updating to include the async code which EVERYBODY has been requesting for the pat year – and which can be easily fixed).
Finally, I took look at plugin and sorted out how easy it is to “hack that” for your site. While there are many choices for plugins, or managing “on page” code, we’ve found over the past five years, that the AddThis plugin when used async mode, actually is very consistent and doesn’t adversely impact our pages. Your mileage may vary. Still, think about how many websites have those little orange [+] buttons for sharing and AddThis has big installed base.
So, here is how to do this – was going to post this in my blog, and will later, but redoing my website right now and well, I just hacked our Newspaper theme site to do this, so thought I’d pass it along.
This assumes you will
1) turn off the social media option in the control/customizer panel for the theme, on posts.
2) download the AddThis plugin v 3.5.6+ (the one from the AddThis company) and open file in the plugin folder to edit one line;
3) upload the modified plugin to your /wp-content/plugins/ folder via FTP
4) activate plugin
5) choose settings for plugin as to whether you want the pill buttons with balloons showing number of shares/likes, or the speedier share buttons without the “phone homes” to get read/share numbers (which slow down your website and pagespeed, btw).
So, once you have plugin:
in the folder, you’ll be editing this file:
addthis/includes/addthis_addjs.php
You can edit in notepad, simpletext, or whatever (I use the awesome TEXTPAD 5 on Windows7); do not edit in a word processor like Pages, or OpenOffice, MS Word, etc.
around about line 166-167 you will see this:
function addWidgetToJs(){
$this->jsToAdd .= '<script type="text/javascript" src="//s7.addthis.com/js/'.$this->atversion.'/addthis_widget.js#pubid='. urlencode( $this->pubid ).'"></script>';
}
and you will simply change to: (YOURID is your publisher id you get when creating an AddThis account, which is free; includes tracking if you want that, zero cost, and no impact on SEO or link pollution). If you have no publisher ID, simply remove #pubid=YOURID — IMPORTANT, do *NOT* put in a publisher ID in the AddThis WP control panel as you’re manually over-riding the insert variable here.
function addWidgetToJs(){
$this->jsToAdd .= '<script type="text/javascript" src="//s7.addthis.com/js/'.$this->atversion.'/addthis_widget.js#pubid=YOURID#async=1"></script>';
}
To see this in action:
http://ga-ga.com/1204/beginning-adventure-space-time-reveals-roots-doctor/
Using this hack as of 12.25.13, but if you’re reading this a year later, we might be doing something totally different (view ‘source code’ for page to see whassup).
Hope tha helped somebody.
Once I get our server moved, and my website updated for our main company, my wordpress blog will be back, and I’ll include link to that for more of my little tidbits of tips.
HAPPY HOLIDAYS!
Already rebuilt the thumbnails, so that’s cool. Not all look good anymore with this theme, so still having to redo them.
I just wanted to add a feature image that is a reasonable size, like 326 x 235 as that will keep my website fast, but then it does not fit into all the places and looks bad most of the time, but if I upload 700 x 357 its a big file as I have over 300 posts on my site and by the time I add all those images that’s getting too big.
I know Google is going to complain about page speed and that affects my ranking, so I am trying to balance it all up.
If the large 700 x 357 placeholder did not keep showing up under category page at the top, then I would not use that large size anywhere, if you tell me how to remove that top post which just seemed to be pulled from the first post, then that should make things all work out.
I am happy to do css, htaccess and php as long as you are clear where I am making alterations, prefer custom css if possible, but not sure you have that with this theme.
Happy to sue a child theme, in fact after custom css, it would be my next best choice.
Hi Christopher, I was just about to ask you to help me with image sizes! lol
I was reading through all your speed up website stuff (spent last 2 days getting my basic website (with enfold theme) up to high numbers) it started of low but now have it at 80/100 mobile and 92/100 for desktop via Google page speed, and GTMetrix is now 99% and 92% and I wont be using CDN at this time so don’t expect to get much higher on the Yslow Grade.
Thanks for helping with the images, my website is at a standstill as I could not work out the images and kept trying to find a plugin and was looking at scripts and hating it! lol
Dont suppose you are able to answer any of my other problems? So wish I had not added the theme, my other one was set up perfectly, but I felt it was leaking juice all over the place and this site looked like it would be fast out of the box and leek less juice and work well for a silo, but now I just have to hide it and know it could be what I am still trying to fix on xmas day instead of having fun!
HI,
if you’re using a cache plugin with “page cache” on that should work.
Many hosting providers also run caching software of varying kinds, but not all websites may have that function depending on plan and how they setup VPS or containers for different customer classes. eacclerator, optcache, memcache, etc.
The .htaccess file goes in the root of your public document area (e.g., httpdocs/yoursitename/public – same place that wp-content lives), and is more easily seen with an FTP application that can show hidden files ( .htaccess is the file name – the dot makes it hidden ). Or, if you’re using something like YOAST SEO, there is an “edit files” option to make additions to the file (which is what I do). It is there, as WordPress writes it’s “rewrite” rules to that file. In your web hosting account there may be a “file manager” which would let you edit it, also.
Smush.it is the popular choice, however it only works on new files not existing ones. I think “regenerate thumbnails” may work when smushit is on, but check the help support on that for those plugins.
What amazes me are the problems you and I can’t do much about
a) issues with Google AdSense
b) issues with social media elements
c) issues with recaptcha (I just turned this off); powered by Google
d) issues with Disqus or any comment platform including the one from automatic
The most hilarious issue is that we installed Google’s “mod_pagespeed” system on our web server, and now it’s saying that there is a PageSpeed error since PageSpeed inserted three 1×1 pixel graphics and isn’t specifying their height and width.
Seriously?
So, basically from my experience wrangling this the past few months, if you want to know your real pagespeed run it with
1) ads off ! You will get pagespeed errors from Google ads.
2) social media off – you will get error from twitter
3) if you use Addthis, as we do – you need to hack the plugin to add the #async=1 option at end of javascript string.
It’s a process that will end up being frustrating at some point. No way around issues with Google’s own products generating errors. SO, they penalize page speed for using their services. Crazy.
-
This reply was modified 12 years by
simchris.
just a fun thing to try for those who don’t want to go through either Radu’s recommendations for optimization as well as my various notes in this forum, you might try Google’s currently free while in beta (basically it is free now, and may be free for years, or might be free for personal sites in 3 years but paid for commercial purposes)…. upshot you can have Google re-render your pages on the fly with their mod_pagespeed module in the cloud for your website for free:
see if this might be an option for some of you
https://developers.google.com/speed/pagespeed/service
this same system is used by the various “custom wordpress high speed hosting” companies out there (and I’m literally right now testing it on our new web server!).
If at some point in future Google charges for this, it might be something like $100 per year based on what they charge for their custom search tool for websites.
However, they have a neat tool to compare your site now vs what their system would do for you. Pretty cool stuff, really. An option for those unable to wrangle their own site properly. 🙂
See the threads on page speed. Follow Radu’s recommendations for how he got the demo theme to be 90+.
REF: https://forum.tagdiv.com/how-to-make-the-site-faster/ .
To save you having to read Everything on the forum:
Fonts can’t be optimized on your side or by the theme, as they live on Google’s website. Digg buttons are loading from Digg’s website. No way to optimize that. I don’t think sharedaddy is part of theme. You either have to load the font stuff locally and optimize CSS since Google “dings” their own stuff in PageSpeed (!) or switch to web-safe fonts (see my and other comments above on this topic).
For styles, you need to either minify if you don’t intend to modify for your site; or use a WP minify plugin. See my link to the site I use to minify my css and js code.
WP by default loads elements in the head and “enqueues” them to render the page. All WP sites will have a “render blocking code” in head error. For javascript (.js files) You would need to try the optimization plugin included with theme, or a WP plugin which moves the js to footer “elegantly.”
Hope that helped. 87 is a great starting point and that means you’re in the “zone of safety” as I like to call it. 85 or below is “bad” 87-89 is okay. 90+ is rockin’. 😉
Chris
-
This reply was modified 12 years by
simchris.
Hello,
Recently my mobile page has stopped working, and also page speed is quite slow.
website is http://www.thetechvoid.com
Can anyone help me?
Thanks,
Daniel
Hey guys, I´m still having problem using W3 Total Cache Plugin.
When I enable Minify JS, my background and “load more” button stop working.
I´m having this problem since older versions.
My site is too slow, I changed from Godaddy to Hostgator and It´s still the same.
I´m getting 62/83 points in Pagespeed, so I really need to do everything possible to make it better, including minify JS.
Please, what should I do?
website: http://emagrecersemdieta.com.br
thanks again!
vidapropria
1) reduce image sizes either by running compression plugin and/or adding compression factor to your functions file
2) faster server account, if you keep seeing “slow response from server” error — that was a [!] item on your last report speed check — nothing can be done about that with the theme, or in WP; that is how fast the account you have and your hosting provider is responding to ping/start showing the page. For example if you have a $5/month account, upgrade to $10/month account (I’m just using that as example). Low cost accounts are usually on a machine or VPS being shared with 1,000+ other sites. Slightly more costly hosting accounts give more resources to each site, by sharing the resource pool with fewer domains.
Verify deflate/gzip working; remember this only serves up faster versions of your content, but doesn’t optimize them prior to that. I think I saw a 100K image file in your last report … that is waaaaaaaaay too big. Try using smushit plugin and regenerate thumbnails to see if that helps? (Backup images first as changes to images on server will be destructive — meaning they are changed and cannot be unchanged).
Also, for testing if you’re using a child theme, be sure to try NOT using a child theme to see if that gains you a point.
However RECOMMENDED:
1) optimize images before/after upload
2) look at better hosting – if you keep getting “slow to respond” error from Google — no way around that on your side.
3) test without using DISQUS, as this does slow things down. We stopped using it for that reason. We’re leaning toward phasing out comments on most sites, per industry practice now that most comments tend to be trolls and arguments (see: CNN for example). Any comments plugin really slows stuff down on WP. Unless you gain ad revenue from 10,000 visitors per day, it’s not really an essential plugin, and more of a glamour thing (in my opinion).
4) turn off all jetpack stuff for speed test — anything that connects to the WP/Automattic mothership adds latency.
Hope that helped 🙂
————–
as an aside on pagespeed errors:
I’m actually dealing with even more arcane stuff like how to enqueue the parent Theme’s style sheet in the child Theme’s functions.php, to bypass the annoying @import not recommended error from Google which the Automattic folks seem to think is a non-issue. I will post my efforts on THAT noise if anybody cares.
[ UPDATED ]
I just ran your GPS test, and saw you’re up to 82/100 desktop. So, looks like you’re making progress. The images issue is the next thing you need to resolve. You’ll have several points for that, as reducing the footprint of your images speeds up page (e.g., if you go from 300K to 150KB; that’s 50% less time loading images!).
For the minification stuff… note you would need to use a plugin for that (WPminify) although this has some issues; -or- you need to manually minify SOME resources which are not already reduced in size. RADU doesn’t minify all the code as developers have a hard time modifying code if they can’t read it.
So, if you knew there were a couple of large CSS/JS files you might want to minify, you can easily do that using an online tool (I use this one, although it won’t work with IE11/Win7 properly … use Chrome or similar: http://refresh-sf.com/yui/ )
Basically, “minification” of CSS and Java/js files removes the extra spaces, comments, and line breaks to make file “more compact” … so if you had a 125Kb CSS file, by removing all the spaces, line breaks, comments, it might end up being 100Kb, which is the kind of reduction that PageSpeed looks at — the idea being if you had 5 files being loaded on page and you reduced all of them by 20kb – well, that’s 100Kb and is larger than what website developers like me used for the entire page and graphics 10 years ago (we used to shoot for 50kb max page load, if you can imagine that!) …
-
This reply was modified 12 years by
simchris.
vidapropria
Hi! Not sure if this weill help you or not, but note I previously shared how to do the htaccess .. remember it’s not the function of the “theme” to teach you how to optimize your website, you need to go research how to optimize your site, hosting account, optimize your images in Photoshop or similar prior to upload, etc.
Buying a race car doesn’t teach you how to drive — it can go 150 MPH/KPH but you have to take the wheel.
There are numerous resources on the net to learn how to set-up your web server account for gzip, expiration headers, optimize your images prior to uploading to your site, editing your htaccess file for WordPress, limiting use of resource hogging plugins unless absolutely necessary, etc., using W3cache with the minimal settings recommended in this forum from Radu/Marius (( QUOTE: w3 total cache use only the ‘full page cache.’ ))
You can see some info I shared here that might be helpful to optimizing YOUR site:
https://forum.tagdiv.com/topic/what-is-your-googlespeed-value/
Our site using Newspaper has “96” speed without using a cache plugin or CDN (yet). We followed “best practices” for managing a WP theme and proper server setup.
If you run a speed test on YOUR site (PageSpeed or GTMetrix, etc), then follow the changes you can make first, that is a huge step in optimizing YOUR site.
Radu/Marius … feel free to borrow from my posts to create a “sticky” on
“TIPS FOR PAGE SPEED OPTIMIZATION” or similar. 🙂
-
This reply was modified 12 years by
simchris.
We use W3 total cache and it is a beast. Absolutely speeds up your website, especially when you have a lot of content and a lot of visitors. We use page cache (memcached), browser cache and database cache (also memcached).