Search Results for 'optimize'

lucian hi. i run optimise tool to reduse size images and i saw that! .

The theme makes 17 resizes images for any uploaded image! is this normal?

Optimized image: 2014/11/black-pearl-009.jpg
Full size – Reduced by 5.8% (13,5 kB)
black-pearl-009-83×83.jpg – No savings
black-pearl-009-345×225.jpg – No savings
black-pearl-009-700×458.jpg – Reduced by 0.6% (241,0 B )
black-pearl-009-80×52.jpg – No savings
black-pearl-009-700×357.jpg – Reduced by 0.8% (260,0 B )
black-pearl-009-100×65.jpg – No savings
black-pearl-009-100×65.jpg – No savings
black-pearl-009-326×159.jpg – No savings
black-pearl-009-326×235.jpg – No savings
black-pearl-009-326×406.jpg – Reduced by 0.9% (159,0 B )
black-pearl-009-700×357.jpg – No savings
black-pearl-009-1074×483.jpg – Reduced by 1.5% (853,0 B )
black-pearl-009-545×357.jpg – Reduced by 0.2% (42,0 B )
black-pearl-009-738×483.jpg – Reduced by 0.9% (403,0 B )
black-pearl-009-745×483.jpg – Reduced by 0.7% (313,0 B )
black-pearl-009-210×210.jpg – No savings
black-pearl-009-198×143.jpg – No savings
Elapsed: 2.014 seconds

You need to read the docs on how to optimize the site for pagespeed as you have numerous issues with the server setup, image optimization, etc. Please see the docs for the theme from the forum navigation bar on how to optimize your site for “speed.”

@Danijelmo
You don’t need to post the same thing over and over.

Try testing your site with GTMetrix.com as it will tell you specifically what your site problems are and classify them by things like “Server” “Images” etc., with explanations.

Did you setup gzip/deflate on your server? [looks like you did!]

Did you edit your htaccess file (if applicable) to add expiration headers (e.g., mod_expires settings)?

Did you install an optimization plugin for images/thumbnails or change the default setting in your functions.php file?

Are you using the tagdiv speed booster plugin?

Did you disable system hogs like jetpack? Disable all plugins you’re NOT using?

Are you using a caching plugin once all of the above is working?

————

based on this you have some issues:
http://gtmetrix.com/reports/crnjaci.com/fxrIs409

1) you’re loading images off wp.com instead of your own locale; using a CDN for un-optimized images doesn’t make them load any better
2) you need to add instruction to the functions.php file to remove query strings (see my help on that in the pagespeed sticky topic)
3) you have some ridiculously huge images….
•http://i2.wp.com/crnjaci.com/wp-content/uploads/2014/08/IMG_0380.jpg?fit=1024%2C1024 is resized in HTML or CSS from 768×1024 to 291×388. Serving a scaled image could save 253.5KiB (85% reduction).
•http://i0.wp.com/crnjaci.com/wp-content/uploads/2014/08/10250323_10152304836090758_9213683227347813057_n.jpg?fit=1024%2C1024 is resized in HTML or CSS from 1024×768 to 291×219. Serving a scaled image could save 245.6KiB (91% reduction).
•http://i1.wp.com/crnjaci.com/wp-content/uploads/2014/08/DSC03988.jpg?fit=1024%2C1024 is resized in HTML or CSS from 1024×768 to 291×219. Serving a scaled image could save 241.2KiB (91% reduction).
•http://i1.wp.com/crnjaci.com/wp-content/uploads/2014/08/IMG_0594.jpg?fit=1024%2C1024 is resized in HTML or CSS from 768×975 to 291×370. Serving a scaled image could save 238.1KiB (85% reduction).
•http://i2.wp.com/crnjaci.com/wp-content/uploads/2014/08/IMG_0213.jpg?fit=1024%2C1024 is resized in HTML or CSS from 1024×683 to 300×200. Serving a scaled image could save 228.1KiB (91% reduction).
•http://i1.wp.com/crnjaci.com/wp-content/uploads/2014/08/10568980_10150651663339953_7674800880872619968_n.jpg?fit=1024%2C1024 is resized in HTML or CSS from 960×720 to 291×219. Serving a scaled image could save 199.1KiB (90% reduction).

