I am working on a site that when going to the URL on desktop it seems like the content is loading first then the styles about a 1 second late that creates a kind of 'flashing' effect on each page,
The sections expand and then the background images are loaded next,
I am using the WPRocket plugin - does anybody know what the cause of this is likely to be?
I am not sure if I am allowed to include the domain,
Many thanks,
It is likely a case of Flash of unstyled content,
Wikipedia has a good breakdown.
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
community!
I have a small problem with the loading of my website done in Wordpress.
When I enter the site, all the elements are displayed in a disorderly way for about 3 or 4 seconds.
After that short time, all the elements are loaded and sorted correctly.
I have tried to use plugins to optimize the load, clear cache and minimize css and javascript. However, the problem continues.
What action can I take on the site to fix this faulty and slow load? Thank you very much.
This is my site: https://www.tecnobreak.com/
Various plugins such as WP-Rocket and WP-Optimize.
I would suggest adding a loading screen. This will be the easiest route.
Alternatively you will need to priorities what needs to be loaded first on page load.
I assume you have optimized your images and made sure everything is up to date.
my site seems to be downloading very slowly. I recently changed the CSS and HTML to improve the layout, but I think I might have messed it up somehow.
Can anyone give me feedback on things I could do to speed it up?
Thanks.
www.aerlawgroup.com
There are many online Web Optimization sites that you can use.
I've attached some optimized results for your page.
From http://www.webpagetest.org/
See The Result
and you can use Google Page Speed Link
Simply, I would suggest one thing based on your page design and the code is..., use CSS Simplify Tool and the HTML Symplify Tool. It reduces the Page Loading time dramatically. and as well as some Image Compression Tool too.
One thing that really reduces the page speed is Flash contents or Images. so be focus on that primarily
http://csslint.net/ for linting
http://csscomb.com/ for ordering attributes
http://prefixr.com/ for adding browser prefixes
There are many many factors that come in play with a slow page besides CSS/HTML. The size of the images, whether they are optimized, how fast the server delivers, caching, etc...
I would recommend using Google PageSpeed Insights or similar service - they show you a lot of info.
Go to https://developers.google.com/speed/pagespeed/insights/
Edit: Your URL loads this JS file which has an anonymous function that runs again and again:
http://s3.amazonaws.com/scripts.hellobar.com/bfa7653204b92054d559e0d8dd1ba2dd6fbdc183.js
You can view for yourself by using a web inspector - I am in Safari 7 and under Timelines on the Inspector panel - select "Layout & Rendering" from leftside menu and reload page. You can see that the HelloBar is doing some kind of adjusting over and over.
Please see this link. Notice that the search bar first renders near the top of screen. Then aligns itself to be opposite to the logo. I think some css rules are causing this but I am unable to figure out. Can you please help me in pinpointing the reason. What one should avoid in the code to avoid/minimize this behaviour.
This almost aways happens when you have a css rule for blocking that is overwriting the previous. The best thing to do is to have the first thing in the css file to be blocking and normalizing. Every time you need something to be in a place or have a specific size, you should go to the blocking section of your code.
But the most preocupying part of the site you shown is the time it takes to load a fancybox css file.
This issue could just be how each browser loads and renders the content, and also on how fast your network can download content. Since there is many multiple Javascript and CSS files it can just be parsing them slowly and configuring the site as it goes while your network and browser is still downloading and loading everything.
I viewed it in Chrome and Firefox and it seemed to load fine for me.
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.