I have been working on raising the Google PageSpeed Insight score for the website of the company I work at. I have raised the speed of the home page from 37/100 to 87/100. This is good enough for me at the moment. But other pages are still at 73/100 because there is render-blocking CSS.
Now here is the weird part. I used Google's own suggestion of lazy-loading the CSS (here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery), and this works for a few pages. The problem is that it doesn't work on all pages. PageSpeed Insights still says that some of my pages have render-blocking CSS files (the same files that work on the home page). I am working in Rails and all of the pages use a shared layout. The CSS files are loaded exactly the same on all pages. Also, I can clearly see the flash of unstyled content when I am testing it. The CSS is definitely being loaded after the above-the-fold content.
PageSpeed's inconsistency is making it impossible to decide what my next move should be.
Has anyone encountered this before? What are the approaches you took to solving this? Is it possible Google's PageSpeed Insights tool is buggy?
I have been working on the same issues for some time and doing implementation in Drupal 7. My solution ended being splitting the css into 3 parts:
inline.css
is embedded directly into the HTML in a style-tag. This is the code that is needed for building everything above-the-fold for both the mobile and desktop.
main.css (or style.css)
This is what is needed for building the mobile version of the site and most of the desktop site.
desktop.css
This is the extras that is only needed for belove-the-fold and for bigger screens.
This approach do take some more time to build and develop but it makes the site get faster into the users browser - and as a extra added feature get a better Page Speed score.
Some code to start with
I have forked mattbanks/Drupal-7-Starter-Theme here https://github.com/jonasdk/Drupal-7-Starter-Theme this could show you a way to start.
If you are not building Drupal sites then you will look into following files.
scss/
for seeing how the css is split into different files for each function.
templates/system/html.tpl.php
Where I embed the inline.css and loads the desktop.css when needed.
Related
I'm a front end engineer working in e-commerce and marketing, and one of my routine tasks is finding out why client's websites are so slow. Most of them are on different CMS, most Wordpress, and a constant problem I come across is page builders ship with a ton of code that slightly bog the site down. These fall under 'render-blocking resources', see the below
screenshot of the issue.
This file is entirely minified and the website isn't even large (It's still in staging, in fact.) Is it possible to get an outstanding Lighthouse score when your site is build on a CMS and uses a small number of plugins/apps (in the case of Shopify?) The majority of the clients whose sites I gauge are on a CMS and get a bad score because of how much data that browsers have to request when loading 200,000 apps and plugins. I'm exaggerating of course, but even when a client has a small site, but was built with a page builder and has a few popular plugins like Gravity Forms, their sites still suffer a little.
In theory, yes, you can have a page builder that doesn't impact the score, in practice, all of the page builders that I have personally worked with are bad for Lighthouse/PSI scores.
The main reason is that pagespeed hasn't been a conscious priority untill google started encouraging more awareness of a site's percieved performance. So the teams that built pagebuilders didn't take that into account, and it's probably not an easy task to change their codebase so that page builders are more performant.
There would be a few rules for page builders to follow to be performant.
No redundant asset code, I noticed a few page builders that load all
the code they might need for any section that a user might add, even
if the section is not being used.All the asset code being loaded should only be loaded if they are needed.
Properly sized images. I noticed Shogun page builder for shopify to
be really bad at this, as the images are automatically oversized.
Automatically lazyload images. I noticed pagefly has lazyloading, but
it has to be enabled individually for each template.
No elements created with javascript. To reduce CLS and improve LCP,
HTML elements should not be created entirely using javascript.
If page builders followed the above rules, and you replaced the original css and js of the page, since they would be redundant, you could have a page builder that resulted in very performant pages.
I haven't found a page builder that met these standards though, maybe as page speed becomes more important, more teams will be more consicous of performance in their page builders.
I have speedup my desktop to 82/100, but mobile speed is still 60/100. Can anybody recommend me some tips about improving the mobile speed to 80/100.
Here is link the my current Google PageSpeed Insights:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.lutonairporttaxis.co.uk%2F&tab=mobile
There are a number of things that you could do to improve the score of your application. As PageSpeed Insights suggests, you could turn on your compression. This is an easy win and will make a difference to your files sizes over the wire.
In terms of the render-blocking CSS, why don't you try and automate the process. There is a great plugin called Grunt-Critical that will automatically extract and inline your Critical CSS for you. For more information, I recommend reading this article about Critical CSS.
My environment is Visual Studio 2010 with Resharper 6.0. I have a large website with many CSS files with many styles.
I would like to tidy these up as a lot of them are no longer used, I noticed that Resharper allows you to track usages but obviously this can miss out CSS class specifications in code-behind etc.
My only solution is to do a Find In Files in VS but obviously when you have a large amount of styles this proves too slow and cumbersome.
Has anyone had a similar predicament?
EDIT: It's worth mentioning that the site is a CMS comprising around 10,000 pages, so anything that requires browsing pages might also be a bit tricky.
There is a firefox extension called dust me selector that does this. You enable it and then navigate to each page. It keeps track of all used css. You spit out a new css file with all the tracked css styles.
The Web Essentials Visual Studio Extension has a BrowserLink feature which comes with a way to track unused css in your site while you browse around the site.
A way to do that is running your site in a headless browser like PhantomJS and inspecting the styles applied in order to remove the ones not being used.
Fortunately, there is a nice tool built on node called uncss doing exactly this:
https://github.com/giakki/uncss
I found it here:
http://addyosmani.com/blog/removing-unused-css/
About browsing all those pages, well, I dunno, if you can generate all the possible URL's then you can automate the process.
Give it a try and let me know if it helps.
I have a Wordpress website located here: http://www.rightfittech.com/mydermakare/.
I'm trying to figure out why the page loads slow - I'm almost sure it has to do with Flash and size of images, plus rotating banner. I don't know how to edit or fix the problem though. So the question is: What is causing my website to load slow, and what EXACT steps can I take to fix the problem.
I've already tried adjusting some of the browser ActiveX filters and other temp fixes, but that is not the proper solution. If this is a flash or image loading issue, can you tell me the EXACT step in how to edit these issues?
Any help would be appreciated.
Thanks, Rob
Something that could actually be causing you plenty of issues is that fact that you are embedding 2 different versions of jQuery
1.6.1 in jQuery.js
1.4.2 in, funnily enough, jquery-1.2.6.min.js
Other than that, the Website is loading absolutely fine for me here in the UK, including the massive Flash film.
I've had a quick inspection with Google Chrome Developer Tools (check the Network tab) and there doesn't seem to be any major offenders.
Which is a great tool for checking speed issues with individual resources.
Yahoo's YSlow is pretty neat as well, especially when integrated as an extra tab within Firebug for Firefox.
I've been using Google PageSpeed to improve my site's performance. One of its recommendations is eliminating unused CSS in my app. Although a lot of the CSS is unused for a given page, it is used elsehwere in the app.
What's the right approach here? I'm considering creating a base CSS file for common CSS and then separate files for each individual page. Luckily there aren't that many pages. Is this overkill? And is there a better approach?
This is a Rails app, and I'm using asset_packager to minify my CSS and Javascript
Thanks!
Moe
It won't speed up your application because you will be adding new http requests, while if you pack all CSS into one file, that file will stay in the cache and you won't have to have an http-request for it for subsequent pages.
Google PageSpeed simply mean that you shouldn't provide styles you don't use anywhere in your application or only in pages that a user can't visit, for example the admin area.
As people in here mentioned, definitely not. You will just add new http requests. You should really keep in mind that pagespeed will probably always show that you have unused css on a given page, but that's not really a big issue.
Take a look at the other recommandations page speed is showing like enabling compression, optimizing the images (consider using css sprites if you aren't already) and more.
See also yahoo best practices to speed up your site.
That'll depend on the size of the file(s) and the way people use your site. If the file isn't huge to begin with and people will often go to many different pages, having page-specific css files will forfeit the benefit of caching, which is generally going to garner more benefit.
The overhead of an extra HTTP request to download yet another CSS file greatly outweighs the overhead of an extra few KB in the master CSS file.
I think it is best to componentise your stylesheets. For example, you might have a base css that provides the layout for your pages. Then you might have a theme css that provides colours, images, borders - visual elements. Then you might have separate css files for individual UI components, e.g. popup.css, calendar.css etc.
base.css
theme-blue.css
theme-blue-popup.css
theme-blue-calendar.css
This approach makes it easier to manage your styles (and switch them if you need to). More relevant to your question however, is that you now have the ability to specify what stylesheets are needed for each page on your site. Now if the user visits the homepage of your site only, and the homepage has no popups or calendars, then they haven't downloaded the styles for the components they aren't using. As they proceed further into the site, they will get the required stylesheets as and when they need them.