Looks like you need to seriously look at your image optimization problems as your images look to be way too big when actually served on the pages.

Wny would you have a 250kb+ image file? A 1024×768 image if properly optimized should be no more than maybe 75kb.

BTW: optimizing your server/site for PageSpeed is YOUR job, not the theme’s job. Good to learn how to do this by reading up on the topic on Google as well as the docs provided with the theme as a courtesy.

Try this:
1) make backup of your site files, as per usual good practices; use tools to export your database from WP panel. Backup images.

Clear cache.

2) make sure you’re running latest version of WordPress (4.1); v 3.9x has cross-site scripting vulnerability; v4.0 has bugs, fixed in 4.1.

3) switch to default theme (e.g., twenty-twelve); do this before disabling visual composer!!!!!

Clear cache again, as applicable.

4) disable ALL plugins

5) DELETE the original theme folder, delete the original plugins for theme (TD speed booster, TD social, Visual Composer)

Then follow my posts on best way to install theme:

================================================
Make sure you upload only the main theme files; don’t install the “all files” zip from ThemeForest… that has docs, psd files, plugins, etc.

You want to install the smaller of the two files on Themeforest, if you’re installing via theme panel with .zip.

BEST WAY TO INSTALL WP THEMES:
Ideal way is still to
1) unzip theme folder “Newsmag” on your HD
2) upload via FTP/SFTP to your /wp-content/themes/ folder
3) upload the plugins unzipped to /wp-content/plugins/
4) switch to default theme from your old theme [should already be done for migration]
5) turn off *all* running plugins [should already be done for migration]
6) clear your cache(s), turn off caching (!),
7) activate the Visual Composer plugin
8) activate the new Newsmag theme
9) launch the theme panel
10) reactivate only the plugins you 100% need to make sure they work (some plugins WILL NOT WORK properly with WP 4.01 until you update the plugins!).

Clear the cache in your WEB BROWSER FULLY and restart web browser; this clears any CSS/Java used by your previous theme admin, and theme, so that you see the new CSS/JS properly (seriously, this is cause for huge number of “my new theme doesn’t load right” or “admin panel doesn’t have any boxes!” errors).

If you’re running WordPress older than 4.0 be aware there is a very serious cross-site scripting vulnerability (e.g., WP 3.9.2). You should be running WP 4.0+ to use this theme properly.

This is standard practice for switching to a brand new theme and good habit to get into doing it this way to ensure you clear cobwebs on old, and cleanly move to new.

Hope that helps! 🙂

Chris

==========
ADVANCED USERS:
if you or somebody else optimized your site for better PageSpeed score and increase dbase efficiency, by editing the wop-config.php file to add absolute paths to the theme folder, you will need to remove that line prior to doing any theme switch. Some people forget this step and immediately get a server error trying to change themes in the WP admin panel. You should be making backups of your wp-config.php folder periodically anyway and never hurts to open it and view from time to time.

• This reply was modified 11 years by simchris.

You may want to read up on how to use WordPress from the WordPress Codex; you *can* simply rename the theme folder and CSS name for the theme; which is how it’s done for web development, such as for a client, or better security (we do that here, changing theme name to sitename). If you’re comfortable editing the functions.php file, then changing the theme name is done simply by editing the style.css file which is where WP picks up the theme “name.”

Note it won’t change the theme style classes so somebody can very easily “figure out” which theme you’re actually using, if not the version.

Are you removing all the versioning from your site using the commonly available code to put at bottom of functions.php? That is also recommended to hide versions of WP, and also visual composer (see my separate post on how to also hide that code).

