Page Speed

  • CSM Security Locksmiths

    (@csm-security-locksmiths)


    6 years, 7 months ago

    Hi,

    I was wondering how I can eliminate render-blocking JavaScript and CSS in above-the-fold content, prioritize visible content.

    Above is what it shows for page speed on Google Webmaster Tools. My homepage speed is fine, but individual pages are really slow. Please can you help me to resolve this issue.

    Thanks,
    Chris

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Subrata Sarkar

    (@subrataemfluence)

    6 years, 7 months ago

    In order to achieve this you need to add defer attribute your script and CSS reference. Above-the-fold-content issue actually makes your actual page content to wait for loading until scripts and style sheets referenced inside <head> are loaded.

    For example if you have a script referenced like
    <script type="text/javascript" src="/scripts/customscript.js"></script>,
    you should rather write it
    <script defer="defer" type="text/javascript" src="/scripts/customscript.js"></script>

    You can use the same approach for your CSS files as well, but it is not recommended to use it to your main stylesheet. If you have some CSS files which does not require to be loaded when your page gets rendered, you are OK to use it, like
    <link rel="stylesheet" type="text/css" href="/css/notonpageload.css" defer="defer" />

    Besides this, you can improve your page speed by taking a few more steps. for example:

    1. Adding a version to your static contents
    <link rel=”stylesheet” type=”text/css” href=”/css/notonpageload.css?v=0.0.2″ defer=”defer” />
    <script defer=”defer” type=”text/javascript” src=”/scripts/customscript.js?v=0.1.0″></script>

    2. Moving script files which are not required to be loaded when your page is loading to bottom of the page before end of <body> tag. For example a script file which is called when user clicks a button on your page.

    And finally, the most important thing…
    WordPress is designed for optimized performance. If your site is “really slow”, I would recommend you to check the following areas:

    1. Is your WordPress version up-to-date?
    2. Are all your plugins up-to-date?
    3. Are you using a lot of plugins? More plugins you have, slower the site goes
    4. If you plugins you are not using, remove them completely.
    5. Keep your database clean. If possible remove posts which are in trash and you don’t need them. Heavier the database, slower is your site performance.

    Hope above suggestions will help you improve the performance of your site. Let me know if you further assistance.

    Thank you!

    Thread Starter CSM Security Locksmiths

    (@csm-security-locksmiths)

    6 years, 7 months ago

    Thank you Subrata for such a quick response. Can I edit the html & CSS just within the one specific page by going on the page and accessing the code for that page? Or does it need to be within the actual CSS style sheet?

    This is the page I would like to edit http://www.csmsecuritylocksmiths.uk/milton-keynes-locksmiths/ can I just change html and CSS within this page?

    Sorry for all the questions! I’m really grateful for your help.

    Subrata Sarkar

    (@subrataemfluence)

    6 years, 7 months ago

    Hi,
    Glad that my suggestions could put some lights!. Now regarding your recent concerns here is what I would suggest:

    1. WordPress maintains and uses a nicely built Template Hierarchy which works behind the scene for all your pages and contents of your site. The URL you shared is not a separate “page”. Usually the default template for detail pages we use a template file called single.php inside our theme folder and design its layout according to our need. Now all posts in your site when viewed in detail mode, will use this template / file to render data. So if you want to modify some HTML or add some inline CSS for a “page” like you mentioned above, you will do it in sinlge.php file. And because of these modifications, all contents using single.php as their template, will get affected.

    2. If you have a custom post type say movie and you want movie detail pages to look different from your default “posts” (which are using single.php), then you need to create a separate template file called single-movie.php (single-{post_type_name}.php). Whatever you have in this template is applicable only for detail pages of movie post type. Any other template like single.php will not have any effect of this and vice versa.

    2. It is not ideal or recommended to use inline CSS inside a template unless it is super necessary. You should always try to stylize your HTML elements inside your style.css (or whatever you have) file.

    On this note, You can also use multiple CSS files and reference them. But remember, this will increase latency. So if you have to use multiple CSS files to keep things clean and separate this is a good place to start for getting idea about how compile multiple SCSS files into a single CSS file to minimize CSS load time.

    3. WordPress has a very easy to understand and clearly written document on Template Hierarchy, which I would recommend you to read first. This will give you a good idea of what you should do and what you should not when it comes to handling templates.

    Please let me know whether it was helpful!

    Thank you.

    Thread Starter CSM Security Locksmiths

    (@csm-security-locksmiths)

    6 years, 7 months ago

    Thank you so much for your detailed response. I will give this try and thanks again.
    Have a great weekend Subrata.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Page Speed’ is closed to new replies.