Home Forums Weaver Xtreme Theme Website speed, CSS stylesheet etc.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #70386
    travincult
    Participant

    I’m trying to optimize my page speed. When running a performance test (through GTmetrix and other similar tools) I get the following things as some of the top audits that impact my website performance:

    1. The CSS @import seems to be an issue. I would like to know what the difference is between saving my own CSS rules as Global CSS rules in Weaver Xtreme and as WP Global Additional CSS rules? Does it make a difference in terms of performance? Would a solution to eliminate the @import in the CSS stylesheet be to move all my own CSS rules directly into my child theme style.css file (and in this way avoid @import in a CSS stylesheet)?
    2. Based on my own testing it seems faster to load featured images than other images I ‘manually’ insert at the top of my posts. In many of my posts it is fine to use the featured image as the image above the fold – but in some cases I would like to display a larger image (beyond the post margin). Isn’t it possible to use ‘align full’ for a featured image to display it as wide as the original image in fact is (when it is wider than the post itself)? So far, I have only been able to insert a ‘wider’ image (using align full) if I add it ‘manually’ (‘add media’) on the page. Unfortunately, in this case it loads pretty slowly. The difference can be seen in these two posts (first one with a featured image above the fold and the second one with a manually added image): https://travelinculture.com/little-mermaid-statue-hans-christian-andersen-story/ and https://travelinculture.com/hans-christian-andersen-odense/

    How would I get the second one to load faster? (still with a larger image)  … CSS rules applied to the featured image, preloading or …?

    I have previously enlarged the featured image with a percentage – but this harms the quality of the image.

    1. It seems to be heavy to load all font families in the theme. Is there a way to load only Lato, Roboto and Open Sans – and ‘disable’ all the rest from loading? (I have noticed there is an option to disable Google font integration, but how does this work – how would I then load the ones I need?)
    2. Similarly, can I disable dashicons from loading?

    It would be awesome if you could help me with some of these issues!

    #70387
    scrambler
    Moderator

    @weaver will have to comment on most of these

    But regarding the featured image, I am not sure I follow

    In the example you gave, The featured Image is 739 x 554px, and the other image is 1280 x 719px, or 2.25 times bigger, so it is normal it would load slower.

    You can choose what size the featured image is using the posts specifics. Featured image option, as well as its position like “above title”

    The real test would be to use the exact same image at the same size in two different posts, once as a featured image , size full, above title, and one as a manually inserted image, and then compare load time

    #70388
    Weaver
    Keymaster

    The “optimizations” regarding loading CSS and fonts your mention are actually pretty insignificant these days. All together, that load would be likely is less than 100K or 200K – not much. Maybe a few years ago it mattered, but it shouldn’t now. Things like that that used to matter just don’t any more. I know it has been hard for me to change my thinking on that, given so many years of experience where it did matter, but internet bandwidth and server speed are just so much faster these days that it is just not really worth the effort for such tiny improvements.

    Perhaps if your hosting company is behind the times as far as server performance, or if your viewer base is mostly in parts of the world with limited internet access or largely rural with slower internet speeds, it could still matter.

    Serving images can be a different story – sort of. If you are serving the typical US or EU customer base, it is still shouldn’t make much difference.

    But how images are served these days is a bit beyond whatever theme you use, but instead relies on either how WP is configured, or what image helper plugins you use, or which global content caching service you used (e.g., Cloudflare) you use.

    Your time will be much better spent optimizing those latter things rather than trying to tweak a few CSS files or font files. That content is all together less than even a medium sized image.

    Additional note: some of the “optimization” tools that exist today may show what seem to be significcant performance issues, but do remember that most of those services may have a lower tier free service, but they really want to sell you their higher end services, or are now free because they really don’t serve as much of a useful service as they might have a few years back. They want you to believe you can improve things, but that is just not as true anymore.

    #70389
    travincult
    Participant

    Okay, I see what you mean concerning performance.

    Anyway, I would really like my featured images to be enlargened beyond the margin to the original size of the image. It is true that the featured image is right now 739 x 554px – but the original image I have uploaded is 1138px. If I in the post specifics specify: Align Featured Image – Single Page: ‘Align Wide’ and Page Featured Image Size – Single Page: ‘Full’ – it seems to be rendered even wider (1305px). How should I specify to keep the width 1138px?

    #70390
    scrambler
    Moderator

    Unfortunately the feature image alignwide and alignfull are applied on the image and not on the container, so they will force an upscale of the image.

    The only way to get an image that is wider than the container but limited to the image width, is either to do it manually as you seem to have done before,

    But you can ry the workaround below if you have the Plus plugin

    In Post Specifics > Post area > Post Are Add Class box, type alignwide or alignfull
    this will expand the Single post content to full width

    Then in the Theme global custom CSS rule box type the rule below to restrict only the post content part and not the header
    .single .entry-content, .single .entry-utility {max-width:800px;margin:0 auto;}

    Then set the Featured image to align:center and full size

     

     

     

     

    #70391
    scrambler
    Moderator

    @weaver, I noticed two issues.

    In the customizer, when viewing a single post page with featured image positioned above title, selecting alignwide for the featured image single page is not reflected in the customizer view (it is in the live site). alignfull does refresh properly in the customizer.

    In the Legacy admin > post specifics > featured image, the align options are missing the new alignwide and alignfull options.
    These are only available in the customizer.

    #70395
    travincult
    Participant

    I tried the .single .entry-content, .single .entry-utility {max-width:739px;margin:0 auto;} combined with alignwide. It now works for most content on the single post page – but not for the show post short codes used at the bottom (the images are changed here and look weird) – and not either on other general post pages showing a number of posts (including images) at the bottom.

    #70399
    travincult
    Participant

    I’ll just let you know that I found another solution. I will save the featured images with the appropriate width (and compressed), add them to WordPress,  load them full size, center aligned in the customizer (post specifics, FI, single page) and then enlarge them with a certain percentage  (on desktop only – using CSS rules) to achieve the desired width. That seems to work.

    #70401
    scrambler
    Moderator

    The benefit of doing it your way is that you can get a consistent width.

    If you end up needing my original suggestion on the shortcode and blog pages, let me know so I can check the CSS for that

    #70402
    travincult
    Participant

    Great – I’ll consider it – thanks a lot for you help both of you!

    #70403
    travincult
    Participant

    Just one more thing. Can you help me with a CSS rule to align the post title on single post pages wide with a max width of 960px (i.e. beyond the text margin of 739px)?

    #70404
    scrambler
    Moderator

    Can you give me a page so I can be sure to work on the proper one

    #70405
    scrambler
    Moderator

    If the Hans Christian Andersen is the sample page, adding the margin left and width to your existing rule should do it

    .single-post .page-title {
    font-family:lato;
    padding-top: 0.2cm;
    font-size:calc(1.4em + 0.7vw);
    padding-bottom:0.9em;
    text-align:center;
    line-height:1.3;
    color:#353535;
    margin-top:0.8em;
    margin-left: -96px;
    width: 930px;
    }

    The margin left should be half the difference between the normal width and the new one (930)

    #70406
    travincult
    Participant

    Yes, this solves it on desktop! – but unfortunately the mobile view doesn’t work now – it kind of draws the post title to the right out of the screen.

     

    #70407
    travincult
    Participant

    Adding @media (min-width:769px){…..} seems to do the trick!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.