TO THE POINT (sorry!):
You can remove that “theme credit” code from functions.php without anything breaking, but be aware it makes it harder if you ask for tech support in the future if the admin here can’t figure out which version of theme you’re using when looking at your page source to debug any of your possible problems with CSS, customizations or running plugins, etc. If you’re comfortable in remembering to always “state” which version you’re using (and keep track of that somewhere), when needing support, you should be fine. 🙂

We actually use mod_pagespeed which just removes *all* commenting for faster page loading, which is recommended if your hosting provider offers that.

You can also further optimize the install by placing the explicit paths to the new name theme folder in your functions.php folder once you’re “set in stone” (obviously if you switch to another theme from admin, it may break) and also the site name URL, but that’s a bit advanced. Research the WP Codex on how to do many things like this (some of that is in my long winded comments in the Newspaper forum under the “Pagespeed” sticky topic).

Hope that helped, versus annoyed 🙂

Note the “remove_action” section is always useful… note it refers to “visual composer” and “meta data” … this removes the comment printed in the rendered page where it shows “created with visual composer 4.3” or whatever. Annoying.

So, basically that code I posted has (3) sections
1) remove general versioning from normal version strings; might not work on all the tagdiv speedbooster enqued stuff
2) change default thumbnail compression level (default in WP is 90, which is for quality, not speed or best practices, which is the WP mindset — better vs fast …. where 70 would be better default, frankly). 50 works. I think we ended up with 60 on some sites for some odd reason (I think ’60’ worked better with mod_pagespeed on our server for WebP conversion or something). Anything is better than 90!
3) hide the visual composer comment string.

You can actually find all my various pagespeed rantings from the past year on the Newspaper forum in the pagespeed sticky post if you want the whole shebang of stuff I do. Luckily TagDiv put a bunch of that into the standard theme docs now, and they already knew most of that from optimizing the demo sites anyway.

If you want an extra little boost you can also locally host gravatars and also optimize your wp-config file; see the Newspaper forum sticky topic, and simply start at end and work backwards to see all my special tweeks, if curious. I think later in the hundreds of posts I would often “resummarize” things, as well as add tweaks for the gravatars, and such. No point in repeating all of that here again. 🙂

• This reply was modified 11 years by simchris.

That’s what I thought. I don’t think slider is able to do “double loading” — meaning it’s doing ajax or whatever to load each “slide” as an image, but cannot also do “media query check” as each slide loads, as that would mean reloading the slide every time to check for viewport. Horribly complicated and almost means having to do a viewport check, THEN load “desktop slider” vs “mobile slider” with two different setups; meaning loading both large and small images like is done with logo. Problem there, however, is what size would somebody load for mobile since the viewports vary, and traditionally loading larger image and “scaling” it was fine since you’d get benefit of more pixels for retina without having to actually load a denser image.

In our case to this issue, the solution was running mod_pagespeed on the server as this optimizes and caches the most common “rendered size” — so if 80% of your audience was coming in on iPhone, viewing in portrait, and the 1073 image was loading as 573, then mod_pagspeed would make an optimized 573 size image and cache it; which would speed things up AND help with the “resize image” technical “problem” with mobile.

I cannot stress any more highly the benefit of mod_pagespeed for this kind of issue; and the fact it can generate optimized images for Chrome and other WebP image capable platforms (WebP more efficient than jpg).

If you can use a web hosting company using mod_pagespeed you will be amazed. Of course some CDN providers are now offering this, too, if your hosting provider doesn’t yet do so.

Hi, Christopher. Images of slider are already optimized. Page Speed says the images are okay for desktop, but for mobile the still have to ve reoptimized or changed for a responsive size, I guess.

Not sure this is the answer, but check to see if the optimized sizes are actually being created; possibly add those sizes as the default sizes under WP > media settings so they are made in addition to the theme sizes. Problem with “mobile” images is they are responsive but no specific phone uses the same “sizes” for the viewport “width” so technically I suppose images will always end up being resized larger or smaller.

