What makes css slow

This makes third-party caching plugins unnecessary. This can help prevent some caching issues that may result in slower site speeds.

Media files, such as images and videos, tend to be quite large. Optimizing them through compression can help to decrease their size and, therefore, improve your loading times. TinyJPG is a free online tool that compresses images.

There are also several plugins you can use to compress media files within WordPress, including Smush Image Compression and Optimization. You can then easily embed your videos on pages or posts. Poorly-written JavaScript can sometimes cause compatibility issues with other parts of your website, resulting in longer loading times. Running a speed test using tools such as Pingdom , Web Page Test , and GTmetrix can often point out scripts that are taking a long time to load.

You can then investigate these files more closely to determine how you can improve them. It may also be useful to turn potentially problematic scripts off temporarily, to see how your performance scores change without them enabled.

There are two popular plugins for carrying out this task. It also integrates well with WP Super Cache. It also minifies your code. Both plugins are solid choices. You might consider trying out each one and seeing which increases your performance test scores more. In some instances, your WordPress installation may be missing files.

If this happens, users will experience longer loading times as additional requests are made in an attempt to find the files. The causes behind this issue are numerous and varied. Instead of trying to track down the source of the problem, the fastest solution is to restore your site from your most recent backup. This should replace the missing files with the versions saved in your backup. There's another good reason to use this technique - it may be manual, but the code is still readable.

Minified code can be tough to read. Andriy Budzinskyy Andriy Budzinskyy 1, 21 21 silver badges 28 28 bronze badges. Stanley Stanley 3, 2 2 gold badges 16 16 silver badges 21 21 bronze badges. Patrick Patrick 6, 7 7 gold badges 37 37 silver badges 49 49 bronze badges.

This sounds like an anti-pattern Downloading all the small CSS files will take much longer than just using a combined one, even if some of the styles will not be used.

This is the right direction. But doing this heavily can result in overly complex class application in the markup if you take it too far an element with a dozen rules. You could always try minifying your css using something like the link below: Online YUI Compressor I would also suggest using Firebug to see what is taking you so long. Community Bot 1 1 1 silver badge. Icarus Icarus 61k 14 14 gold badges 93 93 silver badges bronze badges.

If your compressed and optimised file is still too slow, this might do the trick. Hope this helps! Robert Robert 7 7 silver badges 20 20 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook.

Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Does ES6 make JavaScript frameworks obsolete?

Podcast Do polyglots have an edge when it comes to mastering programming Featured on Meta. Now live: A fully responsive profile. Visit chat. Linked Related Hot Network Questions. Question feed. I would suggest checking the result code for unnecessary bloat. Especially if you are using PostCSS with multiple plugins. That may seem like a trivial issue with very little effect, but resulting savings were around 3 kB for small stylesheet like mine. I think that is a great improvement for very little work.

And for large CSS it has the potential to have an even bigger impact. All I had to do was to update a browserslist config which is used by Autoprefixer and other similar tools to target generated code for specific browser versions.

I have updated my PostCSS config a bit as well. I also added the plugin to concatenate media queries together to save some extra space. See the PostCSS config in the source code and my browserslist definition if you want to see my exact setup. So we shrank our CSS file, but we still need to download it. We can speed up the webpage load time by reducing network requests.

And best network requests are no requests at all. We can inline our styles directly into the HTML to avoid the need for downloading any external stylesheets and thus saving some time. Of course, including an entire 9kb stylesheet or large for bigger projects on every page is not very effective. So we will include only the styles necessary to render the part of the page above the fold and lazy-load the rest of the styles.

That way we can still leverage browser caching for other pages and make our webpage load faster. Since we include styles that are critical for page rendering this technique is called Critical CSS. Some tools will do it for you, like Critical from Addy Osmani. Please keep in mind this technique is about compromises.

You need to find the right balance between what to include and the size of the CSS since this technique will save you one request when loading page but it also makes each page bigger and thus makes it longer to download.

So you want to experiment with this and measure the results to find the best setup for your site. Since we use Critical CSS we want to lazy-load our stylesheets to avoid blocking the render of the page. Unless you need to support some old browsers, modern solution these days is using normal link tag you use for stylesheets but with different media type and a little bit of JS.

This clever little trick is fully described in the Filament Group blog post. Below you can see the snippet for lazy-loading CSS from the post, but I suggest reading the entire thing. You may want to include fallback when JS is disabled. That way your styles will load normally and you will avoid unstyled content which would badly affect user experience.

In the waterfall diagrams below you can see that page with critical CSS starts rendering right away violet portion of the graph in Browser main thread row and is interactive much sooner compared to the old version where CSS file has to be downloaded first. But we can probably decrease our file size a bit more.