- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Hello,
@GZAM – to optimize the delivery of the fonts you can create a colection on google fonts and use a single url to that collection to add them to the page.
The collection url for the default fonts is this: http://www.google.com/fonts#ReviewPlace:refine/Collection:PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700
and we via the speed booster plugin we load just one request with all the fonts:
http://screencast.com/t/s2uW3suSDHT instead of 5 (the ensues bellow are used on a default install to allow easy font changing)
After you decide on the fonts you can do a collection of them on google fonts and embed them all in one url.
@GZAM – do you want to use custom webfonts or web safe fonts?
@Christopher – we don’t change the jpeg compression quality for compatibility reasons.
@Christopher we are working on a new panel, new font system and new css generator for the theme. Also we will do most of the templates in the old wordpress way so people can modify it easier. Version 3 will be a major rewrite and I hope people will not kill us for changing so many things 😉
Thanks Christoper for all the comments here on our forums, I really appreciate this and if you have any requests/suggestions or need help feel free to contact me anytime contact@tagdiv.com .
Hello,
Do you mean about this button: Edit CSS http://screencast.com/t/bFWLCwBM0
Strange, on our developing we have this as you can see in the screenshot.
Thanks
Hello, I did it that night )))
There are no need to insert code at all.
It works with only VK API.
Tell me, code in style.css I need to add it in style.css to the end of file or which place?
Hello,
Only what you can do is to hide the sidebar on mobile via CSS. (or put the sidebar on right side)
Sorry for the inconvenience!
Thanks for the message!
btw, we used font squirrel to repackage open sans to use on our CDN vs loading from Google, and used minified CSS to load the regular, true bold, and true italic versions of fonts, along with the varied font formats for Windows, Mac, iPad, etc.
Brain numbing to do, but worth it if you’re nuts about using custom fonts and speed, and compatibility with stupid IE9/10. Not sure if IE11 has the same issue or not (not rendering italic or true bold Google fonts properly).
I thought Radu or Marius said someplace that better font selection was one of the action items on their custom admin panel, since the current setup is hampered just a little bit by the built-in WP panel they have built options into.
But yes, having option to use web safe fonts would be an excellent option to see in an upcoming version.
Of course always good to remember that Google kind of gives some false positives on
1) fonts
2) adsense
3) recaptcha
4) google+ buttons
they find errors in their own code being loaded on the page; such as image dimensions on ad units missing, CSS for font styles loading off their CDN, recaptcha images needing “more optimization” etc.
A good “goal” for Page Speed right now, based on industry think, is
target desktop = 90 or higher
mobile = 80 or higher
anything below 75 mobile and below 85 desktop would be considered “poor”
but the world won’t crash into the sun if you have a heavily loaded page getting 79 mobile and 89 desktop for the forseeable future, as that is still above the average for 90% of the web.
another well thought out response – thanks Christopher. If we could have a check box to just use web safe fonts and not use any google fonts, would that not also remove the css loading?
I only see any option to use google fonts, and personally I would prefer to use non-google fonts.
not a huge issue I guess – although it is fairly common for themes to provide the option between web safe vs. google fonts.
cheers…
Just fyi on web fonts …
since the fonts are being loaded from Google’s CDN, there isn’t really any way to “optimize” Google’s loading of those fonts in the way some of you may think – how can the theme optimize something living on Google’s CDN ?. Although “technically” one might remove the &ver=3.71. for some very minor compliance in moving away from that kind of versioning data in WP.
How we did it on our static main business site (not running WP except for news and blog areas, but it’s the same concept in how you might “super optimize” YOUR setup), was we downloaded the equiv fonts (Open Sans family), created style sheet, uploaded both CSS and fonts to our own CDN (S3/CloudFront), setup CORS rules, and now load the fonts off of Amazon’s cloud where we could set expiration times of one year, and compress, etc. In our case we did it both to control all the font parameters for PageSpeed and also the whacky bug in IE for not loading the true italic version of fonts off Google’s CDN without manually inserting calls to all font versions one at a time for IE which results in loading 8 font families per page). Using a custom style sheet to load all the fonts, we load just ONE file for the reg/reg italic, bold/bold italic and solve two issues with Open Sans.
For “most” people you need to setup your compression, and time to live (expiration headers) on YOUR end of things before anything else – that is not a function of the theme. Google how to do that, or contact your hosting provider. Then move on to the other stuff. As GZAM pointed out, and as I have previously, the compression and expiration headers alone account for about 20 points or more in Google Page Speed.
Fonts are a tricky bit, where any “designer” fonts, slow down page regardless, as they have to be loaded from somewhere. For those looking for “fastest speed” once everything else is done, you might have to NOT use custom fonts at all, and sub out Trebuchet MS for the menus, and something like Georgia or Arial/Helvetica for the body text.
Spending the $2 a month for Amazon’s CDN (or similar) is one way to speed up your fonts, vs loading them from Google directly, but that is something you need to try, modify, test, modify, test. For example, we use Font Awesome, and we tested loading that off the cloudflare hosted version vs our CDN on Amazon – Amazon was faster so we load that from there.
Not sure if any of that helps. It is a process, not a one click thing to optimize a page for ‘speed’ — there is NO “one click” solution out there due to complexity of servers, content, and everything being loaded on the page.
For example on optimization — if you want faster speed, what about image compression level using built in functions of wordpress? Did you know you can use a plugin or function to increase the compression level of the thumbnails appearing on the pages? Smaller files there make page load faster even before server side gzp/deflate. These are the kinds of things you need to research if trying to optimize your site for fasted load times.
For example, you could set the compression of images to something like 60% or even 50% in your child theme functions.php … will only change level on new images uploaded unless you use the regenerate thumbnails plugin or similar.
add_filter( 'jpeg_quality', create_function( '', 'return 50;' ) );
I’m not sure what Radu has the quality set to by default, but increasing the compression even 10% from the default improves speed.
Additional ref:
switch ( $mime_type ) {
case ‘image/jpeg’:
return imagejpeg( $image, $filename, apply_filters( ‘jpeg_quality’, 90, ‘edit_image’ ) );
case ‘image/png’:
return imagepng( $image, $filename );
case ‘image/gif’:
return imagegif( $image, $filename );
default:
return false;
}
Google’s webpagetest.org actually recommends quality level 50 for web images.
We are shooting for “60” at the moment (60/100 compression is not percentage of compression, btw).
Hi,
Once I activated the buddypress plugin i am missing the edit css section under “Appearance”. Is this a know issue of what do you believe could be causing this? I have deactivated the plugin as well as other plugins and the issue remains.
I once had this issue before and it was due to a cookie edit i had placed on my wp-config.php file, but this is not the case now. Please advise.
Thank you.
Hi – just my 2 cents –
before doing anything (theme out of box on new shared server) – had page speeds of 45 mobile and 58 desktop
then, added gz deflate code to htaccess file, and configured W3 total cache – and now my google page speeds are: mobile 75 and desktop 92 – and I am fine with it
In my opinion, for shared servers – wordpress isn’t going to get much faster than that…
the gz deflate had the most increase (I forgot to track the exact increase – but it was over 20) – if someone needs to know how to do this – I would recommend asking support on your hosting site –
I added back “addthis” plugin – and desktop speed only went down to 91 – but for me totally worth the “add this” value…
I should also note that I currently do not run ads on my sites (still developing content) but I agree that will slow it down a bit (that was mentioned)
One thing I would like to know if the theme could clean this up though (from google speed test)
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700&subset=latin%2Ccyrillic-ext%2Cgreek-ext%2Cgreek%2Cvietnamese%2Clatin-ext%2Ccyrillic&ver=3.7.1
http://fonts.googleapis.com/css?family=Ubuntu%3A300%2C400%2C500%2C700%2C300italic%2C400italic%2C500italic%2C700italic&subset=latin%2Ccyrillic-ext%2Cgreek-ext%2Cgreek%2Clatin-ext%2Ccyrillic&ver=3.7.1
http://fonts.googleapis.com/css?family=PT+Sans%3A400%2C700%2C400italic&subset=latin%2Ccyrillic-ext%2Clatin-ext%2Ccyrillic&ver=3.7.1
http://fonts.googleapis.com/css?family=Oswald%3A400%2C300%2C700&subset=latin%2Clatin-ext&ver=3.7.1
http://fonts.googleapis.com/css?family=Roboto+Condensed%3A300italic%2C400italic%2C700italic%2C400%2C300%2C700&subset=latin%2Ccyrillic-ext%2Cgreek-ext%2Cgreek%2Cvietnamese%2Clatin-ext%2Ccyrillic&ver=3.7.1
I have some problems with related post apper bottom of my posts. The images are full, and gtmetrix report errors “serve scaled images” (The following images are resized in HTML or CSS. Serving scaled images could save 1.0MiB (83% reduction).) You can show in
http://gtmetrix.com/reports/vivirenelmundo.com/7aU2JRGD
Thanks
Vivir en el mundo
Hello,
The menu is the same, probably you don’t have the right sprite images or css. What version of the theme do you have?
Please make the full update again, replace all files via FTP.
Can you show us your site URL.
Thanks for the message!
tanks Christopher portal
result or page 69 -100 mobile
result desktop 83 – 100 mobile
thema NEWSPAPER
mobile 91 – 100
desktop 97 – 100
97 developer could think he can show how to get the files that score
example files and hack
. htpacces
plugins
css (hack)
crop image
developer newspaper help?
I wish the developer wordpress thema newspaper
We show how you got that score 97-100 in thema
example files and hack
. htpacces
plugins
css (hack)
crop image
for us who bought the thema because the score
Hi, PhilDbz
we like the addthis plugin since you can customize how you want it to look, specify the buttons you want always on, etc. In our case over the past many years, we had more trouble with sharethis than addthis, but it’s personal preference kind of like disqus vs livefyre etc (we’re moving to “no comments” on some sites due to nonstop forum spam).
On our main business site we hand code that into the layout then load the addthis stuff via async.
Addthis seems to work well when checking for pagespeed, too, although all those things throw up the usual js/css “warnings” …
anyway point was, addthis does allow you to have the buttons with the likes/numbers. I went without those as it slows down page to go get that data for the visitor, who generally could care less how many other people have liked something on FB.
Would you like to conquer all 97 tasks 100
example
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdemo.tagdiv.com%2Fnewspaper%2F
example .htpacces cropping images css changes
waiting
Salut, imi puteti zice cum sa mut textul mai la dreapta la similar articles? http://house-language.me/wise-d-kobe-do-it-again-ins121/ jos imaginea e la 300×300 si textul e mai la stanga. Era un cod ce trebuia adaugat la css dar nu mai am emailul.
Excuse me, I ask 4 favors.
1) to change the color theme style.css way, the goods, Partial says exactly where to insert the code?
02) pages in the post, I want to add author name, time of insertion, modification time, it tells me where I can enter the command and where can I find the command?
view link http://www.cataniaoggi.com/_/wp-content/uploads/2013/12/data.jpg
03) in the home, as seen in the large slide, the title is cut the rest is changed with dots, how can I avoid this?
view link http://www.cataniaoggi.com/_/wp-content/uploads/2013/12/home-titolo.jpg
04) when I insert a post in a category, there ‘the possibility’ like delays the child category
05) how can i delete, view link
http://www.cataniaoggi.com/_/wp-content/uploads/2013/12/delete.jpg
thanks for what you can ‘help me,
the site cataniaoggi.com
Hello,
The speed booster plugin brake the theme color(is in beta) If you want to change the color and use the plugin to, you have to change the theme color via style.css
Thanks
Hello,
1. Add this in style.css
.entry-crumbs a, .entry-crumbs span {
color: #3f48cc !important;
}
2. http://screencast.com/t/1HPI6uIu
3. http://screencast.com/t/KGnsNvURAR
Thanks for the message!
Hello,
You can edit the style.css directly from wordpress http://screencast.com/t/cvFz6E0h5FW
If you want you can give me access to your wordpress and I will take a look.
Send via email at contact@tagdiv.com
Thanks
Ok, didn’t seem to make a difference. I’ve attached a screencap of my style.css file

Hello,
you can change the theme color from theme customizer: http://screencast.com/t/eYxiKtweBh
or you want just on sidebar? – that would need custom css code.
edit the homepage using visual composer: http://screencast.com/t/VXSXVorL6Kx
and
http://screencast.com/t/8ZcEQcnH
Hope this helps 🙂
-
This reply was modified 12 years by
Radu.