Google mod_pagespeed helps with this issue if your server/hosting company offers that.

But try the media sizes being served added to your media settings, regen thumbnails, then retry. Not sure that will solve it, but worth a try.

I admit I have not yet tested my install of Newsmag for page speed as still messing with the home page and logos today 🙂

You can avoid CSS import by not using a child theme.
You can remove query strings by using the functions I have previously recommended for adding to your functions.php file. You can also optimize your thumbnails by editing your functions.php file to set higher compression level for WP, and then run the “Regenerate Thumbnails” plugin.

Add these to bottom of your functions.php file, for one example:

function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

add_action('init', 'myoverride', 100);
function myoverride() {
remove_action('wp_head', array(visual_composer(), 'addMetaData'));
}


You can optimize your site following the documentation for this theme:
https://forum.tagdiv.com/page-speed-guide/

You can also use several plugins for WordPress that track down *which plugins* are using the most system resources. JetPack is a huge culprit, most often, which is why we don’t use it here.

There are several, but this might be worth using to evaluate, as starting point
(admin, you may want to add this or similar to support docs)
https://wordpress.org/plugins/p3-profiler/

Using WP-Optimize can also enhance dbase performance.

Well, if the “calls” to the italics and other weights are not found in the td_fonts.php, then they can’t magically be added any other way since any other method would simply add another call to Google fonts, when it should be part of the string from td_fonts.php; and the font calls are also optimized by the td-booster system, so best to keep it in one place.

I don’t see any way around NOT editing the td_fonts.php file, so far.

Also note the stuff on my functions.php file hacks – have nothing to do with the fonts. Was just sharing that while on topic of functions.php. Those edits are partially to improve google pagespeed insights.

But wait for Lucian or Marius. 🙂

Normally we convert ALL fonts to Open Sans (with Newspaper, anyway); so typically we would open the style.css, search/replace all fonts to what we want, then edit the functions.php … but now would edit the td_fonts.php to REMOVE all the google fonts not being used; this ensures they don’t “print” in the head/foot of the posts online.

I have not yet done this for the fonts.

For our sites we have to do the following each update
1) update the hook for the post views to “views” from existing field
2) edit the search file to remove breadcrumbs (I don’t need those on indexes for each story)
3) edit functions.php to put various elements for us at bottom, such as changing default compression for images/thumbs, adding note to poke hackers trying the lost password function, turn off XMLRPC elements in header, remove Yoast from menu bar in admin, hide header elements like versions, hide use of visual composer, etc. — many common “optimizations” for WordPress sites.
4) edit header to remove the section for video thumbnails and this stupid thing
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
5) optimize the fonts, by doing the aforementioned house cleaning on style css file, and removing the extra google font calls.

Your mileage may vary 🙂

• This reply was modified 11 years by simchris.
• This reply was modified 11 years by simchris.

Both themes load super fast with high Google PageSpeed Insights rating if your site and server are properly optimized, which I can confirm from using the Newspaper theme for one year now. BOTH themes great with both server side and plug-in based caching. W3 Total Cache is recommended cache.

See: https://forum.tagdiv.com/page-speed-guide/

Theme loads very fast if you optimize your web server and optimize WordPress, which has nothing to do with the theme. There are many tutorials online with info on how to optimize your site for WP faster loading.

Once your system is properly optimized for speed, you can also add extra features such as caching, and consider using the included WP Speed Booster (may conflict with some oddly coded plugins).

You may find the theme documentation very useful for speeding up the theme on your particular system here:
https://forum.tagdiv.com/page-speed-guide/

Scroll to BOTTOM of the above page for info on using W3 Total Cache with this theme, specifically 🙂

Hope that helps!

• This reply was modified 11 years by simchris.
• This reply was modified 11 years by simchris.

Bro, install autoptimize or speed booster pack. Thes plugins can unify, compress and send to footer selective js and css to eliminate blocking renders.