Katsotaanpa vaihe vaiheelta prosessi sivuston suorituskyvyn ja nopeuden parantamiseksi. Alla on kuvakaappaus verkkosivustoni pisteist\u00e4 Google Page Insightissa.<\/p>\n
Huomasitko koskaan Render-viestin est\u00e4v\u00e4n JavaScriptin ja CSS: n sivun yl\u00e4osassa? Jos et ole sis\u00e4llytt\u00e4nyt CSS: \u00e4\u00e4 ja JS: \u00e4\u00e4 tavalliseen tapaan,<\/a> se voi hidastaa sivustoasi. Nyrkkis\u00e4\u00e4nt\u00f6n\u00e4 CSS: n tulisi olla otsikossa ja JS: n alatunnisteessa. Sinun tulisi huolehtia siit\u00e4, ett\u00e4 verkkosivustosi noudattaa t\u00e4t\u00e4 vakiok\u00e4yt\u00e4nt\u00f6\u00e4.<\/p>\n Kuvilla on t\u00e4rke\u00e4 rooli k\u00e4ytt\u00f6kokemuksen parantamisessa. Silmiinpist\u00e4v\u00e4t kuvat pit\u00e4v\u00e4t k\u00e4ytt\u00e4j\u00e4t sitoutuneina sis\u00e4lt\u00f6\u00f6n. Mutta raskaiden kuvien k\u00e4ytt\u00f6 melkein tappaa verkkosivustosi nopeuden. Olet esimerkiksi ladannut sivustoon kuvan, jonka koko on 2 Mt, ja sivua ladattaessa t\u00e4ll\u00e4 2 Mt: lla kuluu ylim\u00e4\u00e4r\u00e4inen aika kuvan lataamiseen, ennen kuin esit\u00e4t sivusi yleis\u00f6lle.<\/p>\n T\u00e4ss\u00e4 tulee kuvien optimoinnin<\/strong> k\u00e4site ennen k\u00e4ytt\u00f6\u00e4. Saatavilla on useita laajennuksia, jotka tekev\u00e4t t\u00e4m\u00e4n teht\u00e4v\u00e4n pakata kuvia mediakirjastostasi. Jotkut suositut laajennukset ovat<\/p>\n Kaikki n\u00e4m\u00e4 laajennukset toimivat hyvin. Suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n TinyPNG-laajennusta. K\u00e4yt\u00e4n t\u00e4t\u00e4 laajennusta verkkosivustollani ja olen melko tyytyv\u00e4inen siihen.<\/p>\n Joissakin tapauksissa meid\u00e4n on n\u00e4ytett\u00e4v\u00e4 kuvia mediakirjaston ulkopuolella. Luomme mukautetun hakemiston ja l\u00e4het\u00e4mme siihen kuvia, sitten k\u00e4yt\u00e4mme n\u00e4it\u00e4 kuvia verkkosivustolla. Olen kirjoittanut artikkeleita Image Optimize Image On Upload<\/a> ja TinyPNG Compress Images<\/a>. Katso n\u00e4m\u00e4 artikkelit, jos et k\u00e4yt\u00e4 mediakirjastoa kuviin.<\/p>\n Vinkki: Rajaa n\u00e4ytett\u00e4v\u00e4n koon kuvat. Oletetaan, ett\u00e4 sinulla on kontti, jonka koko on 300 * 250. Siin\u00e4 tapauksessa sinun tulee rajata kuva s\u00e4ili\u00f6n koon mukaan. \u00c4l\u00e4 k\u00e4yt\u00e4 suurempaa kuvaa pieness\u00e4 astiassa. T\u00e4m\u00e4 vaikuttaa my\u00f6s sivuston suorituskykyyn.<\/p>\n Lazy Load Images<\/strong> auttaa nopeuttamaan verkkosivustoasi. Laiskaa latauslaajennusta<\/a> k\u00e4ytt\u00e4m\u00e4ll\u00e4 kuvat eiv\u00e4t lataudu, ennen kuin k\u00e4ytt\u00e4j\u00e4 vieritt\u00e4\u00e4 niiden kohdalle. Se auttaa pienent\u00e4m\u00e4\u00e4n sivusi kokoa lataushetkell\u00e4.<\/p>\n Jos haluat toteuttaa laiskoja latauskuvia ilman laajennusta, lue artikkeli Paranna verkkosivuston suorituskyky\u00e4 laiskojen latauskuvien avulla<\/a>.<\/p>\n Sik\u00e4li kuin tietokannan koko on pieni, palvelimesi reagoi nopeasti verkkosivustolta tuleviin tietokantapyynt\u00f6ihin. Kun tietokanta alkaa kasvaa, palvelimellasi on enemm\u00e4n aikaa vastata.<\/p>\n WordPress-ohjelmassa aika kuluu useita tietokantaan tallennettuja orpoja tietoja. Esimerkiksi kun p\u00e4ivit\u00e4t postia tai sivua, WordPress tallentaa version aina tietokantaan. Haluaisin mieluummin s\u00e4ilytt\u00e4\u00e4 vain 3 viimeist\u00e4 versiota, jotka ovat t\u00e4ysin riitt\u00e4vi\u00e4. Jos haluat pit\u00e4\u00e4 versiot jopa 3 kertaa, sinun on lis\u00e4tt\u00e4v\u00e4 alla oleva koodi wp-config.php -tiedostoon.<\/p>\n Koodin yl\u00e4puolella rajoitetaan tarkistusten m\u00e4\u00e4r\u00e4\u00e4. On joitain muita taulukoita, jotka pit\u00e4isi my\u00f6s optimoida. Suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n WP-DBManager-<\/a> tai WP-Sweep-<\/a> laajennuksia tietokannan optimointiin.<\/p>\n Kiitos insin\u00f6\u00f6reille, jotka esittiv\u00e4t selaimen v\u00e4limuistin. Kun k\u00e4ytt\u00e4j\u00e4 vierailee verkkosivustollasi, k\u00e4ytt\u00e4j\u00e4n selain tallentaa sivusi selaimen v\u00e4liaikaiseen tallennustilaan. Kun k\u00e4ytt\u00e4j\u00e4 vierailee verkkosivustolla seuraavalla kerralla, selain n\u00e4ytt\u00e4\u00e4 sivun k\u00e4ytt\u00e4jille viimeksi tallennetusta v\u00e4limuistista sen sijaan, ett\u00e4 lataaisi koko sivun uudelleen. T\u00e4m\u00e4 v\u00e4hent\u00e4\u00e4 kaistanleveyden k\u00e4ytt\u00f6\u00e4 sek\u00e4 k\u00e4ytt\u00e4j\u00e4n ett\u00e4 palvelimen puolella. V\u00e4limuistin k\u00e4ytt\u00e4minen verkkosivustollasi nopeuttaa dramaattisesti WordPress-verkkosivustoa. Jotkut suosituista v\u00e4limuistilaajennuksista ovat seuraavat.<\/p>\n Kun hy\u00f6dynn\u00e4t selaimen v\u00e4limuistia, verkkosivusi tiedostot tallennetaan selaimen v\u00e4limuistiin. Sivusi latautuvat paljon nopeammin toistuville vierailijoille. Lis\u00e4\u00e4 seuraava koodi sivustosi htaccess-tiedostoon, jolloin selaimen v\u00e4limuisti voidaan tallentaa.<\/p>\n Huomautus: Jotkut laajennukset k\u00e4ytt\u00e4v\u00e4t WordPressiss\u00e4 ulkoisia resursseja. Emme voi asettaa vanhentuneita otsikoita n\u00e4ille ulkoisille resursseille. Yksi tapa on tallentaa n\u00e4m\u00e4 ulkoiset tiedostot palvelimellesi ja sis\u00e4llytt\u00e4\u00e4 ne sitten verkkosivustoosi.<\/p>\n Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka nopeuttaa WordPress-verkkosivustoa. Jos kaipasin jotain tai k\u00e4yt\u00e4t jotain muuta tekniikkaa, jaa alla olevissa kommenteissa.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\nVaihe 1 – Sis\u00e4llyt\u00e4 CSS ja JS tavalliseen tapaan<\/h3>\n
Vaihe 2 – Optimoi kuvat ennen k\u00e4ytt\u00f6\u00e4<\/h3>\n
\n
Vaihe 3- Laiska ladata kuvia<\/h3>\n
Vaihe 4 – Optimoi tietokanta<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\nVaihe 5 – V\u00e4limuistin k\u00e4ytt\u00f6<\/h3>\n
\n
Vaihe 6 – Hy\u00f6dynn\u00e4 selaimen v\u00e4limuistia<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n