Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #24330

    Hi,

    For mobile deviced the Enfold theme is Beautiful however it takes a long time to load.

    Someone pointed out that it might be my advanced layer that is causing this.

    If i add the below CSS the advanced layer will not be displayes, however I wonder if this will

    result in that content will be excluded from being loaded and resuult in faster loading time or not?

    /* All Mobile Sizes (devices and browser) */

    @media only screen and (max-width: 767px) {

    .avia-layerslider {

    display: none !important;

    }

    }

    #123155

    I did run a check using some tool and the loading time was 9.x seconds with or without the css code above.

    - So how can we for mobile devicer optimize and speed up performance?

    For instance, on computers the image might be full page hence big in size. On mobiledevices the same image don´t need to be bigger then iPad or similare devices screen.

    Try for yourself: http://www.SuicideRescue.se okey using my wifi but not using 3G or similar

    Please advice

    #123156

    1. Minify the scripts and css, concatenate them, maybe minify also the html output.

    2. Try to use a CDN.

    3. This is maybe some overhead, but embedding images straight into the css decreases loadtime.

    4. It seems your server supports with mod_headers – have a look if mod_expires is also activated. Add the corresponding directive into your .htaccess (content types like jpg,png,pdf and so on). This speeds up alot!

    I did this with Enfold (didn’t have any major probs) and it was a boost about 60% (~92% gtmetrix.com, Grade B YSlow).

    #123157

    Hi Suicide Rescue,

    display: none only removes content from the view of the user and causes the computer to ignore it but doesn’t actually prevent it from loading. So if the layerslider is slowing down the page load (which it is) you will get the biggest performance boost from shrinking those big background images.

    Try a tool like: http://www.smushit.com/ysmush.it/

    Regards,

    Devin

    #123158

    Thanks for your advicesFormateins and Devin.

    I did try Smush.it on this image: http://suiciderescue.se/wordpress/wp-content/uploads/2013/04/SuicideRescue.bg-1700.png

    over 1 MB in size but Smush.it did not find any saving of your image.

    If i shall shrink images in size, what is recommended max widht on images used by enfold so that it looks good if full widht?

    And For Enfold, It is not possible to remove something from code so that mobile version will be smaller?

    #123159

    There aren’t any function available to do a “if screen size X, do Y” so no that isn’t an option right now.

    The file size is the key, so using any tool to shrink the file size for web is really the best thing you can do to get better load times. Try and keep your images around 150kb in size at a maximum.

    #123160

    One could do that with media queries?

    #123161

    Hi,

    MikehJPP: I don’t think it is possible via Media Queries. Media Queries can make it smaller on mobile view but the same images will be use thus the same file size. You really need to compress or shrink the images manually.

    Regards,

    Ismael

    #123162

    Hi, I was just looking into Cloudflare a few hours ago. Would you recommend using Cloudflare to speed up site loadtimes? I’ve read horror stories about it to on how it works with wordpress but I just want to make sure this is not an avenue I should look for Enfold.

    Thank you for your time and patience.

    #123163

    Hi,

    Cloudfare is one of the many content delivery network or content distribution network around, or so they say but users observe otherwise. “Visitors will go to CloudFlare servers for the pages of your site rather than hitting your server. It acts like a proxy server for regular HTML pages”. Honestly, I haven’t tried any of them so I can’t give you an expert advice about it. According to the reviews it doesn’t do much on speeding up your site and it has some issues with adsense. Let me tag the rest of the support team to give us more info about this topic.

    Regards,

    Ismael

    #123164

    Hi,

    Smush.it is a lossy optimizer; it doesn’t do lossless optimizations.

    You are not using correct optimizers if you can’t shrink a 1070k sized png image ( http://suiciderescue.se/wordpress/wp-content/uploads/2013/04/SuicideRescue.bg-1700.png ). First, an image of that type should be in jpg format since it already has a blurry background and besides its not digital art but a photo.

    I optimized this one to 76k and still 1700px as a jpg http://i.imgur.com/CYnc40T.jpg

    I optimized this one to 388k at 1700px as a png http://i.imgur.com/6zl6CUz.png

    For the png I used ( http://tinypng.org/ ) and for the jpg i first converted it to a jpg with Photoshop and then used ( http://www.jpeg-optimizer.com with 61 optimization and no crop )

    ===

    If you are serious about your image optimization you need the heavy duty plugin like http://wordpress.org/plugins/ewww-image-optimizer/

    ===

    I would recommend for you to host on nginx instead of Apache server. I would recommend that you use opcode cache (php accelerator) like APC.On Apache you can ask host to use mod_pagespeed https://developers.google.com/speed/pagespeed/mod . The pagespeed mod is now available in more than one hosting company and that thing if correctly setup will optimize everything. Otherwise look into w3tc + apc + cdn to offload static images/css/js + cloudflare (pay version) +varnish.

    Thanks,

    Nick

    #123165

    I’d be curious what those “automatic” shrinking programs do, that photoshop could not.

    Also, about media queries to replace photos, indeed I believe that would not resolve the “size” issue (even make it worse), but if LAYOUT is a concern it could resolve changing the picture for different media sizes….

    Thanks!

    #123166

    Hi,

    Photoshop doesn’t have lossless compression.

    If the image is referenced in the css and not hard coded in the html, sure you can use media queries to change the image size. I think that’s overdoing it and if that’s something a business shouldn’t be spending time on since i am sure there are better ways to use resources than achiving a questionable saving of .0x% for a y% of visitors.

    Thanks,

    Nick

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Optimize Enfold Responsive Theme (Speed)’ is closed to new replies.