-
Posts
-
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;
}
}
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
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).
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
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?
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.
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
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.
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
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
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!
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
- The topic ‘Optimize Enfold Responsive Theme (Speed)’ is closed to new replies.